/* /tanaroknak/ – oldal-specifikus stílus (ux-v2, 2026-10-16). A közös ux- komponensek a site.css-ben vannak;
   itt csak a tanári oldal saját elemei: hős-videó, kártya-ikon, 3 lépéses bemutató, kérdések, záró blokk.
   A lektor-űrlap 2026-10-16 óta a /lektorok/#jelentkezes oldalon van (p-lektorok.css). */

/* ---------- hős ---------- */
@media (min-width:900px){.tk-trust li:not(:last-child)::after{margin-inline:10px}}
@media (max-width:360px){.tk-hero .ux-kicker{letter-spacing:.04em;padding-inline:10px 12px}.tk-hero .ux-kicker::before{margin-right:8px}}
.tk-hero .ux-sub{max-width:40ch}
.tk-hero .ux-actions{margin-top:26px}
.tk-hero .ux-trust{margin-top:16px;font-size:14px}
.tk-trust a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;text-decoration-color:rgba(255,255,255,.35)}
.tk-trust a:hover{color:var(--fg)}
/* a némán induló videón a lejátszás-jel csak akkor látszik, ha az automatikus indulás elmaradt (tanar.js: .tk-auto) */
.tk-video .ux-video-frame.tk-auto:not(.is-active) .ux-video-play{opacity:0;pointer-events:none}
.tk-video .ux-video-frame:not(.tk-auto):not(.is-playing) .ux-video-sound{display:none}
.tk-video .ux-video-frame>video{cursor:pointer}
/* „Hanggal” gomb: kisebb, üveghatású pirula; a 48 px-es érintési felület egy láthatatlan szegélyből jön */
.tk-video .ux-video-sound{right:10px;bottom:10px;min-height:38px;padding:0 14px 0 12px;gap:7px;font-size:13.5px;background:rgba(10,13,20,.66)}
.tk-video .ux-video-sound::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat}
.tk-video .ux-video-sound::after{content:"";position:absolute;inset:-6px}
.tk-video .ux-video-frame.is-active>video{cursor:auto}

