/* A papír jobb, mint a tablet — prezentáció: keret, vászon, közös elemek, áttekintő nézet, indítókapu, felugró ablak, nyomtatás.
   A diák 1280×720-as vásznon készülnek (transform: scale() igazítja a nézetablakhoz).
   Elv: az alapállapot mindig a VÉGLEGES kép (nyomtatás, áttekintő bélyegkép, szkript nélkül is);
   a belépő mozgás és a „poénok” csak az aktív diára (`.slide.is-active`) kapcsolnak be, `backwards` kitöltéssel. */

.deck-body {
  --blue: #2340f5; --blue-deep: #1626b8; --navy: #121a7a; --ink: #1b2bc9; --pink: #ffb3d7; --hot: #ff6fb5; --soft: #ffe1ef;
  --cream: #fbf6ef; --paper: #fffdf9; --text: #18208f; --muted: #4b52a8; --yellow: #ffd36e; --peri: #8fa0ff; --ok: #19a974;
  --line: rgba(27, 43, 201, .14); --shadow: 0 1px 0 rgba(27, 43, 201, .06), 0 18px 40px -22px rgba(22, 38, 184, .35);
  --f-display: "Bricolage Grotesque", "Figtree", sans-serif; --f-body: "Figtree", system-ui, sans-serif; --f-hand: "Caveat", "Comic Sans MS", cursive; --f-serif: "Fraunces", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  margin: 0; height: 100vh; overflow: hidden; background: #0c1250; color: var(--text); font-family: var(--f-body); -webkit-font-smoothing: antialiased;
}
.deck-body *, .deck-body *::before, .deck-body *::after { box-sizing: border-box; }
.deck-body.is-idle { cursor: none; }
:where(.deck-body) button { font: inherit; color: inherit; }
.deck-body img { display: block; max-width: none; }

