/* ═══════════════ DESIGN SYSTEM ═══════════════ */
:root{
  /* dark */
  --bg:#060714;--card-d:#0D0E1C;--card-d2:#111226;
  --bd:rgba(108,226,244,.10);--bdm:rgba(108,226,244,.22);
  --td:#EEF0F8;--td2:#A8B2D0;--td3:#8892B8;
  /* light */
  --lbg:#F2F3F7;--lband:#E8E9F0;--lcard:#FFFFFF;
  --lb:rgba(26,27,46,.10);--lbm:rgba(26,27,46,.22);
  --lt:#1A1B2E;--lt2:#4A4E6E;--lt3:#5C6178;
  /* brand */
  --cy:#6CE2F4;--pu:#A88FEA;--pi:#E080CC;
  --blue:#0B62A0;--violet:#5B4FBB;--magenta:#B43CA0;
  --gr:linear-gradient(90deg,#6CE2F4 0%,#A88FEA 50%,#E080CC 100%);
  --r:12px;--rp:100px;
  /* Térköz-skála (Design-audit B csomag) — 4-alapú, dokumentált lépések.
     A meglévő, szervesen nőtt (3-56px közötti) ad-hoc értékeket NEM
     cseréltük le mindenhol egyszerre (túl nagy, kockázatos kör lenne),
     de minden ÚJ/módosított szekció-térköz ezekre a lépésekre hivatkozzon. */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-14:56px;--sp-20:80px;
  /* Mozgás-vokabulárium (2026-08, mozgás-terv kör) — erős, egyedi
     easing-görbék a böngésző gyenge alapértelmezettjei helyett. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--td);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
/* Design-audit B csomag — CSAK a főoldalon (body.home-page): a törzsszöveg
   sorköze 1.65, valamivel nyitottabb, mint a többi oldal 1.6-ja. */
body.home-page{line-height:1.65}
.g{background:var(--gr);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

/* ═══════════════ NAV ═══════════════ */
nav{position:sticky;top:0;z-index:200;background:rgba(6,7,20,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd)}
.nav-i{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:64px;padding:0 5%}
.logo{flex-shrink:0;margin-right:28px}
.logo-n{display:block;font-size:13px;font-weight:700;letter-spacing:-.3px}
.logo-s{display:block;font-size:12px;color:var(--td3);letter-spacing:.5px;text-transform:uppercase;margin-top:1px}
.nav-menu{display:flex;gap:2px;flex:1;align-items:center}
.nav-item{position:relative}
.nav-btn{display:flex;align-items:center;gap:5px;color:var(--td2);font-size:13px;padding:6px 12px;border-radius:8px;background:none;border:none;cursor:pointer;transition:all .15s;white-space:nowrap;height:40px}
.nav-btn:hover,.nav-btn.open{color:var(--td);background:rgba(255,255,255,.07)}
.nav-btn svg{width:12px;height:12px;transition:transform .2s;opacity:.5}
.nav-btn.open svg{transform:rotate(180deg)}
.nav-plain{color:var(--td2);font-size:13px;padding:6px 12px;border-radius:8px;transition:all .15s;white-space:nowrap;display:flex;align-items:center;height:40px}
.nav-plain:hover{color:var(--td);background:rgba(255,255,255,.07)}
.drop{position:absolute;top:calc(100% + 8px);left:0;background:#0e0f1e;border:1px solid var(--bd);border-radius:14px;padding:8px;min-width:240px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .18s;z-index:300;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.drop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.di{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .15s}
.di:hover{background:var(--card-d2)}
.di-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.06)}
.di-ico svg{width:17px;height:17px}
.di-lbl{font-size:13px;font-weight:600;color:var(--td);line-height:1.3}
.di-sub{font-size:12px;color:var(--td3);margin-top:1px}
.drop-div{height:1px;background:var(--bd);margin:5px 4px}
.nav-right{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:14px}
.nav-login{color:var(--td2);font-size:13px;font-weight:500;white-space:nowrap;transition:color .15s}
.nav-login:hover{color:var(--td)}
.nav-reg{background:var(--gr);color:#060714;font-weight:600;font-size:13px;padding:8px 20px;border-radius:var(--rp);white-space:nowrap;transition:opacity .15s,transform 150ms var(--ease-out)}
/* Design-audit B csomag — CSAK a főoldalon: a fejléc-gomb ne versenyezzen
   a hero elsődleges (gradiens) CTA-jával, ezért itt körvonalas — a többi
   oldal nav-ja (pageTemplate.js nav()) VÁLTOZATLAN, marad gradiens. */
.nav-reg-secondary{background:transparent;border:1.5px solid var(--bdm);color:var(--td)}
.nav-reg-secondary:hover{border-color:var(--bd);opacity:1;background:rgba(255,255,255,.04)}
.nav-reg:hover{opacity:.85}
.burger{display:none;background:none;border:none;color:var(--td2);font-size:22px;cursor:pointer;margin-left:auto}
.mob{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--bg);z-index:199;padding:1.5rem 5%;flex-direction:column;overflow-y:auto}
.mob.open{display:flex}
.mob a{color:var(--td);font-size:16px;padding:13px 0;border-bottom:1px solid var(--bd)}
@media(max-width:760px){.nav-menu,.nav-right{display:none}.burger{display:block}}

/* Általános kereső a navban — a Hírek és a Belépés között (korábban a
   homepage-en, önálló "search-band"-ként élt egy nem kötött funkciójú
   sávban; most globálisan minden oldalon elérhető). */
.nav-search{position:relative;margin:0 6px}
.nav-search-btn{background:none;border:none;color:var(--td2);cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;transition:all .15s}
.nav-search-btn:hover{color:var(--td);background:rgba(255,255,255,.07)}
.nav-search-box{position:absolute;top:calc(100% + 8px);right:0;display:flex;gap:6px;background:#0e0f1e;border:1px solid var(--bd);border-radius:12px;padding:8px;min-width:280px;box-shadow:0 24px 64px rgba(0,0,0,.6);z-index:300;
  opacity:0;pointer-events:none;transform-origin:top right;transform:scale(.96);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);
}
.nav-search-box.show{opacity:1;pointer-events:auto;transform:scale(1)}
@media (prefers-reduced-motion: reduce){.nav-search-box{transition-duration:80ms;transform:none}.nav-search-box.show{transform:none}}
.nav-search-box input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--bdm);border-radius:8px;color:var(--td);font-size:13px;padding:8px 10px;outline:none}
.nav-search-box input::placeholder{color:var(--td3)}
.nav-search-box button{background:var(--gr);color:#060714;font-weight:600;font-size:12px;border:none;border-radius:8px;padding:0 12px;cursor:pointer;white-space:nowrap}
@media(max-width:760px){.nav-search{display:none}}
.mob-search{display:flex;gap:6px;padding:13px 0;border-bottom:1px solid var(--bd)}
.mob-search input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--bdm);border-radius:8px;color:var(--td);font-size:14px;padding:9px 10px;outline:none}
.mob-search button{background:none;border:none;color:var(--td);font-size:16px;cursor:pointer;padding:0 6px}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,7,20,0) 0%,rgba(6,7,20,0) 55%,rgba(6,7,20,.9) 92%,#060714 100%);z-index:1;pointer-events:none}
.hero-grid{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:56px 5% 48px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;padding:40px 5% 32px;gap:32px}}
.hero-tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bdm);border-radius:var(--rp);padding:5px 14px 5px 5px;font-size:12px;font-weight:800;letter-spacing:.13em;color:var(--td2);margin-bottom:22px;backdrop-filter:blur(8px);background:rgba(6,7,20,.45)}
/* Design-audit B csomag — a klub-promo szekció kickere (Üzlet + Design
   közösség) és az alatta lévő cím között 12px (a fő hero saját, nagyobb
   kicker→cím térközét a .hero-grid .hero-tag szabály felülbírálja fent). */
.club-promo .hero-tag{margin-bottom:var(--sp-3)}
/* Hero rendbetétele (2026-08): a fő hero eyebrow-ja tiszta fehér, és nagyobb
   térközzel a H1-től — SZŰKÍTVE a .hero-grid-re, mert a .hero-tag class-t a
   lejjebbi "Üzlet + Design közösség" promó-sáv is használja, azt ez a
   módosítás nem érinti. */
.hero-grid .hero-tag{color:#fff;margin-bottom:var(--sp-4)}
.xdot{width:22px;height:22px;border-radius:50%;background:var(--gr);display:flex;align-items:center;justify-content:center;font-size:12px;color:#060714;font-weight:700}
h1{font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.04em;margin-bottom:14px}
.hero-grid h1{font-size:clamp(32px,4.5vw,52px);margin-bottom:var(--sp-6)}
/* .ddd — legacy class-név a "DDD Business Club" márkanév-korszakból (a
   "Data · Design · Deploy" tagline stílusa volt). A 2026-08-i rebrand után
   a HTML-ből törölve, a szabály szándékosan itt marad (nem használt, de
   nem is okoz kárt) — nem kritikus takarítási tétel. */
.ddd{font-size:12px;font-weight:600;letter-spacing:.28em;color:rgba(255,255,255,.42);text-transform:uppercase;margin-bottom:18px}
.hero-sub{font-size:19px;color:var(--td2);line-height:1.62;margin-bottom:var(--sp-8);max-width:480px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero-grid .hero-cta{margin-bottom:var(--sp-4)}
.btn-p{background:var(--gr);color:#060714;font-weight:700;font-size:14px;padding:13px 26px;border-radius:var(--rp);border:none;cursor:pointer;display:inline-block;transition:opacity .15s,transform 150ms var(--ease-out);white-space:nowrap}
.btn-p:hover{opacity:.85}
.btn-s{background:rgba(6,7,20,.5);backdrop-filter:blur(8px);border:1px solid var(--bdm);color:var(--td);font-size:14px;padding:13px 22px;border-radius:var(--rp);cursor:pointer;display:inline-block;transition:border-color .15s,transform 150ms var(--ease-out);white-space:nowrap}
.btn-s:hover{border-color:var(--cy)}

/* Nyomás-visszajelzés (Mozgás-terv, 2026-08) — MINDEN gombra/kattintható
   vezérlőre, a teljes publikus oldalon (nem csak a főoldalon): eddig
   egyetlen elemnek sem volt :active állapota, a kattintás-visszajelzés
   hiánya tette az oldalt "élettelenebbnek" — ez a legnagyobb haszon a
   legkisebb kockázattal. Csak transform, 150ms, erős egyedi easinggel. A
   .tier-mini-card és .npc-jellegű kártyák MÁR hover-lift-et használnak
   (translateY) — ott a nyomás egy enyhébb, összetett állapot, nem
   felülírás. prefers-reduced-motion alatt lentebb kikapcsolva. */
.btn-p:active,.btn-s:active,.nav-reg:active,.nav-btn:active,.nav-plain:active,
.nav-search-btn:active,.btn-tix:active,.sbar button:active,.sf:active,
.spec-up:active,.club-cal-btn:active{
  transform:scale(0.97);
}
.tier-mini-card:active{transform:translateY(-2px) scale(0.98)}

@media (prefers-reduced-motion: reduce){
  .btn-p:active,.btn-s:active,.nav-reg:active,.nav-btn:active,.nav-plain:active,
  .nav-search-btn:active,.btn-tix:active,.sbar button:active,.sf:active,
  .spec-up:active,.club-cal-btn:active,.tier-mini-card:active{
    transform:none;
  }
}
.hero-note{font-size:12px;color:var(--td3)}
.hero-right{display:flex;flex-direction:column;gap:12px}
.vblock{border-radius:16px;overflow:hidden;border:1px solid var(--bdm);background:var(--card-d);position:relative;aspect-ratio:16/9}
.vblock iframe{width:100%;height:100%;border:none;display:block}
.vov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(108,226,244,.09),rgba(168,143,234,.09));display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.vov:hover{background:linear-gradient(135deg,rgba(108,226,244,.15),rgba(168,143,234,.15))}
.vov-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pbtn{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.13);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:11px;transition:all .2s}
.vov:hover .pbtn{transform:scale(1.08);background:rgba(255,255,255,.22)}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.sbox{background:var(--card-d);padding:12px;text-align:center}
.sn{font-size:20px;font-weight:700;line-height:1}
.sl{font-size:12px;color:var(--td2);margin-top:3px}
.btn-tix{background:rgba(13,14,28,.8);backdrop-filter:blur(8px);border:1px solid var(--bdm);color:var(--td);font-size:14px;font-weight:600;padding:13px;border-radius:var(--r);display:block;text-align:center;transition:all .2s}
.btn-tix:hover{border-color:var(--cy);background:rgba(108,226,244,.06)}
.btn-tix span{display:block;font-size:12px;font-weight:400;color:var(--td2);margin-top:2px}

/* Hero jobb hasáb — dinamikus "Következő esemény" widget (design_events-ből,
   nem kódba égetett tartalom, lásd designEventTemplate.js nextEventHomeWidgetHtml()) */
.home-next-event-widget{border-radius:16px;overflow:hidden;border:1px solid var(--bdm);background:var(--card-d)}
.home-next-event-media{aspect-ratio:16/9;background:linear-gradient(160deg,#2a1f4a,#1a1030)}
.home-next-event-media img,.home-next-event-media video{width:100%;height:100%;object-fit:cover;display:block}
.home-next-event-media-empty{display:flex;align-items:center;justify-content:center}
.home-next-event-body{padding:20px}
.home-next-event-eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--pu);margin-bottom:8px}
.home-next-event-title{font-size:19px;font-weight:800;color:var(--td);margin:0 0 10px;line-height:1.3}
.home-next-event-date{font-size:13.5px;color:var(--td2);margin-bottom:16px}

/* Strukturális banner-hely (szakember-kereső fölött / lábléc fölött) — üres
   site_settings érték esetén a slot maga sem renderelődik (lásd
   homepage.js bannerSlotHtml()), ez a szabály csak a KITÖLTÖTT esetre él. */
.home-banner-slot{max-width:1200px;margin:0 auto;padding:24px 5% 0}
.home-banner-slot img{width:100%;border-radius:16px;display:block}

/* ═══════════════ LIGHT CONTENT ═══════════════ */
.cl{background:var(--lbg);color:var(--lt)}
.sec{max-width:1200px;margin:0 auto;padding:var(--sp-20) 5%}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
/* Design-audit B csomag — CSAK a főoldal 3 fő szekció-címén (Tudástár &
   hírek / Szakmai szemle / Események): explicit "headline" tipográfiai
   szint, hogy egyértelműen elváljon a hero (46px) és a törzsszöveg (16px)
   között — eddig a .sh h2 a böngésző alapértelmezett h2-méretét kapta,
   nem szándékos lépcsőt. A .sh más oldalakon is fut, ezért a méret a
   .sh-home módosítóra szűkítve, nem a puszta .sh-ra. */
.sh-home h2{font-size:36px;font-weight:800;letter-spacing:-.035em;color:var(--lt)}
.sh-home{margin-bottom:var(--sp-8)}
/* Design-audit B csomag, majd finomhangolási kör (2026-08) — "kártya a
   kártyában" megszüntetése a főoldali klub-promó szekcióban: a
   .hero-event-countdown (MEGOSZTOTT komponens a /klub oldallal is, ezért
   ott nem nyúlunk hozzá) itt, a .club-promo-countdown csomagolón belül
   elveszti a saját hátterét/keretét/lekerekítését. Azóta a widget a
   szekció LÁBLÉC-sorába (.club-promo-foot) került a CTA-gomb mellé — a
   felső elválasztó vonalat MÁR a lábléc-sor adja, ezért itt nincs saját
   border-top/margin-top, csak szélesség-korlát, hogy ne nyúljon a teljes
   sor szélességére a gomb rovására. */
.club-promo-countdown .hero-event-countdown{background:none;border:none;border-radius:0;padding:0;margin:0;text-align:left;max-width:340px}
.club-promo-countdown .hcm-img{display:none}
.club-promo-countdown .hcm-actions{justify-content:flex-start;display:flex}
.cl h2{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--lt)}
.sa{font-size:13px;color:var(--blue);font-weight:500}
.badge-club{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--violet);background:rgba(91,79,187,.10);padding:3px 9px;border-radius:20px;vertical-align:middle}
.sa:hover{opacity:.7}
.divl{border:none;border-top:1px solid var(--lb);margin:0 5%}

