/*
 * MEA Klub – a klubfelület stíluslapja.
 *
 * Forrás: a 2026-07-28-i látványterv (latvanyterv/mea-club-latvanyterv.html),
 * a végleges márkakékre (#175FEE) áthúzva. A látványtervben még a Derült Ég
 * ELŐTTI #389CFF szerepelt; Mea 2026-08-06-án az eredeti, mélyebb kéket
 * választotta, hogy a logó és a felület egy színt beszéljen.
 *
 * NE szerkeszd kézzel a színeket: a :root változóit írd át, minden abból él.
 */

/* Manrope – self-hosted, hogy ne kelljen Google Fonts (süti és GDPR miatt). */
@font-face{
  font-family:'Manrope';
  src:url('manrope-var.woff2') format('woff2-variations');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   MEA Club – tanulói felület látványterv
   Arculat: arculati kézikönyv v1 alapján
   Kék #175FEE · Narancs #FF9B38 · Manrope · 70/20/10
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#175FEE;
  --blue-600:#1453D0;
  --blue-700:#1147B3;
  --blue-050:#F0F4FE;
  --blue-100:#E3EAFD;
  --orange:#FF9B38;
  --orange-600:#F0810F;
  --orange-050:#FFF4E9;
  --ink:#2E3A4A;
  --ink-soft:#5A6B80;
  --muted:#8494A8;
  --line:#E6EBF2;
  --line-soft:#EFF3F8;
  --bg:#F7F8FA;
  --white:#fff;
  --ok:#12A87C;
  --ok-050:#E7F7F2;
  --danger:#D9534F;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(46,58,74,.05);
  --sh-2:0 2px 6px rgba(46,58,74,.05), 0 10px 28px rgba(46,58,74,.06);
  --sh-3:0 6px 18px rgba(46,58,74,.08), 0 24px 48px rgba(46,58,74,.09);
  --sh-blue:0 8px 24px rgba(23,95,238,.28);
  --sh-orange:0 8px 22px rgba(255,155,56,.32);

  --sidebar:262px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font-family:inherit;font-size:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:3px solid rgba(23,95,238,.5);outline-offset:2px;border-radius:6px}

.icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.icon.sm{width:18px;height:18px}
.icon.xs{width:15px;height:15px;stroke-width:2}
.icon.lg{width:26px;height:26px}
.icon.fill{fill:currentColor;stroke:none}

/* ---------- LAYOUT ---------- */
.app{display:flex;min-height:100vh;min-height:100dvh}

.sidebar{
  width:var(--sidebar);flex:none;background:var(--white);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:60;
  transition:transform .28s var(--ease);
}
.brand{display:flex;align-items:center;gap:11px;padding:24px 22px 20px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,var(--blue) 0%,var(--blue-600) 55%,var(--orange) 160%);
  box-shadow:var(--sh-blue);
  display:grid;place-items:center;
}
.brand-mark svg{width:24px;height:24px}
.brand-mark img{width:25px;height:auto;display:block}
.brand-text{line-height:1.1}
.brand-text b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.brand-text span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:2px}

.nav{padding:6px 14px;flex:1;overflow-y:auto}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:14px 10px 7px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;color:var(--ink-soft);
  transition:background .18s var(--ease),color .18s var(--ease);
  position:relative;min-height:44px;
}
.nav a:hover{background:var(--blue-050);color:var(--blue-700)}
.nav a.active{background:var(--blue-050);color:var(--blue-700)}
.nav a.active::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--blue);
}
.nav a .badge{
  margin-left:auto;background:var(--orange);color:#fff;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px;
}

.side-foot{padding:14px;border-top:1px solid var(--line-soft)}
.side-card{
  background:linear-gradient(160deg,var(--blue-050),#fff);
  border:1px solid var(--blue-100);border-radius:var(--r-md);padding:14px;
}
.side-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-bottom:10px}
.side-card b{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px}
.side-card-mail{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--blue);text-align:center;overflow-wrap:anywhere}

.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:40;background:rgba(247,248,250,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:0 34px;height:74px;display:flex;align-items:center;gap:18px;
}
.hamburger{display:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center;color:var(--ink-soft)}
.hamburger:hover{background:var(--white)}
.page-title{font-size:19px;font-weight:800;letter-spacing:-.02em}
.page-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:-2px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.searchbox{
  display:flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:0 16px;height:42px;width:250px;color:var(--muted);
  transition:border-color .18s,box-shadow .18s;
}
.searchbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,95,238,.12)}
.searchbox input{border:0;outline:0;background:none;width:100%;font-size:14px;color:var(--ink)}
.searchbox input::placeholder{color:var(--muted)}
.icon-btn{
  width:42px;height:42px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-soft);position:relative;
  transition:border-color .18s,color .18s;
}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:999px;background:var(--orange);border:2px solid var(--white)}
/* Profilkép-korong. Domború: fentről fény, alul árnyék, alatta vetett árnyék –
   a korong kiemelkedik a lapból, és ugyanez a keret fogadja a feltöltött
   fotót is. (Lali választása, 2026-09-09.) */
.avatar{
  position:relative;width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 22%,#4C86FF 0%,var(--blue) 42%,var(--blue-700) 100%);
  color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.02em;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(6,29,80,.42),
    0 10px 22px rgba(17,71,179,.30),
    0 2px 4px rgba(16,24,40,.14);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
/* A fénylő felső ív és az alsó belső árnyék a fotó FÖLÉ kerül, különben a
   feltöltött képnél elveszne a plasztika. */
.avatar::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 46%);
  box-shadow:inset 0 -6px 12px rgba(6,29,80,.30);
}
a.avatar:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(6,29,80,.42),
    0 13px 26px rgba(17,71,179,.36),
    0 2px 4px rgba(16,24,40,.14);
}
.avatar.lg{width:96px;height:96px;font-size:32px;border-radius:50%}

.content{padding:30px 34px 64px;max-width:1320px;width:100%}

/* ---------- BUILDING BLOCKS ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card.pad{padding:22px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-h h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.card-h .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:4px}
.card-h .more:hover{color:var(--blue-700)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
}
.chip.blue{background:var(--blue-050);color:var(--blue-700)}
.chip.orange{background:var(--orange-050);color:#B05F05}
.chip.ok{background:var(--ok-050);color:var(--ok)}
.chip.grey{background:var(--line-soft);color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  transition:transform .16s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-600));color:#fff;box-shadow:var(--sh-orange)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(255,155,56,.42)}
.btn-secondary{background:linear-gradient(135deg,var(--blue),var(--blue-600));color:#fff;box-shadow:var(--sh-blue)}
.btn-secondary:hover{box-shadow:0 10px 26px rgba(23,95,238,.4)}
.btn-ghost{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-700)}
.btn-sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

.progress{height:8px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#6E97F7);transition:width .7s var(--ease)}
.progress.orange i{background:linear-gradient(90deg,var(--orange),#FFB86B)}
.progress.slim{height:6px}

.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}

.section-title{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:34px 0 15px;display:flex;align-items:center;gap:10px}
.section-title .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:4px}

/* ---------- WELCOME + STATS ---------- */
.hello{display:flex;align-items:center;gap:15px;margin-bottom:22px}
.hello__szoveg{min-width:0}
.hello h1{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.hello h1 em{font-style:normal;color:var(--blue)}
.hello p{color:var(--ink-soft);font-size:14.5px;margin-top:5px}

.welcome-strip{
  display:flex;align-items:center;gap:18px;padding:16px 18px;margin-bottom:20px;
  background:linear-gradient(120deg,#fff,var(--orange-050));
  border:1px solid #FFE2C2;border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.welcome-thumb{
  width:96px;height:60px;border-radius:12px;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--blue-600));display:grid;place-items:center;color:#fff;
}
.welcome-strip b{display:block;font-size:14.5px;font-weight:800}
.welcome-strip p{font-size:13px;color:var(--ink-soft);margin-top:2px}
.welcome-x{margin-left:auto;color:var(--muted);width:38px;height:38px;border-radius:999px;display:grid;place-items:center}
.welcome-x:hover{background:rgba(255,255,255,.8);color:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;box-shadow:var(--sh-1)}
.stat .k{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stat .k svg{color:var(--blue)}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:7px;line-height:1}
.stat .v small{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:0}
.stat .m{font-size:12px;color:var(--muted);margin-top:5px;font-weight:500}