/* ------------------------------------------------------------ keret: felső sáv, haladás, alsó navigáció */
.deck-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 40; display: flex; align-items: center; gap: 22px; padding: 0 20px; background: rgba(18, 26, 122, .97); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: opacity .4s, transform .4s; }
.deck-back { flex: none; display: inline-flex; align-items: center; font: 800 13px/1 var(--f-body); color: var(--ink); background: var(--pink); border-radius: 999px; padding: 9px 15px; text-decoration: none; transition: background .15s, transform .15s; }
.deck-back:hover { background: #fff; transform: translateX(-2px); }
.deck-brand { flex: none; font: 500 17px/1 var(--f-display); letter-spacing: -.02em; color: #fff; text-decoration: none; white-space: nowrap; }
.deck-brand b { font-weight: 800; color: var(--pink); }
.deck-chap { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; justify-content: center; overflow: hidden; }
.deck-chap button { flex: none; font: 700 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .62); background: transparent; border: 0; border-radius: 999px; padding: 8px 9px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.deck-chap button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.deck-chap button.is-on { background: var(--pink); color: var(--ink); }
.deck-topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.deck-btn { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--f-body); color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 9px 15px; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.deck-btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.deck-btn--accent { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.deck-btn--accent:hover { background: #fff; border-color: #fff; }
.deck-progress { position: fixed; top: 56px; left: 0; right: 0; height: 3px; z-index: 40; background: rgba(255, 255, 255, .1); transition: opacity .4s; }
.deck-progress__bar { height: 100%; width: 0; background: var(--hot); transition: width .35s var(--ease); }
.deck-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 68px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 14px; background: rgba(18, 26, 122, .97); border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; transition: opacity .4s, transform .4s; }
.deck-topbar__title { position: absolute; left: 20px; font: 700 11.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.deck-arrow { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #fff; transition: background .15s, color .15s; }
.deck-arrow:hover:not(:disabled) { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.deck-arrow:disabled { opacity: .3; cursor: default; }
.deck-count { font: 700 13px/1 var(--f-body); letter-spacing: .1em; color: rgba(255, 255, 255, .7); min-width: 84px; text-align: center; }
.deck-count b { color: #fff; font-weight: 800; }
.deck-hint { position: absolute; right: 20px; font: 600 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.deck-body.is-idle .deck-topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.deck-body.is-idle .deck-nav { opacity: 0; transform: translateY(100%); pointer-events: none; }
.deck-body.is-idle .deck-progress { opacity: 0; }
@media (max-width: 1290px) { .deck-chap { display: none; } .deck-topbar__actions { margin-left: auto; } }
@media (max-width: 900px) { .deck-hint, .deck-topbar__title { display: none; } }
@media (max-width: 900px) { .deck-brand { display: none; } }
@media (max-width: 640px) { .deck-btn { display: none; } }

/* ------------------------------------------------------------ vászon */
.deck { position: fixed; top: 59px; bottom: 68px; left: 0; right: 0; z-index: 10; }
.deck-body.is-fs .deck { top: 0; bottom: 0; }
.deck-edge { position: absolute; top: 0; bottom: 0; width: 8%; max-width: 130px; z-index: 1; cursor: pointer; background: transparent; border: 0; }
.deck-edge--left { left: 0; } .deck-edge--right { right: 0; }
.stage { position: absolute; left: 50%; top: 50%; z-index: 2; width: 1280px; height: 720px; transform-origin: center center; background: var(--cream); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .45); }
.slide { position: absolute; inset: 0; padding: 50px 64px 52px; overflow: hidden; background: var(--cream); color: var(--text); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.slide.is-prev { transform: translateX(-34px); }
.slide.is-next { transform: translateX(34px); }
/* a nem aktív diákon (és az áttekintő bélyegképein) a hurkok állnak */
.slide:not(.is-active) *, .slide:not(.is-active) *::before, .slide:not(.is-active) *::after { animation-play-state: paused !important; }
.slide--soft { background: var(--soft) radial-gradient(rgba(35, 64, 245, .09) 1.5px, transparent 1.5px) 0 0 / 22px 22px; }
.slide--blue { background: var(--blue); color: #fff; }
.slide--navy { background: var(--navy); color: #fff; }
.slide--pink { background: var(--pink); }
.slide--photo { background: #0e1550; color: #fff; padding: 0; }
.slide--cover { background: var(--blue); color: #fff; padding: 0; }
.s-foot { position: absolute; left: 64px; right: 64px; bottom: 20px; z-index: 5; display: flex; justify-content: space-between; font: 700 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(27, 43, 201, .55); pointer-events: none; }
.slide--blue .s-foot, .slide--navy .s-foot, .slide--photo .s-foot { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------ tipográfia és közös elemek */
.s-k { display: inline-flex; align-items: center; gap: 10px; font: 800 12.5px/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.s-k::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.s-k--pink { color: var(--pink); }
.s-h2 { margin: 14px 0 0; font: 800 54px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.s-h2--md { font-size: 42px; line-height: 1.04; }
.s-h2 .pink, .pink { color: var(--hot); }
.slide--blue .s-h2, .slide--navy .s-h2 { color: var(--pink); }
.slide--navy .s-h2 .pink, .slide--blue .s-h2 .pink { color: #fff; }
.s-lead { margin: 18px 0 0; font: 500 19px/1.5 var(--f-body); color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.s-lead b, .tg-p b, .pp-p b { color: var(--ink); }
.s-note { margin: 0; font: 500 13.5px/1.55 var(--f-body); color: var(--muted); border-left: 3px solid var(--hot); padding: 2px 0 2px 14px; max-width: 62ch; }
.s-hint { margin: 0; font: 600 13px/1.4 var(--f-body); color: var(--muted); }
.s-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.hand { font-family: var(--f-hand); font-weight: 700; color: var(--hot); line-height: 1; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; border: 2px solid transparent; font: 700 16px/1 var(--f-body); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn--pink { background: var(--pink); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(255, 111, 181, .8); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--ink); }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--ink); }
.btn--light { color: #fff; }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.more { display: inline-flex; gap: 8px; align-items: center; font: 700 14px/1 var(--f-body); color: var(--blue); }
.more::after { content: "→"; transition: transform .2s; }
button:hover > .more::after, .more:hover::after { transform: translateX(4px); }
.pill { display: inline-block; align-self: flex-start; font: 800 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: var(--pink); color: var(--ink); }
.pill--warn { background: #ffe3a3; }
.photo { position: relative; margin: 0; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); }
.photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo:hover > img { transform: scale(1.04); }
.cap { position: absolute; left: 16px; bottom: 16px; background: var(--pink); color: var(--ink); font: 700 25px/1 var(--f-hand); padding: 6px 16px; border-radius: 999px; transform: rotate(-3deg); }
sup.c { font-size: .62em; font-weight: 700; margin-left: 1px; line-height: 0; vertical-align: super; }
sup.c a { text-decoration: none; background: var(--soft); color: var(--blue); border-radius: 6px; padding: 0 4px; cursor: pointer; }
sup.c a:hover { background: var(--pink); }
.slide--blue sup.c a, .slide--navy sup.c a { background: rgba(255, 255, 255, .16); color: var(--pink); }
.deck-body button:focus-visible, .deck-body a:focus-visible, .deck-body input:focus-visible, .deck-body [role='button']:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
.deck-body .more { background: none; }

/* belépő mozgás: az alapállapot a végleges; az aktív diára „honnan” érkezik */
@keyframes d-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes d-pop { from { opacity: 0; transform: scale(.95); } }
@keyframes d-fade { from { opacity: 0; } }
@keyframes d-grow { from { transform: scaleY(.05); } }
@keyframes d-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-spin { to { transform: rotate(360deg); } }
.slide.is-active .rv { animation: d-rise .8s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
.slide.is-active .rv-pop { animation: d-pop .9s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }

/* ------------------------------------------------------------ áttekintő nézet */
.overview { position: fixed; inset: 0; z-index: 60; display: none; background: #0c1250; overflow-y: auto; padding: 78px 32px 40px; }
.overview.is-open { display: block; }
.overview__head { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: rgba(18, 26, 122, .98); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 2; font: 700 13px var(--f-body); letter-spacing: .06em; }
.overview__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: 1500px; margin: 0 auto; }
.ov-cell { display: block; text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; color: #fff; }
.ov-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); transition: box-shadow .2s, transform .3s var(--ease); }
.ov-cell:hover .ov-frame { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--hot); }
.ov-cell.is-current .ov-frame { box-shadow: 0 0 0 4px var(--pink); }
.ov-frame .slide { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; opacity: 1; visibility: visible; transition: none; pointer-events: none; }
.ov-frame .slide * { pointer-events: none; }
.ov-cap { margin-top: 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .04em; color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------ indítókapu */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--blue); color: #fff; transition: opacity .5s var(--ease), visibility 0s linear .5s; overflow: hidden; }
.gate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 560px at 78% 30%, rgba(255, 111, 181, .35), transparent 70%), radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 1.5px) 0 0 / 24px 24px; }
.gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__box { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 28px; max-width: 800px; animation: d-rise .9s var(--ease) both; }
.gate__brand { font: 500 24px/1 var(--f-display); letter-spacing: -.02em; }
.gate__brand b { font-weight: 800; color: var(--pink); }
.gate__k { margin: 18px 0 0; font: 800 12.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--pink); }
.gate h1 { margin: 0; font: 800 clamp(38px, 6.4vw, 76px)/.98 var(--f-display); letter-spacing: -.035em; color: var(--pink); text-wrap: balance; }
.gate__lead { margin: 4px 0 0; font: 500 clamp(16px, 1.5vw, 20px)/1.5 var(--f-body); color: rgba(255, 255, 255, .9); max-width: 60ch; }
.gate__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.gate__btn { font: 700 16px/1 var(--f-body); padding: 15px 26px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.gate__btn:hover { transform: translateY(-2px); background: #fff; color: var(--blue); }
.gate__btn--full { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.gate__btn--full:hover { background: #fff; border-color: #fff; color: var(--ink); }
.gate__back { margin-top: 6px; font: 700 14px/1 var(--f-body); color: #fff; text-decoration: underline; text-underline-offset: 4px; opacity: .85; }
.gate__back:hover { opacity: 1; color: var(--pink); }
.gate__hint { margin: 10px 0 0; font: 600 11.5px/1.5 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------ felugró ablak (a weboldal részletező ablakainak tartalma) */
.dlg { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: var(--text); font-family: var(--f-body); }
.dlg:not([open]) { display: none; }
.dlg[open] { display: grid; place-items: center; }
.dlg::backdrop { background: rgba(18, 26, 122, .62); backdrop-filter: blur(6px); }
.dlg__box { position: relative; background: var(--cream); border-radius: 28px; width: min(780px, calc(100vw - 32px)); max-height: min(86vh, 900px); overflow: auto; padding: 22px clamp(24px, 4vw, 44px) 36px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .5); animation: d-rise .45s var(--ease) both; }
.dlg--wide .dlg__box { width: min(1060px, calc(100vw - 32px)); }
.dlg__bar { position: sticky; top: -22px; z-index: 3; display: flex; justify-content: space-between; align-items: center; margin: 0 -8px 6px; padding: 4px 0; background: var(--cream); }
.dlg__x { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font-size: 16px; cursor: pointer; }
.dlg__x:hover { background: var(--pink); }
.dlg__back { font: 700 14px var(--f-body); color: var(--blue); background: none; border: 0; cursor: pointer; padding: 8px 4px; }
.dlg__body { font-size: 17px; line-height: 1.55; }
.dlg__body .eyebrow { font: 800 12.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin: 4px 0 14px; display: inline-flex; gap: 10px; align-items: center; }
.dlg__body .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.dlg__body h3 { margin: 0 0 .5em; font: 700 clamp(26px, 3.4vw, 34px)/1.05 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.dlg__body h4 { font: 700 18px/1.2 var(--f-display); color: var(--ink); margin: 6px 0; }
.dlg__body p { margin: 0 0 1em; }
.dlg__body ul, .dlg__body ol { margin: 0 0 1em; padding-left: 1.2em; }
.dlg__body li { margin-bottom: .45em; }
.dlg__body b { color: var(--ink); }
.dlg__body .note { font-size: 14px; color: var(--muted); }
.dlg__body .k-box { background: var(--soft); border-left: 5px solid var(--hot); border-radius: 14px; padding: 14px 18px; margin: 0 0 1em; }
.dlg__body .k-box.blue { background: #e3e8ff; border-left-color: var(--blue); }
.dlg__body table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
.dlg__body th, .dlg__body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dlg__body th { font: 800 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.dlg__body sup.c { font-size: .62em; }
.dlg__body .idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1em; }
.dlg__body .idea { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.dlg__body .idea .em { font-size: 26px; line-height: 1; }
.dlg__body .idea p { font-size: 14.5px; margin: 0; color: var(--muted); }
.dlg__body .q-ol { padding-left: 0; list-style: none; counter-reset: q; display: grid; gap: 8px; }
.dlg__body .q-ol li { counter-increment: q; position: relative; padding: 10px 14px 10px 52px; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0; font-size: 15.5px; }
.dlg__body .q-ol li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 14px; top: 9px; font: 800 20px var(--f-display); color: var(--hot); }
.dlg__body .q-ol small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.dlg__body .src-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dlg__body .src-filter button { font: 700 13px var(--f-body); padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.dlg__body .src-filter button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.dlg__body .src-list { columns: 2; column-gap: 34px; padding: 0; margin: 0; list-style: none; }
.dlg__body .src-list li { break-inside: avoid; padding: 11px 0 11px 46px; position: relative; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 0; }
.dlg__body .src-list li::before { content: attr(data-n); position: absolute; left: 0; top: 11px; font: 800 13px var(--f-display); color: var(--blue); background: var(--soft); border-radius: 8px; min-width: 32px; text-align: center; padding: 3px 0; }
.dlg__body .src-list li b { color: var(--ink); }
.dlg__body .src-list li[hidden] { display: none; }
.dlg__body .src-list li.flash { background: var(--soft); box-shadow: 0 0 0 6px var(--soft); transition: background 1.5s; }
@media (max-width: 760px) { .dlg__body .src-list { columns: 1; } .dlg__body .idea-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ csökkentett mozgás */
@media (prefers-reduced-motion: reduce) {
  .deck-body *, .deck-body *::before, .deck-body *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .slide.is-prev, .slide.is-next { transform: none; }
}

/* ------------------------------------------------------------ nyomtatás: egy dia = egy oldal, végleges állapotok */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body.deck-body { height: auto; overflow: visible; background: #fff; }
  .deck-topbar, .deck-nav, .deck-progress, .deck-edge, .overview, .gate, .dlg, #srcList, .s-actions, .au-act, .btn, .more { display: none !important; }
  .deck { position: static; }
  .stage { position: static; transform: none !important; width: 1280px; height: auto; box-shadow: none; }
  .slide { position: relative; inset: auto; width: 1280px; height: 720px; opacity: 1 !important; visibility: visible !important; transform: none !important; page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .deck-body *, .deck-body *::before, .deck-body *::after { animation: none !important; transition: none !important; }
}