/* Modulvalasztos termekablak, v2 (5. kor). Egyetlen felulet finom szegellyel: fejlecben a fulek,
   alatta a valodi felulet fekvo reszlete a sajat aranyaban, alatta egy-ket mondat es a Demoadatok jelzes.
   Nincs egymasba agyazott pasztell keret, nincs hamis bongeszosav. Az aurora a szakasz hatterben van.
   Viselkedes: shared/termekablak.js (ARIA-fulminta, nyilak, Home, End, nincs automatikus valtas).
   A panelek egy racscellaban allnak, ezert fulvaltaskor a magassag nem valtozik. */
.tw-sec{position:relative}
.tw-sec::before{content:"";position:absolute;inset:-40px 0 0;z-index:-1;pointer-events:none;background:
  radial-gradient(38% 46% at 12% 40%,rgba(170,200,240,.38),transparent 70%),
  radial-gradient(34% 42% at 88% 30%,rgba(201,183,239,.34),transparent 70%),
  radial-gradient(40% 40% at 60% 95%,rgba(243,205,179,.34),transparent 70%)}
.tw{margin-top:36px}
.tw-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(23,23,28,.04),0 18px 40px -24px rgba(23,23,28,.22);padding:10px;overflow:hidden}
.tw-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:4px 6px 12px}
.tw-q{margin:0;font-size:.92rem;font-weight:600;color:var(--ink)}
.tw-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--pill);background:#F2F2EE}
.tw-tab{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 16px;border:0;border-radius:var(--pill);background:transparent;color:var(--ink-2);font:500 .92rem/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:background-color var(--ag-motion-web-state-duration,200ms) var(--ag-motion-web-state-easing,ease),color var(--ag-motion-web-state-duration,200ms) var(--ag-motion-web-state-easing,ease)}
.tw-tab[aria-selected="true"]{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.tw-tab:not([aria-selected="true"]):hover{color:var(--ink);background:rgba(23,23,28,.05)}}
.tw-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* mozgaskarakter (9. kor; 10. kor: Brand Identity 1.1, 6.2). A jelolo helyvaltoztato morph: --tw-morph 260 ms a csomag
   belepesi gorbejevel (.16,1,.3,1); a panelvaltas allapotvaltas: --tw-be 200 ms ease, csak atlatszatlansag, elmozdulas nelkul. */
.tw{--tw-morph:var(--mz-morph,260ms);--tw-morph-ki:var(--mz-morph-ki,cubic-bezier(.16,1,.3,1));
  --tw-be:var(--ag-motion-web-state-duration,200ms);--tw-be-ki:var(--ag-motion-web-state-easing,ease)}
/* kozos, mozgo aktiv jelolo (termekablak2.js): a reteg a fulek folott all, clip-path vagja ki az aktiv ful alakjat */
.tw-tabs--ind{position:relative}
.tw-tabs--ind .tw-tab[aria-selected="true"]{background:transparent;color:var(--ink-2)}
.tw-ind{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--pill);background:var(--ink);
  clip-path:inset(0 100% 0 0 round 999px);-webkit-clip-path:inset(0 100% 0 0 round 999px);
  transition:clip-path var(--tw-morph) var(--tw-morph-ki),-webkit-clip-path var(--tw-morph) var(--tw-morph-ki)}
.tw-ind--azonnal{transition:none!important}
.tw-ind-l{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font:500 .92rem/1 var(--sans);white-space:nowrap}
.tw-stage{display:grid}
/* panelvaltas: az uj panel felul, athunessel es 6 px-es emelkedessel er be (200 ms ease; 11. kor, Tomi dontese 2026-10-10, d7:
   a 10. korben elhagyott emelkedes vissza, a regi 220 ms helyett a mostani allapot-tokennel). A regi panel alatta teljesen
   fedve marad, es csak a belepes vegen tunik el (atlatszatlansag, eltolas es lathatosag is kesleltetve, igy nem ugrik meg,
   amig latszik). Igy nincs ures ablak, a ket kep csak a belepes alatt fedi egymast. */
.tw-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(6px);z-index:0;
  transition:opacity 0s linear var(--tw-be),transform 0s linear var(--tw-be),visibility 0s linear var(--tw-be)}
.tw-panel.is-on{visibility:visible;opacity:1;transform:none;z-index:2;
  transition:opacity var(--tw-be) var(--tw-be-ki),transform var(--tw-be) var(--tw-be-ki),visibility 0s}
.tw-panel:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:12px}
.tw-shot{aspect-ratio:var(--ar);border-radius:10px;overflow:hidden;background:#FAFAFA;border:1px solid var(--line)}
.tw-shot picture,.tw-shot img{display:block;width:100%;height:100%}
.tw-shot img{object-fit:contain;object-position:center}
.tw-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;padding:12px 6px 4px;font-size:.98rem;line-height:1.45}
.tw-foot p{margin:0;color:var(--ink);max-width:70ch}
.tw-foot .demo-tag{flex:none}
@media (max-width:640px){
  .tw{margin-top:24px}
  .tw-card{padding:8px}
  .tw-bar{padding:2px 2px 10px}
  .tw-tabs{width:100%}
  .tw-tab{flex:1 1 auto;min-height:44px;padding:0 12px}
  .tw-shot{aspect-ratio:var(--ar-m)}
  .tw-foot{flex-direction:column;gap:6px;font-size:.94rem;padding:10px 4px 2px}
}
@media (prefers-reduced-motion:reduce){.tw-panel,.tw-panel.is-on,.tw-tab,.tw-ind{transition:none!important}.tw-panel{transform:none}}
:root[data-theme="dark"] .tw-sec::before{opacity:.35}
:root[data-theme="dark"] .tw-tabs{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .tw-tab[aria-selected="true"]{background:#F1F1F4;color:#17171C}
:root[data-theme="dark"] .tw-tabs--ind .tw-tab[aria-selected="true"]{background:transparent;color:var(--ink-2)}
:root[data-theme="dark"] .tw-ind{background:#F1F1F4}
:root[data-theme="dark"] .tw-ind-l{color:#17171C}
:root[data-theme="dark"] .tw-card{box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
/* csak asztali ful (nincs hozza valodi mobil kivagas) */
@media (max-width:640px){.tw-desk-only{display:none!important}}
/* ha a valodi kartya jobb fele ures (szamla), asztalon a mondat oda kerul: HTML-szoveg a kep folott, a kepbe nem rajzolunk */
.tw-shot--felirat{position:relative}
.tw-over{position:absolute;left:52%;right:7%;top:50%;transform:translateY(-50%);margin:0;font-size:clamp(1.05rem,1.55vw,1.4rem);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#17171C}
.tw-foot--csak-jel{justify-content:flex-end}
.tw-foot-m{display:none}
@media (max-width:640px){
  .tw-over{display:none}
  .tw-foot--csak-jel{justify-content:space-between}
  .tw-foot-m{display:block;margin:0}
}
/* egyetlen lathato ful: nincs valasztas, a kerdes es a fulsor rejtve (termekablak2.js: tw--egyful) */
.tw--egyful .tw-bar{display:none}