/* ---------- CONTINUE HERO ---------- */
.continue{
  position:relative;overflow:hidden;border-radius:var(--r-xl);color:#fff;
  background:linear-gradient(122deg,#1E5FA8 0%,#1453D0 45%,#175FEE 100%);
  box-shadow:0 18px 44px rgba(31,95,168,.32);
  display:flex;gap:26px;align-items:center;padding:26px 28px;
}
.continue::after{
  content:'';position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%,rgba(255,155,56,.42),transparent 62%);
  pointer-events:none;
}
.continue-body{position:relative;z-index:2;flex:1;min-width:0}
.continue .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.continue h2{font-size:25px;font-weight:800;letter-spacing:-.03em;margin:8px 0 6px;line-height:1.22}
.continue .meta{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:600;opacity:.9;flex-wrap:wrap}
.continue .meta span{display:flex;align-items:center;gap:6px}
.continue .bar{margin:16px 0 18px;max-width:400px}
.continue .bar .progress{background:rgba(255,255,255,.24)}
.continue .bar .progress i{background:linear-gradient(90deg,var(--orange),#FFC48A)}
.continue .bar .lab{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:7px;opacity:.92}
.continue-thumb{
  position:relative;z-index:2;width:236px;height:142px;border-radius:var(--r-lg);flex:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;
  backdrop-filter:blur(3px);
}
.play-btn{
  width:60px;height:60px;border-radius:999px;background:#fff;color:var(--blue-700);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.22);
  transition:transform .2s var(--ease);
}
.continue-thumb:hover .play-btn{transform:scale(1.08)}

/* ---------- MODULE CARDS ---------- */
.mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mod{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
  text-align:left;width:100%;
}
.mod:not(.locked):hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-100)}
.mod-cover{height:132px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.mod-cover .num{
  position:absolute;right:12px;top:-16px;font-size:92px;font-weight:800;
  color:rgba(255,255,255,.2);letter-spacing:-.06em;line-height:1;
}
.mod-cover .ring{position:absolute;left:-40px;bottom:-70px;width:170px;height:170px;border-radius:999px;background:rgba(255,255,255,.12)}
.mod-cover .ring2{position:absolute;left:-10px;bottom:-100px;width:170px;height:170px;border-radius:999px;background:rgba(255,255,255,.1)}
.mod-cover .state{position:relative;z-index:2}
.mod-body{padding:17px 18px 18px;flex:1;display:flex;flex-direction:column}
.mod-body h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.mod-body p{font-size:13px;color:var(--ink-soft);margin:6px 0 14px;line-height:1.5;flex:1}
.mod-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:9px}
.mod-foot b{color:var(--ink)}
.mod.locked{opacity:.9}
.mod.locked .mod-cover{filter:grayscale(.94) brightness(1.06) contrast(.94)}
div.mod.locked:hover{cursor:not-allowed}
a.mod.locked:hover{border-color:var(--blue-100);box-shadow:var(--sh-2)}
.kk-belenezek{font-size:12.5px;font-weight:700;color:var(--blue);margin-top:8px}
.lock-note{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}

/* ---------- EPISODE LIST ---------- */
.ep{
  display:flex;align-items:center;gap:15px;padding:15px 17px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);width:100%;text-align:left;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.ep+.ep{margin-top:10px}
.ep:not(.locked):hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateX(3px)}
.ep-n{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:14.5px;background:var(--blue-050);color:var(--blue-700);
}
.ep.done .ep-n{background:var(--ok-050);color:var(--ok)}
.ep.locked .ep-n{background:var(--line-soft);color:var(--muted)}
.ep.current .ep-n{background:linear-gradient(135deg,var(--orange),var(--orange-600));color:#fff;box-shadow:var(--sh-orange)}
.ep-b{flex:1;min-width:0}
.ep-b h4{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ep-b .m{display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--muted);margin-top:4px;font-weight:600;flex-wrap:wrap}
.ep-b .m span{display:flex;align-items:center;gap:5px}
.ep-r{display:flex;align-items:center;gap:11px;flex:none;color:var(--muted)}
.ep.locked{opacity:.7}

/* ---------- LISTS ---------- */
.row{display:flex;align-items:center;gap:14px;padding:13px 0}
.row+.row{border-top:1px solid var(--line-soft)}
.row-ic{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-700);
}
.row-ic.o{background:var(--orange-050);color:var(--orange-600)}
.row-ic.g{background:var(--line-soft);color:var(--muted)}
.row-b{flex:1;min-width:0}
.row-b b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.row-b span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;font-weight:500}
/* A naptar szemelyes programjainal a leiras maga az informacio. */
/* DIV és nem SPAN: a „bővebben” egy <details>, az pedig nem fér el egy
   szövegszintű elemben. A méretet ezért itt kell megadni – a `.row-b span`
   szabály erre már nem hat. */
.row-b .esemeny-leiras{
	color:var(--ink-soft);margin-top:5px;line-height:1.5;
	font-size:12.5px;font-weight:500;
}
.row-r{flex:none;color:var(--muted);font-size:12.5px;font-weight:700}

/* ---------- EVENT ---------- */
.event{display:flex;gap:15px;align-items:center}
.event-date{
  width:60px;flex:none;text-align:center;border-radius:var(--r-md);padding:9px 0;
  background:linear-gradient(160deg,var(--blue-050),#fff);border:1px solid var(--blue-100);
}
.event-date b{display:block;font-size:21px;font-weight:800;line-height:1;color:var(--blue-700);letter-spacing:-.03em}
.event-date span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:3px}
.event-b h4{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.event-b p{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500;display:flex;align-items:center;gap:6px}

/* ---------- CHALLENGE ---------- */
.challenge{
  background:linear-gradient(135deg,#FFF8F0,#fff);border:1px solid #FFE0BE;
  border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden;box-shadow:var(--sh-1);
}
.challenge::after{
  content:'';position:absolute;right:-60px;bottom:-70px;width:190px;height:190px;border-radius:999px;
  background:radial-gradient(circle,rgba(255,155,56,.16),transparent 68%);
}
.challenge-h{display:flex;align-items:center;gap:11px;position:relative;z-index:2}
.challenge-ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-600));color:#fff;box-shadow:var(--sh-orange);
}
.challenge h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
.challenge .sub{font-size:12px;font-weight:700;color:var(--orange-600);text-transform:uppercase;letter-spacing:.09em}
.challenge p{font-size:13.5px;color:var(--ink-soft);margin:13px 0 16px;position:relative;z-index:2;line-height:1.55}
.challenge .acts{display:flex;gap:10px;position:relative;z-index:2;flex-wrap:wrap}

/* ---------- PROGRESS RING ---------- */
.ring-wrap{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{transform:rotate(-90deg);width:104px;height:104px}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:var(--line-soft)}
.ring .fg{stroke:url(#ringGrad);transition:stroke-dashoffset 1s var(--ease)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:-.03em}

/* ---------- WEALTH PROFILE ---------- */
.wp-areas{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 16px}
.wp-areas .chip{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}

/* ---------- DOWNLOADS ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.filter{
  padding:9px 15px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink-soft);transition:all .18s var(--ease);min-height:40px;
}
.filter:hover{border-color:var(--blue);color:var(--blue-700)}
.filter.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dl{
  display:flex;align-items:center;gap:13px;padding:15px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);text-align:left;width:100%;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.dl:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-2px)}
.dl-ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.04em}
.dl-ic.pdf{background:#FDECEC;color:#C0453F}
.dl-ic.xls{background:#E7F6EF;color:#0F8A62}
.dl-ic.doc{background:var(--blue-050);color:var(--blue-700)}
.dl-b{flex:1;min-width:0}
.dl-b b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-b span{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- EPISODE PAGE ---------- */
.player{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(128deg,#173E6B,#1453D0 62%,#175FEE);
  display:grid;place-items:center;box-shadow:0 18px 44px rgba(23,62,107,.3);
}
.player::after{
  content:'';position:absolute;left:-60px;bottom:-90px;width:320px;height:320px;border-radius:999px;
  background:radial-gradient(circle,rgba(255,155,56,.3),transparent 65%);
}
.player .play-btn{width:78px;height:78px;position:relative;z-index:2}
.player .brandtag{
  position:absolute;left:20px;top:18px;z-index:2;display:flex;align-items:center;gap:8px;
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.9;
}
.player .dur{
  position:absolute;right:18px;bottom:16px;z-index:2;background:rgba(0,0,0,.42);color:#fff;
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;backdrop-filter:blur(4px);
}
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin:26px 0 20px}
.tab{
  padding:12px 17px;font-size:14px;font-weight:700;color:var(--muted);position:relative;
  border-radius:9px 9px 0 0;min-height:44px;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--blue-700)}
.tab.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
.prose p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:12px}
.prose ul{margin:0 0 14px 20px}
.prose li{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:6px}
.prose h4{font-size:15px;font-weight:800;margin:18px 0 8px}