/* search band */
.search-band{background:var(--lband);border-bottom:1px solid var(--lb);padding:22px 5%}
.search-in{max-width:1200px;margin:0 auto}
.sbar{display:flex;border:1px solid var(--lbm);border-radius:14px;overflow:hidden;background:#fff;transition:border-color .2s}
.sbar:focus-within{border-color:var(--blue)}
.sbar-ico{display:flex;align-items:center;padding:0 16px;color:var(--lt3)}
.sbar input{flex:1;padding:14px 0;background:none;border:none;color:var(--lt);font-size:15px;outline:none}
.sbar input::placeholder{color:var(--lt3)}
.sbar button{background:var(--gr);color:#060714;font-weight:700;font-size:14px;padding:12px 28px;border:none;cursor:pointer;white-space:nowrap;transition:opacity .15s,transform 150ms var(--ease-out)}
.sbar button:hover{opacity:.85}

/* pills */
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--rp);letter-spacing:.3px;text-transform:uppercase}
.pl-ug{background:rgba(11,98,160,.10);color:var(--blue)}
.pl-pr{background:rgba(91,79,187,.10);color:var(--violet)}
.pl-di{background:rgba(180,60,160,.10);color:var(--magenta)}
.pl-ko{background:rgba(13,92,51,.10);color:#0d5c33}
.pl-au{background:rgba(160,90,10,.10);color:#a05a0a}
.pl-ai{background:rgba(158,41,26,.10);color:#9E291A}
.pl-ugynok{background:rgba(149,158,26,.10);color:#959E1A}
.pl-claude{background:rgba(85,158,26,.10);color:#559E1A}
.pl-sd{background:rgba(26,158,28,.10);color:#1A9E1C}
.pl-ux{background:rgba(26,158,131,.10);color:#1A9E83}
.pl-cx{background:rgba(26,144,158,.10);color:#1A909E}
.pl-kutatas{background:rgba(26,57,158,.10);color:#1A399E}
.pl-csapat{background:rgba(87,26,158,.10);color:#571A9E}
.pl-adat{background:rgba(134,26,158,.10);color:#861A9E}
.pl-marketing{background:rgba(158,26,72,.10);color:#9E1A48}

/* ═══════ NEWS PHOTO CARDS ═══════ */
.news-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
/* Design-audit B csomag — a főoldal két hírrácsa (Tudástár & hírek,
   Szakmai szemle) 24px kártya-rést kap; a .news-grid class más oldalon
   (routes/publicMembers.js stb.) is fut, ezért ID-vel szűkítve. */
#hirek .news-grid,#szemle-strip .news-grid{gap:var(--sp-6)}

/* Betöltés-jelzés (Design-audit B csomag, P2) — a hírrács/tier-widget/
   szakember-kereső korábban üresen állt a kliens-oldali fetch() alatt,
   ami lassabb kapcsolatnál törött oldalnak tűnt. Sima CSS-pulzálás, nincs
   új könyvtár; a JS a betöltés után felülírja az innerHTML-t, a
   skeleton eltűnik magától. */
@keyframes skel-pulse{0%,100%{opacity:.55}50%{opacity:.9}}
.skel{background:var(--lband);border-radius:14px;animation:skel-pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}
.skel-card{height:230px}
.skel-card.skel-feat{grid-row:span 2}
.skel-tier{flex:1;height:190px}

/* Mozgás-terv (2026-08) — a skeleton→valós tartalom csere eddig egy
   azonnali innerHTML-felülírás volt ("teleportált" a kártya-rács/tier-
   widget) — most egy halk fade+enyhe emelkedés hidalja át. A JS a
   csere UTÁN adja rá az osztályt (lásd sfd_v15.html fadeInContent()). */
.content-fade-in{animation:contentFadeIn 320ms var(--ease-out) both}
@keyframes contentFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .content-fade-in{animation:contentFadeInReduced 120ms ease both}
  @keyframes contentFadeInReduced{from{opacity:0}to{opacity:1}}
}

/* Belépő-stagger (Mozgás-terv, 2026-08) — lista-sorok/kártyák első
   megjelenése görgetésre (szakember-lista .prow, esemény-lista
   .event-tl-card), IntersectionObserverrel (lásd nav.js), csak egyszer.
   VISSZAFOGOTTABB, mint az eredeti javaslat: 400ms→280ms, 40ms→30ms
   lépcső, és LEGFELJEBB 4 elemig nő a késleltetés — az 5. és minden
   utána lévő elem ugyanazt a (max) késleltetést kapja, hogy gyors
   görgetésnél az utolsó kártya se késsen feltűnően. */
.reveal{opacity:0;transform:translateY(10px);transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.reveal.in-view{opacity:1;transform:translateY(0)}
/* A lépcsőzés MÉRTÉKÉT (0/30/60/90ms, 4 elem után befagyva) a JS állítja
   be inline transition-delay-ként (lásd nav.js) — NEM :nth-child-del,
   mert a valós listákban (pl. esemény-idővonal) nap-elválasztó elemek is
   a testvérek között vannak, ami eltolná a sorszámozást. */
@media (prefers-reduced-motion: reduce){
  .reveal{transform:none;transition-duration:120ms;transition-delay:0ms !important}
}
@media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.news-grid{grid-template-columns:1fr}}
.npc{background:#fff;border:1px solid var(--lb);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:column}
.npc:hover{border-color:var(--lbm);transform:translateY(-3px);box-shadow:0 8px 28px rgba(26,27,46,.1)}
.npc-feat{grid-row:1/3;overflow:visible}
@media(max-width:900px){.npc-feat{grid-row:auto}}
.npc-img{position:relative;height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.npc-feat .npc-img{height:250px;border-radius:14px 14px 0 0}
.npc-img svg{width:64px;height:64px;opacity:.75}
.npc-pill{position:absolute;top:12px;left:12px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;color:#fff;backdrop-filter:blur(8px)}
.npc-body{padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
.npc-title{font-size:14px;font-weight:600;color:var(--lt);line-height:1.5;flex:1}
.npc-feat .npc-title{font-size:17px}
.npc-meta{font-size:12px;color:var(--lt3);margin-top:auto}
/* Design-audit B csomag — a főoldal két hírrácsában a metasor 13.5px (a
   .npc-meta más oldalakon is fut, ezért ID-vel szűkítve). */
#hirek .npc-meta,#szemle-strip .npc-meta{font-size:13.5px}
.npc-hashtag{color:var(--lt3);cursor:pointer;margin-left:4px;transition:color .15s}
.npc-hashtag:hover,.npc-hashtag.on{color:var(--lt2);text-decoration:underline}
.npc-lead{font-size:12.5px;color:var(--lt2);line-height:1.55}
.npc-feat .npc-lead{font-size:15px;line-height:1.5;margin-top:1.2em;min-height:64px}

/* ═══════ PAIN CARDS ═══════ */
.pain-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:900px){.pain-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.pain-grid{grid-template-columns:1fr 1fr}}
.pain-card{background:#fff;border:1px solid var(--lb);border-radius:14px;padding:20px 16px;cursor:pointer;transition:all .2s;text-align:center}
.pain-card:hover{border-color:var(--lbm);transform:translateY(-2px)}
.pain-card.on{background:var(--lt);border-color:var(--lt)}
.pain-card.on .pain-lbl{color:#fff}
.pain-card.on .pain-sub{color:rgba(255,255,255,.6)}
.pain-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.pain-ico svg{width:24px;height:24px}
.pain-lbl{font-size:13px;font-weight:700;color:var(--lt);line-height:1.3}
.pain-sub{font-size:12px;color:var(--lt2);margin-top:3px;line-height:1.4}
.pain-hint{text-align:center;font-size:12px;color:var(--lt3);margin-top:14px}

/* filter dim – csak data-pain elemekre */
[data-pain].dim{opacity:.22;pointer-events:none}

/* ═══════ SOCIAL PROOF ═══════ */
.proof{background:var(--lband);border-top:1px solid var(--lb);border-bottom:1px solid var(--lb);padding:36px 5%}
.proof-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media(max-width:760px){.proof-in{grid-template-columns:1fr}}
.pq{font-size:16px;line-height:1.7;color:var(--lt);padding-left:20px;border-left:3px solid var(--blue);margin-bottom:16px}
.pa{display:flex;align-items:center;gap:10px}
.pav{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6CE2F4,#A88FEA);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#060714}
.pan{font-size:13px;font-weight:600;color:var(--lt)}
.par{font-size:12px;color:var(--lt2)}
.logos-lbl{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--lt3);margin-bottom:10px}
.logos{display:flex;gap:8px;flex-wrap:wrap}
.lchip{background:#fff;border:1px solid var(--lb);border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--lt2)}

/* ═══════ EGYSÉGES SÖTÉT FELÜLET (Design-audit, finomhangolási kör) ═══════
   Minden sötét szekció (hero alap-rétege, klub-promo, SDD-blokk, /klub
   hero) EZT az egy kezelést használja — nincs harmadik/negyedik saját
   fekete. Statikus közelítése a hero élő #cv canvas-ának nyugalmi
   állapotára (lásd sfd_v15.html dr()-ben a 3 izzás-pozíció és az átlós
   fénysáv-irányok) — nincs második élő canvas-példány, nulla teljesítmény-
   költség. A hero MEGTARTJA a saját élő canvas-át felette; a többi
   szekció ezt a statikus réteget kapja. Lásd DESIGN.md. */
.surface-dark{
  position:relative;
  background:
    radial-gradient(circle at 62% 38%, rgba(168,143,234,.16) 0%, transparent 45%),
    radial-gradient(circle at 32% 64%, rgba(108,226,244,.11) 0%, transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(224,128,204,.09) 0%, transparent 40%),
    var(--bg);
}
.surface-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background:
    linear-gradient(115deg, transparent 42%, rgba(108,226,244,.09) 50%, transparent 58%),
    linear-gradient(65deg, transparent 46%, rgba(224,128,204,.07) 52%, transparent 60%);
}
.surface-dark > *{position:relative;z-index:1}
/* "Üveg" komponens-kezelés sötét felületen belül — a hero kicker/countdown
   nyelvét viszi tovább (rgba fehér 6-8% + kb. 14%-os világos keret). */
.glass-panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px}

/* ═══════ SDD BLOCK (dark island) ═══════ */
.sdd-wrap{max-width:1200px;margin:0 auto;padding:52px 5%}
.sdd{border:1px solid var(--bdm);border-radius:18px;padding:0;overflow:hidden}
.sdd-body{padding:44px 48px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;position:relative}
@media(max-width:760px){.sdd-body{grid-template-columns:1fr;padding:32px 24px}}
.sdd-ey{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:var(--gr);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;display:block}
.sdd h2{font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:10px;color:var(--td)}
.sdd p{font-size:15px;color:var(--td2);margin-bottom:20px;line-height:1.7;max-width:500px}
.sdd-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.sdd-tag{font-size:12px;color:var(--td2);border:1px solid var(--bd);border-radius:var(--rp);padding:4px 12px}
.sdd-num{font-size:68px;font-weight:800;line-height:1;letter-spacing:-.04em;text-align:center}
.sdd-nums{font-size:13px;color:var(--td2);margin-top:4px;text-align:center}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
/* ticker inside sdd */
.ticker{position:relative;border-top:1px solid var(--bd);background:rgba(0,0,0,.22);overflow:hidden;padding:11px 0}
.tk-badge{position:absolute;left:0;top:0;bottom:0;z-index:10;background:linear-gradient(90deg,rgba(6,7,20,.6) 60%,transparent);display:flex;align-items:center;padding:0 24px;min-width:150px}
.tk-badge span{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--td3)}
.tk-track{display:flex;animation:tick 32s linear infinite;width:max-content;padding-left:150px}
/* Mozgás-terv (2026-08) — meglévő akadálymentesítési hiány javítva: a
   folyamatosan futó előadó-ticker eddig nem tisztelte a
   prefers-reduced-motion-t. Aki kikapcsolta a mozgást, statikus (nem
   görgő) listát lásson, ne egy futó animációt. */
@media (prefers-reduced-motion: reduce){
  .tk-track{animation:none;padding-left:0}
}
.tk-track:hover{animation-play-state:paused}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.spk{display:flex;align-items:center;gap:10px;padding-right:32px;flex-shrink:0}
.spk-av{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--bdm);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.av1{background:linear-gradient(135deg,rgba(108,226,244,.25),rgba(168,143,234,.25));color:var(--cy)}
.av2{background:linear-gradient(135deg,rgba(168,143,234,.25),rgba(224,128,204,.25));color:var(--pu)}
.av3{background:linear-gradient(135deg,rgba(224,128,204,.25),rgba(108,226,244,.25));color:var(--pi)}
.spk-n{font-size:13px;font-weight:600;color:var(--td);white-space:nowrap}
.spk-r{font-size:12px;color:var(--td3);white-space:nowrap}
.tk-fade{position:absolute;right:0;top:0;bottom:0;width:70px;background:linear-gradient(270deg,#0D0E1C,transparent);pointer-events:none;z-index:10}
/* Keskeny (mobil) nézetben a 70px fix fade arányaiban kicsi a kártya
   szélességéhez képest — a folyamatosan görgő előadó-ticker szövege ilyenkor
   kevésbé tűnik el a szél felé, mielőtt kilépne a látható területről. */
@media(max-width:480px){.tk-fade{width:110px}}

/* ═══════ KLUB-CTA (homepage, a törölt case-cards helyén) + TIER MINI-WIDGET ═══════
   A mini-widget (3 elforgatott, "fanned" tier-kártya) megosztott a homepage
   klub-CTA blokkja és a /klub oldal saját heroja között — lásd sfd_v15.html
   (inline script) és pageTemplate.js clubScript() (szerver-oldali változat).
   Finomhangolási kör (2026-08): a klub-promo szerkezete a korábbi "bal:
   tarifák / jobb: cím+esemény" 2-oszlopos rácsról egy vezető-cím-elöl
   elrendezésre váltott — cím+bevezető fent (teljes szélesség), a 3 tarifa
   egy sorban alatta, a visszaszámláló+CTA lábléc-sorban, nem ékelődve a
   kettő közé. A háttér .surface-dark osztályból jön (nincs saját
   background itt), lásd DESIGN.md. */
.club-promo{padding:var(--sp-20) 5%}
.club-promo-grid{max-width:1160px;margin:0 auto}
/* 2026-08-16-i szövegcsere — a hosszabb, teljes leíró bekezdés a TELJES
   blokk-szélességet használja (a korábbi 640px/520px csak a rövid, egysoros
   szöveghez illett — a hosszabb copy-nál "félbevágottnak" tűnt volna). */
.club-promo-head{max-width:1160px;margin-bottom:var(--sp-8)}
.club-promo-head .hero-tag{margin-bottom:var(--sp-3)}
.club-promo-head h2{max-width:640px}
.club-promo-head p{font-size:15.5px;color:var(--td2);margin:var(--sp-3) 0 0;max-width:900px}
.club-promo .tier-mini-widget{margin-bottom:var(--sp-8)}
.club-promo-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.12)}
/* A tarifa-kártyák a hero kicker/countdown "üveg" nyelvét kapják a fehér
   opak kártya helyett — ne üssön el a .surface-dark felülettől. */
.club-promo .tier-mini-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:none}
.club-promo .tier-mini-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.35)}
.club-promo .tier-mini-card.featured{border-color:var(--sk-gold-2,#d9a21b)}
.club-promo .tier-mini-price{color:var(--td)}
.club-promo .tier-mini-features{color:var(--td2)}
.club-main-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;max-width:1200px;margin:0 auto;padding:56px 5%}
@media(max-width:800px){.club-main-hero{grid-template-columns:1fr}}
/* Nincs feltöltött hero_image_url (2026-08, csatlakozas-folyamat-terv.html:
   az oldal EGYETLEN képe) — egyoszlopos, nem marad üres jobb hasáb. */
.club-main-hero.no-photo{grid-template-columns:1fr;max-width:720px}

/* /klub sötét hero — MOST már a homepage-el egységes .surface-dark
   felületet kapja (a korábbi saját flat háttér helyett), a teljes canvas-
   részecske-animáció NÉLKÜL. A `.hero`-t a homepage is használja
   (position:relative;overflow:hidden), itt a sötét felület + a benne lévő
   .art-title/.reg-lead szín-felülírás kerül hozzá — a hero UTÁN egyenesen
   a világos .cl jön, ezért NINCS .hero-fade átmenet (az a sötét body-ba
   futna ki, itt viszont világos szekció követi). */
.club-hero-dark .art-title{color:#fff}
.club-hero-dark .reg-lead{color:rgba(255,255,255,.72)}

.hero-countdown-mini{margin-top:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;text-align:center}
.hcm-label{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.club-hero-dark .club-countdown{font-size:15px;font-weight:700;color:#fff}

/* Esemény-hero, EGYSÉGES verzió (hub "következő esemény" + esemény-aloldal) —
   kiegészítő osztály a .hero.club-hero-dark mellett, NEM módosítja a
   .club-hero-dark alapstílust — a /klub oldal (tudatosan kép/grid nélküli,
   lásd docs/todo.md) így érintetlen marad. */
.hero-unified{padding:44px 5% 56px}
.hero-unified-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
/* SZÁNDÉKOSAN 680px, NEM a sitewide 900px minta (lásd fentebb pl. .hero-grid,
   .club-promo-grid) — a mockup-egyeztetés (2026-08) alapján az esemény-hero
   768px-en (tablet) is 2-oszlopos maradjon, mockup-közelibb; valós, hosszabb
   tartalommal (2 CTA, 3 soros alcím) tesztelve, nincs túlcsordulás. Ez a
   szabály KIZÁRÓLAG a .hero-unified-inner-t érinti (esemény-aloldal + hub
   "következő esemény" hero) — a főoldal/klub saját class-t használ, nem
   érintett. */
@media(max-width:680px){.hero-unified-inner{grid-template-columns:1fr}}
.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--pu);text-transform:uppercase;margin-bottom:14px}
.hero-unified .hero-title{font-size:34px;font-weight:800;margin:0 0 16px;line-height:1.2;color:#fff}
.hero-unified .hero-meta{display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.72);font-size:14.5px;margin-bottom:22px}
.hero-countdown-boxed{display:inline-flex;gap:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 20px;margin-bottom:22px}
.hero-countdown-boxed .hc-unit{text-align:center;padding:0 12px}
.hero-countdown-boxed .hc-unit + .hc-unit{border-left:1px solid rgba(255,255,255,.15)}
.hero-countdown-boxed .num{font-size:20px;font-weight:800;font-family:monospace;color:#fff}
.hero-countdown-boxed .lbl{font-size:12px;color:#9fa3c0;text-transform:uppercase}
.hero-unified .hero-cta{display:inline-block;padding:14px 30px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--cy),var(--pu));color:var(--bg);font-weight:800;font-size:15px;text-decoration:none}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cta-secondary{padding:14px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.hero-cover{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#2a1f4a,#1a1030);position:relative}
.hero-cover img,.hero-cover video{width:100%;height:100%;object-fit:cover;display:block}
.hero-cover .hero-overlay{position:absolute;inset:0;background:#000}
.hero-unified .hero-subheadline{font-size:15px;color:rgba(255,255,255,.72);line-height:1.6;margin:0 0 20px;max-width:520px}
.hero-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.25);border:none;padding:0}
.hero-video-play .ic{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--bg)}

/* Hero esemény-visszaszámláló — kép + cím + élő countdown + "Naptárba mentés"
   gomb (heroEventCountdownHtml, pageTemplate.js). Szándékosan NEM tartalmaz
   előadó-fotót/nevet — az a homepage-en (Podcast Hub esemény-kártyája) és a
   /klub oldalon (nextEventBlockHtml, lejjebb) már megjelenik, itt duplikálná.
   Önálló, ancestor-független sötét stílus (.club-promo ÉS .club-hero-dark
   is használja, két külön szekció), nem támaszkodik a .club-hero-dark
   szülőre — ezért van saját .club-countdown-felülírása is. */
.hero-event-countdown{margin-top:14px;max-width:320px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;text-align:center}
.hcm-img{width:100%;aspect-ratio:16/9;border-radius:10px;background-size:cover;background-position:center;margin-bottom:10px}
/* csatlakozas-folyamat-terv.html (2026-08): a /klub hero-jában lévő esemény-
   visszaszámláló a saját borítóképét NEM mutatja — az oldal egyetlen képe a
   hero_image_url admin-mezőből jön (lásd renderClubPage()). */
.club-hero-dark .hcm-img{display:none}
.hcm-topic{font-size:14px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:6px}
.hero-event-countdown .club-countdown{font-size:15px;font-weight:700;color:#fff}
.hcm-actions{margin-top:10px}
.hero-event-countdown .club-cal-btn{border-color:rgba(255,255,255,.25);color:#fff}
.hero-event-countdown .club-cal-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* design_events — galéria (max 5 kép, 16:9 KERET, object-fit:contain, NINCS
   kényszerített vágás — a séma-döntés szerint a Cropper-oldalon szabad
   kivágás történik, a megjelenítés csak keretezi 16:9-re, torzítás nélkül). */
.event-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.event-gallery-frame{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.event-gallery-frame img{max-width:100%;max-height:100%;object-fit:contain}

.event-strip{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px}
.event-speaker-chip{flex-shrink:0;width:110px;text-align:center}
.event-speaker-chip .av{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;background:var(--gr);display:flex;align-items:center;justify-content:center;font-weight:700;color:#060714;overflow:hidden}
.event-speaker-chip .av img{width:100%;height:100%;object-fit:cover}
.event-speaker-chip .nm{font-size:12px;font-weight:700;color:var(--lt)}
.event-speaker-chip .tt{font-size:12px;color:var(--lt3)}

/* /esemenyek hub-oldal — közelgő események kártyarács */
.event-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.event-hub-card{display:block;border:1px solid var(--lb);border-radius:14px;overflow:hidden;transition:all .15s}
.event-hub-card:hover{border-color:var(--lbm);transform:translateY(-2px)}
.event-hub-card-img{aspect-ratio:16/9;background-size:cover;background-position:center}
.event-hub-card-body{padding:14px 16px}
.event-hub-card-date{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.event-hub-card-title{font-size:14px;font-weight:700;color:var(--lt)}

/* /esemenyek hub-oldal — lezárult események, guruló karusszel (a
   .sp-marquee/.sp-marquee-track mintája: duplikált tartalom + translateX(-50%)
   végtelen hurok, hover-pause) */
.event-carousel{overflow:hidden}
.event-carousel-track{display:flex;gap:18px;width:max-content;animation:sp-scroll 40s linear infinite}
.event-carousel:hover .event-carousel-track{animation-play-state:paused}
.event-carousel-card{flex-shrink:0;width:220px;display:block}
.event-carousel-card-img{width:220px;aspect-ratio:16/9;border-radius:10px;background-size:cover;background-position:center;margin-bottom:8px}
.event-carousel-card-title{font-size:13px;font-weight:700;color:var(--lt);margin-bottom:2px}
.event-carousel-card-date{font-size:12px;color:var(--lt3)}

/* ═══ /esemenyek hub — kategória-fülek + idővonal + betekintő panel (drawer) ═══ */
.event-cat-tabs{display:flex;gap:8px;margin:24px 0 20px;overflow-x:auto}
.event-cat-tab{padding:8px 16px;border-radius:var(--rp);border:1px solid var(--lb);background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:var(--lt2);white-space:nowrap}
.event-cat-tab.on{background:var(--lt);color:#fff;border-color:var(--lt)}

.event-timeline{max-width:760px;margin:0 auto}
.event-day-sep{display:flex;align-items:center;gap:12px;margin:28px 0 12px}
.event-day-sep .dot{width:8px;height:8px;border-radius:50%;background:var(--cy);flex-shrink:0}
.event-day-sep .label{color:var(--lt);font-weight:700;font-size:15px}
.event-day-sep .dow{color:var(--lt3);font-size:13px}
.event-day-sep .line{flex:1;height:1px;background:var(--lb)}

.event-tl-card{display:flex;gap:16px;background:#fff;border:1px solid var(--lb);border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border-color .15s,transform .15s,box-shadow .15s}
.event-tl-card:hover{border-color:var(--bdm);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.tl-time{width:52px;flex-shrink:0;color:var(--lt3);font-size:13px;font-weight:700;padding-top:2px}
.tl-body{flex:1;min-width:0}
.tl-title{color:var(--lt);font-size:16px;font-weight:700;margin:0 0 8px;line-height:1.3}
.tl-meta{display:flex;align-items:center;gap:6px;color:var(--lt2);font-size:13px;margin-bottom:5px}
.tl-desc{color:var(--lt3);font-size:12.5px;line-height:1.5;margin:4px 0 6px}
.tl-host-avatar{width:18px;height:18px;border-radius:50%;background:var(--gr);flex-shrink:0}
.tl-badges{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.badge-capacity{display:inline-block;padding:3px 10px;border-radius:var(--rp);font-size:12px;font-weight:700;background:rgba(180,60,160,.12);color:var(--magenta)}
.badge-count{display:inline-block;padding:3px 10px;border-radius:var(--rp);font-size:12px;font-weight:600;background:var(--lbg);color:var(--lt2)}
.badge-free{display:inline-block;padding:3px 10px;border-radius:var(--rp);font-size:12px;font-weight:700;background:rgba(108,226,244,.15);color:#0B8FA8}
.tl-thumb{width:88px;height:88px;border-radius:12px;flex-shrink:0;overflow:hidden;background:linear-gradient(160deg,#e9e6f5,#dceef2)}
.tl-thumb img{width:100%;height:100%;object-fit:cover}

.event-drawer-overlay{position:fixed;inset:0;background:rgba(11,14,26,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:400}
.event-drawer-overlay.open{opacity:1;pointer-events:auto}
.event-drawer{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);z-index:401;overflow-y:auto}
.event-drawer.open{transform:translateX(0)}
.event-drawer-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--lb)}
.event-drawer-btn{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:8px;border:1px solid var(--lb);background:#fff;color:var(--lt2);cursor:pointer}
.event-drawer-close{cursor:pointer;color:var(--lt3);font-size:18px;background:none;border:none}
.event-drawer-cover{width:100%;aspect-ratio:16/9;background:linear-gradient(160deg,#2a1f4a,#12132e)}
.event-drawer-cover img{width:100%;height:100%;object-fit:cover}
.event-drawer-body{padding:20px}
.event-drawer-title{font-size:22px;font-weight:800;color:var(--lt);margin:0 0 14px;line-height:1.3}
.event-drawer-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:14px;color:var(--lt2)}
.event-drawer-row .ic{width:18px;flex-shrink:0}
.event-drawer-desc{font-size:13.5px;color:var(--lt2);line-height:1.6;margin:16px 0}
.event-drawer-cta-box{background:var(--lbg);border-radius:14px;padding:16px;margin-top:16px}
.event-drawer-cta-label{font-size:12px;font-weight:700;color:var(--lt3);text-transform:uppercase}
.event-drawer-full-link{display:block;text-align:center;margin-top:18px;color:var(--violet);font-weight:700;font-size:13.5px;text-decoration:none}

/* ═══ /esemenyek/:slug aloldal — VALÓS 2-oszlopos grid, a mockup pontos
   méreteivel (esemeny-aloldal-v2-mockup.html, Playwright-mérve 1440px-en,
   2026-08-i javítás): max-width 1160px, oszlopok kb. 1.4fr/470px (a
   mockupban 658px/470px, ugyanaz az arány), gap 32px. MINDEN szekció
   .card-ban ül, nincs csupasz szöveg a világos háttéren. Bal oszlop:
   mélyebb tartalom (Kiemelt előadó, Az eseményről, Galéria, Program).
   Jobb oszlop: akció-kártyák (Regisztráció, Szervezők, Résztvevők,
   Helyszín, Kapcsolat). A Szponzorok a grid ALATT, teljes szélességű
   kártyaként (a mockup nem mutat ilyen szekciót, saját döntés a hellyel,
   korábban jóváhagyott tétel). */
.event-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;max-width:1160px;margin:16px auto 0;padding:0 5%;align-items:start}
@media(max-width:900px){.event-detail-grid{grid-template-columns:1fr}}
.event-below-grid{max-width:1160px;margin:0 auto;padding:0 5% 70px}
.event-speaker-cta{border-radius:20px;overflow:hidden;padding:44px 5%;text-align:center;margin-bottom:24px}
.event-speaker-cta h3{font-size:22px;margin:0 0 10px;color:var(--td)}
.event-speaker-cta p{color:var(--td2);font-size:15px;margin:0 auto 22px;max-width:480px}
.card{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:22px 24px;margin-bottom:18px}
.card h4{margin:0 0 12px;font-size:12px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-cover-lg{border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(160deg,#2a1f4a,#12132e)}
.event-cover-lg img,.event-cover-lg video{width:100%;height:100%;object-fit:cover}
.event-featured-tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--lb);border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--lt2);margin-top:16px}
/* Helyszín-kártya — cím + térkép + megérkezés/parkolás EGY dobozban (a
   dátumot a hero már megjeleníti, itt szándékosan nincs duplikálva —
   2026-08-i javítás, korábban itt egy hero-t megismétlő date-chip +
   szétdarabolt helyszín-blokk volt). */
.event-location-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:20px;margin-bottom:18px}
.event-location-box h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-location-address{font-size:14.5px;color:var(--lt);margin-bottom:12px}
.event-map-embed{width:100%;height:220px;border:0;border-radius:14px;margin-bottom:12px}
.event-reg-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:20px;margin-bottom:18px}
.event-reg-box h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-reg-status{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--lt2);margin-bottom:14px}
.event-reg-note{font-size:12px;color:var(--lt3);text-align:center;margin-top:10px}
/* GYIK (2026-08, SDD 2026 kör) — a .card-on belüli kérdés-válasz sorok. */
.event-faq-item{padding:14px 0;border-top:1px solid var(--lb)}
.event-faq-item:first-of-type{border-top:none;padding-top:4px}
.event-faq-item h5{margin:0 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.event-faq-item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--lt2)}
.event-attendees-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.event-attendees-box h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-attendee-avatars{display:flex;margin-bottom:8px}
.event-attendee-avatars .av{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:var(--gr);overflow:hidden}
.event-attendee-avatars .av:first-child{margin-left:0}
.event-attendee-avatars .av img{width:100%;height:100%;object-fit:cover}
.event-attendees-names{font-size:13px;color:var(--lt2)}
.event-attendees-locked{font-size:12px;color:var(--lt3);margin-top:8px;font-style:italic}
.event-hosts-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:20px;margin-bottom:18px}
.event-hosts-box h4{margin:0 0 14px;font-size:13px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-hosts-empty{margin:0 0 14px;font-size:13.5px;color:var(--lt2);line-height:1.6}
.event-hosts-empty-cta{display:inline-block;padding:10px 20px;border:1px solid var(--lb);border-radius:var(--rp);font-size:13.5px;font-weight:700;color:var(--lt);text-decoration:none;transition:border-color .15s}
.event-hosts-empty-cta:hover{border-color:var(--blue)}
.event-host-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.event-host-avatar{width:40px;height:40px;border-radius:50%;background:var(--gr);flex-shrink:0;overflow:hidden}
.event-host-avatar img{width:100%;height:100%;object-fit:cover}
.event-host-name{font-weight:700;font-size:14.5px;color:var(--lt)}
.event-host-company{font-size:12.5px;color:var(--lt3)}
.event-speaker-highlight{max-width:640px;margin:0 auto 40px;padding:0 5%}
/* Világos kártya — a mockup .speaker-card-light mintáját követve (2026-08-i
   egyeztetés: korábban sötét volt, a mockup-összevetés után váltottunk
   világosra, hogy a Szervezők-kártyákkal egységes stílust adjon). */
.event-speaker-featured-card{background:linear-gradient(160deg,#f3f0fc,#eaf7fa);border-radius:20px;padding:32px;display:flex;gap:24px;align-items:center;color:var(--lt);margin-bottom:18px}
@media(max-width:600px){.event-speaker-featured-card{flex-direction:column;text-align:center}}
.event-speaker-featured-photo{width:120px;height:120px;border-radius:16px;flex-shrink:0;overflow:hidden;background:var(--gr);display:flex;align-items:center;justify-content:center;color:#060714;font-size:22px;font-weight:700}
.event-speaker-featured-photo img{width:100%;height:100%;object-fit:cover}
.event-speaker-eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--pu);text-transform:uppercase;margin-bottom:8px}
.event-speaker-featured-name{font-size:22px;font-weight:800;margin:0 0 4px;color:var(--lt)}
.event-speaker-featured-role{font-size:14px;color:var(--lt2);margin-bottom:12px}
.event-speaker-featured-bio{font-size:13.5px;color:var(--lt2);line-height:1.6}
.event-speaker-linkedin{color:var(--lt2);margin-left:6px;font-size:12.5px;text-decoration:none}
.event-linkedin-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:rgba(91,79,187,.10);color:var(--violet);font-size:12px;font-weight:800;margin-left:6px;text-decoration:none;vertical-align:middle}

/* Kapcsolat-doboz (organizer_contact_email) — az event-hosts-box mintáját
   követi, hogy vizuálisan illeszkedjen a jobb oszlop többi kártyájához. */
.event-contact-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:20px;margin-bottom:18px}
.event-contact-box h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;color:var(--lt3);letter-spacing:.5px}
.event-contact-box a{color:var(--violet);font-weight:700;text-decoration:none}

/* Kiemelt figyelmeztető-doboz — parkolás/megérkezés útmutató a Helyszín
   kártyában, és a regisztrációs határidő a Regisztráció kártyában. Szándékosan
   ELTÉR a semleges .event-info-box-tól (a mockup ezt a szekciót nem mutatja,
   a felhasználói döntés a feltűnőbb kiemelést kérte). */
.event-highlight-box{background:rgba(180,60,160,.06);border:1px solid rgba(180,60,160,.18);border-radius:12px;padding:12px 14px;margin-top:12px;font-size:13px;color:var(--lt2);line-height:1.5}
.event-highlight-box b{color:var(--magenta)}
.event-deadline-box{background:rgba(180,60,160,.08);border:1px solid rgba(180,60,160,.22);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--magenta);font-weight:700}

/* Résztvevők — "breakdown" megjelenítési mód (stat-chip sor, avatarok
   helyett), és a szerepkör szerint csoportosított szervező/előadó lista. */
.event-breakdown-chips{display:flex;flex-wrap:wrap;gap:8px}
.event-breakdown-chip{background:var(--lbg);border-radius:var(--rp);padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--lt2)}
.event-host-group-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lt3);margin:14px 0 8px}
.event-host-group-title:first-child{margin-top:0}

/* "Kinek szól" / "Formátum" mini-szekció — az Az eseményről kártya alatt,
   önálló kis blokk (a mockup nem mutatja, felhasználói döntés alapján). */
.event-audience-format{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:600px){.event-audience-format{grid-template-columns:1fr}}
.event-audience-format-item h5{margin:0 0 6px;font-size:12px;text-transform:uppercase;color:var(--lt3);letter-spacing:.4px}
.event-audience-format-item p{margin:0;font-size:13.5px;color:var(--lt2);line-height:1.6}

.event-content-video{margin-top:16px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#000}
.event-content-video iframe,.event-content-video video{width:100%;height:100%;border:0;display:block}

/* Program-tab (esemény egyedi oldal) — nap-fülek, track-pillek, kereső */
.program-search{width:100%;max-width:360px;margin-bottom:14px;padding:9px 12px;border:1px solid var(--lbm);border-radius:8px;font-size:13px}
.program-day-tabs{display:flex;gap:6px;margin-bottom:10px}
.program-day-tab{background:#fff;border:1px solid var(--lb);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--lt2);cursor:pointer}
.program-day-tab.on{background:var(--lt);color:#fff;border-color:var(--lt)}
.program-track-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.program-track-pill{background:#fff;border:1px solid var(--lb);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--lt2);cursor:pointer}
.program-track-pill.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.program-row{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--lb)}
.program-row:first-child{border-top:none}
.program-row-time{flex-shrink:0;width:90px;font-size:12px;font-weight:700;color:var(--blue)}
.program-row-title{font-size:14px;font-weight:700;color:var(--lt)}
.program-row-speaker{font-size:12px;color:var(--lt2);margin-top:2px}
.program-row-desc{font-size:12px;color:var(--lt2);margin-top:4px;line-height:1.5}

/* "Legközelebbi Klub-esemény" kártya — 2026-08-tól a /kozosseg hero jobb
   oldalán (lásd nextEventCardHtml(), pageTemplate.js) */
.cne-card{background:#fff;border:1px solid var(--lb);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1.3fr}
@media(max-width:800px){.cne-card{grid-template-columns:1fr}}
/* csatlakozas-folyamat-terv.html (2026-08): az oldal EGYETLEN képe a hero-ban
   van — az esemény-kártya itt kép nélkül, egy oszlopban, teljes szélességben. */
.cne-card.no-img{grid-template-columns:1fr;max-width:640px}
/* .cne-card-hero — 2026-08, hero-egységesítés 2. fázis: a kártya a
   /kozosseg hero JOBB oldali szeletébe költözött (korábban önálló, teljes
   szélességű szekció volt). A szelet MINDIG szűk (kb. 420px), függetlenül
   a viewport szélességétől, ezért a fenti, viewport-alapú @media(max-
   width:800px) szabály itt nem elég — ez a módosító mindig 1-oszloposra
   kényszeríti, kép-nélküli esetben is. */
.cne-card.cne-card-hero{grid-template-columns:1fr;max-width:none}
.cne-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pu);margin-bottom:10px}
@media(max-width:480px){.cne-body .btn-p{white-space:normal;text-align:center}}
.cne-img{min-height:220px;background:var(--gr);background-size:cover;background-position:center}
.cne-body{padding:28px 32px;min-width:0}
.cne-countdown{font-size:19px;font-weight:800;color:var(--lt);margin-bottom:14px;letter-spacing:-.01em}
.cne-meta{font-size:12.5px;color:var(--lt3);margin-bottom:8px}
.cne-topic{font-size:21px;font-weight:800;color:var(--lt);margin-bottom:8px;letter-spacing:-.01em}
/* Előadó-kártya — kör-portré + név/cím, önálló, hangsúlyos elemként
   (nem apró inline szöveg, mint korábban a .cne-speaker volt). */
.cne-speaker-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--lbg);border-radius:12px;margin-bottom:16px}
.cne-speaker-card.tbd{background:none;padding:0 0 0 2px}
.cne-speaker-photo{width:52px;height:52px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,#6CE2F4,#A88FEA);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#060714}
.cne-speaker-photo img{width:100%;height:100%;object-fit:cover}
.cne-speaker-name{font-size:14.5px;font-weight:700;color:var(--lt)}
.cne-speaker-card.tbd .cne-speaker-name{font-size:13.5px;font-weight:600;font-style:italic;color:var(--lt3)}
.cne-speaker-title{font-size:12.5px;color:var(--lt3);margin-top:1px}

/* A leírás nagyobb, olvashatóbb tipográfiát kapott (korábban 13.5px volt,
   alig különbözött a meta-szövegtől). */
.cne-desc{font-size:15.5px;color:var(--lt2);line-height:1.65;margin-bottom:18px}
.cne-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#cne-cta .rsvp-btn{background:var(--gr);color:#060714;font-weight:700;font-size:13px;padding:11px 20px;border-radius:10px;border:none;cursor:pointer}
#cne-cta .rsvp-btn.done{background:rgba(13,92,51,.12);color:#0d5c33;cursor:default}

/* Esemény-kártya borítóképe — visszafogott figyelemfelkeltés (2026-08,
   "csatlakozas-hero-esemenykartya" kör): lassú, alacsony amplitúdójú
   fényerő-lüktetés a képen, hosszú (5s) ciklussal — NEM videó/GIF, a
   DESIGN.md "Szakmai Műhely" visszafogottságával összhangban. A CTA-gomb
   szándékosan statikus marad, nem versenyez a mozgással. */
.cne-glow .cne-img{animation:cneGlow 5s ease-in-out infinite}
@keyframes cneGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@media (prefers-reduced-motion: reduce){.cne-glow .cne-img{animation:none}}

/* Klub Archívum — 3 fül (Fotók/Videók/Podcast) */
.archive-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--lb)}
.archive-tab{background:none;border:none;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--lt3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.archive-tab.on{color:var(--lt);border-bottom-color:var(--blue)}

/* 2026-08-i javítás: a korábbi "fanolt" (rotate+scale+abszolút pozíció,
   egymásra csúszó) kártya-pakli helyett egyenlő méretű, egymás mellett
   álló 3 kártya — a felhasználói visszajelzés szerint nehéz volt köztük
   váltani/összehasonlítani őket. A kattintás-navigáció (/klub/<code>)
   változatlan, csak a vizuális elrendezés egyszerűsödött. UGYANEZ a
   szabály él a /klub oldal saját tier-widgetjén is (pageTemplate.js
   clubScript()) — a két hely szándékosan egyszerre íródott át. */
.tier-mini-widget{display:flex;gap:var(--sp-6);align-items:stretch}
@media(max-width:640px){.club-promo .tier-mini-widget{flex-direction:column}}
.tier-mini-card{position:relative;flex:1;background:#fff;border:1px solid var(--lb);border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.12);text-decoration:none;transition:transform .15s ease-out,box-shadow .15s ease-out}
.tier-mini-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.tier-mini-card.featured{border-color:var(--magenta);box-shadow:0 8px 20px rgba(180,60,160,.18)}
.tier-mini-name{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--blue)}
.tier-mini-tudas .tier-mini-name{color:var(--violet)}
.tier-mini-premium .tier-mini-name{color:var(--magenta)}
.tier-mini-price{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--lt);margin:6px 0 8px}
.tier-mini-features{list-style:none;padding:0;margin:0;font-size:12px;color:var(--lt2);line-height:1.6}
.tier-mini-badge{position:absolute;top:-10px;right:12px;background:var(--gr);color:#060714;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.tier-mini-popular-badge{position:absolute;top:-10px;left:12px;background:var(--violet);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 9px;border-radius:20px;white-space:nowrap}

/* ═══════ KLUB ESEMÉNY-JEGY (event-ticket, lásd clubCalendar.js clubEventTicketHtml) ═══════ */
.kcard{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:26px;transition:border-color .2s;cursor:pointer}
.kcard:hover{border-color:var(--lbm)}
.key{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.kt{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:8px;color:var(--lt)}
.km{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--lt2);flex-wrap:wrap;margin-bottom:16px}
.kb{background:rgba(11,98,160,.10);color:var(--blue);font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--rp)}
.kday{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--lt)}
.kmon{font-size:14px;color:var(--lt2)}
.event-ticket{margin-bottom:14px}
.event-ticket-img{width:100%;aspect-ratio:16/9;border-radius:10px;background-size:cover;background-position:center;margin-bottom:12px}
.club-countdown{display:inline-block;font-family:ui-monospace,'SF Mono',Consolas,monospace;font-weight:700;font-size:13px;color:var(--blue);background:rgba(11,98,160,.08);padding:5px 12px;border-radius:8px;margin-bottom:10px}
.club-cal-next{display:block !important}
.club-cal-next .club-cal-body{margin-top:10px}
.club-cal-desc{font-size:13px;color:var(--lt2);line-height:1.6;margin-top:8px}

/* ═══════ PODCAST HUB (homepage) — videós betekintő + hang-lista ═══════ */
.podcast-hub-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media(max-width:760px){.podcast-hub-grid{grid-template-columns:1fr}}
.pod-ep{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lt3);margin-bottom:8px}
.pod-nrc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--lt3)}
.pod-badge{background:rgba(11,98,160,.10);color:var(--blue);font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--rp)}

.pod-preview-card{display:block;background:#fff;border:1px solid var(--lb);border-radius:16px;padding:20px;text-decoration:none;transition:border-color .2s}
.pod-preview-card:hover{border-color:var(--lbm)}
.pod-preview-img{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:14px;display:flex;align-items:center;justify-content:center}
.pod-preview-img .pbtn{position:relative;z-index:1}

.pod-list{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.pod-list-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--lb);border-radius:12px;padding:12px 14px;text-decoration:none;transition:border-color .2s}
.pod-list-item:hover{border-color:var(--lbm)}
.pod-list-icon{font-size:18px;flex-shrink:0}
.pod-list-body{flex:1;min-width:0}
.pod-list-title{font-size:13px;font-weight:600;color:var(--lt);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-list-meta{font-size:12px;color:var(--lt3);margin-top:2px}
.pod-list-tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--rp);white-space:nowrap;flex-shrink:0}
.pod-list-tag.own{background:rgba(11,98,160,.10);color:var(--blue)}
.pod-list-tag.external{background:rgba(154,157,181,.15);color:var(--lt3)}
.pod-nrc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--lt3)}
.pod-badge{background:rgba(11,98,160,.10);color:var(--blue);font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--rp)}

/* ═══════ SZAKEMBER ═══════ */
.spec-bar{display:flex;border:1px solid var(--lbm);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:14px;transition:border-color .2s}
.spec-bar:focus-within{border-color:var(--blue)}
.spec-bar-ico{display:flex;align-items:center;padding:0 14px;color:var(--lt3)}
.spec-bar input{flex:1;padding:13px 0;background:none;border:none;color:var(--lt);font-size:14px;outline:none}
.spec-bar input::placeholder{color:var(--lt3)}
.sf-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.sf{font-size:12px;padding:5px 14px;border-radius:var(--rp);border:1px solid var(--lb);background:#fff;color:var(--lt2);cursor:pointer;transition:all .15s}
.sf:hover{border-color:var(--lbm);color:var(--lt)}
.sf.on{background:var(--lt);color:#fff;border-color:var(--lt);font-weight:600}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
@media(max-width:800px){.spec-grid{grid-template-columns:1fr}}
.spc{background:#fff;border:1px solid var(--lb);border-radius:14px;padding:18px;cursor:pointer;transition:all .2s;position:relative}
.spc-featured-badge{position:absolute;top:-8px;right:14px;background:linear-gradient(90deg,var(--cy),var(--pu));color:var(--bg);font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:3px 10px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.spc:hover{border-color:var(--lbm);transform:translateY(-2px)}
.spc-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.spc-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;background:linear-gradient(135deg,#6CE2F4,#A88FEA);color:#060714}
.spc-av.v2{background:linear-gradient(135deg,#A88FEA,#E080CC)}
.spc-av.v3{background:linear-gradient(135deg,#E080CC,#6CE2F4)}
.spc-n{font-size:14px;font-weight:700;color:var(--lt)}
.spc-r{font-size:12px;color:var(--lt2);margin-top:1px}
.spc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.spc-bio{font-size:12px;color:var(--lt2);line-height:1.55;margin-bottom:9px}
.spc-ref{font-size:12px;color:var(--blue);font-weight:600}
.spec-up{display:block;text-align:center;padding:13px;border:1px dashed var(--lbm);border-radius:12px;color:var(--lt2);font-size:13px;font-weight:500;transition:all .15s;background:transparent}
.spec-up:hover{border-color:var(--blue);color:var(--lt);background:rgba(11,98,160,.03)}

/* Szakember-kereső — discipline/specialitás/iparág pillek, céges kártya megkülönböztetés */
.pill.spc-discipline-design{background:rgba(108,226,244,.12);color:#0B62A0}
.pill.spc-discipline-data{background:rgba(168,143,234,.12);color:#5B4FBB}
.pill.spc-discipline-deploy{background:rgba(224,128,204,.12);color:#B43CA0}
.pill.spc-topic,.pill.spc-industry{background:var(--lbg);color:var(--lt2)}
.spc-company{background:rgba(11,98,160,.04);border-left:3px solid var(--blue)}
.spc-company-badge{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--blue);font-weight:600;margin-bottom:8px;text-decoration:none}
.spc-company-badge:hover{text-decoration:underline}
.spc-company-logo{width:16px;height:16px;border-radius:4px;object-fit:cover}
.spc-company-logo-lg{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--lb);flex-shrink:0}
.spc-contactable{font-size:12px;color:#0d5c33;font-weight:600;margin-bottom:9px}

/* ═══════ TUDÁSTÁR ═══════ */
.tc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.tc{grid-template-columns:1fr}}
.col-lbl{font-size:12px;color:var(--lt3);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.al{display:flex;flex-direction:column;gap:8px}
.ac{background:#fff;border:1px solid var(--lb);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:5px}
.ac:hover{border-color:var(--lbm)}
.ac.row{flex-direction:row;align-items:center;gap:12px}
.at{font-size:13px;font-weight:600;color:var(--lt);line-height:1.4}
.am{font-size:12px;color:var(--lt3);display:flex;gap:6px}
.vthumb{width:64px;height:46px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.vthumb svg{width:18px;height:18px}

/* ═══════ KÉPZÉSEK NAPTÁR ═══════ */
.tr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:760px){.tr-grid{grid-template-columns:1fr}}
.tr{background:#fff;border:1px solid var(--lb);border-radius:14px;padding:18px;display:flex;gap:16px;align-items:flex-start;transition:all .2s}
.tr:hover{border-color:var(--lbm);transform:translateY(-2px)}
.tr-date{width:56px;flex-shrink:0;text-align:center;background:var(--lband);border-radius:10px;padding:10px 4px}
.tr-day{font-size:22px;font-weight:800;line-height:1;color:var(--lt)}
.tr-mon{font-size:12px;color:var(--lt2);font-weight:600;letter-spacing:.3px;text-transform:uppercase;margin-top:3px}
.tr-body{flex:1;min-width:0}
.tr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.tr-t{font-size:14px;font-weight:700;color:var(--lt);line-height:1.35}
.tr-m{font-size:12px;color:var(--lt2);margin-bottom:12px}
.fb{background:rgba(13,92,51,.10);color:#0d5c33;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--rp);white-space:nowrap;flex-shrink:0}
.pb{background:rgba(91,79,187,.10);color:var(--violet);font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--rp);white-space:nowrap;flex-shrink:0}
.tr-btn{display:inline-block;background:var(--lt);color:#fff;font-size:12px;font-weight:600;padding:8px 18px;border-radius:var(--rp);transition:opacity .15s}
.tr-btn:hover{opacity:.8}
.tr-submit{border:1px dashed var(--lbm);background:transparent;border-radius:14px;padding:18px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--lt2);font-size:13px;font-weight:500;transition:all .15s;grid-column:1/-1}
.tr-submit:hover{border-color:var(--blue);color:var(--lt)}

/* ═══════ ESEMÉNYEK ═══════ */
.ev-list{display:flex;flex-direction:column;gap:8px}
.ev{background:#fff;border:1px solid var(--lb);border-radius:12px;padding:13px 16px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.ev:hover{border-color:var(--lbm)}
.ev-d{width:44px;text-align:center;flex-shrink:0;background:var(--lband);border-radius:8px;padding:7px 2px}
.ev-day{font-size:17px;font-weight:800;line-height:1;color:var(--lt)}
.ev-mon{font-size:12px;color:var(--lt2);font-weight:600;letter-spacing:.3px;text-transform:uppercase;margin-top:2px}
.ev-i{flex:1;min-width:0}
.ev-t{font-size:13px;font-weight:600;color:var(--lt);line-height:1.3}
.ev-s{font-size:12px;color:var(--lt3);margin-top:2px}

/* ═══════ ÜZLET + DESIGN KÖZÖSSÉG — ÁRAZÁSI KÁRTYÁK ═══════ */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}
@media(max-width:800px){.tier-grid{grid-template-columns:1fr}}
.tier-card{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;transition:all .2s}
.tier-card:hover{border-color:var(--lbm);transform:translateY(-2px)}
.tier-card.selected{box-shadow:0 0 0 2px var(--blue)}
.tier-card.featured.selected{box-shadow:0 0 0 2px var(--magenta)}
.tier-card.featured{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--gr) border-box;position:relative}
.tier-featured-badge{position:absolute;top:-11px;left:22px;background:var(--gr);color:#060714;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.tier-name{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--blue)}
.tier-card.featured .tier-name{color:var(--magenta)}
.tier-price{font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--lt);margin:10px 0 2px;white-space:nowrap}
.tier-price span{font-size:13px;font-weight:500;color:var(--lt3)}
.tier-desc{font-size:12px;color:var(--lt2);line-height:1.5;margin-bottom:16px}
.tier-features{list-style:none;padding:0;margin:0 0 20px;flex:1}
.tier-features li{font-size:12px;color:var(--lt2);padding:6px 0;border-top:1px solid var(--lb);display:flex;gap:8px;align-items:flex-start}
.tier-features li:first-child{border-top:none}
.tier-check{color:var(--blue);flex-shrink:0;font-weight:700}
.tier-card.featured .tier-check{color:var(--magenta)}
.tier-cta{display:block;text-align:center;padding:12px;border-radius:var(--rp);font-weight:700;font-size:13px;border:1px solid var(--lb);color:var(--lt);transition:all .15s}
.tier-cta:hover{border-color:var(--lbm)}
.tier-card.featured .tier-cta{background:var(--gr);color:#060714;border:none}
/* Útvonal-egyszerűsítés (2026-08): a tier-cta a /csatlakozas oldalra visz
   elsődlegesen — a /klub/:tier aloldal MEGMARAD, de csak másodlagos,
   halványabb linkként ("Részletek →"), nem a fő konverziós útvonalon. */
.tier-details-link{display:block;text-align:center;margin-top:8px;font-size:12px;color:var(--lt3);text-decoration:none}
.tier-details-link:hover{color:var(--lt2)}

/* ═══════ CSATLAKOZÁS — tier-jelző sáv (a /csatlakozas oldal fejléce) ═══════ */
.join-tier-indicator{font-size:14px;color:var(--lt2);margin-top:4px}
.join-tier-indicator a{color:var(--blue);font-weight:600;text-decoration:none;margin-left:8px}
.join-tier-indicator a:hover{text-decoration:underline}

/* ═══════ /KLUB ÁTALAKÍTÁS (2026-08, csatlakozas-folyamat-terv.html) ═══════ */
.klub-kicker{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lt3);font-weight:800;margin-bottom:10px;display:block}
/* Három pillér — "Mit ad a tagság" */
.klub-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
@media(max-width:840px){.klub-pillars{grid-template-columns:1fr}}
.klub-pillar .num{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:10px}
.klub-pillar h3{font-size:19px;letter-spacing:-.02em;color:var(--lt);margin-bottom:7px;line-height:1.28}
.klub-pillar p{font-size:14.5px;color:var(--lt2);line-height:1.6}

/* Tarifa-összehasonlító táblázat (a választható kártyák helyett — a döntés
   a /csatlakozas folyamatban van, ez az oldal csak tájékoztat) */
.cmpsc{overflow-x:auto;background:#fff;border:1px solid var(--lb);border-radius:16px}
.cmpsc table{width:100%;border-collapse:collapse;min-width:560px}
.cmpsc th,.cmpsc td{padding:11px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--lb)}
.cmpsc thead th{background:var(--lband);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lt3);font-weight:800}
.cmpsc tbody th{font-weight:600;color:var(--lt2)}
.cmpsc td{text-align:center;width:110px;font-variant-numeric:tabular-nums}
.cmpsc .yes{color:#0f7a4d;font-weight:800}
.cmpsc .no{color:var(--lb)}
.cmpsc .val{font-weight:700;color:var(--lt)}
.cmpsc tr.grp th{background:var(--lband);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lt3);font-weight:800}

/* Gyakori kérdések (FAQ) */
.fq{border-bottom:1px solid var(--lb);padding:16px 0}
.fq:last-child{border-bottom:none}
.fq b{display:block;font-size:16px;color:var(--lt);letter-spacing:-.01em;margin-bottom:5px}
.fq p{font-size:14px;color:var(--lt2);line-height:1.6}

/* Egyetlen kép a /klub oldalon (a hero jobb oszlopában, admin-feltöltött) */
.klub-hero-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.klub-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Záró CTA — ugyanaz az egységes sötét felület, mint a klub-promo/SDD */
.klub-final-cta{padding:var(--sp-14) 5%;text-align:center}
.klub-final-cta h2{font-size:28px;letter-spacing:-.03em;color:#fff;margin-bottom:11px}
.klub-final-cta p{color:var(--td2);font-size:16px;max-width:480px;margin:0 auto 22px}

/* ═══════ REGISZTRÁCIÓ ═══════ */
.reg{background:#fff;border:1px solid var(--lb);border-radius:20px;padding:40px 44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:760px){.reg{grid-template-columns:1fr;padding:28px 22px}}
.reg h2{font-size:24px;margin-bottom:8px}
.reg-lead{font-size:14px;color:var(--lt2);margin-bottom:18px}
/* hero_subtitle mostantól Markdown-ból renderelt (renderMarkdownToSafeHtml) —
   a markdown-it a saját <p>/<ul>-jét adja, ennek böngésző-alap margóját
   nullázzuk, hogy a .reg-lead/.hero-sub eddigi, szoros elrendezése ne
   törjön meg egy admin által beírt bekezdés/felsorolás miatt. */
.reg-lead p, .reg-lead ul, .hero-sub p, .hero-sub ul{margin:0}
.reg-lead ul, .hero-sub ul{padding-left:18px}
.reg-lead strong, .hero-sub strong{color:inherit;font-weight:700}
.perk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--lt2);margin-bottom:9px;line-height:1.5}
.perk b{color:var(--lt)}
.perk-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px}
.reg-lbl{font-size:13px;font-weight:700;color:var(--lt);margin-bottom:10px}
/* Szint-független bizalmi blokk (2026-08, "csatlakozas-hero-esemenykartya"
   kör) — a /csatlakozas bal oldalán, ha a látogató NEM egy konkrét
   tarifa-kártyáról jött (nincs ?tier=). Tudatosan nincs benne szint-név,
   ár, kedvezmény vagy checklist — csak ki a közösség, és kik állnak
   mögötte. */
.reg-trust p{font-size:14.5px;color:var(--lt2);line-height:1.6;margin:0 0 22px}
.reg-trust-founders{display:flex;gap:20px}
.reg-trust-founder{display:flex;align-items:center;gap:10px}
.reg-trust-founder img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.reg-trust-founder span{font-size:13px;font-weight:600;color:var(--lt)}
.reg input{width:100%;padding:12px 14px;background:var(--lbg);border:1px solid var(--lb);border-radius:10px;color:var(--lt);font-size:13px;outline:none;margin-bottom:9px}
.reg input::placeholder{color:var(--lt3)}
.reg input:focus{border-color:var(--blue)}
.role-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 14px}
.role{padding:11px 8px;border:1px solid var(--lb);border-radius:10px;background:#fff;color:var(--lt2);font-size:12px;cursor:pointer;text-align:center;transition:all .15s;line-height:1.4}
.role b{display:block;color:var(--lt);font-size:13px}
.role:hover{border-color:var(--lbm)}
.role.on{border-color:var(--blue);background:rgba(11,98,160,.04)}
.reg-note{font-size:12px;color:var(--lt3);text-align:center;margin-top:8px}
.reg-note.error{color:#c0392b;font-weight:600}
.reg-note.success{color:#0d5c33;font-weight:600}
.reg label.reg-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--lt2);margin-bottom:10px;line-height:1.5;cursor:pointer}
.reg label.reg-check input{width:auto;margin:2px 0 0}
.btn-reg{width:100%;background:var(--gr);color:#060714;font-weight:700;font-size:14px;padding:13px;border-radius:var(--rp);border:none;cursor:pointer;transition:opacity .15s}
.btn-reg:hover{opacity:.85}

/* ═══════ FOOTER ═══════ */
/* Szponzor-logósáv — homepage (teljes) és footer (kompakt) közös stílusa, lásd services/sponsors.js.
   Szándékosan FEHÉR/halványszürke "sziget", függetlenül a környező zóna dark/light színétől —
   a szponzorlogók jellemzően világos háttérre tervezettek, sötét háttéren rosszul olvashatók lennének. */
/* Támogatói logó-sáv (2026-08-i egyszerűsítés): TISZTA FEHÉR, teljes
   szélességű sáv, EGYETLEN egyenrangú, NAGYOBB logó-sor — nincs többé
   külön "fő támogató" doboz, nincs arany/ezüst tagolás. Egy fix
   "Üzlet + Design közösség támogatói:" felirat + a guruló logó-sáv. Minden
   logó a SAJÁT natúr arányában, cégenként állítható magassággal
   (companies.logo_display_height, lásd sponsors.js logoCellHtml())
   jelenik meg, object-fit:contain-nel, levágás nélkül. */
.sponsor-bar{background:#fff;border-top:1px solid var(--lb);border-bottom:1px solid var(--lb);padding:var(--sp-12) 5%;overflow:hidden}
.sponsor-bar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:28px}
.sp-label{font-size:14px;font-weight:700;color:var(--lt2);flex-shrink:0;padding-right:28px;border-right:1px solid var(--lb);max-width:180px;line-height:1.35}
.sp-marquee{flex:1;overflow:hidden;min-width:0}
.sp-marquee-track{display:flex;align-items:center;gap:40px;width:max-content;animation:sp-scroll 32s linear infinite}
.sp-marquee:hover .sp-marquee-track{animation-play-state:paused}
@keyframes sp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sp-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:auto}
.sp-logo img,.sp-logo a{height:100%;width:auto;max-width:none;object-fit:contain}
.sp-logo a{display:flex;align-items:center}
/* Logó nélküli (szöveges) helyőrzőknél a szélesség a tartalomhoz igazodik
   (auto, ésszerű max-szélességgel), a magasság a beállított
   logo_display_height-hez igazodik (inline style, lásd sponsors.js), a
   szöveg pedig szabadon tördelődhet. */
.sp-logo.sp-placeholder{width:auto;min-width:60px;max-width:150px;white-space:normal;line-height:1.25;border:1px dashed var(--lbm);color:var(--lt2);font-size:12px;font-weight:600;text-align:center;padding:4px 10px}
/* Kompakt (footer) változat — kisebb padding, a logók mérete (cégenkénti
   logo_display_height, inline style-lal) SZÁNDÉKOSAN megegyezik a homepage
   teljes verziójával, nem írjuk felül. */
.sponsor-bar-compact{padding:16px 5%}
.sponsor-bar-compact .sp-label{font-size:12px;padding-right:16px;max-width:120px}
.sponsor-bar-compact .sp-marquee-track{gap:26px}
@media(max-width:600px){.sp-label{display:none}}

/* FIX (nem-guruló) homepage logósáv (2026-08-16-i "logósáv áttervezés" kör)
   — kevés szponzornál a középre zárt, statikus sor nyugodtabb, mint a
   végtelen görgetés. Jelentősen nagyobb függőleges légtér (--sp-20), hogy
   a logók körül legyen levegő. */
/* Fehér háttér, ahogy eredetileg — a --lbg-s, varrat nélküli kísérletet a
   felhasználó visszavonta (2026-08-16, "jobb volt fehér háttérrel"). */
.sponsor-bar-static{padding:var(--sp-20) 0;background:#fff;border-top:1px solid var(--lb);border-bottom:1px solid var(--lb)}
/* KONTÉNER-SZÉLESSÉG/MARGÓ — UGYANAZ, mint a szakemberkereső blokk saját
   .wrap-ja (szakemberek.css: max-width:1160px, padding:0 24px), hogy a sáv
   ne legyen szélesebb/máshova igazított, mint az alatta lévő tartalom
   (2026-08-16-i felhasználói észrevétel, 1. pont). */
.sponsor-bar-static .sponsor-bar-in{max-width:1160px;padding:0 24px;gap:40px}
/* A felirat mérete az ALATTA lévő szekció TÖRZSSZÖVEGÉHEZ igazítva (nem
   szekció-cím méret többé — 2026-08-16-i korrekció, 2. pont: a korábbi
   28px "kilógott" az alatta lévő blokkokhoz képest). Balra marad — ez a ma
   élő állapot (labelPosition: 'left', homepage.js) —, a szegélyvonal
   visszakerült, mert egy kis felirathoz ez illik, nem egy nagy címhez. */
.sponsor-bar-static .sp-label{font-size:14px;font-weight:700;letter-spacing:normal;color:var(--lt2);border-right:1px solid var(--lb);padding-right:24px;max-width:170px;line-height:1.35}
/* 2026-08-16-i "logósáv javítások" kör, 3. pont — a logók 60px→64px-re
   nőttek tovább, a térközök arányosan követik. */
.sp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:52px;flex:1;min-width:0}
/* Logó nélküli szöveges helyőrző (Business Vibes stb.) — VIZUÁLISAN
   EGYENRANGÚ a képes logókkal: nincs keret/doboz, a betűsúly/méret nem
   "kilóg" a logók optikai súlyához képest (2026-08-16-i korrekció, 4. pont
   — korábban túl nagy/félkövér volt). */
.sp-logo.sp-placeholder-plain{border:none;width:auto;min-width:0;padding:0;color:var(--lt2);font-size:15px;font-weight:600;letter-spacing:.1px;display:flex;align-items:center}
/* "Felirat felül" elrendezés — a választott végleges változat. */
.sponsor-bar-label-top .sponsor-bar-in-top{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px}
.sp-label-top{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--lt2)}
@media(max-width:600px){
  .sponsor-bar-static{padding:var(--sp-14) 0}
  .sponsor-bar-static .sponsor-bar-in{padding:0 24px}
  .sp-row{gap:34px}
}

footer{background:var(--bg);border-top:1px solid var(--bd);padding:44px 5% 32px}
.fi{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;margin-bottom:32px}
.fi-simple{grid-template-columns:1.5fr 1fr}
@media(max-width:700px){.fi-simple{grid-template-columns:1fr}}
@media(max-width:900px){.fi{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.fi{grid-template-columns:1fr 1fr}}
.fdesc{font-size:12px;color:var(--td3);line-height:1.7;margin-top:8px;max-width:210px}
.fc .fc-label{font-size:12px;font-weight:700;color:var(--td2);letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px}
.fc a{display:block;font-size:13px;color:var(--td3);margin-bottom:7px;transition:color .15s}
.fc a:hover{color:var(--td)}
.fbot{max-width:1200px;margin:0 auto;padding-top:20px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.fbot span{font-size:12px;color:var(--td3)}
.nrcb{font-size:12px;color:var(--td3);border:1px solid var(--bd);border-radius:var(--rp);padding:4px 12px}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(108,226,244,.2);border-radius:2px}

/* ═══════════════ CIKK / ESETTANULMÁNY SABLON ═══════════════ */
.crumb{max-width:1000px;margin:0 auto;padding:20px 5% 0;font-size:12px;color:var(--lt3)}
/* Képzés-részletoldal vissza-út (2026-08, "3. csomag") — felül a crumb
   alatt, alul a kapcsolódó tartalmak után. Csak a /kepzesek típusnál. */
.training-back-link{max-width:1000px;margin:0 auto;padding:10px 5% 0}
.training-back-link a{font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none}
.training-back-link a:hover{text-decoration:underline}
.crumb a{color:var(--blue)}
.crumb a:hover{opacity:.7}

.art-wrap{max-width:1000px;margin:0 auto;padding:18px 5% 0}
.art-cat{margin-bottom:14px}
.art-title{font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.16;color:var(--lt);margin-bottom:16px}
/* Alcím — a cím pontosítása (nem a lead) — nagyobb, halványabb a Word-
   dokumentum-mintát követve; a kártyákon sosem jelenik meg (ott a lead marad). */
.art-subtitle{font-size:clamp(17px,2vw,21px);color:var(--lt3);font-weight:500;line-height:1.5;margin:-6px 0 18px}
.art-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--lt3);margin-bottom:28px;flex-wrap:wrap}
.member-submission-badge{display:inline-block;font-size:12px;font-weight:700;color:#946F1F;background:rgba(230,204,140,.18);padding:6px 14px;border-radius:20px;margin-bottom:20px}

/* EGYETLEN, közös PRÉMIUM-jelvény — cikk-oldal, publikus profil és a
   dashboard (kliens-JS, ugyanezt az osztályt másolja) mind ezt használja,
   hogy a PRÉMIUM-jelzés stílusa ne csússzon szét egymásnak ellentmondó
   verziókra. Szándékosan ugyanaz a vizuális alap, mint a fenti
   .member-submission-badge-é (arany, pill-alak). */
.premium-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#946F1F;background:rgba(230,204,140,.18);padding:6px 14px;border-radius:20px}

/* Tier/jelvény pillek (badge-pill-row) — eredetileg csak a dashboard saját,
   beágyazott <style>-jében élt; a publikus profil-oldal (publicMembers.js)
   ugyanezt az osztályt használja, de site.css nélkül styling nélkül
   maradt volna. Innentől EGY helyen él mindkét felületnek. */
.badge-pill-row{display:flex;flex-wrap:wrap;gap:6px}
.badge-pill{font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;color:#fff;letter-spacing:.2px;display:inline-block}

/* ═══════════════ SZAKEMBER-PROFIL (LinkedIn-szerű elrendezés) ═══════════════ */
/* Valódi, fix 4:1 arány — PONTOSAN egyezik a dashboard Cropper.js
   aspectRatio:4-ével (public/dashboard/app.html), hogy a feltöltéskor
   látott kivágás sose térjen el az éles megjelenéstől. A max-height csak
   nagyon széles (>1200px) monitoron kapcsol be, ott elfogadható a kis
   arány-eltérés — enélkül a korábban javított "túl magas széles
   monitoron" hiba térne vissza. */
.profile-cover{width:100%;aspect-ratio:4/1;max-height:300px;background:var(--gr);overflow:hidden}
.profile-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* Az avatár abszolút pozicionált, a borítóhoz KÖZVETLENÜL kapcsolódó
   .profile-head-wrap-hez képest — nem egy negatív margin a NEM-szomszédos
   .profile-head-re (ami a crumb/art-wrap padding miatt véletlenszerű
   távolságot eredményezett volna, "egybecsúszást" okozva a borítóval).
   A wrap explicit magassága (66px) hely-tartalékot ad az avatár alsó
   felének, hogy a rákövetkező tartalom (crumb) ne csússzon az avatár alá. */
.profile-head-wrap{max-width:1000px;margin:0 auto;padding:0 5%;position:relative;height:66px}
.profile-avatar-lg{position:absolute;top:-56px;left:5%;width:112px;height:112px;border-radius:50%;border:4px solid var(--lbg);background:linear-gradient(135deg,#6CE2F4,#A88FEA);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#060714;overflow:hidden;z-index:2}
.profile-avatar-lg img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(max-width:700px){
  .profile-head-wrap{height:50px}
  .profile-avatar-lg{width:84px;height:84px;top:-42px;font-size:24px}
}

.profile-name-row{margin-top:14px}
.profile-company-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:14px 0}
.profile-company-row a{font-size:13px;color:var(--blue);font-weight:600}
.profile-company-row a:hover{opacity:.75}
.profile-company-badge{display:flex;align-items:center;gap:6px}

/* "Jegyeim" (routes/publicTickets.js + dashboard/app.html) — jegy-lista
   soronkénti kártyák. A .badge az admin/dashboard.html-ben már létező,
   azonos-nevű osztály mintáját követi — itt kell újra, mert ez a public/
   dashboard oldalak KÖZÖS stíluslapja (site.css), nem az admin saját,
   beágyazott <style>-je. */
.ticket-list{display:flex;flex-direction:column;gap:10px}
.ticket-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:#fff;border:1px solid var(--lb);border-radius:12px}
.ticket-row-number{font-weight:800;font-size:15px;margin-bottom:4px}
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:12px}
.badge.active{background:rgba(13,92,51,.1);color:#0d5c33}
.badge.inactive{background:rgba(180,60,60,.1);color:#b43c3c}

/* Publikált tartalmak — a KÖZÖS .npc kártya (pageTemplate.js cardHtml()),
   de SAJÁT, a profil-kontextusnak megfelelő, tetszőleges elemszámhoz
   alkalmazkodó grid — NEM a .spec-grid (a .spc/szakember-kereső kártyához
   épült, más méretezéssel) és NEM a .news-grid (a /cikkek listaoldal fix,
   aszimmetrikus 3-oszlopos/2-soros elrendezése, pontosan 5 elemre tervezve
   — kevesebb elemnél furcsán üres/aszimmetrikus lenne). */
.profile-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

/* "Kiemelt tartalom" kártyák — máshol megjelent anyagok (nem a saját
   cardHtml()-es content_items kártya, mert a belső szerkezet típusonként
   eltér: link-kártya vs. beágyazott YouTube-videó). */
.featured-card{background:#fff;border:1px solid var(--lb);border-radius:14px;overflow:hidden;transition:all .2s;display:block;text-decoration:none}
a.featured-card:hover{border-color:var(--lbm);transform:translateY(-3px);box-shadow:0 8px 28px rgba(26,27,46,.1)}
.featured-thumb{height:140px;background:linear-gradient(135deg,#6CE2F4,#A88FEA);display:flex;align-items:center;justify-content:center}
.featured-thumb-ico{font-size:32px;opacity:.85}
.featured-body{padding:12px 14px;display:flex;align-items:flex-start;gap:8px}
.fi-ico{flex-shrink:0;font-size:14px}
.featured-title{font-size:13.5px;font-weight:600;color:var(--lt);line-height:1.4}
.featured-card-video{padding-bottom:0}
.featured-card-video .featured-body{padding-bottom:10px}
.featured-card-video .yt-embed{margin:0}

.profile-empty-hint{font-size:13px;color:var(--lt3);padding:10px 0}

/* Kapcsolatfelvételi kártya — korábban a .field/.msg osztályoknak
   egyáltalán nem volt CSS-e a publikus oldalakon (csak a dashboard/admin
   saját, beágyazott <style>-jében léteztek), ezért dísztelen, keret
   nélküli lista volt. Innentől a .reg kártya vizuális nyelvét követi. */
.contact-card{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:28px 30px;margin-top:8px}
.contact-card .field{margin-bottom:14px}
.contact-card .field label{display:block;font-size:12.5px;font-weight:600;color:var(--lt2);margin-bottom:6px}
.contact-card .field input,.contact-card .field textarea{width:100%;padding:11px 13px;background:var(--lbg);border:1px solid var(--lb);border-radius:10px;color:var(--lt);font-size:13.5px;outline:none;font-family:inherit}
.contact-card .field input:focus,.contact-card .field textarea:focus{border-color:var(--blue)}
.msg{font-size:13px;margin:8px 0}
.msg.success{color:#1a9e6e}
.msg.error{color:#c0392b}
.art-meta .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6CE2F4,#A88FEA);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#060714;flex-shrink:0}
.art-meta .nm{color:var(--lt);font-weight:600}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--lt3);flex-shrink:0}

/* aspect-ratio:1200/630 (2026-08-16-i javítás) — a Címlapkép-generátor
   EGYETLEN gyártott mérete az OG-kép (1200×630 = 1,90:1), a korábbi 16/9
   (1,78:1) doboz kb. 6%-ot vágott le a kép tetejéből/aljából a
   background-size:cover miatt — az admin élő előnézete ezt nem mutatta,
   így a szélső 9-pontos rács-pozíciók a cikkoldalon a vártnál közelebb
   estek a szélhez. Ezzel a dobozzal a cikkoldal pontosan azt az arányt
   kapja, amit a szerkesztő látott (WYSIWYG). */
.art-img{width:100%;aspect-ratio:1200/630;border-radius:16px;overflow:hidden;margin-bottom:32px;display:flex;align-items:center;justify-content:center;position:relative}
.art-img svg{width:88px;height:88px;opacity:.8}

.art-body{font-size:16px;color:var(--lt2);line-height:1.8;max-width:820px}
.art-body p{margin-bottom:18px}
/* Fejezetcím-térköz — hosszú (2000+ szavas) anyagoknál a korábbi 38px/14px
   szinte hozzátapadt az előző bekezdéshez; jóval nagyobb levegő ELŐTTE (a
   fejezethatár vizuálisan is érezhető legyen), kevesebb UTÁNA (a cím és a
   hozzá tartozó szöveg összetartozzon). */
.art-body h2{font-size:21px;font-weight:700;color:var(--lt);margin:2.5em 0 0.8em;letter-spacing:-.01em}
.art-body h3{font-size:17.5px;font-weight:700;color:var(--lt);margin:1.8em 0 0.6em;letter-spacing:-.01em}
.art-body ul{margin:0 0 18px 20px}
.art-body li{margin-bottom:9px}
.art-body strong{color:var(--lt)}
.art-body img{max-width:100%;height:auto;border-radius:10px;display:block;margin:20px 0}
/* Cikk-törzsbe szúrt kép — caption + igazítás (hosszú cikkek kiegészítése).
   "full" = a törzs teljes szélessége (alapértelmezett .art-body img szabály
   érvényesül rá is); "narrow" = keskenyebb, középre. */
.art-body figure.art-img-figure{margin:24px 0}
.art-body figure.art-img-figure img.art-img-inline{margin:0}
.art-body figure.art-img-narrow{max-width:480px;margin-left:auto;margin-right:auto}
.art-body figcaption{font-size:13px;color:var(--lt3);text-align:center;margin-top:8px;line-height:1.5}
/* Idézet — a betűméret ~1.15×-je a törzsszövegnek (a bal oldali színes
   vonal + halvány háttér marad, ez adja a valódi kiemelést a puszta
   behúzáson felül). */
.art-body blockquote{border-left:3px solid var(--cy);background:rgba(108,226,244,.06);font-style:italic;font-size:1.15em;color:var(--lt);padding:14px 20px;margin:22px 0;border-radius:0 8px 8px 0}
.art-body blockquote p{margin-bottom:0}
/* Linkek a cikk-törzsben — eddig csak öröklött szín (gyakorlatilag semmi)
   különböztette meg őket, ami akadálymentességi szempontból is kevés. */
.art-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.art-body a:hover{opacity:.8}
.art-lead{font-size:18px;color:var(--lt);line-height:1.7;font-weight:500;margin-bottom:22px}
/* Záró olvasási idő — a cikk végén, a záró elemek között (hosszú
   anyagoknál hasznos visszajelzés, hogy "ennyi volt"). */
.art-endread{font-size:13px;color:var(--lt3);margin-top:32px;padding-top:18px;border-top:1px solid var(--line, rgba(255,255,255,.08))}

.pull{border-left:3px solid var(--blue);padding-left:20px;font-size:17px;color:var(--lt);line-height:1.65;margin:30px 0;font-style:italic}

/* eredmények számokban (esettanulmány) */
.res-block{background:var(--lband);border:1px solid var(--lb);border-radius:16px;padding:26px 24px;margin:8px 0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:600px){.res-block{grid-template-columns:1fr}}
.res-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lt3);grid-column:1/-1;margin-bottom:2px}
.res-stat{text-align:center}
.res-num{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.res-lbl{font-size:12px;color:var(--lt2);margin-top:7px;line-height:1.4}

/* "Ebben a cikkben szerepel:" jelvény-sor — cikk-tagelés (pageTemplate.js
   taggedMembersBlock()), CSAK jóváhagyott tagelésekkel */
.tagged-members-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:1000px;margin:28px auto 0;padding:0 5%}
.tagged-members-label{font-size:12px;color:var(--lt3);font-weight:600}

.art-related{max-width:1000px;margin:56px auto 0;padding:36px 5% 60px;border-top:1px solid var(--lb)}
.art-related-lbl{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lt3);margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:600px){.rel-grid{grid-template-columns:1fr}}
.rel-card{background:#fff;border:1px solid var(--lb);border-radius:12px;padding:16px;transition:all .2s;display:block}
.rel-card:hover{border-color:var(--lbm);transform:translateY(-2px)}
.rel-card .pill{margin-bottom:9px}
.rel-card p{font-size:13px;font-weight:600;color:var(--lt);line-height:1.45}

.art-cta{max-width:1000px;margin:0 auto;padding:0 5% 60px}

/* AI-összefoglaló ("Röviden") doboz — AEO-idézhetőségre optimalizált, kiemelt blokk */
.ai-summary-box{background:#fff;border:1px solid var(--lbm);border-left:4px solid var(--cy);border-radius:12px;padding:18px 20px;margin-bottom:24px}
.ai-summary-lbl{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ai-summary-box p{font-size:15px;color:var(--lt);line-height:1.6;margin:0}
.ai-summary-q{font-weight:700;margin-bottom:4px!important}
.ai-summary-a{color:var(--lt2)!important}

/* Tartalomjegyzék — H2/H3-ból generálva, szerver-oldalon */
.toc-box{background:var(--lband);border-radius:12px;padding:16px 20px;margin-bottom:24px}
.toc-lbl{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lt3);margin-bottom:10px}
.toc-box ol{margin:0;padding-left:18px}
.toc-box li{font-size:13px;margin-bottom:6px}
.toc-box li.toc-h3{margin-left:16px;list-style-type:circle}
.toc-box a{color:var(--blue);font-weight:500}
.toc-box a:hover{text-decoration:underline}

/* YouTube-beágyazás — reszponzív 16:9 konténer, fix szerver-sablonból (lásd services/youtube.js) */
.yt-embed{position:relative;width:100%;padding-top:56.25%;margin:24px 0;border-radius:12px;overflow:hidden;background:#000}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* "Lite" YouTube-beágyazás (2026-08-16-i hero-videó kör) — miniatűr + play
   gomb, a tényleges iframe csak kattintásra épül be (public/assets/ytLite.js).
   16:9, a hero jobb hasábjához illesztve (nincs margó, mert ott a
   .hero-right saját gap-je adja a térközt, szemben a cikktörzsbeli
   .yt-embed-gel). */
.yt-lite{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-lite-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(6,7,20,.68);border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;line-height:1;padding-left:4px;transition:transform .15s,background .15s}
.yt-lite:hover .yt-lite-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(6,7,20,.85)}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* Podcast-link gomb a cikk alján */
.podcast-btn{display:inline-flex;align-items:center;gap:8px;background:var(--lt);color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:var(--rp);margin-top:8px}
.podcast-btn:hover{opacity:.85}

/* Beágyazott podcast/videó lejátszó (Tartalom-blokk, 3. ütem) — a cím+metasor
   után, a leírás előtt jelenik meg (lásd embedPlayer.js). */
.ep-player{margin:20px 0;border-radius:14px;overflow:hidden;background:#0b0f1c}
.ep-embed iframe{display:block;width:100%;border:none}
.ep-fallback-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:22px;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.ep-fallback-btn:hover{opacity:.85}
.ep-duration{padding:8px 14px 0;font-size:12px;color:#aab0c4}
.ep-buttons{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 14px}
.ep-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#cdd2e6;background:rgba(255,255,255,.08);padding:7px 13px;border-radius:999px;text-decoration:none}
.ep-btn:hover{background:rgba(255,255,255,.15)}

/* Lejátszás-ikon a lista-kártyán, ha a tételnek van beágyazható podcast/videó linkje */
.npc-play-icon{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(11,15,28,.55);backdrop-filter:blur(4px);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding-left:2px}

/* Kapcsolódó/külső linkek lista a cikk törzse alatt */
.article-links{list-style:none;margin:20px 0;padding:0}
.article-links li{margin-bottom:8px}
.article-links a{color:var(--blue);font-weight:600;font-size:14px}
.article-links a:hover{text-decoration:underline}

/* ═══════ KLUB ALOLDALAK (/klub/free, /klub/tudas, /klub/premium) ═══════ */
.club-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
@media(max-width:800px){.club-hero{grid-template-columns:1fr}}
.club-hero-photos{display:flex;gap:12px}
.club-hero-photos img{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:3/4;background:var(--lbg);display:block}
.club-checklist{list-style:none;padding:0;margin:16px 0 24px}
.policy-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px}
.policy-list li strong{display:block;font-size:15px;color:var(--lt);margin-bottom:6px}
.policy-list li p{font-size:14px;color:var(--lt2);line-height:1.6;margin:0}
.club-checklist li{font-size:13px;color:var(--lt2);padding:5px 0;display:flex;gap:8px;align-items:flex-start}
.club-checklist .tier-check{color:var(--accent,var(--blue))}

.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:800px){.benefit-grid{grid-template-columns:1fr}}
.benefit-card{background:#fff;border:1px solid var(--lb);border-radius:14px;padding:20px 18px}
.benefit-card.highlight{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--gr) border-box}
.benefit-title{font-size:14px;font-weight:700;color:var(--lt);margin-bottom:8px}
.benefit-desc{font-size:12.5px;color:var(--lt2);line-height:1.55}

.empty-cta-box{background:#fff;border:1px solid var(--lb);border-radius:16px;padding:44px 32px;text-align:center;max-width:560px;margin:0 auto}
.empty-cta-box h2{font-size:22px;margin-bottom:10px}
.empty-cta-box p{font-size:14.5px;color:var(--lt2);max-width:440px;margin:0 auto 20px;line-height:1.55}

.club-cal-list{display:flex;flex-direction:column;gap:10px}
.club-cal-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--lb);border-radius:12px;padding:14px 18px}
@media(max-width:600px){.club-cal-row{flex-wrap:wrap}}
.club-cal-num{width:32px;height:32px;border-radius:50%;background:var(--lbg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--lt2);flex-shrink:0}
.club-cal-body{flex:1;min-width:0}
.club-cal-date{font-size:12px;color:var(--lt3);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.club-cal-topic{font-size:14px;font-weight:600;color:var(--lt);margin:2px 0}
.club-cal-speaker{font-size:12px;color:var(--lt2)}
.club-cal-speaker.tbd{color:var(--lt3);font-style:italic}
.club-cal-btn{background:transparent;border:1px solid var(--lb);border-radius:var(--rp);color:var(--blue);font-size:12px;font-weight:600;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.club-cal-btn:hover{border-color:var(--blue);background:rgba(11,98,160,.04)}

/* ═══════ Tartalom-kereső + téma-pillek + típus-gyorslinkek (Hírek & Inspiráció, /cikkek, /esetek) ═══════ */
.topic-search{display:flex;border:1px solid var(--lbm);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:14px;transition:border-color .2s}
.topic-search:focus-within{border-color:var(--blue)}
.topic-search-ico{display:flex;align-items:center;padding:0 14px;color:var(--lt3)}
.topic-search input{flex:1;padding:13px 14px 13px 0;background:none;border:none;color:var(--lt);font-size:14px;outline:none}
.topic-search input::placeholder{color:var(--lt3)}

.topic-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.topic-pill{font-size:12px;font-weight:600;padding:6px 14px 6px 10px;border-radius:var(--rp);border:1px solid var(--lb);background:#fff;color:var(--lt2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.topic-pill:hover{border-color:var(--lbm)}
.topic-pill .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.topic-pill.on{color:#fff;border-color:transparent}
.topic-pill-more{font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--rp);border:1px dashed var(--lbm);background:transparent;color:var(--lt2);cursor:pointer}
.topic-pill-more:hover{border-color:var(--blue);color:var(--blue)}

.type-quicklinks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding-top:14px;border-top:1px solid var(--lb)}
.type-quicklink{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:7px 14px;border-radius:10px;background:var(--lbg);color:var(--lt2);text-decoration:none;transition:all .15s}
.type-quicklink:hover{background:var(--lband);color:var(--lt)}
.type-quicklink.inactive{opacity:.5;cursor:default;pointer-events:none}
.type-quicklink .soon{font-size:12px;font-weight:700;background:var(--lb);padding:2px 6px;border-radius:8px;margin-left:2px}

.npc-author{font-size:12px;font-weight:600;color:var(--lt2)}

/* Kurátori szemle — 5. ütem (2026-08): kártya-jelvény + kurátor-sor. */
.npc-curator{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--lt3);margin-top:4px}
.npc-curator-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.npc-curator-av-fallback{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Generált márka-kártya (szemle-kártyák) — a magyar cím + forrás neve a
   minta-hátterű képen belül, tipográfiai megjelenés, fotó nélkül. */
/* padding-top: hely a .npc-pill jelvénynek (top:12px, kb. 24px magas) — enélkül
   a cím ugyanabba a felső sávba kerülne, mint a jelvény, és egymásra csúsznak. */
.npc-brandcard-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:44px 16px 16px}
.npc-brandcard-title{color:#fff;font-size:16px;font-weight:800;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.npc-feat .npc-brandcard-title{font-size:20px}
.npc-brandcard-source{color:rgba(255,255,255,.75);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}

/* Részletoldal — forrás-sáv + kurátori komment-doboz (5. ütem). */
.rev-sourcebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--lbg);border-radius:12px;padding:12px 16px;margin:14px 0;font-size:13px;color:var(--lt2)}
.rev-sourcebar a.rev-original-btn{margin-left:auto;background:var(--blue);color:#fff;padding:8px 16px;border-radius:8px;font-weight:600;font-size:12.5px;text-decoration:none;white-space:nowrap}
.rev-og-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0}
.rev-original-title{font-size:12px;color:var(--lt3);font-style:italic;margin-top:2px}
.rev-comment-box{border:1.5px solid #c9b8f5;background:#f3edfe;border-radius:14px;padding:0 20px 18px;margin:22px 0;box-shadow:0 2px 10px rgba(91,79,187,.06)}
.rev-comment-box .rev-comment-header{margin:0 -20px 14px;padding:9px 20px;background:#5B4FBB;color:#fff;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border-radius:12px 12px 0 0}
.rev-comment-box .rev-comment-who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rev-comment-box .rev-comment-who img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.rev-comment-box .rev-comment-who .av-fallback{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.rev-comment-box .rev-comment-name{font-weight:700;color:var(--lt)}
.rev-comment-box .rev-comment-name-link{font-weight:700;color:var(--lt);text-decoration:underline;text-underline-offset:2px}
.rev-comment-box .rev-comment-title{font-size:12px;color:var(--lt3)}
.rev-comment-box .rev-comment-role{font-size:12px;color:#5B4FBB;font-weight:600;margin-top:2px}
.rev-comment-box .rev-comment-text{font-size:14.5px;line-height:1.65;color:var(--lt);white-space:pre-line}
.rev-legal-note{margin-top:26px;font-size:12px;color:var(--lt3);background:var(--lbg);border-radius:12px;padding:14px 18px;line-height:1.6}
@media(max-width:640px){
  .rev-sourcebar{flex-direction:column;align-items:flex-start}
  .rev-sourcebar a.rev-original-btn{margin-left:0;width:100%;text-align:center}
}

/* Támogatói blokkok a tartalmakban — szándékosan SEMLEGES osztálynevek
   (npc-support-*, nem "ad"/"sponsor-banner"), hogy a hirdetésblokkolók ne
   szűrjék ki. Három variáns: közösségi támogató (sötét, hangsúlyos),
   cikk-szponzor (sötét, kicsit visszafogottabb árnyalat), szerző cége
   (világos, visszafogott — hogy ne versenyezzen a fizető támogatóval). */
.npc-support{border-radius:14px;padding:18px 20px;display:flex;gap:18px;align-items:center;margin:22px 0}
.npc-support-body{flex:1}
.npc-support-label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;font-weight:700;margin-bottom:6px}
.npc-support-text{font-size:14px;line-height:1.6}
.npc-support-text a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.npc-support-thanks{font-style:italic;opacity:.85;display:inline-block;margin-top:4px}
.npc-support-logo{flex:none;width:120px;height:72px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:10px}
.npc-support-logo img{max-width:100%;object-fit:contain}

.npc-support-club{background:#141b2b;color:#e8ecf5}
.npc-support-club .npc-support-text a{color:#8fd0ff}

.npc-support-article{background:#2b3648;color:#e8ecf5}
.npc-support-article .npc-support-text a{color:#8fd0ff}

.npc-support-author{background:var(--lbg);color:var(--lt);border:1px solid var(--lb);padding:14px 18px}
.npc-support-author .npc-support-logo{width:88px;height:52px;border:1px solid var(--lb)}
.npc-support-author .npc-support-text{font-size:13px}
.npc-support-author .npc-support-text a{color:var(--blue)}
.npc-support-author .npc-support-label{opacity:.5}

@media(max-width:640px){
  .npc-support{flex-direction:column;text-align:center}
  .npc-support-logo{width:100%;max-width:170px}
}

/* Főoldali banner — EGY markáns, téglalap-alakú támogatói felület (a
   cikk-alatti "közösségi támogató" blokk nagyobb, önálló változata; a
   korábbi vékony sáv-variáns megszűnt, 2026-08-i javítási kör).
   Szándékosan SEMLEGES osztálynevek (npc-banner-*) — a hirdetésblokkolók
   elkerülésére. */
.npc-banner-wrap{max-width:1200px;margin:0 auto;padding:0 5%}

.npc-banner{
  position:relative;display:flex;align-items:center;gap:28px;overflow:hidden;
  text-decoration:none;color:inherit;border-radius:20px;background:#141b2b;
  min-height:200px;padding:34px 40px;margin:6px 0;
}
/* Sötétítő overlay a szöveg olvashatóságáért — akkor is kell, ha a háttér a
   klub generált mintája, és akkor is, ha a támogató saját banner-képe. */
.npc-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,7,20,.78) 0%,rgba(6,7,20,.45) 60%,rgba(6,7,20,.2) 100%)}

.npc-banner-logo-card{
  position:relative;z-index:1;flex:none;width:160px;height:100px;background:#fff;
  border-radius:14px;display:flex;align-items:center;justify-content:center;padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.npc-banner-logo-card img{max-width:100%;max-height:100%;object-fit:contain}

.npc-banner-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:560px}
.npc-banner-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
.npc-banner-name{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:4px}
.npc-banner-text{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.92);margin-bottom:6px}
.npc-banner-cta-btn{background:#fff;color:#141b2b;font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:999px}

.npc-banner-empty{
  display:flex;align-items:center;justify-content:center;min-height:120px;
  background:transparent;border:1.5px dashed var(--lb);color:var(--lt3);padding:16px;
  border-radius:20px;margin:6px 0;
}
.npc-banner-empty::before{content:none}
.npc-banner-empty-text{font-size:13px;font-weight:600}

@media(max-width:640px){
  .npc-banner{flex-direction:column;align-items:flex-start;text-align:left;padding:26px 24px;gap:16px;min-height:0}
  .npc-banner-logo-card{width:120px;height:76px}
  .npc-banner-name{font-size:19px}
  .npc-banner-text{font-size:13.5px}
}

/* ═══════ EGYSÉGES CROPPER (2026-08, "4. csomag") ═══════
   Megosztott a tag-dashboard (public/dashboard/app.html) és az admin-
   dashboard (public/admin/dashboard.html) között — lásd unifiedCropper.js.
   A korábbi, felületenként eltérő FIX PIXELES max-height (300/360/440px)
   volt a gyökér-oka annak, hogy álló tájolású forrásképeknél a kép
   letterbox-szerűen összezsugorodott, a keret pedig alig látható,
   mozdíthatatlannak tűnő csíkká vált. Viewport-relatív, adaptív magasság
   helyette — bőven elég hely álló képeknél is. */
.unified-cropper-wrap{max-height:min(60vh,560px);min-height:220px;overflow:hidden;background:#333;display:flex;align-items:center;justify-content:center}
.unified-cropper-wrap img{max-width:100%}
.unified-cropper-hint{font-size:12px;color:var(--lt3,#8892b8);margin:6px 0 0}
.unified-cropper-mode-toggle{display:none;gap:6px;margin-bottom:10px}
.unified-cropper-mode-toggle button{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--lb,#e3e6f0);background:#fff;color:var(--lt2,#4a4e6e);font-size:12.5px;font-weight:600;cursor:pointer}
.unified-cropper-mode-toggle button.on{background:var(--lt,#1a1b2e);color:#fff;border-color:var(--lt,#1a1b2e)}
/* Illesztés-előnézet — a kép eredeti arányban, márka-gradiens hátterű dobozban */
.unified-cropper-fit-preview{background:none;padding:0}
.unified-cropper-fitbox{width:100%;max-width:420px;margin:0 auto;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6CE2F4,#A88FEA 55%,#E080CC)}
.unified-cropper-fitbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}