/* ---------- két mód: kártyák ikonnal ---------- */
.tk-modes .ux-head{margin-bottom:clamp(20px,3vw,32px)}
.tk-card>summary{grid-template-columns:52px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center}
.tk-ico{grid-row:1/span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;border:1px solid var(--hair-2);background:rgba(255,255,255,.04);color:var(--fg)}
.tk-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* krétarajz a vonalas ikon helyett ({{rajz:kulcs:ikon}}) */
.tk-card>summary:has(.dd--ikon){grid-template-columns:72px minmax(0,1fr)}.tk-ico:has(>.dd){width:72px;height:72px;border:0;border-radius:0;background:none}
@media (max-width:640px){.tk-card>summary:has(.dd--ikon){grid-template-columns:60px minmax(0,1fr)}.tk-ico:has(>.dd){width:60px;height:60px}}
.tk-card .ux-card-kicker{align-self:end}
.tk-card .ux-card-title{align-self:start;font-size:clamp(21px,.8vw + 17px,26px)}
.tk-card .ux-card-text,.tk-card .ux-more,.tk-card>summary>.muted{grid-column:1/-1}
.tk-card .ux-card-text{margin-top:10px}
.tk-card>summary:hover .ux-more{color:#fff}
.tk-card .ux-card-body ul{list-style:none;padding:0;gap:10px}
.tk-card .ux-card-body li{position:relative;padding-left:22px}
.tk-card .ux-card-body li::before{content:"";position:absolute;left:3px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.tk-card .ux-card-body li b{color:var(--fg)}
.tk-card .ux-card-body>.ux-link{justify-self:start}
/* nyitva kisebb rés a „Hogyan megy?” és az elválasztó között */
.tk-card[open]>summary{padding-bottom:10px}
.tk-card .ux-card-body{padding-top:16px}
.tk-shot{margin:4px 0 0}
.tk-shot figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}
/* kivágás: a kép egy olvasható részlete (régió a forrásképen), minden szélességen; a régiót a --w/--x/--y adja */
.tk-crop{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar,16/10);border-radius:12px;border:1px solid var(--hair-2);background:#0b1120}
.tk-crop>img{position:absolute;left:var(--x,0);top:var(--y,0);display:block;width:var(--w,100%);max-width:none;height:auto}
/* óra indítása (1002×654): bal felső 520×390 – cím, témakör, hossz, tempó, szint és a „10 perc ≈ 20 feladat” sor */
.tk-shot--ora .tk-crop{--ar:4/3;--w:192.7%}
/* házi haladása (2120×1278): bal felső 1460×1015 – összesítő, csík, és tanulónként név · darab · jó · kész (Bence…Emma) */
.tk-shot--hazi .tk-crop{--ar:1460/1015;--w:145.2%}

/* ---------- bemutató: 3 lépés ---------- */
.tk-demo{position:relative;padding:clamp(14px,2.6vw,28px);border-radius:24px;border:1px solid var(--hair-2);
  background:radial-gradient(90% 70% at 0% 0%,rgba(245,179,43,.08),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(57,208,255,.06),transparent 65%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel);box-shadow:var(--sh-2)}
.tk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;border:1px solid var(--hair);background:rgba(0,0,0,.3)}
.tk-tabs button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:50px;padding:0 8px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:700 15.5px/1.2 var(--body);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.tk-tabs button b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--hair-2);font:700 12px/1 var(--mono);color:var(--muted);transition:background-color .2s,color .2s,border-color .2s}
.tk-tabs button:hover{color:var(--fg)}
.tk-tabs button[aria-selected=true]{background:var(--panel-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2),0 8px 20px -10px rgba(0,0,0,.7)}
.tk-tabs button[aria-selected=true] b{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.tk-tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;opacity:0}
.tk-demo.is-auto .tk-tabs button.run::after{opacity:.85;animation:tkRun var(--tk-dur,7s) linear forwards}
@keyframes tkRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:420px){
  .tk-tabs button{flex-direction:column;gap:4px;min-height:62px;font-size:14.5px}
  .tk-tabs button::after{bottom:4px}
}
/* a lépések egymáson: a doboz magassága a legmagasabb lépésé, így váltáskor semmi nem ugrik */
.tk-stage{display:grid;margin-top:4px}
.tk-screen{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;min-width:0;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.tk-screen.on{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease),visibility 0s}
.tk-cap{grid-column:1/-1;margin:14px 2px 2px;font-size:17px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.tk-cap b{color:var(--fg)}
.tk-k{display:block;font:700 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* tábla / kivetítő */
.tk-board{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px;border-radius:16px;border:1px solid var(--hair-2);
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,radial-gradient(80% 70% at 30% 20%,rgba(245,179,43,.08),transparent 70%),#0b1120;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tk-code{margin-top:4px;font:700 clamp(40px,7vw,68px)/1.04 var(--mono);letter-spacing:.1em;color:var(--gold);text-shadow:0 0 34px rgba(245,179,43,.35);white-space:nowrap}
.tk-url{font-size:14px;color:var(--muted)}
.tk-names{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:72px;margin-top:10px}
.tk-names span{padding:5px 11px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(255,255,255,.07);font-size:14px;font-weight:700;color:var(--fg);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.tk-demo.js .tk-names span{opacity:0;transform:translateY(6px) scale(.9)}
.tk-demo.js .tk-names span.in{opacity:1;transform:none}
.tk-count{margin-top:auto;padding-top:6px;font-size:15px;color:var(--fg-2)}
.tk-count b{font:700 22px/1 var(--mono);color:var(--fg)}
/* telefon */
.tk-phone{position:relative;display:grid;align-content:start;gap:10px;min-width:0;padding:30px 16px 18px;border-radius:30px;border:1px solid var(--hair-2);background:linear-gradient(180deg,#161c2a,#0d121c);box-shadow:inset 0 0 0 5px #05070b,var(--sh-1)}
.tk-phone::before{content:"";position:absolute;top:12px;left:50%;width:56px;height:6px;margin-left:-28px;border-radius:6px;background:#05070b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tk-field{display:grid;gap:3px;min-width:0;padding:9px 12px;border-radius:12px;border:1px solid var(--hair-2);background:rgba(0,0,0,.32);font:700 17px/1.2 var(--mono);color:var(--fg);overflow-wrap:anywhere}
.tk-field small{font:600 12px/1.2 var(--body);color:var(--muted)}
.tk-pbtn{display:block;padding:12px;border-radius:12px;background:#b5f2d3;color:#0b2a1d;font-weight:800;text-align:center;box-shadow:0 3px 0 #7cc9a3}
.tk-phone--answer{grid-template-columns:minmax(0,1fr) auto}
.tk-phone--answer>.tk-k,.tk-phone--answer>.tk-q,.tk-phone--answer>.tk-note{grid-column:1/-1}
.tk-phone.tk-phone--answer>.tk-pbtn{grid-column:auto;align-self:stretch;display:grid;place-items:center;padding:0 22px}
.tk-note{font-size:13px;line-height:1.4;color:var(--muted)}
.tk-q{font-size:15.5px;line-height:1.45;color:var(--fg)}
/* kivetítő-kép és oldalsáv */
.tk-proj{margin:0;min-width:0}
.tk-proj .tk-crop{border-radius:14px;box-shadow:0 22px 46px -22px rgba(0,0,0,.85)}
/* osztályharc (1280×606): a játéktér középen, a teszt-feliratos felső sáv és alsó név nélkül (y 92–549) */
/* osztályharc az új hősökkel (1280×720, 2026-10-29): a középső rész, ahol a hősök vannak */
.tk-proj--game .tk-crop{--ar:4/3;--w:150%;--x:-25%;--y:-6.25%}
@media (min-width:760px){.tk-proj--game .tk-crop{--ar:16/9;--w:120%;--x:-10%;--y:-10%}}
/* 3. lépés: a kivetítő visszajelzés-panelje HTML-ben (a valódi felület szövegeivel), teszt-adat és kitalált darabszám nélkül */
.tk-fb{gap:10px}
.tk-fb-q{margin-top:4px;font:700 clamp(17px,.9vw + 13px,21px)/1.38 var(--body);color:var(--fg);text-wrap:pretty}
.tk-fb-w{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:2px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,92,106,.32);background:rgba(255,92,106,.08)}
.tk-fb-w small{font-size:13.5px;color:var(--fg-2)}
.tk-fb-w b{font:700 19px/1.2 var(--mono);color:#ff9aa3;white-space:nowrap}
.tk-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tk-ctrl span{display:grid;place-items:center;min-height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--hair-2);background:rgba(255,255,255,.05);font-weight:700;font-size:14.5px;color:var(--fg)}
.tk-ctrl .tk-ctrl-go{flex:1 1 auto;border-color:transparent;background:#b5f2d3;color:#0b2a1d;box-shadow:0 3px 0 #7cc9a3}
.tk-side{display:grid;align-content:start;gap:14px;min-width:0;padding:18px;border-radius:16px;border:1px solid var(--hair);background:rgba(255,255,255,.025)}
.tk-checks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tk-checks li{position:relative;padding-left:34px;font-size:16px;line-height:1.4;color:var(--fg)}
.tk-checks li::before{content:"";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(61,220,132,.45);background:rgba(61,220,132,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.tk-dnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:20px}
@media (max-width:759px){
  .tk-phone{padding:28px 14px 16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .tk-phone>.tk-k,.tk-phone>.tk-pbtn,.tk-phone>.tk-note,.tk-phone>.tk-q{grid-column:1/-1}
  /* 3. lépés telefonon: a lista keret nélkül a panel alatt, hogy a lépés ne legyen magasabb az elsőnél */
  .tk-fb{padding:16px}
  .tk-fb~.tk-side{padding:6px 2px 0;border:0;background:none;gap:12px}
  .tk-fb~.tk-side .tk-checks{gap:10px}
  .tk-fb~.tk-side .tk-checks li{font-size:15.5px}
}
@media (max-width:360px){
  .tk-fb-q{font-size:16px}
  .tk-ctrl{gap:6px}
  .tk-ctrl span{min-height:38px;padding:0 10px;font-size:13.5px}
}
@media (max-width:559px){
  .tk-dnav{flex-direction:column;align-items:stretch;gap:4px}
  .tk-dnav .ux-link{justify-content:center}
}
@media (min-width:760px){
  .tk-screen{grid-template-columns:minmax(0,1fr) 264px;grid-template-rows:auto 1fr;align-content:stretch;column-gap:18px;row-gap:16px}
  .tk-proj,.tk-side{align-self:start}
  /* 3. lépés asztalon: kivetítő-méretű betűk, a panel középre zárva; a lista a panel mellett középen */
  .tk-board.tk-fb{padding:24px 28px;gap:14px}
  .tk-fb-q{font-size:24px;line-height:1.32}
  .tk-fb-w{padding:12px 16px}
  .tk-fb-w small{font-size:15px}
  .tk-fb-w b{font-size:24px}
  .tk-ctrl span{min-height:48px;padding:0 18px;font-size:16px}
  .tk-fb~.tk-side{align-self:center}
  .tk-board{justify-content:center}
  .tk-names{min-height:0}
  .tk-count{margin-top:6px}
  .tk-phone{align-content:center}
  .tk-cap{margin-top:18px;font-size:18px;max-width:62ch}
}

/* ---------- kérdések: asztalon két oszlop ---------- */
.tk-faq{padding-bottom:clamp(40px,5vw,64px)}
@media (min-width:900px){
  .tk-faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
  .tk-faq .ux-head{margin-bottom:0;position:sticky;top:24px}
}

/* ---------- záró blokk ---------- */
.tk-end{text-align:center;padding-top:clamp(16px,3vw,40px)}
.tk-anchor{display:block;height:0}
.tk-end-card{position:relative;isolation:isolate;overflow:hidden;max-width:880px;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(20px,5vw,64px);border-radius:28px;border:1px solid var(--hair-2);
  background:radial-gradient(70% 90% at 50% 0%,rgba(245,179,43,.17),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--panel);box-shadow:var(--sh-2)}
.tk-end-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%)}
.tk-end-card .ux-eyebrow{justify-content:center}
.tk-end-card .ux-h2{max-width:18ch;margin-inline:auto}
.tk-end-card .ux-lead{margin-inline:auto;max-width:46ch}
.tk-end-card .ux-actions{justify-content:center;margin-top:30px}
@media (min-width:561px){.tk-end-card .ux-actions .btn{min-width:320px}}
.tk-more{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-top:22px}
@media (max-width:559px){.tk-more{flex-direction:column;align-items:center;gap:0}}

@media (prefers-reduced-motion:reduce){
  .tk-screen,.tk-screen.on{transform:none;transition:none}
  .tk-demo.is-auto .tk-tabs button.run::after{animation:none;opacity:0}
}
/* 2026-10-19: az első képernyő (a hirdetésből jöttek 75%-a innen megy el) – három lépés a gomb fölött, egy sor a gomb alatt */
.tk-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;max-width:46ch}
.tk-steps li{display:flex;gap:12px;align-items:center;font-size:17px;line-height:1.35;color:var(--fg)}
.tk-steps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--gold-ink,#1a1200);font-size:15px}
.tk-free{margin-top:10px;font-size:14px;color:var(--muted)}
@media (max-width:760px){.tk-steps{margin-top:16px}.tk-steps li{font-size:16px}}

/* telefonon az „Osztályt nyitok” gomb közvetlenül a bevezető után jön, a három lépés alatta: a sütisáv nem takarja el (2026-10-27) */
@media (max-width:640px){.tk-hero .ux-hero-copy{display:flex;flex-direction:column}.tk-hero .ux-hero-copy>.ux-actions{order:3;margin-top:20px}.tk-hero .ux-hero-copy>.tk-proof{order:4}.tk-hero .ux-hero-copy>.tk-steps{order:5;margin-top:22px}.tk-hero .ux-hero-copy>.tk-free{order:6}}
.tk-proof{margin:12px 0 0;font-size:15px;color:var(--fg-2)}.tk-proof b{color:var(--gold)}.tk-free a{color:inherit;text-decoration:underline;text-underline-offset:3px}.tk-tutor{margin-top:6px}

/* hirdetésről, telefonon érkező tanár első képernyője (2026-10-28): cím, egy mondat, a videó, utána a két gomb; a lépések lejjebb.
   A .ux-hero-copy kibontva (display:contents), így a videó (.ux-hero-media) a bevezető és a gombok közé sorolható DOM-csere nélkül. */
@media (max-width:640px){
  .tk-hero{display:flex;flex-direction:column;gap:0}
  .tk-hero .ux-hero-copy{display:contents}
  .tk-hero .ux-title{font-size:clamp(30px,8.6vw,36px);line-height:1.04}
  .tk-hero .ux-sub{font-size:16px;line-height:1.4;margin-top:8px}
  .tk-hero .ux-hero-media{order:1;margin-top:14px}
  .tk-hero .ux-hero-media .ux-video-cap{display:none}
  .tk-hero .ux-hero-media .ux-trust{margin-top:10px}
  .tk-hero .ux-hero-copy>.ux-actions{order:2;margin-top:14px}
  .tk-hero .ux-hero-copy>.tk-steps{order:3;margin-top:22px}
}
.tk-hero .ux-actions>.ux-link{justify-content:center}
.tk-later{width:100%;display:grid;gap:8px;margin:6px 0 4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.tk-later label{font-size:14px;color:var(--fg-2)}
.tk-later-row{display:flex;gap:8px;min-width:0}
.tk-later-row input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid #5a6783;background:var(--bg);color:var(--fg);font-size:16px;font-family:var(--body)}
.tk-later-row input:focus{outline:2px solid var(--gold);outline-offset:1px}
.tk-later-row input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.tk-later-row .btn{flex:none;min-height:48px;padding:0 18px}
.tk-later-note{margin:0;font-size:13px;color:var(--muted)}
.tk-later-msg{margin:0;font-size:15px;font-weight:600}
@media (min-width:641px){.tk-later{max-width:520px}}

/* első képernyő v3 (2026-10-29, Barnabás: „a tanárok a tényeket akarják látni, kezdjük személyesebb dolgokkal, a videót sokkal lejjebb”):
   cím, egy mondat, tanári idézet, a hirdetés képe (a hős utáni szinkron szkript cseréli), három tény, a két gomb; a videó a #video szakaszban */
.tk-hero-quote{margin:18px 0 0;padding:11px 14px 11px 16px;max-width:46ch;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:rgba(255,255,255,.035)}
.tk-hero-quote blockquote{margin:0}
.tk-hero-quote p{margin:0;font-size:16.5px;line-height:1.45;font-style:italic;color:var(--fg)}
.tk-hero-quote figcaption{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.tk-hero-quote figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tk-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;max-width:48ch}
.tk-facts li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.42;color:var(--fg-2)}
.tk-facts li b{color:var(--fg)}
.tk-facts li::before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;border:1px solid rgba(61,220,132,.45);background:rgba(61,220,132,.14);color:#7ff0b0;font-size:12px;font-weight:800;line-height:1}
.tk-hero-shot{margin:0}
.tk-hero-shot img{display:block;width:100%;height:auto;border-radius:clamp(12px,1.6vw,18px);border:1px solid var(--hair-2);background:#0b1120;box-shadow:0 22px 46px -22px rgba(0,0,0,.85)}
.tk-hero-shot figcaption{margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--muted)}
@media (max-width:640px){
  .tk-hero .ux-hero-copy>.tk-hero-quote{margin-top:14px}
  /* 2026-11-03: a gomb újra az első képernyőn van, a három lépés után (a 10-29-i változatban a 892. pixelre csúszott). */
  .tk-hero .ux-hero-copy>.tk-steps{order:1;margin-top:14px}
  .tk-hero .ux-hero-copy>.tk-hero-quote{order:3;margin-top:18px}
  .tk-hero .ux-hero-media{order:4;margin-top:16px}
  .tk-hero .ux-hero-copy>.tk-facts{order:5;margin-top:16px}
  .tk-hero .ux-hero-copy>.ux-actions{order:2;margin-top:16px}
  .tk-hero-quote p{font-size:15.5px}
  .tk-facts li{font-size:15.5px}
}
/* tanárokkal készül: átnézés, jelzés és javítás, ki csinálja */
.tk-hang-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tk-hang-card{display:grid;align-content:start;gap:8px;min-width:0;padding:18px;border-radius:16px;border:1px solid var(--hair);background:rgba(255,255,255,.025)}
.tk-hang-card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.tk-hang-card p a{color:var(--fg)}
.tk-hang-k{font:700 12.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.tk-hang-card .ux-link{justify-self:start;margin-top:2px}
/* a videó lejjebb, keskenyebben; a három lépés a záró blokkban */
.tk-video-sec .ux-video{max-width:760px}
.tk-end-card .tk-steps{margin:22px auto 0;text-align:left}
@media (max-width:640px){.tk-hero .ux-hero-media .tk-trust{display:none}}