/* mini epizódlista az epizódoldal oldalsávjában */
.mini{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;width:100%;text-align:left;transition:background .18s var(--ease)}
.mini:hover{background:var(--bg)}
.mini.on{background:var(--blue-050)}
.mini.lock{opacity:.62;cursor:default}
.mini-n{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none;background:var(--line-soft);color:var(--muted)}
.mini.done .mini-n{background:var(--ok-050);color:var(--ok)}
.mini.on .mini-n{background:linear-gradient(135deg,var(--orange),var(--orange-600));color:#fff;box-shadow:var(--sh-orange)}
.mini-b{min-width:0;flex:1}
.mini-b b{font-size:13px;font-weight:700;display:block;line-height:1.35;letter-spacing:-.01em}
.mini-b span{font-size:11.5px;color:var(--muted);font-weight:600}

.done-bar{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--blue-050),#fff);border:1px solid var(--blue-100);margin-top:22px;
}
.done-bar.is-done{background:linear-gradient(120deg,var(--ok-050),#fff);border-color:#BEE9DA}
.done-bar b{display:block;font-size:14.5px;font-weight:800}
.done-bar span{font-size:13px;color:var(--ink-soft)}

/* ---------- PROFILE ---------- */
.prof-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prof-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.prof-head p{color:var(--muted);font-size:14px;font-weight:500}
.kv{display:flex;justify-content:space-between;align-items:center;padding:13px 0;gap:14px}
.kv+.kv{border-top:1px solid var(--line-soft)}
.kv .k{font-size:13.5px;color:var(--muted);font-weight:600}
.kv .v{font-size:14px;font-weight:700;text-align:right}
.danger-zone{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.btn-danger{background:#fff;border:1px solid #F3C9C7;color:var(--danger)}
.btn-danger:hover{background:#FDF3F3;border-color:var(--danger)}

/* ---------- COMMUNITY ---------- */
.fb-card{
  border-radius:var(--r-xl);padding:28px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(126deg,#1453D0,#175FEE 60%,#6E97F7);
  box-shadow:0 18px 44px rgba(42,134,228,.3);
}
.fb-card::after{content:'';position:absolute;right:-70px;top:-80px;width:280px;height:280px;border-radius:999px;background:rgba(255,255,255,.1)}
.fb-card h3{font-size:22px;font-weight:800;letter-spacing:-.03em;position:relative;z-index:2}
.fb-card p{font-size:14.5px;opacity:.92;margin:9px 0 18px;max-width:520px;position:relative;z-index:2;line-height:1.6}
.fb-stats{display:flex;gap:28px;margin-bottom:20px;position:relative;z-index:2;flex-wrap:wrap}
.fb-stats div b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.fb-stats div span{font-size:12px;opacity:.85;font-weight:600}

/* ---------- ARCHIVE STRIP ---------- */
.arch{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.arch button{
  flex:none;padding:12px 17px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink-soft);transition:all .18s var(--ease);min-height:44px;
}
.arch button:hover{border-color:var(--blue);color:var(--blue-700);transform:translateY(-2px)}

/* ---------- PHASE-2 GHOST ---------- */
.ghost{
  border:1.5px dashed var(--line);background:repeating-linear-gradient(135deg,#fff,#fff 10px,#FBFCFE 10px,#FBFCFE 20px);
  border-radius:var(--r-lg);padding:22px;text-align:center;
}
.ghost .chip{margin-bottom:10px}
.ghost b{display:block;font-size:15px;font-weight:800;margin-bottom:5px}
.ghost p{font-size:13px;color:var(--muted);max-width:340px;margin:0 auto;line-height:1.55}

/* ---------- MODAL / TOAST ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(30,42,58,.52);backdrop-filter:blur(4px);
  z-index:200;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease);
}
.overlay.on{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:var(--r-xl);max-width:480px;width:100%;padding:28px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);transform:translateY(14px) scale(.97);
  transition:transform .26s var(--ease);max-height:90vh;overflow-y:auto;
}
.overlay.on .modal{transform:none}
.modal h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.modal p{font-size:14px;color:var(--ink-soft);line-height:1.62;margin-bottom:13px}
.modal .note{
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--r-md);
  padding:13px 15px;font-size:13.5px;color:var(--blue-700);font-weight:600;margin-bottom:18px;line-height:1.55;
}
.modal-acts{display:flex;gap:10px;flex-wrap:wrap}
.modal-acts .btn{flex:1;min-width:140px}

.toast-wrap{position:fixed;right:22px;bottom:22px;z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(0,0,0,.26);font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:10px;max-width:360px;
  transform:translateY(14px);opacity:0;transition:all .28s var(--ease);
}
.toast.on{transform:none;opacity:1}
.toast svg{color:#6FE0BC;flex:none}

/* ---------- DEMO BADGE ---------- */
.demo{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:150;
  background:var(--ink);color:#fff;border-radius:999px;padding:9px 10px 9px 18px;
  display:flex;align-items:center;gap:13px;box-shadow:0 12px 34px rgba(0,0,0,.3);
  font-size:12.5px;font-weight:600;max-width:calc(100vw - 32px);
}
.demo b{font-weight:800}
.demo .full{display:inline}
.demo .short{display:none}
.demo button{
  background:rgba(255,255,255,.15);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;color:#fff;
  transition:background .18s;white-space:nowrap;
}
.demo button:hover{background:rgba(255,255,255,.28)}

/* A látványtervben a nézetek SPA-módra váltottak, és a JS a `.on` osztályt
   tette rájuk. A WordPress-témában viszont minden nézet önálló oldal, és a
   header.php `view active`-ot ír ki – ezért MINDKETTŐ látható kell legyen.
   Enélkül a tartalomterület némán üresen marad: a HTML ott van, csak
   display:none. */
.view{display:none}
.view.on,
.view.active{display:block;animation:fade .34s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.scrim{display:none;position:fixed;inset:0;background:rgba(30,42,58,.45);z-index:50}
.scrim.on{display:block}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .g-main{grid-template-columns:1fr}
  .mod-grid,.dl-grid,.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.2)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .hamburger{display:flex}
  .topbar{padding:0 18px;height:66px;gap:12px}
  /* Csak a FEJLEC keresoje tunik el telefonon (nincs ra hely a fejlecben).
     A sima `.searchbox` a Letoltesek, a Tudastar es a talalati lap sajat
     keresojet is elrejtette – ott viszont az a lap fo eszkoze, es a
     „Kereses” gomb ott maradt mellette, uresen. (Lali, 2026-09-10.) */
  .searchbox{width:100%}
  .content{padding:22px 18px 110px}
  .continue{flex-direction:column;align-items:stretch;padding:22px}
  .continue-thumb{width:100%;height:160px;order:-1}
  .continue h2{font-size:21px}
  .hello h1{font-size:24px}
  .hello{gap:12px}
}
@media (max-width:640px){
  .mod-grid,.dl-grid,.g-2,.g-3,.g-4,.grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat .v{font-size:21px}
  .welcome-strip{flex-wrap:wrap}
  .demo{font-size:11.5px;padding:7px 7px 7px 13px;gap:8px;bottom:10px;white-space:nowrap}
  .demo .full{display:none}
  .demo .short{display:inline}
  .ep{padding:13px}
  .ep-r .btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   KIEGÉSZÍTÉSEK a látványtervhez
   A látványterv statikus makett volt: videólejátszó és néhány
   valós tartalmi elem nem szerepelt benne. Ezek itt élnek, hogy
   a fentebbi, látványtervből átvett blokk cserélhető maradjon.
   ============================================================ */

/* --- Videólejátszó --- */
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#12203A,#1D3560);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:center;
}
.video-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.video-loading,
.video-empty span{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:rgba(255,255,255,.82);
  font-size:13.5px;font-weight:600;
  text-align:center;padding:0 24px;
}
.video-empty{
  background:var(--line-soft);
  box-shadow:none;
  border:1px dashed var(--line);
}
.video-empty span{color:var(--muted)}

/* --- Szerkesztőből jövő szöveg --- */
.prose{font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose h2,.prose h3,.prose h4{
  color:var(--ink);font-weight:800;letter-spacing:-.02em;
  margin:22px 0 8px;line-height:1.3;
}
.prose h2{font-size:19px} .prose h3{font-size:16.5px} .prose h4{font-size:15px}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-left:20px}
.prose li{margin:5px 0}
.prose a{color:var(--blue);font-weight:600}
.prose a.btn-primary{color:#fff;text-decoration:none;height:auto;min-height:46px;padding:12px 20px;text-align:center}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md)}
.prose blockquote{
  margin:16px 0;padding:12px 16px;
  border-left:3px solid var(--blue);
  background:var(--blue-050);border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* --- Pipás felsorolás (tanulási pontok) --- */
.tick-list{list-style:none;margin:0;padding:0}
.tick-list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.tick-list li:last-child{border-bottom:0}
.tick-list li .icon{color:var(--ok);flex:none;margin-top:2px}

/* --- Belépőlap --- */
.kk-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;background:var(--bg);
}
.kk-login-box{
  width:100%;max-width:400px;background:var(--white);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:34px 30px;
}
.kk-login-box h1{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.kk-login-box p.sub{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.kk-login-box label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
.kk-login-box input[type=text],
.kk-login-box input[type=password]{
  width:100%;padding:11px 13px;font:inherit;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);margin-bottom:14px;
}
.kk-login-box input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}

/* --- Üres lista --- */
.kk-ures{
  padding:34px 24px;text-align:center;color:var(--muted);
  font-size:13.5px;line-height:1.6;
}
.kk-ures .icon{color:var(--line);margin-bottom:10px}

/* --- Tagsági állapotsáv (türelmi idő, lemondás, próbaidő) --- */
.statsav{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;margin:0 0 20px;
  background:linear-gradient(120deg,#fff,var(--orange-050));
  border:1px solid #F6DDBE;border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.statsav-ic{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--orange-050);color:var(--orange-600);
}
.statsav-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.statsav-t b{font-size:14px;font-weight:800;letter-spacing:-.01em}
.statsav-t span{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.statsav-b{flex:none;margin-left:auto;align-self:center}
@media (max-width:720px){
  .statsav{flex-wrap:wrap}
  .statsav-b{margin-left:0;width:100%}
}

/* --- Lemondás a profilon --- */
.kk-lemond{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:18px}
.kk-lemond summary{
  cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.kk-lemond summary::-webkit-details-marker{display:none}
.kk-lemond summary:hover{color:var(--ink)}
.kk-lemond .kk-lemond-b{
  margin-top:14px;padding:16px;border-radius:var(--r-md);
  background:var(--line-soft);font-size:13.5px;line-height:1.6;color:var(--ink-soft);
}
.kk-lemond .kk-lemond-b p{margin:0 0 12px}
.kk-lemond .kk-lemond-b p:last-child{margin:0}

/* --- Üdvözlő videó az első belépéskor --- */
.kk-welcome{
  position:fixed;inset:0;z-index:120;
  background:rgba(16,24,40,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  overflow:auto;
}
.kk-welcome-box{
  width:100%;max-width:660px;background:var(--white);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:28px 26px;
}
.kk-welcome-box h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.kk-welcome-box p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px}
.kk-welcome-box .video-frame{margin:0 0 18px}
.kk-welcome-f{display:flex;justify-content:flex-end}
@media (max-width:560px){
  .kk-welcome-box{padding:22px 18px}
  .kk-welcome-f .btn{width:100%}
}

/* ============================================================
   Nyilvános keret – a belépés nélkül is elérhető jogi oldalak.
   Ez a blokk a stíluslap VÉGÉN van: a media query nem ad
   specificitást, tehát a később jövő szabály nyer.
   ============================================================ */
.nyil{
  max-width:880px;margin:0 auto;padding:28px 20px 56px;
  display:flex;flex-direction:column;min-height:100vh;
}
.nyil-fej{display:flex;justify-content:center;padding:6px 0 26px}
.nyil-logo img{width:172px;height:auto}
.nyil-torzs{flex:1}
.nyil-cim{
  font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 6px;line-height:1.25;
}
.nyil-cim + .prose{margin-top:18px}
.nyil .card.pad{padding:30px 32px}
.nyil .prose h2{
  font-size:18px;margin:26px 0 8px;color:var(--ink);
  padding-top:18px;border-top:1px solid var(--line-soft);
}
.nyil .prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.nyil .prose h3{font-size:15.5px;margin:18px 0 6px;color:var(--ink)}
.nyil .prose strong{color:var(--ink)}
/* A jogi szövegek tele vannak hosszú URL-ekkel: telefonon ne lógjanak ki. */
.nyil .prose p,.nyil .prose li{overflow-wrap:anywhere}
.nyil-lab{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
}
.nyil-lab__linkek{display:flex;flex-wrap:wrap;gap:8px 18px}
.nyil-lab__linkek a{font-size:13px;font-weight:700;color:var(--blue)}
.nyil-lab__linkek a:hover{color:var(--blue-700)}
.nyil-lab__jog{margin-left:auto;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  .nyil{padding:20px 14px 40px}
  .nyil .card.pad{padding:20px 16px}
  .nyil-cim{font-size:20px}
  .nyil-lab__jog{margin-left:0;width:100%}
}

/* ============================================================
   Modulborító képpel. A borítók 16:9-esek (1400×788), ezért a
   kártya feje is az – a régi fix 132px magasság levágná a rajz
   szélét. Ez a blokk a stíluslap végén áll: azonos specificitás
   mellett a később jövő szabály nyer.
   ============================================================ */
.mod-cover{height:auto;aspect-ratio:16/9}
.mod-cover__kep{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:0;
}
/* Sötétítés a kép alján, hogy a sorszám és az állapotcímke olvasható legyen. */
.mod-cover.has-kep::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64%;
  background:linear-gradient(180deg,rgba(16,24,40,0),rgba(16,24,40,.55));
}
.mod-cover .num{z-index:2}
/* Képes borítón a hatalmas, áttetsző sorszám elnyomná a rajzot: kisebb,
   és a bal alsó állapotcímke mellé, a jobb sarokba kerül. */
.mod-cover.has-kep .num{
  top:auto;bottom:8px;right:14px;font-size:40px;
  color:rgba(255,255,255,.62);text-shadow:0 2px 10px rgba(16,24,40,.35);
}

/* ---------------------------------------------------------- Partneri kedvezmények */

.kk-partnerek{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:18px;
}

.kk-partner{display:flex;flex-direction:column;gap:12px}

.kk-partner-fej{display:flex;gap:14px;align-items:flex-start}

/* A logók vegyes méretben és arányban érkeznek az ügyféltől, ezért fix
   dobozba tesszük és `contain`-nel illesztjük: így egy széles és egy magas
   logó is ugyanakkora helyet foglal, és egyik sem vágódik le. */
.kk-partner-logo{
	flex:0 0 64px;
	width:64px;height:64px;
	border:1px solid var(--line-soft);
	border-radius:var(--r-md);
	background:var(--white);
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
}
.kk-partner-logo img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}

.kk-partner-fej h3{margin:0 0 6px;font-size:16px;line-height:1.3}

.kk-partner-leiras{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55}

.kk-kod{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	background:var(--blue-050);
	border-radius:var(--r-md);
	padding:10px 12px;
}
.kk-kod-cimke{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-700);font-weight:700}
.kk-kod code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:14px;font-weight:700;color:var(--ink);
	background:var(--white);
	border-radius:var(--r-sm);
	padding:4px 10px;
	user-select:all;
}
.kk-kod .btn{margin-left:auto}

.kk-partner-lab{
	margin-top:auto;
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding-top:4px;
}
.kk-partner-datum{font-size:12px;color:var(--muted)}

@media (max-width:480px){
	.kk-partnerek{grid-template-columns:1fr}
	.kk-kod .btn{margin-left:0;width:100%}
}

/* ------------------------------------------------------------------------ Súgó */

.kk-sugo-tj{margin-bottom:22px}
.kk-sugo-tj-c{
	font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
	color:var(--muted);font-weight:700;margin-bottom:10px;
}
.kk-sugo-tj ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.kk-sugo-tj li{margin:0}
.kk-sugo-tj a{
	display:inline-block;
	background:var(--blue-050);color:var(--blue-700);
	border-radius:999px;padding:6px 14px;
	font-size:13px;font-weight:600;text-decoration:none;
	transition:background .18s var(--ease);
}
.kk-sugo-tj a:hover{background:var(--blue-100)}

/* A szövegtörzs tipográfiája. Mea a szerkesztőben ír, a kinézetet a sablon adja. */
.kk-sugo{line-height:1.65;color:var(--ink-soft)}
.kk-sugo p{margin:0 0 14px}
.kk-sugo ul,.kk-sugo ol{margin:0 0 16px;padding-left:22px}
.kk-sugo li{margin-bottom:7px}
.kk-sugo strong{color:var(--ink)}
.kk-sugo a{color:var(--blue-700);font-weight:600}
.kk-sugo > *:last-child{margin-bottom:0}

.kk-sugo-bev{margin-bottom:26px}

.kk-sugo-szakasz{margin-bottom:30px;scroll-margin-top:90px}
.kk-sugo-szakasz-c{
	font-size:20px;line-height:1.3;color:var(--ink);
	margin:0 0 14px;
}

/* --- lenyíló csempék ------------------------------------------------------ */

.kk-akkok{display:flex;flex-direction:column;gap:10px;margin-top:12px}

.kk-akk{
	background:var(--white);
	border:1px solid var(--line-soft);
	border-radius:var(--r-lg);
	box-shadow:var(--sh-1);
	overflow:hidden;
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.kk-akk[open]{border-color:var(--blue-100);box-shadow:var(--sh-2)}
.kk-akk:hover{border-color:var(--blue-100)}

.kk-akk summary{
	display:flex;align-items:center;gap:14px;
	padding:16px 18px;
	cursor:pointer;
	font-weight:700;font-size:15px;color:var(--ink);
	list-style:none;
}
/* A böngésző saját nyilát elrejtjük – sajátot teszünk a sor végére. */
.kk-akk summary::-webkit-details-marker{display:none}
.kk-akk summary::marker{content:''}
.kk-akk summary span{flex:1}
/* Az i-chev jobbra mutat, ezért a csukott állapot 90 fok (lefelé), a nyitott
   pedig -90 (felfelé). 180 fokkal balra fordulna, ami semmit nem jelent. */
.kk-akk summary .icon{
	flex:0 0 auto;color:var(--blue);
	transform:rotate(90deg);
	transition:transform .22s var(--ease);
}
.kk-akk[open] summary .icon{transform:rotate(-90deg)}
.kk-akk summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.kk-akk-b{padding:0 18px 18px;font-size:14px}

/* --- az első szakasz: a klub térképe kártyarácsban ------------------------ */

.kk-sugo-terkep .kk-sugo ul{
	list-style:none;padding:0;margin:0;
	display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;
}
.kk-sugo-terkep .kk-sugo li{
	margin:0;
	background:var(--blue-050);
	border-radius:var(--r-md);
	padding:12px 14px;
	font-size:13.5px;line-height:1.5;
}
.kk-sugo-terkep .kk-sugo li strong{display:block;color:var(--blue-700);margin-bottom:2px}

.kk-sugo-kapcsolat{margin-top:6px}
.kk-sugo-kapcsolat h3{margin:0 0 6px;font-size:16px}
.kk-sugo-kapcsolat p{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft)}

@media (max-width:480px){
	.kk-akk summary{padding:14px 15px;font-size:14.5px}
	.kk-akk-b{padding:0 15px 15px}
	.kk-sugo-terkep .kk-sugo ul{grid-template-columns:1fr}
}

/* Lapozó (találati lista). A WordPress `the_posts_pagination()` markupja. */
.pagination{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:36px;height:36px;padding:0 12px;
	border-radius:var(--r-md);
	background:var(--line-soft);color:var(--ink-soft);
	font-size:13.5px;font-weight:700;text-decoration:none;
	transition:background .18s var(--ease),color .18s var(--ease);
}
.pagination a.page-numbers:hover{background:var(--blue-050);color:var(--blue-700)}
.pagination .page-numbers.current{background:var(--blue);color:var(--white)}

/* ------------------------------------------------- Epizód: lépegetés és lista */

/* Az éppen nézett epizód a hasáb listájában. Nem link, de nem is tűnhet el:
   ez mondja meg a tagnak, hogy hol tart a modulon belül. */
.row.row-most{
	background:var(--blue-050);
	border-radius:var(--r-md);
	margin:0 -12px;padding:13px 12px;
	cursor:default;
}
.row.row-most+.row{border-top:0}
.row.row-most .row-b b{color:var(--blue-700)}
.row.row-most .row-b span{color:var(--blue-700);opacity:.8;font-weight:600}

.kk-epnav{
	display:grid;grid-template-columns:1fr 1fr;gap:12px;
	margin-top:18px;
}

.kk-epnav-e{
	display:flex;flex-direction:column;gap:2px;
	background:var(--white);
	border:1px solid var(--line-soft);
	border-radius:var(--r-lg);
	box-shadow:var(--sh-1);
	padding:14px 16px;
	text-decoration:none;
	min-width:0;
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
a.kk-epnav-e:hover{border-color:var(--blue-100);box-shadow:var(--sh-2)}

.kk-epnav-kovi{text-align:right}

.kk-epnav-k{
	font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
	color:var(--muted);font-weight:700;
}
.kk-epnav-c{
	font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
	-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.kk-epnav-m{font-size:12px;color:var(--muted);margin-top:2px}

/* A zárt szomszéd nem tűnik el, csak nem kattintható – így látszik, hogy van
   folytatás, és az is, hogy mikortól. */
.kk-epnav-zart{background:transparent;box-shadow:none;border-style:dashed;cursor:default}
.kk-epnav-zart .kk-epnav-c{color:var(--muted)}

/* Üres rácscella, ha csak az egyik irányban van szomszéd – enélkül a
   „Következő” a bal oszlopba csúszna, mintha visszafelé vinne. */
.kk-epnav-ures{display:block}

@media (max-width:640px){
	.kk-epnav{grid-template-columns:1fr}
	.kk-epnav-kovi{text-align:left}
	.kk-epnav-ures{display:none}
}

/* Jelszó-emlékeztető a Vezérlőpulton (aki belépő linkkel jött be). */
.kk-jelszo-sav{
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
	background:var(--orange-050);
	border:1px solid #F6D9B8;
	border-radius:var(--r-lg);
	padding:14px 18px;
	margin-bottom:18px;
}
.kk-jelszo-ic{
	width:38px;height:38px;border-radius:11px;flex:none;
	display:grid;place-items:center;
	background:var(--white);color:var(--orange-600);
}
.kk-jelszo-b{flex:1;min-width:200px;line-height:1.45}
.kk-jelszo-b b{display:block;font-size:14.5px;color:var(--ink)}
.kk-jelszo-b span{font-size:13px;color:var(--ink-soft)}
.kk-jelszo-sav .btn{flex:none}

@media (max-width:520px){
	.kk-jelszo-sav .btn{width:100%}
}


/* --- Tudástár: főkategória-blokkok ---------------------------------------- */
/* A burok a Súgó akkordionja (.kk-akk), itt csak a darabszám-jelvény és az
   alkategória-fejléc jön hozzá. */

.kk-tema + .kk-tema{margin-top:10px}
.kk-tema summary em{
	flex:0 0 auto;
	font-style:normal;font-weight:700;font-size:12px;
	color:var(--blue-700);background:var(--blue-050);
	border-radius:999px;padding:2px 9px;
}
.kk-altema{
	margin:18px 0 6px;
	font-size:12.5px;font-weight:700;
	text-transform:uppercase;letter-spacing:.06em;
	color:var(--muted);
}
.kk-akk-b > .kk-altema:first-child{margin-top:4px}

/* --- Vezérlőpult: gyorsgombok --------------------------------------------- */

.kk-gyors{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.kk-gyors .btn{flex:1 1 auto;justify-content:center;min-width:132px}

/* ============================================================
   TUDÁSTÁR ÉS LETÖLTÉSEK – kártyás elrendezés
   A korábbi verzió mindkét oldalon egyetlen hosszú szövegsor-lista
   volt: 23 videó és 18 anyag így ömlesztve olvashatatlan. A videó
   most a saját címlapképével jön (a Bunny-borító a kiemelt kép),
   a főkategória pedig az Ötféle Gazdagság saját piktogramját kapja.
   ============================================================ */

.kk-temablokk + .kk-temablokk{margin-top:30px}
.kk-temafej{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.kk-temaikon{
	width:54px;height:54px;border-radius:17px;flex:none;
	display:grid;place-items:center;color:#fff;
	background:linear-gradient(135deg,#175FEE,#4B84F4);
	box-shadow:0 8px 20px rgba(23,95,238,.28);
}
.kk-temaikon img{width:34px;height:34px;display:block}
.kk-temaikon .icon{width:26px;height:26px}
.kk-temafej h2{font-size:19.5px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.kk-temafej p{margin:3px 0 0;font-size:12.5px;font-weight:600;color:var(--muted)}
.kk-temafej__leiras{margin:6px 0 0;font-size:13.5px;font-weight:500;color:var(--ink-soft);max-width:62ch;line-height:1.45}

/* ============================================================
   AZ ELSŐ ÖT LÉPÉS (kezdőlap)

   Induló checklist az új tagnak: mit csináljon, meddig tart, és
   mennyi van hátra. A nyitás natív `<details>`, tehát JS nélkül
   is működik, és a pipa sima űrlapon megy.
   ============================================================ */

.kk-elso5{margin-bottom:18px;scroll-margin-top:88px}
.kk-elso5__fej{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.kk-elso5__fej > div{flex:1 1 auto;min-width:0}
.kk-elso5__fej h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.kk-elso5__fej .chip{flex:none;white-space:nowrap;margin-bottom:0}
.kk-elso5__lead{margin:7px 0 0;font-size:13.5px;font-weight:500;color:var(--ink-soft);line-height:1.5;max-width:66ch}

.kk-elso5__sav{height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-bottom:16px}
.kk-elso5__sav span{display:block;height:100%;border-radius:999px;background:var(--blue);transition:width .3s ease}

.kk-elso5__lepes{border-top:1px solid var(--line-soft)}
.kk-elso5__lepes > summary{
	cursor:pointer;list-style:none;
	display:flex;align-items:center;gap:12px;padding:12px 0;
}
.kk-elso5__lepes > summary::-webkit-details-marker{display:none}
.kk-elso5__lepes > summary:hover .kk-elso5__cim{color:var(--blue-700)}
.kk-elso5__lepes > summary:focus-visible{outline:2px solid var(--blue-700);outline-offset:3px;border-radius:10px}
.kk-elso5__jel{
	flex:none;width:28px;height:28px;border-radius:999px;
	display:grid;place-items:center;
	background:var(--blue-050);color:var(--blue-700);
	font-size:13px;font-weight:800;
}
.kk-elso5__lepes.kesz .kk-elso5__jel{background:var(--ok-050);color:var(--ok)}
.kk-elso5__cim{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.kk-elso5__lepes.kesz .kk-elso5__cim{color:var(--muted)}
.kk-elso5__ido{flex:none;font-size:12px;font-weight:600;color:var(--muted)}
.kk-elso5__lepes.kesz .kk-elso5__ido{color:var(--ok)}

.kk-elso5__torzs{padding:0 0 16px 40px}
.kk-elso5__torzs p{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:66ch}
.kk-elso5__gombok{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kk-elso5__gombok form{margin:0}

.kk-elso5__zaro{
	display:flex;align-items:center;gap:8px;margin:14px 0 0;
	font-size:13.5px;font-weight:700;color:var(--ok);
}

@media (max-width:560px){
	.kk-elso5__torzs{padding-left:0}
	.kk-elso5__ido{display:none}
	.kk-elso5__lepes.kesz .kk-elso5__ido{display:inline}
}

/* A mesterkurzus borítója a piktogram helyén: 16:9, mint a modulkártyán. */
.kk-temaborito{
	flex:none;width:104px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
	background:var(--blue-050);display:block;
}
.kk-temaborito img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
	.kk-temaborito{width:72px}
}

/* Mesterkurzus-doboz: natív details/summary, tehát nyitás JS nélkül megy. */
details.kk-temablokk{
	background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
	padding:16px 18px;box-shadow:var(--sh-1);
}
details.kk-temablokk + details.kk-temablokk{margin-top:14px}
details.kk-temablokk > summary{
	cursor:pointer;list-style:none;margin:0;
	display:flex;align-items:center;gap:14px;
}
details.kk-temablokk > summary::-webkit-details-marker{display:none}
details.kk-temablokk > summary:focus-visible{outline:2px solid var(--blue-700);outline-offset:4px;border-radius:12px}
details.kk-temablokk > summary > div{flex:1 1 auto;min-width:0}
.kk-temafej__nyil{
	flex:none;width:11px;height:11px;margin-right:4px;
	border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
	border-radius:2px;transform:rotate(45deg);transition:transform .18s ease;
}
details.kk-temablokk[open] .kk-temafej__nyil{transform:rotate(-135deg)}
details.kk-temablokk[open] > summary{margin-bottom:18px}
details.kk-temablokk > .mod-grid{margin-bottom:4px}

/* Az alkategória-fejléc a kártyarács fölött áll, nem akkordionban. */
.kk-altema{display:flex;align-items:center;gap:9px;margin:22px 0 10px}
.kk-altema em{
	font-style:normal;font-weight:700;font-size:11.5px;
	color:var(--blue-700);background:var(--blue-050);
	border-radius:999px;padding:2px 9px;
}
.kk-temablokk .kk-altema:first-of-type{margin-top:4px}

/* Videókártya: a modulkártya szerkezete, kisebb szöveggel. */
.kk-videokartya .mod-body{padding:13px 15px 15px}
.kk-videokartya .mod-body h3{font-size:14.5px;line-height:1.35;font-weight:700}
.kk-videokartya .mod-cover{background-size:cover}
.kk-perc{
	position:absolute;right:10px;bottom:10px;z-index:3;
	display:inline-flex;align-items:center;gap:5px;
	font-size:11.5px;font-weight:700;color:#fff;
	background:rgba(16,24,40,.62);border-radius:999px;padding:4px 10px 4px 8px;
	transition:background .2s,transform .2s var(--ease);
}
.kk-perc .icon{width:13px;height:13px;stroke-width:0}
.kk-videokartya:hover .kk-perc{background:var(--blue);transform:scale(1.05)}

/* Letöltéskártya: a hiányzó semleges jelvény és a jobb szélső nyíl. */
.dl-ic.egyeb{background:var(--bg);color:var(--muted)}
.dl-nyil{flex:none;color:var(--muted);display:grid;place-items:center}
.dl:hover .dl-nyil{color:var(--blue)}
.card-h .chip{margin-bottom:0;margin-left:auto}

/* ==========================================================================
   Mea 2026-09-08-i kérései
   ========================================================================== */

/* A logó alatt a szlogen áll, nem kategórianév: kisbetűvel, ritkítás nélkül,
   különben a hosszabb mondat verzálban szétesik az oldalsávban. */
.brand-text span{
	font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;
	line-height:1.35;max-width:100%;white-space:normal;
}

/* A köszöntésnél 2026-09-09 óta a TAG saját profilkép-korongja áll (.avatar lg),
   nem Mea kivágata – az utóbbi a belépőképernyőn maradt. */
.hello__alcim{color:var(--ink-soft);font-size:15px;margin-top:6px}

/* Nyitó blokk (onboarding / klubhasználat). */
.kk-nyito{margin-bottom:22px}
.kk-nyito__szoveg{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
.kk-nyito__gomb{margin-top:14px}

/* Két számadat maradt, tehát két oszlop. Az aktuális modul kattintható. */
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
a.stat:hover{border-color:var(--blue-100);box-shadow:var(--sh-2)}

/* A folytatás-blokk a Sikerút oldalán is ott van, kell alá levegő. */
.continue{margin-bottom:22px}
.continue-alcim{font-size:14px;opacity:.9;margin:0 0 10px;line-height:1.45}

/* A következő epizód borítóképe a lejátszó gomb mögött. */
.continue-thumb.has-kep{background:rgba(16,24,40,.35)}
.continue-thumb__kep{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	border-radius:inherit;
}
.continue-thumb.has-kep .play-btn{position:relative;z-index:2}

/* Képes listasor (élő alkalmak). */
.row-kep{overflow:hidden;background:var(--line-soft)}
.row-kep img{width:100%;height:100%;object-fit:cover;display:block}

/* A videókártya második sora: a borító narancs sávjának mondata. */
.kk-videokartya__alcim{
	font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:5px;
}
.kk-videokartya.locked{opacity:.72}
.kk-videokartya.locked .mod-cover__kep{filter:grayscale(.5)}

/* A modul epizódjai kártyaként: a hasábban két oszlop fér el kényelmesen. */
.mod-grid--ketto{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
	.mod-grid--ketto{grid-template-columns:1fr}
}

/* Modul-haladás csík a cím alatt. */
.kk-modul-halad{margin-bottom:18px}
.kk-modul-halad .lab{
	display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
	font-size:13px;font-weight:700;margin-bottom:8px;
}

/* Gyorsgombok: asztali nézetben a bal oldali menü ugyanide visz, ott feleslegesek.
   900 képpont alatt csukódik össze az oldalsáv – ott viszont ez az egyetlen út. */
.kk-gyors{display:none}
@media (max-width:900px){
	.kk-gyors{display:flex}
}

/* Grid-elemként az <a> is blokk, és a mobilon kisebb alak. */
a.stat{display:block;transition:box-shadow .2s var(--ease),border-color .2s}
@media (max-width:640px){
	.hello .avatar.lg{width:64px;height:64px;font-size:22px}
}

/* Megnézett epizód a listában: zöld pipa a narancs lejátszó helyett. */
.row-ic.k{background:var(--ok-050);color:#12A87C}

/* „Ne ezzel kezdd” figyelmeztetés az epizódoldalon – ugyanaz a sáv, mint a
   tagsági állapotnál, csak a lap belsejében áll. */
.statsav-figyelem{margin-bottom:18px}

/* „Mehetünk tovább?” – a késznek jelölés után. */
/* A videó FÖLÖTT áll (Mea, 2026-09-10), ezért alul kap levegőt, nem felül.
   A `scroll-margin-top` a `#kk-tovabb` horgonyhoz kell: enélkül a ragadós
   fejléc alá ugrana a lap. */
.kk-tovabb{margin:0 0 18px;border-color:var(--blue-100);scroll-margin-top:88px}
.kk-tovabb__szoveg{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
.kk-tovabb .mod-grid--ketto{grid-template-columns:minmax(0,320px)}

/* Letöltés betekintő képe: álló, lap-arányú kivágat (PDF első oldala). */
.row-kep--lap{
	width:56px;height:72px;border-radius:10px;
	border:1px solid var(--line);background:var(--white);
}
.row-letoltes{align-items:center}

/* Élő alkalom típusjelölése a naptárban. */
.kk-tipus{
	display:inline-block;margin-left:8px;vertical-align:middle;
	font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	padding:3px 8px;border-radius:999px;
	background:var(--blue-050);color:var(--blue-700);
}
.kk-tipus--offline{background:var(--orange-050);color:var(--orange-600)}
.kk-esemeny-gombok{flex:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){
	/*
	 * A `.row` nem tordelt, ezert a 100%-os gombsav rasajtolta a szoveget:
	 * telefonon szavankent tort a program neve, es a „Google Naptarba” gomb
	 * ratakart a cimre. A `flex-wrap` engedi a gombokat sajat sorba.
	 * (Lali, 2026-09-10.)
	 */
	.kk-esemeny{flex-wrap:wrap}
	.kk-esemeny-gombok{width:100%;justify-content:flex-start;margin-top:10px}
}

/* Mea kérésére keskenyebb oldalsáv (2026-09-08). */
:root{--sidebar:228px}

/* ---------- HÓNAPNÉZET (naptár) ---------- */
.kk-honap{margin-bottom:18px}
.kk-honap-fej{align-items:center}
.kk-honap-lap{margin-left:auto;display:flex;gap:6px}
.kk-honap-lap .btn{padding:0 11px}
.kk-honap-lap .icon{transform:rotate(180deg)}
.kk-honap-elore .icon{transform:none}

.kk-racs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.kk-racs-fej{
	font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
	color:var(--muted);text-align:center;padding:6px 0 2px;
}
.kk-nap{
	min-height:104px;border:1px solid var(--line);border-radius:10px;
	padding:7px 7px 8px;background:var(--white);display:flex;flex-direction:column;gap:5px;
}
.kk-nap--ures{border:0;background:none;min-height:0}
.kk-nap--mult{opacity:.55}
.kk-nap--ma{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-050)}
.kk-nap--tele{background:linear-gradient(180deg,var(--white),var(--blue-050))}
.kk-nap-szam{font-size:12.5px;font-weight:800;color:var(--muted)}
.kk-nap--ma .kk-nap-szam{color:var(--blue-700)}

.kk-nap-e{display:flex;align-items:center;gap:4px;min-width:0}
.kk-nap-cim{
	flex:1;min-width:0;font-size:11.5px;font-weight:700;line-height:1.3;
	background:var(--blue);color:#fff;border-radius:7px;padding:5px 7px;
	overflow-wrap:anywhere;hyphens:auto;
}
.kk-nap-cim:hover{filter:brightness(1.08)}
.kk-nap-ics{
	flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
	background:var(--line-soft);color:var(--muted);
}
.kk-nap-ics:hover{background:var(--blue-050);color:var(--blue-700)}
.kk-racs-sug{
	display:flex;align-items:center;gap:6px;flex-wrap:wrap;
	font-size:12.5px;color:var(--muted);margin:14px 0 0;
}

/* Telefonon a hét oszlop olvashatatlan lenne: ott az alatta lévő lista a naptár. */
@media (max-width:760px){
	.kk-honap{display:none}
}

/* ---------- SÖTÉT NÉZET ----------
   Csak a :root színtokenjeit írjuk felül – a felület minden eleme azokból él,
   ezért nem kell külön sötét szabály komponensenként. A márkakék és a narancs
   marad, csak a felületek és a szövegek fordulnak meg. */
[data-tema="sotet"]{
	--ink:#E8EDF5;
	--ink-soft:#B7C3D3;
	--muted:#8B9AAF;
	--line:#2B3546;
	--line-soft:#232C3B;
	--bg:#131922;
	--white:#1A2130;
	--blue-050:#1C2740;
	--blue-100:#26375C;
	--blue-700:#8DB0FA;
	--orange-050:#2C2318;
	--ok-050:#15302A;
	--sh-1:0 1px 2px rgba(0,0,0,.35);
	--sh-2:0 2px 6px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.32);
	--sh-3:0 6px 18px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.34);
}
[data-tema="sotet"] .pagination .page-numbers.current{color:#fff}
[data-tema="sotet"] .row-kep--lap,
[data-tema="sotet"] .kk-nap{background:var(--white)}
[data-tema="sotet"] .mod-cover__kep{filter:brightness(.94)}

/* A váltógomb a felső sávban: mindig az AKTUÁLIS mód jelét mutatja. */
.kk-tema-valto{
	flex:none;width:40px;height:40px;border-radius:12px;
	border:1px solid var(--line);background:var(--white);color:var(--ink-soft);
	display:grid;place-items:center;cursor:pointer;
	transition:border-color .2s,color .2s;
}
.kk-tema-valto:hover{border-color:var(--blue);color:var(--blue)}
.kk-tema-valto .kk-tema-nap{display:none}
.kk-tema-valto .kk-tema-hold{display:grid}
[data-tema="sotet"] .kk-tema-valto .kk-tema-nap{display:grid}
[data-tema="sotet"] .kk-tema-valto .kk-tema-hold{display:none}

/* Profilkép az avatar helyén. */
.avatar--kep{padding:0;overflow:hidden}
.avatar--kep img{width:100%;height:100%;object-fit:cover;display:block}

/* „Bővebben” a partnerkártyán – natív <details>, nem kell hozzá JS. */
.kk-bovebben{margin-top:6px}
.kk-bovebben>summary{
	cursor:pointer;font-size:13px;font-weight:700;color:var(--blue);
	list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.kk-bovebben>summary::-webkit-details-marker{display:none}
.kk-bovebben>summary::after{content:'▾';font-size:11px}
.kk-bovebben[open]>summary::after{content:'▴'}
.kk-bovebben .prose{margin-top:10px;font-size:13.5px;color:var(--ink-soft)}

/* Profilkép előnézete a profilon. */
.kk-profilkep-elonezet{margin-bottom:10px}
.kk-profilkep-elonezet img{
	width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;
	box-shadow:0 8px 18px rgba(17,71,179,.22),0 0 0 3px var(--white),0 0 0 4px var(--line);
}

/* ---------- SÖTÉT NÉZET: ami nem tokenből él ----------
   A felület nagy része a :root változóiból dolgozik, de néhány helyen beégetett
   világos szín van (fehér színátmenet-vég, üvegszerű fejléc). Ezeket itt húzzuk
   át – világos nézetben egyik sem változik. */
[data-tema="sotet"] .topbar{
	background:rgba(19,25,34,.86);
}
[data-tema="sotet"] .side-card,
[data-tema="sotet"] .event-date,
[data-tema="sotet"] .done-bar{
	background:linear-gradient(160deg,var(--blue-050),var(--white));
	border-color:var(--blue-100);
}
[data-tema="sotet"] .done-bar.is-done{
	background:linear-gradient(120deg,var(--ok-050),var(--white));
	border-color:#1F5A4A;
}
[data-tema="sotet"] .welcome-strip,
[data-tema="sotet"] .statsav{
	background:linear-gradient(120deg,var(--white),var(--orange-050));
	border-color:#4A3720;
}
[data-tema="sotet"] .challenge{
	background:linear-gradient(135deg,#2C2318,var(--white));
	border-color:#4A3720;
}
[data-tema="sotet"] .kk-jelszo-sav{border-color:#4A3720}
[data-tema="sotet"] .ghost{
	background:repeating-linear-gradient(135deg,var(--white),var(--white) 10px,#20293a 10px,#20293a 20px);
}
[data-tema="sotet"] .modal{background:var(--white)}
[data-tema="sotet"] .btn-danger{background:var(--white);border-color:#5A2F2D}
[data-tema="sotet"] .btn-danger:hover{background:#2A1B1A}
[data-tema="sotet"] .btn-ghost{background:var(--white)}
[data-tema="sotet"] .hamburger:hover{background:var(--line-soft)}

/* Világos jelvények sötét lapon: a betűszín maradjon sötét, ne olvadjon bele. */
[data-tema="sotet"] .dl-ic.pdf,
[data-tema="sotet"] .dl-ic.xls,
[data-tema="sotet"] .dl-ic.doc,
[data-tema="sotet"] .dl-ic.zip{filter:brightness(.9)}

/* Fejléckép egy klub-oldal tetején (a lap kiemelt képe). */
.kk-fejleckep{
	border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;
	box-shadow:var(--sh-1);border:1px solid var(--line);
}
.kk-fejleckep img{width:100%;height:auto;display:block}


/* ---------- ÉLŐ ALKALMAK SZÍNKÓDJA (Mea, 2026-09-09) ----------
   Három típus van: workshop (sötétebb kék), kérdezz-felelek (világoskék),
   KimeNŐ (narancs). Ugyanaz a három szín megy a hónaprács buborékára, a
   listasor hátterére és a típusjelölő pasztillára, hogy ránézésre elváljanak. */
.kk-nap-e--workshop .kk-nap-cim{background:var(--blue-700)}
.kk-nap-e--qa .kk-nap-cim{background:var(--blue-100);color:var(--blue-700)}
.kk-nap-e--kimeno .kk-nap-cim{background:var(--orange-600)}

/* A pasztilla: rövid és olvasható.
   A `span` elemet a `.row-b span{display:block;color:var(--muted)}` szabály
   verte agyon – nagyobb súlyú volt, mint a `.kk-tipus`. Ezért nyúlt a jelölés
   a teljes sor szélességében, és ezért lett a felirata szürke a saját színe
   helyett. Elem+osztály választóval nyerünk vissza. (Lali, 2026-09-09.) */
span.kk-tipus{
	display:inline-block;width:auto;
	font-size:10.5px;letter-spacing:0;text-transform:none;
	padding:2px 8px;line-height:1.6;margin:0 0 0 6px;
}
span.kk-tipus--workshop{background:var(--blue-700);color:#fff}
span.kk-tipus--qa{background:var(--blue-100);color:var(--blue-700)}
span.kk-tipus--kimeno{background:var(--orange-600);color:#fff}

/* A közelgő alkalmak kártyái: színkód + levegő, hogy ne csússzanak egybe. */
.kk-esemeny{
	border-left:4px solid transparent;border-radius:var(--r-md);
	padding:13px 14px;margin-bottom:10px;
}
.kk-esemeny+.kk-esemeny{border-top:0}
.kk-esemeny:last-child{margin-bottom:0}
/*
 * A datum a program neve ELOTT all, nagyobb betuvel (Mea, 2026-09-10). A
 * `.row-b span` alap 12,5px-e keves volt: a naptarban az idopont az elso
 * kerdes, tehat az legyen a hangsulyos sor, a cim alatta.
 */
.kk-esemeny .kk-esemeny-datum{
	display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;
	color:var(--blue-700);margin:0 0 3px;
}
.kk-esemeny--kimeno .kk-esemeny-datum{color:var(--orange-600)}
.kk-esemeny .row-b b{font-weight:700;font-size:14.5px;color:var(--ink)}

.kk-esemeny--workshop{border-left-color:var(--blue-700);background:var(--blue-100)}
.kk-esemeny--qa{border-left-color:var(--blue);background:var(--blue-050)}
.kk-esemeny--kimeno{border-left-color:var(--orange-600);background:var(--orange-050)}

/*
 * A boritokep a 42px-es ikonhelyen ult, 12px-es lekerekitessel: egy mozi-
 * plakatbol ennyi helyen semmi nem latszott. Nagyobb es szogletesebb hely
 * kell neki, kulonben nem er tobbet a piktogramnal. (Lali, 2026-09-11.)
 */
.kk-esemeny .row-kep{width:66px;height:66px;border-radius:6px}

/* Jelmagyarázat a naptárrács alatt. */
.kk-jelmagy{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
.kk-jelmagy-szin{width:11px;height:11px;border-radius:3px;display:inline-block}
.kk-jelmagy-szin--workshop{background:var(--blue-700)}
.kk-jelmagy-szin--qa{background:var(--blue-100);border:1px solid var(--blue)}
.kk-jelmagy-szin--kimeno{background:var(--orange-600)}

/* Borítókép egy aktualitás vagy alkalom lapján (könyvborító, filmplakát). */
.kk-boritokep{
	border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;
	border:1px solid var(--line);background:var(--line-soft);
}
/* Álló borító (könyv, plakát) ne nyúljon kártyaszélesre: középen, korlátos magassággal. */
.kk-boritokep img{width:auto;max-width:100%;max-height:440px;height:auto;display:block;margin:0 auto}

/* Könyv fülszövege a „hátlapon” – Mea kérése, 2026-09-16. */
.prose .kk-fulszoveg{
	margin:22px 0 14px;padding:20px 22px;
	background:var(--orange-050);border:1px solid var(--line);
	border-left:4px solid var(--orange);border-radius:var(--r-md);
	font-size:13.5px;
}
.prose .kk-fulszoveg-cim{
	font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
	color:var(--muted);margin-bottom:10px;
}
.prose .kk-fulszoveg blockquote{background:transparent;border-left-color:var(--orange);font-style:italic}
.prose .kk-fulszoveg-szerzo{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}

/* Beágyazott videó a szövegtörzsben (YouTube-link beillesztve). */
.prose iframe,.prose video{max-width:100%;border-radius:var(--r-md)}
.prose .wp-block-embed__wrapper{position:relative}
.prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper{padding-top:56.25%}
.prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe{
	position:absolute;inset:0;width:100%;height:100%;
}

/* Kuponkód-másoló: csak ikon. A „Másolom” felirattal a gomb új sorba csúszott
   a kód mellől. Sikeres másolás után pipa. (Lali, 2026-09-09.) */
.kk-masol{padding:0 10px;flex:none}
.kk-masol.kk-masolva{border-color:#12A87C;color:#12A87C}
.kk-masol.kk-masolva .icon{display:none}
.kk-masol.kk-masolva::after{content:'✓';font-size:15px;font-weight:800;line-height:1}

/*
 * „bővebben”: a szöveg FOLYTATÁSA nyílik ki, nem az egész szöveg újra.
 *
 * A választó szándékosan `details.kk-tovabb`: ugyanez az osztálynév ül az
 * epizódoldal „Mehetünk tovább?” KÁRTYÁJÁN is, és a sima `.kk-tovabb`
 * `display:inline` a kártyát is összenyomta. (Lali, 2026-09-10.)
 */
details.kk-tovabb{display:inline}
details.kk-tovabb summary{
	display:inline;cursor:pointer;color:var(--blue);font-weight:600;list-style:none;
}
details.kk-tovabb summary::-webkit-details-marker{display:none}
details.kk-tovabb[open] summary{display:none}

/* ---------- LETÖLTÉSEK: modul → epizód bontás (Mea, 2026-09-10) ---------- */

/*
 * A modul lenyithato (`<details>`), az epizod pedig azon belul kap fejlecet -
 * enelkul nem derult ki, melyik feladatlap melyik videohoz tartozik. A
 * nyitas/zaras a bongeszo sajat `<details>`-e, tehat JS nelkul is mukodik.
 */
.kk-dl-modul > summary{cursor:pointer;list-style:none;margin-bottom:0}
.kk-dl-modul > summary::-webkit-details-marker{display:none}
.kk-dl-modul[open] > summary{margin-bottom:16px}
.kk-dl-fej::after{
	content:"";margin-left:10px;flex:none;
	width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
	transform:rotate(45deg);transition:transform .15s ease;
}
.kk-dl-modul[open] .kk-dl-fej::after{transform:rotate(-135deg)}
.kk-dl-fej .chip{margin-left:auto}

/* A modul saját borítója a fejlécben, 16:9-ben – ugyanaz a kép, mint a
   Sikerút modulkártyáján, csak kicsiben. Fölötte a sorszám. */
.kk-dl-borito{
	flex:none;width:88px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
	background:var(--blue-050);display:block;
}
.kk-dl-borito img{width:100%;height:100%;object-fit:cover;display:block}
.kk-dl-modulcim{flex:1 1 auto;min-width:0}
.kk-dl-modulszam{
	display:block;font-size:11px;font-weight:800;letter-spacing:.07em;
	text-transform:uppercase;color:var(--blue-700);margin-bottom:1px;
}
/* A darabszám ne törjön két sorba a modulcím mellett – telefonon a hármas
   flex-sorban (borító + cím + chip) épp ez esett szét. */
.kk-dl-fej .chip{white-space:nowrap}

@media (max-width:560px){
	.kk-dl-borito{width:64px}
}
.kk-dl-modul > summary:hover h3{color:var(--blue-700)}

.kk-dl-ep + .kk-dl-ep{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.kk-dl-ep-cim{
	display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 11px;
	font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-700);
}
.kk-dl-ep-cim span{
	font-size:14px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);
}

/*
 * Mea alakja a kezdolap koszonteseben (2026-09-10).
 *
 * A `.hello` egy flex sor: balra a tag profilkepe es a szoveg, jobbra Mea.
 * A `margin-left:auto` tolja a jobb szelre, a negativ also margo pedig
 * beleulteti a sor aljaba, hogy ne noveljen sormagassagot feleslegesen.
 * Telefonon nincs ra hely, ott elrejtjuk.
 */
/*
 * Mea ULO kivagat, tehat kell ala talaj. A koszontes ezert a kezdolapon
 * lekerekitett panel, es Mea a panel also elere ul (`bottom:0`) - a jobb
 * oldali belso margo tartja tole a szoveget. Panel nelkul a feher hatteren
 * lebegett, elvagott labfejjel.
 */
.hello--mea{
	position:relative;overflow:hidden;
	min-height:140px;padding:18px 168px 18px 20px;
	background:linear-gradient(115deg,var(--blue-050) 0%,var(--white) 58%);
	border:1px solid var(--line);border-radius:var(--r-lg);
}
.hello__mea{
	position:absolute;right:28px;bottom:0;
	width:auto;height:128px;pointer-events:none;
	object-fit:contain;object-position:bottom;
}
@media (max-width:900px){
	/* Telefonon is Mea áll jobbra, kisebben (Mea, 2026-09-24). A tag saját
	   korongja itt kimarad: a fejléc jobb sarkában úgyis ott van. */
	.hello--mea{min-height:112px;padding:14px 108px 14px 16px}
	.hello--mea .avatar{display:none}
	.hello__mea{right:12px;height:104px}
}

/*
 * Keszitette-jelzes a nyilvanos lablecben.
 *
 * Halvany es kicsi: vedjegy, nem hirdetes. A copyright-sor VEGERE kerul,
 * tehat a jobb also sarokba - de a sajat sorába csuszik, ha nem fer el.
 */
.nyil-lab__jog .kk-keszitette{
	display:inline-block;margin-left:14px;
	font-size:11.5px;color:var(--muted);opacity:.65;
}
.nyil-lab__jog .kk-keszitette a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.nyil-lab__jog .kk-keszitette:hover{opacity:1}
@media (max-width:640px){
	.nyil-lab__jog .kk-keszitette{display:block;margin:6px 0 0}
}

/* ---------- Tesztelői visszajelzések, 2026-09-22 ---------- */

/* Első 5 lépés: a csukott lépés mellett „(kattints ide)”, nyitva eltűnik. */
.kk-elso5__tipp{font-weight:600;font-size:12.5px;color:var(--blue-700);margin-left:4px}
.kk-elso5__lepes[open] .kk-elso5__tipp,
.kk-elso5__lepes.kesz .kk-elso5__tipp{display:none}
.kk-elso5__video{margin:0 0 14px}

/* Fejléc-kereső, belekattintva a gyakori keresésekkel (2026-09-24).
   A `:hover` a lenyílón tartja nyitva kattintás közben, amikor a mező
   már elvesztette a fókuszt, de a link még nem kapta meg (Safari). */
.kk-fejkereso{position:relative}
.kk-fejkereso__gomb{display:none;width:42px;height:42px;border-radius:999px;align-items:center;justify-content:center;color:var(--ink-soft)}
.kk-fejkereso__szavak{
	display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:50;width:320px;
	flex-wrap:wrap;align-items:center;gap:8px;padding:14px;
	background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
}
.kk-fejkereso:focus-within .kk-fejkereso__szavak,
.kk-fejkereso__szavak:hover{display:flex}
.kk-fejkereso__szavak > span{width:100%;font-size:12.5px;font-weight:600;color:var(--muted)}
.kk-fejkereso__szavak .chip{margin-bottom:0}
@media (max-width:900px){
	/* Telefonon nagyító, alatta a fejléc teljes szélességében nyílik le. */
	.kk-fejkereso{position:static}
	.kk-fejkereso__gomb{display:flex}
	.kk-fejkereso__panel{
		display:none;position:absolute;left:0;right:0;top:100%;padding:14px 18px;
		background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
	}
	.kk-fejkereso.nyitva .kk-fejkereso__panel{display:block}
	.kk-fejkereso__szavak,
	.kk-fejkereso:focus-within .kk-fejkereso__szavak{
		display:flex;position:static;width:auto;margin-top:12px;padding:0;background:none;border:0;box-shadow:none;
	}
}

/* Bónuszvideó után: „Folytasd a Sikerutadat” narancs jelzővel. */
.kk-epnav-sikerut .kk-epnav-k{color:var(--orange-600)}

/* Letöltés bemutató oldala. */
.kk-letoltes-kapcs{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.kk-letoltes-kapcs a{font-weight:700;color:var(--blue-700)}

/* A hónap pénzügyi hírei: a kihívás dobozának kék testvére (2026-09-24). */
.challenge--hirek{background:linear-gradient(135deg,var(--blue-050),var(--white));border-color:var(--line)}
.challenge--hirek::after{background:radial-gradient(circle,rgba(23,95,238,.12),transparent 68%)}
.challenge--hirek .challenge-ic{background:linear-gradient(135deg,var(--blue),var(--blue-700));box-shadow:var(--sh-blue)}
[data-tema="sotet"] .challenge--hirek{background:linear-gradient(135deg,var(--blue-050),var(--white));border-color:var(--line)}

/* Értékesítési oldal (kijelentkezett kezdőlap, 2026-10-05). A törzs Mea saját
   blokkja, ID-hez kötött stílusokkal; itt csak a keret van. */
body.sales{background:#fff;color:#2E3A4A}
.sales-fej{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:12px 20px}
.sales-logo img{display:block;width:120px;height:auto}
.sales-lab{max-width:1200px;margin:0 auto;padding:18px 20px 32px}
@media (max-width:640px){.sales-fej{padding:10px 16px}.sales-logo img{width:96px}}

/* Aktualitások: színes sávok típus szerint (Mea, 2026-10-06). Pénzügyi hírek
   kék, havi téma erős narancs, a többi halvány narancs. */
.row-akt{background:var(--orange-050);border-radius:var(--r-md);margin:0 -12px;padding:13px 12px}
.row-akt+.row-akt{border-top:0;margin-top:6px}
.row-akt .row-ic:not(.row-kep){background:var(--white)}
.row-akt--tema{background:rgba(255,155,56,.28)}
.row-akt--kek{background:var(--blue-050)}
.row-akt:hover{filter:brightness(.98)}