/* TTP oldal: V1 Apple alap (mockups/2026-09-30-globalis-alap-states.html). A hero stilusa a hero.css-ben van. A 06. fejezettol mindket temaban fekete a hatter. */ /* ---------- Alap-reset (a kivezetett scrollcraft.css el szabalyai) ---------- A box-sizing kivetelevel :where()-ben, nulla specificitassal (pszeudo-elem a :where()-be nem teheto): ugy viselkednek, mint korabban, amikor a scrollcraft.css minden mas lap elott toltott be, tehat barmelyik elem-szabaly felulirja oket. */ *,*::before,*::after{box-sizing:border-box} :where(html){-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){:where(html){scroll-behavior:auto}} :where(body){text-rendering:optimizeLegibility;font-synthesis-weight:none} :where(img,video,canvas,svg){display:block;max-width:100%} :where(button,input,select,textarea){font:inherit;color:inherit} :where(:root){caret-color:#84d9e9;accent-color:#84d9e9} :where(a){color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em} @supports (scrollbar-color:auto){:where(html){scrollbar-color:color-mix(in oklab,#edf2f3 26%,transparent) transparent;scrollbar-width:thin}} /* ---------- Betuk, helyben (nincs Google Fonts hivas, lasd docs/JOGI-KUTATAS.md) ---------- Ugyanazok a valtozo woff2 fajlok, amiket a Google Fonts adott (Inter v20: opsz 14-32, wght 400-700; JetBrains Mono v24: a 400 es az 500 egy fajlban). A latin-ext adja az ő, ű betuket. */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- Tokenek ---------- */ :root{ --bg:#ffffff;--bg-2:#f5f5f7;--surface:#ffffff;--surface-2:#f5f5f7; --ink:#1d1d1f;--ink-2:#6e6e73;--ink-3:#6e6e73;--idle:var(--ink-3); --line:#d2d2d7;--line-2:color-mix(in srgb,var(--ink) 13%,transparent); --accent:#0d6874;--cyan:#a9e4ec;--accent-soft:color-mix(in srgb,var(--cyan) 35%,var(--surface)); --dbg:#0b0b0c;--dbg-2:#161617;--dsurf:#161617;--dsurf-2:#1f1f21; --dink:#f5f5f7;--dink-2:#a1a1a6;--dink-3:#98989d;--dline:#2c2c2e; --brass:#907848; --graphite:#1c2122; --btn-bg:var(--ink);--btn-ink:var(--bg);--btn-hover:color-mix(in srgb,var(--btn-bg) 82%,var(--accent)); --focus:var(--accent); --r:3px; --gutter:24px;--cell-pad:40px;--frame:1392px; --hdr-h:68px;--bar-h:53px;--nav-w:168px; --font:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --ease:cubic-bezier(0.23,1,0.32,1); color-scheme:light; } :root[data-theme="sotet"]{ --bg:var(--dbg);--bg-2:var(--dbg-2);--surface:var(--dsurf);--surface-2:var(--dsurf-2); --ink:var(--dink);--ink-2:var(--dink-2);--ink-3:var(--dink-3);--idle:var(--ink-3); --line:var(--dline);--line-2:color-mix(in srgb,var(--ink) 12%,transparent); --accent:var(--cyan);--accent-soft:color-mix(in srgb,var(--cyan) 16%,var(--surface)); --brass:#d8c090; --btn-bg:var(--ink);--btn-ink:var(--dbg);--btn-hover:color-mix(in srgb,var(--btn-bg) 82%,var(--accent)); --focus:var(--accent); color-scheme:dark; } .d,.hdr.s-dark,.chnav.s-dark,.chnav a.s-dark{ --bg:var(--dbg);--bg-2:var(--dbg-2);--surface:var(--dsurf);--surface-2:var(--dsurf-2); --ink:var(--dink);--ink-2:var(--dink-2);--ink-3:var(--dink-3);--idle:var(--ink-3); --line:var(--dline);--line-2:color-mix(in srgb,var(--ink) 12%,transparent); --accent:var(--cyan);--accent-soft:color-mix(in srgb,var(--cyan) 16%,var(--surface)); --brass:#d8c090; --btn-bg:var(--ink);--btn-ink:var(--bg);--btn-hover:color-mix(in srgb,var(--btn-bg) 82%,var(--accent)); --focus:var(--accent);color-scheme:dark; } .d{color:var(--ink)} /* Teljesen vilagos tema: a .d szekciok (06-08, lablec) is a vilagos tokeneket kapjak */ :root[data-theme="vilagos"] .d{ --bg:#ffffff;--bg-2:#f5f5f7;--surface:#ffffff;--surface-2:#f5f5f7; --ink:#1d1d1f;--ink-2:#6e6e73;--ink-3:#6e6e73;--idle:var(--ink-3); --line:#d2d2d7;--line-2:color-mix(in srgb,var(--ink) 13%,transparent); --accent:#0d6874;--accent-soft:color-mix(in srgb,var(--cyan) 35%,var(--surface)); --brass:#907848; --btn-bg:var(--ink);--btn-ink:var(--bg);--btn-hover:color-mix(in srgb,var(--btn-bg) 82%,var(--accent)); --focus:var(--accent);color-scheme:light; } @media(max-width:899px){:root{--hdr-h:52px;--bar-h:48px;--gutter:20px;--cell-pad:24px;--nav-w:0px}} /* ---------- Alap ---------- */ html{background:var(--bg)} html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:0;font-optical-sizing:auto;-webkit-font-smoothing:antialiased} /* Sotet temaban a tulgorgetesnel (html/body hattere) a lablec feketejet latjuk, nem a --bg szurkejet. */ :root[data-theme="sotet"]{background:var(--dbg)} :root[data-theme="sotet"] body{background:var(--dbg)} h1,h2,h3,h4{font-family:var(--font);font-optical-sizing:auto} p{margin:0} /* Tordeles (modern-web-guidance: improve-text-layout-and-legibility): folyoszovegen nincs arva szo, a rovid, doboz nelkuli cimeken kiegyensulyozott sorok. Ahol nem tamogatott, sima tordeles marad. */ p,li{text-wrap:pretty} h1,h2,h3,.h2,.prod-txt h3,.cell-t h3,.faq summary>span{text-wrap:balance} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} :focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r)} ::selection{background:var(--cyan);color:#1c2122} .skip{display:inline-flex;align-items:center;min-height:44px;background:var(--btn-bg);color:var(--btn-ink);border-radius:var(--r);font-size:14px;font-weight:500} svg.i{display:block;width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round} .mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em} .soft{color:var(--ink-2)} .faint{color:var(--ink-3)} /* Keret (attio-minta, merve 2026-09-30): legfeljebb 1392 px, szelein legalabb egy gutter; efolott kozepre zarva */ .container{max-width:calc(var(--frame) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)} /* Hianyzo (helyorzo) ertek: szaggatott chip */ [data-hianyzik]{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px dashed var(--ink-3);border-radius:var(--r);font-size:12px;line-height:1.4;color:var(--ink-2);background:transparent} /* ---------- Gombok ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r);font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;border:1px solid transparent;white-space:nowrap;transition:color 280ms var(--ease),background-color 280ms var(--ease),border-color 280ms var(--ease)} .btn.p{background:var(--btn-bg);color:var(--btn-ink)} .btn.s{border-color:color-mix(in srgb,var(--ink) 35%,transparent);color:var(--ink);background:transparent} @media(hover:hover) and (pointer:fine){ .btn.p:hover{background:var(--btn-hover)} .btn.s:hover{border-color:var(--ink);background:var(--surface)} } /* ---------- Fejlec ---------- */ .hdr{position:sticky;top:0;z-index:20;height:var(--hdr-h);color:#f1efe9;border-bottom:1px solid transparent;--focus:#a9e4ec;transition:background-color 280ms var(--ease),color 280ms var(--ease),border-color 280ms var(--ease)} .hdr.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line);color:var(--ink);--focus:var(--accent)} .hdr-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px} .hdr .wordmark{font-size:22px;font-weight:700;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:center;min-height:44px} .wordmark i{font-style:normal;color:var(--accent)} .hdr:not(.scrolled) .wordmark i{color:#a9e4ec} .hnav{display:flex;gap:26px;font-size:14px;font-weight:500} .hnav a{display:inline-flex;align-items:center;min-height:44px;opacity:.82;transition:opacity 280ms var(--ease)} @media(hover:hover) and (pointer:fine){.hnav a:hover{opacity:1}} .hdr-act{display:flex;align-items:center;gap:8px} .hdr .btn{height:36px;padding:0 14px;font-size:14px} .hdr .btn.s{border-color:rgba(241,239,233,.45);color:inherit} .hdr.scrolled .btn.s{border-color:color-mix(in srgb,var(--ink) 35%,transparent)} .ikon-gomb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0;border:1px solid rgba(241,239,233,.45);border-radius:var(--r);background:transparent;color:inherit;font-size:14px;font-weight:500} .hdr.scrolled .ikon-gomb{border-color:var(--line)} /* a gomb ikonja a mostani temat mutatja: atmenetes felkor, vilagos nap, sotet hold */ .tema-nap,.tema-hold{display:none!important} .tema-atmenet .tele{fill:currentColor;stroke:none} :root[data-theme="vilagos"] .tema-atmenet,:root[data-theme="sotet"] .tema-atmenet{display:none!important} :root[data-theme="vilagos"] .tema-nap{display:block!important} :root[data-theme="sotet"] .tema-hold{display:block!important} /* ---------- Nyito: hero (hero.css), utana a kiegeszito sor ---------- */ .nyito{margin-top:calc(-1 * var(--hdr-h))} .nyito-alja{padding-top:8px} .qual{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:52ch;padding:0 0 40px} /* ---------- Fejezet-blokk: keskeny bal nav + tartalom ---------- */ .chapters{margin-top:88px;border-top:1px solid var(--line);background:var(--bg)} .rail{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);position:relative;isolation:isolate;border-left:1px solid var(--line);border-right:1px solid var(--line)} .chnav{position:sticky;top:var(--hdr-h);align-self:start;padding:56px 0 48px 24px;z-index:5;min-width:0} .chnav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px} .chnav a{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:baseline;padding:6px 8px 6px 12px;border-left:1px solid var(--line);font-size:13px;font-weight:400;line-height:1.3;color:var(--idle);transition:color 280ms var(--ease)} .chnav a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 420ms var(--ease)} .chnav a .n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:inherit} .chnav a[aria-current]{color:var(--ink);font-weight:500} .chnav a[aria-current]::before{transform:none} .chnav a[aria-current] .n{color:var(--accent)} .chnav .rovid{display:none} @media(hover:hover) and (pointer:fine){.chnav a:not([aria-current]):hover{color:var(--ink-2)}} .chcontent{border-left:1px solid var(--line);min-width:0} .ch{border-bottom:1px solid var(--line);scroll-margin-top:var(--hdr-h);position:relative} /* a fekete hatter a keret mellett is a kepernyo szeleig fut */ .ch.d::before{content:"";position:absolute;inset:0 -100vw -1px -100vw;background:var(--bg);z-index:-1} /* a fekete resz takarja a keret vilagos vonalait; itt a fekete vonal-tokennel rajzoljuk ujra oket */ .ch.d{box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line)} .ch.d::after{content:"";position:absolute;top:0;bottom:-1px;left:calc(-1 * var(--nav-w) - 2px);width:1px;background:var(--line)} .ch:last-child{border-bottom:0} #uzenet{scroll-margin-top:calc(var(--hdr-h) + 16px)} .ch-intro{padding:40px var(--cell-pad) 24px;max-width:860px} .ch-num{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--accent);margin-bottom:14px;display:flex;gap:12px;align-items:center} .ch-num i{font-style:normal} .ch-num::after{content:"";flex:0 0 40px;height:1px;background:color-mix(in srgb,var(--accent) 50%,transparent)} .h2{font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-.022em;margin:0;text-wrap:balance} .h2 .soft{display:inline} .ch-lead{margin-top:18px;font-size:19px;font-weight:400;line-height:1.45;color:var(--ink-2);max-width:40ch} .ch-lead.mono-lead{margin-top:14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em} /* ---------- Cellak ---------- */ .cells{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .cell{position:relative;height:500px;padding:var(--cell-pad) 0 0 var(--cell-pad);display:flex;flex-direction:column;gap:32px;border-bottom:1px solid var(--line);overflow:hidden;min-width:0} .cell.r{border-right:1px solid var(--line)} .cell-t{padding-right:var(--cell-pad);display:flex;flex-direction:column;align-items:flex-start} .cell-t h3{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.012em} .cell-t p{font-size:16px;font-weight:400;line-height:1.55;color:var(--ink-2);max-width:44ch} .frag{flex:1;min-height:0;position:relative} .cell.wide{grid-column:1/-1;height:auto;min-height:0;flex-direction:row;gap:0;padding:0} .cell.wide .cell-t{flex:0 0 36%;padding:var(--cell-pad)} .cell.wide .frag{flex:1;border-left:1px solid var(--line);padding:32px 0 0 32px} .cell.text{grid-column:1/-1;height:auto;padding:36px var(--cell-pad);font-size:16px;color:var(--ink-2);line-height:1.55;flex-direction:row;align-items:baseline;gap:24px;border-bottom:1px solid var(--line)} .cell.text:last-child{border-bottom:0} .cell.text .mono{color:var(--ink-3);flex:none} .cell.text .big{font-size:19px;font-weight:400;line-height:1.45;color:var(--ink);max-width:30em} .ket-ablak{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:start;padding-right:32px;padding-bottom:32px} .kerdojel{display:flex;align-items:center;justify-content:center;height:100%;padding-top:40px;color:var(--ink-3)} .kerdojel .mono{border:1px dashed var(--ink-3);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center} /* ---------- Termekablakok, UI-reszletek (illusztracio, dummy adat) ---------- */ .win{position:absolute;left:0;top:0;right:32px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px;line-height:1.35;color:var(--ink)} .win.bleed{bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0} .win.static{position:static} .win-bar{height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden} .win-bar .dots{display:flex;gap:5px;margin-right:6px} .win-bar .dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2)} .win-bar b{font-weight:500;color:var(--ink-2)} .win-bar .sp{flex:1} .rw{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);min-width:0} .rw:last-child{border-bottom:0} .rw .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rw .m{color:var(--ink-3);white-space:nowrap} .rw.head{color:var(--ink-3);font-size:12px;background:var(--bg-2)} .rw.dim{color:var(--ink-3)} .tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap;background:var(--surface);font-weight:500;letter-spacing:.02em;line-height:1} .tag svg.i{width:12px;height:12px} .tag.acc{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft);color:var(--accent)} .tag.late{border-color:color-mix(in srgb,var(--brass) 60%,transparent)} .tag.late::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)} .cb{width:14px;height:14px;border:1px solid var(--ink-3);border-radius:2px;flex:none} .cb.on{background:var(--ink);border-color:var(--ink);position:relative} .cb.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} .av{width:22px;height:22px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:10px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;flex:none;letter-spacing:0} .av svg.i{width:12px;height:12px} .av.g{background:var(--bg-2);color:var(--ink-3);border:1px solid var(--line)} .kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;padding:12px 14px;font-size:13px} .kv .dt{color:var(--ink-3)} .note{padding:12px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.45} .field{height:34px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;padding:0 10px;color:var(--ink-3);font-size:13px;background:var(--surface-2)} .field.ta{height:64px;align-items:flex-start;padding-top:8px} .lbl{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin:0 0 6px;letter-spacing:0;line-height:1.4} .skel{height:10px;border-radius:2px;background:var(--line);opacity:.8} .win2{position:absolute;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px;line-height:1.35;color:var(--ink)} .win svg.i,.win2 svg.i{width:14px;height:14px} .frag .btn,.prod-frag .btn{border-radius:var(--r)!important} /* #kezzel 1. cella: az "Uj level" ablak a jegyzetek fole csuszik (asztali) */ .win2.nl{left:56%;bottom:-1px;width:60%;border-bottom:0;border-radius:var(--r) var(--r) 0 0} /* #mit 1. cella: urlap-ablak es a CRM-ertesites */ .win.urlap-ablak{right:96px} .win2.ertesites{right:0;bottom:44px;width:200px} /* Folyamatag (automatizalas) */ .flow{position:absolute;inset:0 32px 0 0;font-size:13px} .flow .node-f{position:absolute;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;gap:8px;align-items:center;white-space:nowrap} .flow .node-f.q{border-style:dashed;border-color:var(--ink-3)} .flow .node-f.dim{color:var(--ink-3)} .flow svg.lines{position:absolute;inset:0;width:100%;height:100%;stroke:var(--line-2);stroke-width:1.25;fill:none} :root:not([data-theme="sotet"]) .flow svg.lines{stroke:rgba(28,33,34,.22)} .flow svg.lines .acc{stroke:var(--accent)} .flow .lab{position:absolute;font-family:var(--mono);font-size:11px;color:var(--ink-3)} /* Menet (5 lepes) */ .menet{list-style:none;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:0 32px 32px 0;position:relative} .menet:focus-visible{outline-offset:-2px} .sor-szel,.orszem{display:none} .menet::before{content:"";position:absolute;left:24px;right:56px;top:22px;height:1px;background:var(--line)} .mstep{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 14px 12px;font-size:13px;min-width:0} .mstep .ico{width:20px;height:20px;border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);margin-bottom:22px;color:var(--ink-2)} .mstep .ico svg.i{width:12px;height:12px} .mstep b{display:block;font-weight:500;margin-bottom:4px} .mstep span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3)} .mstep.act{border-color:var(--accent)} .mstep.act .ico{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)} /* Termekek */ .prod{display:grid;grid-template-columns:7fr 11fr;border-top:1px solid var(--line)} .prod-txt{padding:var(--cell-pad);padding-top:48px;padding-bottom:48px;display:flex;flex-direction:column;gap:20px;min-width:0} .prod-txt h3{margin:0;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance} .prod-txt p{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:40ch} .prod-txt p.mono{font-size:12px;color:var(--ink-3)} .prod-txt .from{font-size:14px;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line);margin-top:auto} .prod-txt .mods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .prod-frag{position:relative;border-left:1px solid var(--line);min-height:560px;overflow:hidden} .prod-frag .win{position:absolute;left:40px;top:40px;right:-1px;bottom:-1px;border-radius:var(--r) 0 0 0;border-right:0;border-bottom:0} .tl{padding:6px 0 0} .tl .ev{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:10px 14px;position:relative} .tl .ev::before{content:"";position:absolute;left:24.5px;top:32px;bottom:-4px;width:1px;background:var(--line)} .tl .ev:last-child::before{display:none} .tl .ev .dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2)} .tl .ev .dot svg.i{width:12px;height:12px} .tl .ev.now .dot{border-color:var(--accent);color:var(--accent)} .tl .ev b{font-weight:500;display:block} .tl .ev small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px} .tl .ev .body{min-width:0} .tl .ev p{color:var(--ink-2);margin-top:4px} .due{margin:8px 14px 14px 48px;border:1px solid var(--accent);border-radius:var(--r);padding:12px 14px;background:var(--surface-2)} .due b{display:block;font-weight:500;margin-bottom:6px} .due .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .due .acts .btn{height:30px;padding:0 10px;font-size:12px} .split{display:grid;grid-template-columns:minmax(0,1fr) 240px} .split>div:last-child{border-left:1px solid var(--line)} .side-h{padding:12px 14px 6px;font-size:12px;color:var(--ink-3)} .tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line);overflow:hidden} .tabs span{padding:8px 10px 10px;font-size:12px;color:var(--ink-3);border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap} .tabs span.on{color:var(--ink);border-bottom-color:var(--ink)} table.tbl{width:100%;border-collapse:collapse;font-size:13px} table.tbl th{font-weight:500;color:var(--ink-3);font-size:12px;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2);white-space:nowrap} table.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} table.tbl .num{text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.02em;font-variant-numeric:tabular-nums} table.tbl tr.total td{border-bottom:0;color:var(--ink-2)} table.tbl tr.total.b td{color:var(--ink);font-weight:500} table.tbl td .tag{margin-left:8px} /* Eset, szamok, munkakartyak */ .case{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)} .case>div{padding:var(--cell-pad);border-right:1px solid var(--line);min-width:0} .case>div:last-child{border-right:0} .case .lbl{margin-bottom:12px;font-family:var(--mono);font-weight:500;letter-spacing:.02em} .case p{font-size:17px;font-weight:400;line-height:1.5;text-wrap:pretty} .case p.soft{color:var(--ink-2)} .stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .stats>div{padding:32px var(--cell-pad);border-right:1px solid var(--line)} .stats>div:last-child{border-right:0} .stats b{display:block;font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums} .stats span{font-size:16px;color:var(--ink-2)} .cell.card{height:auto;min-height:0;padding:var(--cell-pad);gap:24px} .cell.card h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.012em;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cell.card .ter{font-size:16px;color:var(--ink-3);margin-top:4px} .cell.card .lists{display:grid;grid-template-columns:1fr 1fr;gap:24px} .cell.card ul{list-style:none;margin:0;padding:0} .cell.card li{padding:9px 0;border-top:1px solid var(--line);font-size:15px} .cell.card li.no{color:var(--ink-3)} .cell.card .lbl{margin-bottom:2px} /* Emberek, lepesek, kinek valo, GYIK */ .cell.person{height:auto;padding:var(--cell-pad);gap:20px} .cell.person h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em} .cell.person .role{font-size:14px;color:var(--ink-3);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .cell.person p.say{font-size:16px;color:var(--ink-2);max-width:40ch} /* 05 Velunk dolgozol: allo portre (4:5), LinkedIn-logo, utana a kozos blokk */ #velunk .cell.person{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:28px;align-items:start;align-content:start} #velunk .person-t{min-width:0} #velunk .cell.person p.say{margin-top:14px} #velunk .portre{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);display:flex;align-items:flex-end} #velunk .portre svg{display:block;width:100%;height:82%;fill:color-mix(in srgb,var(--ink) 12%,transparent)} #velunk .portre img{display:block;width:100%;height:100%;object-fit:cover} #velunk .nev{display:flex;align-items:center;gap:10px} #velunk .li{display:inline-flex;width:22px;height:22px;flex:none;color:var(--ink-3);border-radius:4px} #velunk .li svg{width:100%;height:100%;fill:currentColor} #velunk .li:hover,#velunk .li:focus-visible{color:#0a66c2} :root[data-theme="sotet"] #velunk .li:hover,:root[data-theme="sotet"] #velunk .li:focus-visible{color:#71b7fb} .egyutt{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;padding:56px var(--cell-pad) 64px} .egyutt-cim{margin:0;font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.015em;max-width:18ch;text-wrap:balance} .egyutt-pontok p{margin:0;padding:18px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--ink-2);max-width:56ch} .egyutt-pontok p:first-child{border-top:0;padding-top:4px} @media(min-width:900px) and (max-width:1199px){ #velunk .cell.person{grid-template-columns:1fr;gap:24px} #velunk .portre{max-width:180px} } @media(max-width:899px){ #velunk .cell.person{grid-template-columns:160px 1fr;gap:24px} .egyutt{grid-template-columns:1fr;gap:20px;padding:40px var(--gutter) 48px} .egyutt-cim{font-size:24px} } @media(max-width:600px){ #velunk .cell.person{grid-template-columns:110px 1fr;gap:16px} } /* 06 Kozos munka (mockups/2026-10-02-kozos-c-states.html, Adam 2026-10-02-i csereje): felul a fejezetcim, alatta 1200 px felett ket oszlop: balra a negy lepes kis pakliban (I mozgas), jobbra ragad a leiras, az foglalo-doboz (.fg, valodi szabad idopontok) es a "foglalas utan" mondat. A doboz a Cal.com-foglalot nyitja. 1200 px alatt egy oszlop (leiras, ablak, mondat, lepesek), az ablak a fejlec (telefonon a fejezet-sav) ala ragad. A ragadast az oldal.js kapcsolja (.fog-ragad, .ab-ragad), csak ha kifer; a --lh-t (a legmagasabb kartya) es az --ab-h-t (az ablak) is az meri. A pakli csak gorgetes-idovonallal es mozgas engedelyevel all ossze, kulonben sima lista. */ .kozos-fej{padding:40px var(--cell-pad) 24px;max-width:860px} .kozos{--kp:var(--cell-pad);--ab-top:var(--hdr-h);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);border-top:1px solid var(--line)} .kozos-lep{padding:56px var(--kp) 72px;min-width:0;border-right:1px solid var(--line)} /* Jobb oszlop: a .kozos-ragad (leiras + foglalo) ragad, a "Felkeszules" (.kozos-utan) alatta, a ragado tarolojan (.kozos-fog-in) kivul, ezert nem ragad. A .kozos-fog-in magassagat az oldal.js szamolja ugy, hogy a ragadas pontosan akkor engedjen el, amikor a pakli 4. kartyaja leult; onnan a ketto egyutt gorget. */ .kozos-fog-in{padding:0 var(--kp)} .kozos-ragad{padding-top:56px;display:flex;flex-direction:column;gap:28px} .kozos-utan{padding:28px var(--kp) 56px} .kozos.fog-ragad .kozos-ragad{position:sticky;top:var(--hdr-h)} .kozos-brief h3{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.012em} .kozos-brief p{font-size:16px;color:var(--ink-2);max-width:44ch} .kozos-utan .mono{display:block;color:var(--ink-3);margin-bottom:8px} .kozos-utan p{font-size:18px;line-height:1.45;color:var(--ink);max-width:30em} /* Foglalo-doboz (mockups/2026-10-02-foglalo-06-states.html, A): a Cal.com valodi szabad idopontjai, az oldal.js tolti. JS nelkul es hibanal egy mondat es a gomb. Az idopontok helye mindig harom sor, a skeleton is pont ilyen magas, igy napvaltaskor es betolteskor nem ugrik a doboz (es vele a ragado oszlop). */ .fg{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px;line-height:1.35;color:var(--ink)} .fg-bar{height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden} .fg-bar b{font-weight:500;color:var(--ink-2)} .fg-bar .sp{flex:1} .fg-bar svg.i{width:14px;height:14px} .fg-bar .jobb{overflow:hidden;text-overflow:ellipsis} .fg-napok{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:12px 14px 0} .fg-nap{height:52px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;min-width:0;transition:border-color 280ms var(--ease)} .fg-nap span{font-size:11px;color:var(--ink-3)} .fg-nap b{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink-2)} .fg-nap[aria-pressed="true"]{border-color:var(--ink)} .fg-nap[aria-pressed="true"] b{color:var(--ink)} /* S2 hetlapozo: nyilak a het datumaval, alatta hetenkent egy lap (oldalra huzhato), pottyok */ .fg-hetfej{display:flex;align-items:center;gap:8px;padding:12px 14px 0} .fg-hetcim{flex:1;text-align:center;font-size:13px;font-weight:500;color:var(--ink)} .fg-lep{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;transition:border-color 280ms var(--ease)} .fg-lep svg.i{width:16px;height:16px;stroke-width:1.6} .fg-lep:disabled{opacity:.3;cursor:default} .fg-lapok{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .fg-lapok::-webkit-scrollbar{display:none} .fg-lap{flex:0 0 100%;min-width:0;scroll-snap-align:start} .fg-nap:disabled{opacity:.35;border-style:dashed;cursor:default} .fg-pottyok{display:flex;justify-content:center;gap:6px;padding:10px 0 0} .fg-pottyok i{width:6px;height:6px;border-radius:50%;background:var(--line)} .fg-pottyok i.on{background:var(--ink)} .fg-napcim{padding:12px 14px 0;font-size:12px;line-height:16px;color:var(--ink-3)} .fg-idok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:34px;align-content:start;gap:8px;padding:12px 14px 14px;min-height:144px} .fg-ido{height:34px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ink);transition:border-color 280ms var(--ease)} .fg-ido.tobb{font-family:var(--font);color:var(--ink-2);border-style:dashed} .fg-tart{padding:16px 14px 14px} .fg-tart p{font-size:14px;color:var(--ink-2);line-height:1.45} .fg-al{padding:0 14px 14px} .fg-al .btn{width:100%;justify-content:center} /* sikeres foglalas utan (oldal.js calKoszon): a foglalo alatt, a cian kiemelessel; uresen nem foglal helyet */ .fg-kesz{margin:0;font-size:15px;line-height:1.45;color:var(--ink)} .fg-kesz:not(:empty){margin-top:14px;padding:12px 14px;border-left:2px solid var(--accent);background:var(--surface)} .fg .sk,.sk-cal .sk{background:var(--surface-2);border-radius:var(--r);animation:fg-sk 1.4s ease-in-out infinite} @keyframes fg-sk{50%{opacity:.45}} .fg-napok .sk{height:52px} .fg-napcim .sk{display:block;width:120px;height:16px} .fg-idok .sk{height:34px} @media (hover:hover) and (pointer:fine){ .fg-ido:hover{border-color:var(--ink)} .fg-lep:not(:disabled):hover{border-color:var(--ink)} .fg-nap:not([aria-pressed="true"]):not(:disabled):hover{border-color:color-mix(in srgb,var(--ink) 60%,transparent)} } /* a felugro Cal.com-foglalo (body vegere kerul, position:absolute) a fejlec es a dokk folott legyen */ cal-modal-box{z-index:40} /* --lep: a lepcso, amennyivel a kovetkezo kartya lejjebb all meg. Akkora, hogy az elozo kartya cime kilasszon (oldal.js meri a cim magassagabol, ez csak a tartalek) */ .pakli{--lep:56px;--ktop:calc(var(--hdr-h) + 56px);display:flex;flex-direction:column;gap:12px} .pakli .jel{display:none} .lep{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px} .lep h3{margin:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.012em} .lep p{font-size:15px;color:var(--ink-2)} @media (max-width:1199px){ .kozos-fej{padding:40px var(--cell-pad) 0} .kozos{display:flex;flex-direction:column;border-top:0} .kozos-fog,.kozos-fog-in,.kozos-ragad{display:contents} .kozos-brief{order:1;padding:28px var(--kp) 0} .kozos-ablak{order:2;padding:12px var(--kp);margin-top:16px;background:var(--bg)} .kozos.ab-ragad .kozos-ablak{position:sticky;top:var(--ab-top);z-index:2;border-bottom:1px solid var(--line)} .kozos-utan{order:3;padding:16px var(--kp) 0} .kozos-lep{order:4;padding:32px var(--kp) 64px;border-right:0} .fg{max-width:560px} .pakli{--ktop:calc(var(--ab-top) + 12px)} .kozos.ab-ragad .pakli{--ktop:calc(var(--ab-top) + var(--ab-h,357px) + 12px)} } @media (max-width:899px){ .kozos{--kp:var(--gutter);--ab-top:calc(var(--hdr-h) + var(--bar-h))} .kozos-fej{padding:32px var(--gutter) 0} .kozos-utan p{font-size:17px} .kozos-lep{padding-top:28px} .fg{max-width:none} .fg-napok{gap:5px} .fg-nap,.fg-napok .sk{height:48px} .lep{padding:18px 18px 20px} } @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%) and (timeline-scope: --a)){ @media (prefers-reduced-motion: no-preference){ .pakli{--kh:calc(var(--lh,200px) + 90px);display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--kh);gap:0;timeline-scope:--lep-2,--lep-3,--lep-4} .pakli .jel{display:block;grid-column:1;pointer-events:none} .pakli [data-n="1"]{grid-row:1} .pakli [data-n="2"]{grid-row:2} .pakli [data-n="3"]{grid-row:3} .pakli [data-n="4"]{grid-row:4} .pakli .jel[data-n="2"]{view-timeline:--lep-2 block} .pakli .jel[data-n="3"]{view-timeline:--lep-3 block} .pakli .jel[data-n="4"]{view-timeline:--lep-4 block} .pakli .lep{grid-column:1;align-self:start;position:sticky;top:var(--ktop);min-height:var(--lh,auto);transform-origin:50% 0} .pakli .lep[data-n="2"]{top:calc(var(--ktop) + var(--lep))} .pakli .lep[data-n="3"]{top:calc(var(--ktop) + 2 * var(--lep))} .pakli .lep[data-n="4"]{top:calc(var(--ktop) + 3 * var(--lep))} /* a hatralepo kartya fatylat kap; a kartya maga atlatszatlan marad, igy a szoveg nem ut at */ .pakli .lep::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--bg);opacity:0;pointer-events:none} /* Az elozo kartya akkor kezd hatralepni, amikor maga mar ragad (a kovetkezo jelolo teteje ekkor egy sornyival lejjebb van), es akkor all meg, amikor a kovetkezo kartya felert a sajat ragadasi pontjaig. A tavolsag a jelolo cover-tartomanyanak elejetol (a viewport aljatol) merve. */ .pakli .lep[data-n="1"],.pakli .lep[data-n="1"]::after,.pakli .lep[data-n="1"] p{animation-timeline:--lep-2;animation-range:cover max(0px, calc(100vh - var(--ktop) - var(--kh))) cover calc(100vh - var(--ktop) - var(--lep))} .pakli .lep[data-n="2"],.pakli .lep[data-n="2"]::after,.pakli .lep[data-n="2"] p{animation-timeline:--lep-3;animation-range:cover max(0px, calc(100vh - var(--ktop) - var(--lep) - var(--kh))) cover calc(100vh - var(--ktop) - 2 * var(--lep))} .pakli .lep[data-n="3"],.pakli .lep[data-n="3"]::after,.pakli .lep[data-n="3"] p{animation-timeline:--lep-4;animation-range:cover max(0px, calc(100vh - var(--ktop) - 2 * var(--lep) - var(--kh))) cover calc(100vh - var(--ktop) - 3 * var(--lep))} .pakli .lep:not([data-n="4"]){animation-name:lep-hatra;animation-timing-function:linear;animation-fill-mode:both} .pakli .lep:not([data-n="4"])::after{animation-name:lep-fatyol;animation-timing-function:linear;animation-fill-mode:both} /* a hatralepo kartyabol csak a cim latszik, a szovege elhalvanyul (kulonben a sav aljan kilogna az elso sora) */ .pakli .lep:not([data-n="4"]) p{animation-name:lep-szoveg;animation-timing-function:linear;animation-fill-mode:both} /* ha a viewport tul alacsony a pakli ossze allt allapotahoz (oldal.js), marad a lista */ .pakli.lista{display:flex;gap:12px} .pakli.lista .jel{display:none} .pakli.lista .lep{position:relative;top:auto;min-height:0;animation:none} .pakli.lista .lep::after,.pakli.lista .lep p{animation:none} } } @keyframes lep-hatra{to{transform:scale(.97)}} @keyframes lep-fatyol{to{opacity:.5}} @keyframes lep-szoveg{to{opacity:0}} /* Ket hasab, hasabonkent hat kerdes, egymastol fuggetlenul nyilnak (mockups/2026-10-02-gyik-states.html, A) */ /* GYIK: kerdesenkent kulon fiok, a "+" telt kor; nyitva kek, es "x"-re fordul (mockups/2026-10-05-egysegesites-states.html, A) */ .faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--cell-pad) 56px} .faq>.hasab{min-width:0;display:grid;gap:12px;align-content:start} .faq details{border:1px solid var(--line);border-radius:6px;background:var(--surface);transition:border-color 280ms var(--ease)} .faq details[open]{border-color:color-mix(in srgb,var(--ink) 35%,transparent)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 16px 16px 20px;font-size:17px;font-weight:500;letter-spacing:-.012em;line-height:1.35;border-radius:6px} .faq summary::-webkit-details-marker{display:none} .faq summary svg.i{width:36px;height:36px;padding:10px;border-radius:50%;background:var(--ink);color:var(--bg);stroke-width:2.2;transition:transform 320ms var(--ease),background-color 280ms var(--ease)} .faq details[open] summary svg.i{transform:rotate(45deg);background:var(--accent)} @media(hover:hover) and (pointer:fine){ .faq details:hover{border-color:color-mix(in srgb,var(--ink) 55%,transparent)} .faq details:hover summary svg.i{background:var(--accent)} } .faq details p{padding:0 20px 20px;font-size:16px;color:var(--ink-2);max-width:64ch} /* Sima nyilas (interpolate-size + ::details-content, Chromium 131+). Ahol nincs, azonnal nyilik, mint eddig */ @supports (interpolate-size:allow-keywords){ .faq{interpolate-size:allow-keywords} .faq details::details-content{block-size:0;overflow-y:clip;opacity:0;transition:block-size 320ms var(--ease),opacity 320ms var(--ease),content-visibility 320ms var(--ease) allow-discrete} .faq details[open]::details-content{block-size:auto;opacity:1} } /* Zaro CTA es uzenet (08; mockups/2026-10-02-idopont-08-states.html es 2026-10-02-uzenet-08-states.html, B + M2): teljes szelessegu fej, alatta a beagyazott Cal.com havi naptar (oldal.js, lusta), alatta a lenyithato uzenet-sor. JS nelkul es ha a Cal.com nem jon meg, a naptar helyen egy mondat es a foglalooldal linkje all. */ .hero-actions{display:flex;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap} #idopont{--hiba:#ff9b8a} .idopont-fej{padding-bottom:24px} .idopont-fej .h2{margin-bottom:20px} .idopont-fej p.big{font-size:19px;font-weight:400;line-height:1.45;color:var(--ink-2);max-width:30em} .idopont-fog{padding:0 var(--cell-pad) 56px} /* a hely a naptar vegleges magassagat tartja (mert 1141 px-en 570), igy betolteskor nem ugrik lejjebb az uzenet-sor */ .cal-hely{position:relative;min-height:570px} .cal-hely>.sk-cal{position:absolute;inset:0 0 auto} .cal-hely.kesz>.sk-cal{display:none} /* A Cal.com iframe dokumentuma light color-scheme-mel fut. Ha a szuloje dark (a .d szekcio az), a Chrome az atlatszo iframe moge feher hatteret fest, es a naptar korul feher sav latszik (mert 2026-10-02). */ .cal-be{color-scheme:light} .sk-cal{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;max-width:1040px;height:490px;margin:0 auto;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden} .sk-cal>div{padding:24px;min-width:0} .sk-cal>div+div{border-left:1px solid var(--line)} .sk-info .sk{height:14px;margin-bottom:14px} .sk-info .sk:first-child{width:32px;height:32px;border-radius:50%} .sk-racs{display:grid;grid-template-columns:repeat(7,minmax(0,60px));gap:4px;margin-top:40px} .sk-racs .sk{height:60px} .sk-idok .sk{height:36px;margin-bottom:8px} /* telefonon a 07-ben a nagy naptar helyett a 05-os kis foglalo all (mockups/2026-10-05-07-naptar-meret-states.html, D) */ .idopont-kicsi{display:none} @media(max-width:899px){ .idopont-kicsi{display:block} #idopont .cal-hely,#idopont #idopont-tartalek{display:none} } .cal-nelkul{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:28px;display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap} .cal-nelkul p{flex:1 1 300px;font-size:16px;color:var(--ink-2)} /* Lenyithato uzenet-sor, a GYIK "+" jelenek mintajara */ .uz{border-top:1px solid var(--line)} .uz-cim{margin:0;font-size:inherit;font-weight:inherit} .uz-sor{width:100%;display:flex;align-items:center;gap:20px;padding:32px var(--cell-pad);border:0;border-radius:0;background:none;color:var(--ink);text-align:left} .uz-sor:focus-visible{outline-offset:-2px} .uz-sor .sz{flex:1;min-width:0} .uz-sor .uz-c{display:block;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance} .uz-sor .uz-a{display:block;margin-top:6px;font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-2)} .uz-sor .jel{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex:none;transition:border-color 280ms var(--ease)} .uz-sor .jel svg{transition:transform 320ms var(--ease)} .uz-sor[aria-expanded="true"] .jel svg{transform:rotate(45deg)} @media (hover:hover) and (pointer:fine){.uz-sor:hover .jel{border-color:var(--ink)}} .uz-test{padding:0 var(--cell-pad) 64px} /* M2: csak also vonalas mezok, ket oszlop */ .vonal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;max-width:900px} .vonal .mezo{display:flex;flex-direction:column;gap:6px;min-width:0} .vonal .teljes{grid-column:1 / -1} .vonal label{font-size:13px;color:var(--ink-3)} .vonal input,.vonal textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--ink);font:inherit;font-size:19px;padding:8px 0 10px;caret-color:var(--accent);transition:border-color 280ms var(--ease)} .vonal textarea{min-height:96px;resize:vertical;line-height:1.45} .vonal input::placeholder,.vonal textarea::placeholder{color:var(--ink-3)} .vonal input:focus,.vonal textarea:focus{border-bottom-color:var(--accent)} /* a mezo-vonal szine is valt fokuszkor, de ez kevés: a fokusz-gyuru a kozos :focus-visible szabaly (2px, --focus) marad */ .vonal input:focus-visible,.vonal textarea:focus-visible{outline:2px solid var(--focus);outline-offset:4px} .vonal .mezo.rossz input{border-bottom-color:var(--hiba)} .vonal .mezo.rossz label{color:var(--hiba)} /* a bongeszo automatikus kitoltese ne festse vilagoskekre a sotet mezoket (kulon szabaly: ahol az egyik alak ismeretlen, az egesz lista ervenytelen lenne) */ .vonal input:autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--bg) inset;caret-color:var(--ink)} .vonal input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--bg) inset;caret-color:var(--ink)} .vonal .kuld{grid-column:1 / -1;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .uz-info{flex:1;margin:0;font-size:14px;color:var(--ink-3);display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center} .uz-info .hiba{color:var(--hiba)} .uz-info .ok{color:var(--ink-2)} .uz-info .email{margin-left:auto;display:flex;gap:8px;align-items:center} .adatkez-info{margin:12px 0 0;font-size:13px;color:var(--ink-3)} .vonal .adatkez-info{grid-column:1 / -1;margin:-6px 0 0} .adatkez-info a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:3px;text-decoration-thickness:1px;transition:color 280ms var(--ease),text-decoration-color 280ms var(--ease)} @media (hover:hover) and (pointer:fine){.adatkez-info a:hover{color:var(--ink);text-decoration-color:var(--accent)}} @media (prefers-reduced-motion:reduce){ .fg .sk,.sk-cal .sk{animation:none} .fg-nap,.fg-ido,.uz-sor .jel,.uz-sor .jel svg,.vonal input,.vonal textarea{transition:none} } /* ---------- Lablec (a style.css `footer` szabalyait is semlegesiti) ---------- */ /* F1 (mockups/2026-10-04-lablec-states.html): egy sor wordmarkkal, a jogi linkekkel es az elerhetosegekkel, alatta hajszalvonal es a mono cegsor. Also terkoz a dokk miatt nem kell: a dokk a lablec elott elmegy (D-b). */ footer.foot{display:block;max-width:none;margin:0;padding:0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);background:var(--bg)} .foot p{width:auto;order:0;margin:0} .foot-sor{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px} .foot-ceg{border-top:1px solid var(--line);padding-top:14px;padding-bottom:20px} .foot .wordmark{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:-.04em;line-height:1} .foot .mono{color:var(--ink-3)} /* email az elso sorban, alatta a ket telefonszam egymas alatt */ .foot-kapcs{display:flex;flex-direction:column;align-items:flex-start} .foot-kapcs .email{display:inline-flex;gap:0 8px;align-items:center;flex-wrap:wrap} .foot-kapcs a{display:inline-flex;align-items:center;min-height:44px;transition:color 280ms var(--ease)} .foot-kapcs a[href^="tel:"]{min-height:32px;font-variant-numeric:tabular-nums} .foot-kapcs .tel-ido{font-size:13px;line-height:1.4;color:var(--ink-3);padding-top:4px} @media(hover:hover) and (pointer:fine){.foot-kapcs a:hover{color:var(--ink)}} .cegsor{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .cegsor .pont{opacity:.6} .foot ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 24px;flex-wrap:wrap} .foot ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color 280ms var(--ease),color 280ms var(--ease)} @media(hover:hover) and (pointer:fine){.foot ul a:hover{color:var(--ink);text-decoration-color:var(--accent)}} .lap-vege{height:1px} .foot.d+.lap-vege{background:var(--dbg)} :root[data-theme="vilagos"] .foot.d+.lap-vege{background:var(--bg)} /* ---------- Leiras-ablak (dialog, az oldal tokenjein) ---------- */ dialog#brief-dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:none} dialog#brief-dialog h2{font-size:32px;line-height:1.1;letter-spacing:-.022em;font-weight:600} dialog#brief-dialog .brief-context{color:var(--ink-2)} dialog#brief-dialog .brief-context strong{color:var(--accent)} dialog#brief-dialog textarea{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);caret-color:var(--accent)} dialog#brief-dialog textarea::placeholder{color:var(--ink-3)} dialog#brief-dialog .form-note,dialog#brief-dialog #brief-status{color:var(--ink-2)} dialog#brief-dialog .primary{display:inline-flex;align-items:center;min-height:44px;height:44px;padding:0 20px;border-radius:var(--r);background:var(--btn-bg);color:var(--btn-ink);font-size:15px;font-weight:500;border:0;margin-top:8px} dialog#brief-dialog .close-dialog{min-width:44px;color:var(--ink-2)} /* ---------- Megjeleno mozgas (oldal.js; csak html.mozgas alatt) ---------- */ html.mozgas .rv{opacity:0;transform:translate3d(0,14px,0)} html.mozgas .rv.lat{opacity:1;transform:none;transition:opacity 700ms var(--ease),transform 900ms var(--ease);transition-delay:var(--rv-kes,0ms)} html.mozgas .rv.lat.azonnal{transition:none} /* ---------- Mobil ---------- */ @media(max-width:1100px){ .hnav{gap:20px} } @media(max-width:899px){ .hnav{display:none} .qual{font-size:16px;padding-bottom:28px} .chapters{margin-top:56px} .chapters>.container{padding:0} .ch.d::after{display:none} .rail{display:block;border:0} .chnav{position:sticky;top:var(--hdr-h);height:var(--bar-h);padding:0;background:var(--bg);border-bottom:1px solid var(--line)} .chnav ol{display:flex;margin:0;padding:0 var(--gutter);gap:0;width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth} .chnav ol::-webkit-scrollbar{display:none} .chnav li{flex:none} .chnav a{display:flex;align-items:center;gap:8px;height:calc(var(--bar-h) - 1px);min-height:44px;padding:0;margin-right:16px;border-left:0;font-size:13px;color:var(--ink-3);white-space:nowrap} .chnav a .n{font-size:10px} .chnav .hosszu{display:none} .chnav .rovid{display:inline} .chnav a::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0);transform-origin:left} .chnav a[aria-current]::before{transform:none} .chcontent{border-left:0} .ch{scroll-margin-top:calc(var(--hdr-h) + var(--bar-h))} #uzenet{scroll-margin-top:calc(var(--hdr-h) + var(--bar-h) + 16px)} .ch-intro{padding:32px var(--gutter) 20px} .h2{font-size:26px} .ch-lead{font-size:17px} .cells{display:block} .cell{height:380px;padding:var(--cell-pad) 0 0 var(--gutter);gap:24px} .cell.r{border-right:0} .cell-t{padding-right:var(--gutter)} .cell-t h3{font-size:17px} .cell.wide{flex-direction:column;min-height:0} .cell.wide .cell-t{flex:none;padding:var(--cell-pad) var(--gutter) 0} .cell.wide .frag{border-left:0;padding:24px 0 0 var(--gutter);min-height:260px} .cell.text{height:auto;padding:var(--cell-pad) var(--gutter);flex-direction:column;gap:8px;justify-content:flex-start} /* ket ablak egymas alatt */ .ket-ablak{grid-template-columns:minmax(0,1fr);gap:0;padding-right:var(--gutter);padding-bottom:var(--cell-pad)} .kerdojel{padding:10px 0;height:auto} .win{right:var(--gutter)} .pv{grid-template-columns:1fr!important} .pv>div:first-child{display:none} /* halom: a lebego kartyak telefonon egymas ala kerulnek, semmi nem fedi egymast */ .cell.halom{height:auto} .cell.halom .frag{flex:none;display:grid;gap:12px;padding:0 var(--gutter) var(--cell-pad) 0} .cell.halom .win,.cell.halom .win2{position:static;width:auto;border:1px solid var(--line);border-radius:var(--r)} .cell.halom .win.urlap-ablak .pv{padding-bottom:16px!important} .flow{inset:0 var(--gutter) 0 0} /* flex (nem grid), hogy a ragado szel-jelzes a sor teljes szelessegeben mozoghasson */ .menet{display:flex;gap:0;overflow-x:auto;padding-right:var(--gutter);scrollbar-width:none} .menet::-webkit-scrollbar{display:none} .mstep{flex:0 0 160px} .mstep~.mstep{margin-left:12px} /* vizszintes sor jelzese (oldal.js 7): halvany szel es nyil ott, ahol meg van tartalom */ .sor-jelzes{container-type:scroll-state} .sor-jelzes>.orszem{display:block;flex:none;width:1px;height:1px;align-self:center} .orszem.b{margin-right:-1px} .orszem.j{margin-left:-1px} .sor-jelzes>.sor-szel{display:block;position:sticky;flex:none;width:0;align-self:stretch;z-index:2;pointer-events:none} /* a ragadas a belso margon belul all meg, ezert a margoval kijjebb toljuk a sor szeleig */ .sor-szel.b{left:0} .chnav .sor-szel.b{left:calc(-1 * var(--gutter))} .sor-szel.j{right:calc(-1 * var(--gutter))} .sor-szel i{position:absolute;top:0;bottom:0;width:48px;display:flex;align-items:center;color:var(--ink-3);opacity:0;transition:opacity 200ms var(--ease)} .sor-szel.b i{left:0;justify-content:flex-start;background:linear-gradient(to right,var(--bg) 30%,transparent)} .sor-szel.j i{right:0;justify-content:flex-end;background:linear-gradient(to left,var(--bg) 30%,transparent)} .sor-szel svg.i{width:14px;height:14px} .sor-jelzes.van-bal>.sor-szel.b i,.sor-jelzes.van-jobb>.sor-szel.j i{opacity:1} @container scroll-state(scrollable:left){.sor-szel.b i{opacity:1}} @container scroll-state(scrollable:right){.sor-szel.j i{opacity:1}} .prod{display:block} .prod-txt{padding:32px var(--gutter) 24px} .prod-txt h3{font-size:20px} .prod-frag{border-left:0;min-height:420px} .prod-frag .win{left:var(--gutter);top:0} .split{grid-template-columns:1fr} .split>div:last-child{display:none} .case{display:block} .case>div{border-right:0;border-bottom:1px solid var(--line);padding:var(--cell-pad) var(--gutter)} .case>div:last-child{border-bottom:0} .stats>div{padding:24px var(--gutter)} .stats b{font-size:36px} .cell.card,.cell.person{padding:32px var(--gutter)} .cell.card .lists{gap:16px} .faq{grid-template-columns:minmax(0,1fr);padding:0 var(--gutter) 40px} .faq summary{font-size:16px} .idopont-fej{padding-bottom:20px} .idopont-fej p.big{font-size:17px} .idopont-fog{padding:0 var(--gutter) 40px} .cal-hely{min-height:742px} .sk-cal{grid-template-columns:minmax(0,1fr);height:700px} .sk-cal>div+div{border-left:0;border-top:1px solid var(--line)} .sk-racs{grid-template-columns:repeat(7,minmax(0,1fr))} .sk-racs .sk{height:auto;aspect-ratio:1} .cal-nelkul{padding:24px} .cal-nelkul .btn{width:100%;justify-content:center} .uz-sor{padding:28px var(--gutter)} .uz-sor .uz-c{font-size:20px} .uz-test{padding:0 var(--gutter) 48px} .vonal{grid-template-columns:minmax(0,1fr);gap:22px} .vonal input,.vonal textarea{font-size:17px} .uz-info .email{margin-left:0} .foot-sor{padding-top:12px;padding-bottom:8px} .foot-ceg{padding-bottom:18px} } @media(max-width:600px){ .foot-sor .wordmark{width:100%} .cegsor{gap:6px 16px} .cegsor .pont{display:none} .hdr .wordmark{font-size:22px} } /* ---------- Olvasas-jelzo a fejezet-navigacioban (scroll-driven) ---------- Az aktiv fejezet vonala (mobilon az alahuzasa) annyira telik, amennyit a fejezetbol mar elolvastal: 0, amikor a fejezet teteje a ragado fejlec aljahoz er, 1, amikor az alja. A view-timeline-inset ezt a vonalat egy 1 px-es savva szukiti, igy a cover tartomany pont ezt a szakaszt fedi. Ahol nincs (Firefox) vagy csokkentett mozgasnal: a mai teli vonal az aktiv fejezeten. */ @media(prefers-reduced-motion:no-preference){ @supports ((animation-timeline:view()) and (animation-range:entry) and (timeline-scope:--a)){ .rail{timeline-scope:--fej-1,--fej-2,--fej-3,--fej-4,--fej-5,--fej-6,--fej-7,--fej-8} .ch{--olvas-vonal:var(--hdr-h);view-timeline-axis:block;view-timeline-inset:var(--olvas-vonal) calc(100% - var(--olvas-vonal) - 1px)} #kezzel{view-timeline-name:--fej-1} #mit{view-timeline-name:--fej-2} #roi{view-timeline-name:--fej-3} #epitett{view-timeline-name:--fej-4} #velunk{view-timeline-name:--fej-5} #kozos{view-timeline-name:--fej-6} #faq{view-timeline-name:--fej-7} #idopont{view-timeline-name:--fej-8} .chnav a::before{opacity:0;transition:opacity 280ms var(--ease);animation:vonal-telik linear both} .chnav a[aria-current]::before{opacity:1} .chnav a[href="#kezzel"]::before{animation-timeline:--fej-1} .chnav a[href="#mit"]::before{animation-timeline:--fej-2} .chnav a[href="#roi"]::before{animation-timeline:--fej-3} .chnav a[href="#epitett"]::before{animation-timeline:--fej-4} .chnav a[href="#velunk"]::before{animation-timeline:--fej-5} .chnav a[href="#kozos"]::before{animation-timeline:--fej-6} .chnav a[href="#faq"]::before{animation-timeline:--fej-7} .chnav a[href="#idopont"]::before{animation-timeline:--fej-8} .chnav a[href]::before{animation-range:cover 0% cover 100%} /* az utolso fejezet utan veget er a lap, a vonalig nem gorgetheto at: ott a mai teli vonal marad */ .chnav a[href="#idopont"]::before{animation:none} @media(max-width:899px){ .ch{--olvas-vonal:calc(var(--hdr-h) + var(--bar-h))} .chnav a::before{animation-name:sav-telik} } @keyframes vonal-telik{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes sav-telik{from{transform:scaleX(0)}to{transform:scaleX(1)}} } } /* ---------- Jogi oldalak (J1, J2: mockups/2026-10-04-lablec-states.html) ---------- 680 px-es olvaso oszlop. Az adatkezelesnel desktopon balra ragado tartalomjegyzek a fejezet-nav jelolojevel (2 px akcent), telefonon lenyithato "Tartalom". Az aktiv tetelt oldal.js allitja. */ .jogi-tartalom{max-width:calc(680px + 2 * var(--gutter));margin:0 auto;padding:72px var(--gutter) 96px} .jogi-tartalom h1{font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.03em;margin:0 0 24px;color:var(--ink)} .jogi-tartalom p{margin:0 0 20px;color:var(--ink-2)} .jogi-tartalom .vissza{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;margin-top:12px} .jogi-tartalom .jogi-felcim{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--accent);margin:0 0 18px;display:flex;gap:12px;align-items:center} .jogi-felcim::after{content:"";flex:0 0 40px;height:1px;background:color-mix(in srgb,var(--accent) 50%,transparent)} .jogi-szoveg a:not(.vissza),.jogi-adat a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:4px;text-decoration-thickness:1px} .jogi-adat{margin:0 0 32px;display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--line)} .jogi-adat dt,.jogi-adat dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line)} .jogi-adat dt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);padding-top:17px} .jogi-adat dd{color:var(--ink);overflow-wrap:anywhere} .jogi-tartalom .jogi-meta{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 40px} .jogi-szak{scroll-margin-top:calc(var(--hdr-h) + 28px)} .jogi-szak h2{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin:48px 0 12px;color:var(--ink)} .jogi-szak:first-of-type h2{margin-top:0} .jogi-szak strong{color:var(--ink);font-weight:600} .jogi-szak ul{margin:0 0 20px;padding-left:20px;color:var(--ink-2)} .jogi-szak li{margin:0 0 6px} .jogi-szak li::marker{color:var(--ink-3)} .jogi-hosszu{max-width:calc(200px + 72px + 680px + 2 * var(--gutter));display:grid;grid-template-columns:200px minmax(0,680px);gap:72px;justify-content:center;align-items:start} .jogi-toc{position:sticky;top:calc(var(--hdr-h) + 28px)} .jogi-tartalom .jogi-toc-c{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);margin:0 0 10px} .jogi-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px} .jogi-toc a{position:relative;display:block;padding:6px 8px 6px 12px;border-left:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--ink-3);transition:color 280ms var(--ease)} .jogi-toc a[aria-current]{color:var(--ink)} .jogi-toc a[aria-current]::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent)} @media(hover:hover) and (pointer:fine){.jogi-toc a:not([aria-current]):hover{color:var(--ink-2)}} .jogi-toc-m{display:none;border:1px solid var(--line);border-radius:var(--r);margin:0 0 32px} .jogi-toc-m summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer} .jogi-toc-m summary::-webkit-details-marker{display:none} .jogi-toc-m summary .mono{color:var(--ink-3)} .jogi-toc-m ol{list-style:none;margin:0;padding:4px 16px 12px;display:grid} .jogi-toc-m ol a{display:block;padding:8px 0;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line)} @media(max-width:899px){ .jogi-tartalom{padding:40px var(--gutter) 64px} .jogi-tartalom h1{font-size:32px} .jogi-hosszu{display:block} .jogi-toc{display:none} .jogi-toc-m{display:block} .jogi-adat{grid-template-columns:minmax(0,1fr)} .jogi-adat dt{padding:14px 0 2px;border-bottom:0} .jogi-adat dd{padding:0 0 14px} } /* ---------- Attunes a fooldal es a jogi oldalak kozott (cross-document view transition) ---------- Csak a teljes lap tunik at: a fejlec a ket oldalon mas (fooldalon linkek, gomb, JS-allapot). */ @media(prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:300ms;animation-timing-function:var(--ease)} } /* ---------- Csokkentett mozgas ---------- */ @media(prefers-reduced-motion:reduce){ .hdr,.btn,.chnav a,.chnav a::before,.hnav a,.foot ul a,.foot-kapcs a,.jogi-toc a,.faq summary svg.i,.sor-szel i{transition:none} .chnav ol{scroll-behavior:auto} .faq details::details-content{transition:none} #kezzel .pin-item.is-focused .mac-win,#kezzel .pfb-canvas.has-focus .pin-item{transition:none} } /* csak kepernyoolvasonak / nyomtatasnak: a vegso ertek, amig a szamlalo animal */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* spam-csapda az uzenet-urlapban: ember nem latja, nem eri el, a robot kitolti */ .csapda{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* nyomtatasnal a megjeleno mozgas (rv) mindig kesz allapotban latszik */ @media print{ html.mozgas .rv{opacity:1!important;transform:none!important} } /* ---------- 01: macOS ablakok a vonalazott asztalon ---------- */ #kezzel .pfb-wrap{padding:0 var(--cell-pad) 8px} #kezzel .pfb-canvas{position:relative;min-height:680px;border:1px solid var(--line);border-radius:6px;overflow:hidden; background-image: linear-gradient(to right, transparent 41px, rgba(196,74,74,.35) 42px, transparent 43px), repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(137,111,15,.22) 28px); background-color:#f7e18b} #kezzel .pin-item{position:absolute;width:230px;filter:saturate(1)} #kezzel .pin-item .pin{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))} #kezzel .mac-win{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);font-size:13px;line-height:1.35} #kezzel .mac-bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 10px} #kezzel .mac-bar .lights{display:flex;gap:7px} #kezzel .mac-bar .lights button{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;width:11px;height:11px;border-radius:50%;display:flex;align-items:center;justify-content:center} #kezzel .mac-bar .lights button svg{width:7px;height:7px;opacity:0} #kezzel .mac-bar .lights:hover button svg,#kezzel .mac-bar .lights button:focus-visible svg{opacity:1} #kezzel .mac-bar .lights button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #kezzel .mac-bar .lights button.r{background:#ff5f57} #kezzel .mac-bar .lights button.y{background:#febc2e} #kezzel .mac-bar .lights button.g{background:#28c840} #kezzel .mac-bar .lights button.r svg path{stroke:#7a1410;stroke-width:1.6;stroke-linecap:round;fill:none} #kezzel .mac-bar .lights button.y svg path{stroke:#8a5a06;stroke-width:1.7;stroke-linecap:round;fill:none} #kezzel .mac-bar .lights button.g svg path{stroke:#0f5c22;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;fill:none} #kezzel .mac-bar .title{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:500;margin-right:0} #kezzel .mac-bar .title svg{width:16px;height:16px;flex:none} #kezzel .mac-bar .title>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #kezzel .mac-body{padding:11px 13px 13px} #kezzel .mac-win{ --win-bg:#fbfbfc;--win-bar:#ececed;--win-line:#dcdce0;--win-ink:#1d1d1f;--win-muted:#626267; --win-bad:#b52121;--win-ok:#206c39;--win-bubble:#e5e5ea; --cal-blue:#deebff;--cal-blue-ink:#184783;--cal-red:#ffe5da;--cal-red-ink:#813421;--cal-hatch:rgba(206,67,56,.14); background:var(--win-bg);color:var(--win-ink) } :root[data-theme="sotet"] #kezzel .mac-win{ --win-bg:#1f1f21;--win-bar:#2b2b2d;--win-line:#48484b;--win-ink:#f2f2f3;--win-muted:#b0b0b6; --win-bad:#ff9690;--win-ok:#82d99a;--win-bubble:#3a3a3c; --cal-blue:#193859;--cal-blue-ink:#d5e8ff;--cal-red:#542c23;--cal-red-ink:#ffe0d4;--cal-hatch:rgba(255,155,144,.12); } #kezzel .mac-bar{background:var(--win-bar);border-bottom:1px solid var(--win-line)} #kezzel .mac-body{background:var(--win-bg)} /* App-jellegu tartalmak: Reminders, Mail, Calendar, Notes, Messages */ #kezzel .app-xls{padding:0;font-family:var(--font);font-size:9px;line-height:1.4} #kezzel .xls-head,#kezzel .xls-row{display:grid;grid-template-columns:14px 35px minmax(78px,1fr) 55px 88px} #kezzel .xls-head>span,#kezzel .xls-row>span{padding:5px 2px;border-right:1px solid var(--win-line);border-bottom:1px solid var(--win-line);white-space:nowrap} #kezzel .xls-head>span:last-child,#kezzel .xls-row>span:last-child{border-right:0} #kezzel .xls-head>span:nth-child(4){white-space:normal} #kezzel .xls-head{background:var(--win-bar);font-weight:700;color:var(--win-muted);font-size:8px} #kezzel .xls-row .rn{color:var(--win-muted);text-align:center;font-weight:600;background:var(--win-bar)} #kezzel .xls-bad{color:var(--win-bad);font-weight:600} #kezzel .xls-ok{color:var(--win-ok)} #kezzel .app-mail{display:flex;align-items:flex-start;gap:7px} #kezzel .mail-dot{width:7px;height:7px;border-radius:50%;background:#409cff;margin-top:5px;flex:none} #kezzel .mail-txt{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0} #kezzel .mail-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px} #kezzel .mail-meta b{font-size:13px;font-weight:700} #kezzel .mail-time{font-size:10px;color:var(--win-muted)} #kezzel .mail-subject{font-size:12px;font-weight:600} #kezzel .mail-preview{font-size:11px;line-height:1.45;color:var(--win-muted)} #kezzel .app-cal{padding:14px 9px 18px} #kezzel .cal-day{position:relative;height:203px} #kezzel .cal-hour{position:absolute;top:calc(var(--hour) * 58px);left:0;right:0;border-top:1px solid var(--win-line)} #kezzel .cal-hour>span{position:absolute;top:-7px;left:0;background:var(--win-bg);padding-right:5px;font-size:9px;color:var(--win-muted)} #kezzel .cal-events{position:absolute;inset:0 0 0 36px} #kezzel .cal-event{position:absolute;width:calc(50% - 2px);padding:4px 5px;border-left:3px solid;border-radius:4px;display:flex;flex-direction:column;gap:3px;box-sizing:border-box} #kezzel .cal-a{left:0;top:0;height:58px;background:var(--cal-blue);border-color:#2f6fed;color:var(--cal-blue-ink)} #kezzel .cal-b{right:0;top:29px;height:116px;background:var(--cal-red);border-color:#e45b38;color:var(--cal-red-ink)} #kezzel .cal-c{left:0;top:145px;width:100%;height:58px;background:var(--cal-blue);border-color:#2f6fed;color:var(--cal-blue-ink)} #kezzel .cal-time{font-size:9px;white-space:nowrap} #kezzel .cal-name{font-size:11px;font-weight:600;line-height:1.25;overflow-wrap:anywhere} #kezzel .cal-conflict{position:absolute;top:29px;left:0;right:0;height:29px;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--cal-hatch) 6px 8px);pointer-events:none} #kezzel .app-notes{display:flex;flex-direction:column;gap:6px} #kezzel .note-title{font-weight:700;font-size:15px} #kezzel .note-list{list-style:none;padding:0;margin:0} #kezzel .note-list li{display:flex;align-items:center;gap:7px;min-height:20px;font-size:12px;line-height:20px} #kezzel .note-list input{appearance:none;position:relative;flex:none;width:14px;height:14px;margin:0;border:1.5px solid #8b8b90;border-radius:50%;opacity:1} #kezzel .note-list input:checked{background:#dca51a;border-color:#dca51a} #kezzel .note-list input:checked::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:7px;border:solid #342600;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} #kezzel .note-list .is-done span{text-decoration:line-through;color:var(--win-muted)} #kezzel .app-msg{display:flex;flex-direction:column;align-items:flex-start;gap:8px} #kezzel .msg-contact{align-self:stretch;text-align:center;font-size:11px;font-weight:600;border-bottom:1px solid var(--win-line);padding-bottom:6px} #kezzel .msg-time{align-self:center;color:var(--win-muted);font-size:9px} #kezzel .msg-bubble{display:block;max-width:94%;padding:7px 10px;border-radius:14px 14px 14px 4px;background:var(--win-bubble);color:var(--win-ink);font-size:12px;line-height:1.4;box-sizing:border-box} #kezzel .pin-item .extra{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:200px;opacity:1;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);text-align:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.35)} #kezzel .pf2-p1{left:2%;top:40px;width:310px;transform:rotate(-.5deg)} #kezzel .pf2-p2{left:calc(50% - 100px);top:60px;width:250px;transform:rotate(1deg)} #kezzel .pf2-p3{left:calc(100% - 280px);top:30px;width:260px;transform:rotate(-1deg)} #kezzel .pf2-p4{left:10%;top:370px;width:250px;transform:rotate(1deg)} #kezzel .pf2-p5{left:48%;top:380px;width:270px;transform:rotate(-1.5deg)} /* A nagyitott ablak alatt is marad hely az extra kartyanak. */ @media(min-width:900px){ #kezzel .pin-item .extra{top:calc(100% + 20px)} } @media(min-width:900px) and (max-width:1199px){ #kezzel .pfb-canvas{min-height:1100px} #kezzel .pf2-p1{left:2%;top:30px} #kezzel .pf2-p2{left:calc(98% - 250px);top:200px} #kezzel .pf2-p3{left:2%;top:400px} #kezzel .pf2-p4{left:calc(98% - 250px);top:560px} #kezzel .pf2-p5{left:2%;top:790px} } /* Sarok-gombok: bezaras, lekicsinyites, fokuszalas (oldal.js). Az allapot-osztaly csak azt az ablakot veszi ki a lenti gorgeteses reflektor-animaciobol, amelyiket a latogato megerintette, a tobbi tovabbra is a gorgetest koveti. */ #kezzel .pin-item.is-closed .pin, #kezzel .pin-item.is-closed .mac-win, #kezzel .pin-item.is-closed .extra{display:none} #kezzel .closed-note{display:none} #kezzel .pin-item.is-closed .closed-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)} #kezzel .closed-note .reopen{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);border-radius:5px;padding:4px 9px;font-family:var(--font);font-size:11px;font-weight:500;cursor:pointer} #kezzel .closed-note .reopen:hover,#kezzel .closed-note .reopen:focus-visible{border-color:var(--accent);color:var(--accent)} #kezzel .mac-slot{position:relative} #kezzel .minimized-note{display:none;position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:14px;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);border-radius:8px;background:transparent;box-shadow:none;color:#343026;font-size:12px;line-height:1.4} #kezzel .pin-item.is-minimized .minimized-note{display:flex} #kezzel .pin-item.is-minimized .mac-win, #kezzel .pin-item.is-minimized .extra, #kezzel .pin-item.is-minimized .pin{visibility:hidden} /* A top layer kikeruli az asztal transzformaciojat es vagasi hatarat. */ #kezzel .pin-item .mac-win.is-flying{position:fixed;inset:auto;margin:0;padding:0;border:0;box-sizing:border-box;visibility:visible;transform-origin:center;animation:none;pointer-events:none;transition:none} #kezzel .mac-win.is-flying::backdrop{background:transparent;pointer-events:none} #kezzel .pin-item.is-restored{animation:none} #kezzel .pin-item.is-restored .mac-win,#kezzel .pin-item.is-restored .extra{animation:none} #kezzel .pin-item.is-focused{z-index:6} #kezzel .pin-item.is-focused .mac-win{transform:scale(1.1);box-shadow:0 26px 46px -18px rgba(0,0,0,.55),0 0 0 2px var(--accent);transition:transform 200ms ease,box-shadow 200ms ease} #kezzel .pfb-canvas.has-focus .pin-item:not(.is-focused){filter:saturate(.4) opacity(.6);transition:filter 200ms ease;animation:none} #kezzel .pin-item.is-closed, #kezzel .pin-item.is-minimized, #kezzel .pin-item.is-focused{animation:none} #kezzel .pin-item.is-closed .mac-win,#kezzel .pin-item.is-minimized .mac-win,#kezzel .pin-item.is-focused .mac-win, #kezzel .pin-item.is-closed .extra,#kezzel .pin-item.is-minimized .extra,#kezzel .pin-item.is-focused .extra{animation:none} /* A statikus alapban minden extra olvashato. 1200px alatt sajat ablak-idovonal van. overflow:visible KOTELEZO itt: hidden/auto "scroll container"-t csinalna a canvasbol, es a lenti view-timeline akkor az (sosem gorgetett) canvashoz kotne az ablakokat a valodi oldal-gorgetes helyett, ezert allna a reflektor. */ @media(max-width:1199px){ #kezzel .pfb-canvas{overflow:visible} } @media(max-width:899px){ #kezzel .pfb-wrap{padding:0 var(--cell-pad) 32px} #kezzel .pfb-canvas{min-height:0;border:0;border-radius:0;overflow:visible;padding-top:10px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(137,111,15,.22) 28px)} #kezzel .pin-item{position:relative;left:auto;top:auto;width:min(300px,100%);margin:0 auto 34px;transform:none} #kezzel .pin-item .pin{left:50%;transform:translateX(-50%)} #kezzel .pin-item .extra{position:static;width:auto;transform:none;margin-top:8px;text-align:left} } /* D: csak a szavak opacity-je valtozik, a generator szoveget a JS tordeli. Minden fejezetcimen (.atmenet) ugyanaz, mint a 01-ben; az alcim (02, 04) is feketere er, nem szurkere. */ .atmenet .szo{opacity:1} .ch-lead.atmenet{color:var(--ink)} @media(prefers-reduced-motion:no-preference){ @supports ((animation-timeline:view()) and (animation-range:entry) and (timeline-scope:--a)){ .atmenet{view-timeline:--problema-mondat block} .atmenet .szo{animation:problema-szo linear both;animation-timeline:--problema-mondat;animation-range:cover calc(28% + var(--i) / var(--n) * 30%) cover calc(40% + var(--i) / var(--n) * 30%)} /* Az asztal sajat idovonala nem irja felul a fejezet-nav idovonalat. Ot egymast koveto sav, mindegyikben egy ablak es a hozza tartozo extra. */ #kezzel .pfb-canvas{view-timeline:--problema-asztal block} #kezzel .pin-item{--kiemeles:1.07;animation:problema-reflektor linear both;animation-timeline:--problema-asztal;animation-range:cover calc(30% + var(--sor) * 12%) cover calc(42% + var(--sor) * 12%)} #kezzel .mac-win{animation:problema-keret linear both;animation-timeline:--problema-asztal;animation-range:cover calc(30% + var(--sor) * 12%) cover calc(42% + var(--sor) * 12%)} #kezzel .extra{animation:problema-extra linear both;animation-timeline:--problema-asztal;animation-range:cover calc(30% + var(--sor) * 12%) cover calc(42% + var(--sor) * 12%)} #kezzel .mac-bar .lights button svg{transition:opacity 120ms ease} /* A wrap 680 + 800 + 8 = 1488px. Cover 0 a 35vh vonalnal indul. A cover teljes hossza 1488px + 35vh - (hdr-h + 16px). Fix hossz-offsettel 1280px gorgetes alatt 800px az eltolodas: az asztal vegig 37.5% sebesseggel halad, visszafele is pontosan. A vegen a canvas alja 35vh + 200px; ot egyforma 256px-es sav. */ @media(min-width:1200px){ #kezzel .pfb-wrap{view-timeline:--problema-asztal block;view-timeline-inset:calc(var(--hdr-h) + 16px) 65%} #kezzel .pfb-canvas{view-timeline:none;animation:problema-lassitas linear both;animation-timeline:--problema-asztal;animation-range:cover 0px cover 1280px} /* A cim (01 + mondat) a tablaval egy egysegkent lassul (Adam, 10. kor A): ugyanaz az eltolas, ugyanazon az idovonalon, ezert a cim alja es a tabla teteje kozti tav allando. A szavak felfedese a cim sajat idovonalan marad (.atmenet). A wrap idovonalat a timeline-scope teszi lathatova a testver .ch-intro-nak. */ #kezzel{timeline-scope:--problema-asztal} #kezzel .ch-intro{animation:problema-lassitas linear both;animation-timeline:--problema-asztal;animation-range:cover 0px cover 1280px} #kezzel .pfb-wrap::after{content:"";display:block;height:800px} #kezzel .pin-item,#kezzel .mac-win,#kezzel .extra{animation-range:cover calc(var(--sor) * 256px) cover calc((var(--sor) + 1) * 256px)} } @keyframes problema-lassitas{from{transform:translateY(0)}to{transform:translateY(800px)}} @media(max-width:1199px){ /* 1200px alatt minden ablak a sajat atgorgeteset koveti, igy a sorrend 1-5 marad. Az extra helyet fenntartjuk: az animacio nem mozditja el a kovetkezo ablakot. */ #kezzel .pin-item{--kiemeles:1.02;view-timeline:--problema-ablak block;view-timeline-inset:50% calc(50% - 1px)} #kezzel .pin-item,#kezzel .mac-win,#kezzel .extra{animation-timeline:--problema-ablak;animation-range:cover 0% cover 100%} } @keyframes problema-szo{from{opacity:.26}to{opacity:1}} /* opacity NEM valtozik: a dimmeles csak filterrel megy, kulonben az idle ablakok szovege a sarga asztalon 3:1 ala esik (axe: color-contrast). */ @keyframes problema-reflektor{ 0%,100%{filter:saturate(.55);z-index:0} 10%,90%{filter:saturate(1.08);transform:scale(var(--kiemeles)) translateY(-4px);z-index:5} } @keyframes problema-keret{ 0%,100%{box-shadow:0 14px 30px -14px rgba(0,0,0,.45)} 10%,90%{box-shadow:0 20px 40px -16px rgba(0,0,0,.5),0 0 0 2px var(--accent)} } @keyframes problema-extra{0%,100%{opacity:0}10%,90%{opacity:1}} } } @media print{ #kezzel .pin-item,#kezzel .mac-win,#kezzel .extra,.atmenet .szo{animation:none} } /* ---------- Also dokk: a 01-tol a GYIK-ig ürülő ertesitesek, utana a TTP-ikon ---------- A lathatosagot es az ertesitesek fogyasat oldal.js szamolja (egyszeru gorgetes- szazalek a #kezzel es a #faq teteje kozott), nem CSS scroll-timeline: igy Firefoxon is ugyanugy mukodik, nincs kulon tartalek-ag. */ .appdock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,22px) scale(.95);opacity:0;pointer-events:none;z-index:15;display:flex;align-items:center;gap:10px;padding:8px;border-radius:20px;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line-2);box-shadow:0 16px 40px -18px rgba(0,0,0,.4);transition:opacity 260ms var(--ease,ease),transform 260ms var(--ease,ease)} @supports (backdrop-filter:blur(1px)){.appdock{backdrop-filter:blur(18px) saturate(1.5)}} .appdock.is-active{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto} /* D-b: amikor a lablec belep, a dokk 14 px-t lecsuszik es elhalvanyul (oldal.js: is-lablec) */ .appdock.is-active.is-lablec{opacity:0;transform:translate(-50%,14px) scale(1);pointer-events:none} .appdock-row{display:flex;align-items:center;gap:10px} .appdock-icon{position:relative;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;transform-origin:bottom center} .appdock-icon>svg{display:block;width:100%;height:100%} .appdock-badge{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:#ff3b30;border:2px solid var(--surface);transition:opacity 200ms ease,transform 200ms ease} .appdock-icon.is-cleared .appdock-badge{opacity:0;transform:scale(.3)} .appdock-icon.is-pending .appdock-badge{opacity:1;transform:scale(1)} .appdock-icon[role="button"]{cursor:pointer} .appdock-icon[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* TTP-ikon: a potty akkor jelenik meg, amikor a tobbi ikon kiurult (all-clear), egy kis felugrassal */ .appdock .ad-ttp .appdock-badge{opacity:0;transform:scale(.3)} .appdock.all-clear .ad-ttp .appdock-badge{opacity:1;transform:scale(1);animation:ttp-potty 520ms cubic-bezier(.3,1.6,.5,1) 280ms both} @keyframes ttp-potty{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25) translateY(-2px)}100%{opacity:1;transform:scale(1)}} .appdock .ad-ttp{visibility:hidden;max-width:0;margin-left:0;opacity:0;transform:scale(.6);overflow:visible;transition:max-width 320ms var(--ease,ease),opacity 260ms ease,transform 260ms ease,margin-left 320ms var(--ease,ease)} .appdock.all-clear .ad-ttp{visibility:visible;max-width:44px;margin-left:4px;opacity:1;transform:scale(1)} .appdock.all-clear{gap:14px} .appdock .ad-ttp:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:480px){ .appdock{gap:7px;padding:6px;border-radius:17px} .appdock-row{gap:7px} .appdock-icon{width:34px;height:34px;border-radius:9px} .appdock .ad-ttp{max-width:0} .appdock.all-clear .ad-ttp{max-width:38px} } @media(prefers-reduced-motion:reduce){ .appdock,.appdock-badge,.appdock .ad-ttp{transition:none} .appdock.all-clear .ad-ttp .appdock-badge{animation:none} .appdock.is-active.is-lablec{transform:translate(-50%,0) scale(1)} } /* Az oldal.js az ikon kozeppontjatol mert tavolsaggal allitja a --mag erteket. */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .appdock,.appdock-row{overflow:visible} .appdock{--mag-duration:200ms} .appdock.is-magnifying{--mag-duration:70ms} .appdock .appdock-icon{transform:translateY(calc((1 - var(--mag,1)) * 10px)) scale(var(--mag,1));transition:transform var(--mag-duration) ease} .appdock .ad-ttp{transition:max-width 320ms var(--ease,ease),opacity 260ms ease,transform var(--mag-duration) ease,margin-left 320ms var(--ease,ease)} .appdock.all-clear .ad-ttp{transform:translateY(calc((1 - var(--mag,1)) * 10px)) scale(var(--mag,1))} .appdock.all-clear .ad-ttp:focus-visible{transform:translateY(-5px) scale(1.5);z-index:2} } /* ---------- 02 Megoldasok: panasz-savok + a 45 megoldas listaja ---------- A mockup: mockups/2026-10-04-02-mihez-d-states.html (B valtozat, d1 suruseg). A savra kattintva az illo megoldasok a lista elejere kerulnek (oldal.js, FLIP), a tobbi halvany marad alattuk. Telefonon nincs mozgas, a lista teteje gordul a kepernyo tetejere. */ #mit .chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--cell-pad) 18px;align-items:center} #mit .chip,#roi .chip{appearance:none;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:400;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color 280ms var(--ease),color 280ms var(--ease),border-color 280ms var(--ease)} #mit .chip[aria-pressed="true"],#roi .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:500} #mit .chip:focus-visible,#roi .chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px} @media(hover:hover) and (pointer:fine){#mit .chip:not([aria-pressed="true"]):hover,#roi .chip:not([aria-pressed="true"]):hover{border-color:var(--ink-2)}} /* halk szamlalo-sor a lista folott */ #mit .cnt{margin:0;padding:0 var(--cell-pad) 12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);min-height:30px;display:flex;align-items:center} #mit .lst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)} #mit .lst .it{display:grid;grid-template-columns:11px minmax(0,1fr);gap:0 10px;align-items:start;padding:10px 20px 10px var(--cell-pad);font-size:14.5px;line-height:1.35;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0;color:var(--ink);background:var(--bg);transition:opacity 280ms var(--ease)} #mit .lst .it:nth-child(3n){border-right:0} #mit .lst .it.o{color:var(--ink-3)} #mit .lst .body{min-width:0} #mit .lst .t{color:inherit} #mit .lst a.t{text-decoration:none} #mit .lst a.t:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px} @media(hover:hover) and (pointer:fine){#mit .lst a.t:hover{text-decoration:underline;text-underline-offset:2px}} #mit .lst .w{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;margin-left:10px} #mit .mk{display:inline-block;width:11px;height:11px;flex:none;margin-top:4px;color:var(--ink-2)} #mit .mk.o{color:var(--ink-3)} #mit .pg{display:inline-block;width:9px;height:9px;flex:none;fill:var(--ink-2);margin-left:8px} /* valasztas utan: a nem illo tetelek halvanyak, a talalatok videojele cianra valt */ #mit .lst.filt .it:not(.hit){opacity:.22} #mit .lst.filt .it.hit .pg{fill:var(--accent)} #mit .ky{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:0 var(--cell-pad) 16px} #mit .ky>span{display:inline-flex;gap:7px;align-items:center} #mit .ky .mk{color:var(--ink-3);margin-top:0} #mit .ky .pg{fill:var(--ink-3);margin:0} #mit .zaro,#roi .zaro{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:26px var(--cell-pad) 56px;font-size:16px;color:var(--ink-2);flex-wrap:wrap} #mit .zaro p,#roi .zaro p{margin:0} #mit .zaro a,#roi .zaro a{color:var(--ink);font-weight:500;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;text-decoration:none} #mit .zaro a svg,#roi .zaro a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} @media(hover:hover) and (pointer:fine){#mit .zaro a:hover,#roi .zaro a:hover{text-decoration:underline;text-underline-offset:3px}} /* ---------- 03 ROI-kalkulator: csuszkak, koltseg-kartya, szamlalo ---------- A mockup: mockups/2026-10-07-roi-kalkulator-states.html. Balra a csuszkak, jobbra a koltseg-kartya es a szamlalo; telefonon kartya, csuszkak, szamlalo. A chip es a .zaro szabalyai a 02-vel kozosek (lasd fent). */ #roi .roi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-top:1px solid var(--line)} #roi .roi-bal{padding:8px var(--cell-pad) 32px} #roi .roi-jobb{padding:28px var(--cell-pad) 32px;border-left:1px solid var(--line);display:flex;flex-direction:column} #roi .roi-mezo{padding:20px 0 4px;border-top:1px solid var(--line)} #roi .roi-mezo:first-child{border-top:0;padding-top:16px} #roi .roi-fej{display:flex;justify-content:space-between;align-items:baseline;gap:16px} #roi .roi-fej label{font-size:15px;color:var(--ink)} #roi .roi-fej output{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} #roi .roi-fej output small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:6px} #roi .roi-fej output em{font-style:normal;font-size:12px;font-weight:500;color:var(--accent);margin-left:8px} #roi .roi-mezo .hint{font-size:13px;color:var(--ink-3);margin-top:0;max-width:44ch} #roi input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:2px 0 0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;--fill:0%} #roi input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(to right,var(--accent) var(--fill),var(--line) var(--fill))} #roi input[type=range]::-moz-range-track{height:2px;border-radius:1px;background:var(--line)} #roi input[type=range]::-moz-range-progress{height:2px;border-radius:1px;background:var(--accent)} #roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:24px;margin-top:-11px;border:0;border-radius:var(--r);background:var(--ink)} #roi input[type=range]::-moz-range-thumb{width:12px;height:24px;border:0;border-radius:var(--r);background:var(--ink)} #roi input[type=range]:focus-visible{outline:none} #roi input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus);outline-offset:3px} #roi input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--focus);outline-offset:3px} #roi .roi-kepl{margin-top:14px} #roi .roi-kepl summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);cursor:pointer;transition:color 280ms var(--ease)} #roi .roi-kepl summary::-webkit-details-marker{display:none} #roi .roi-kepl summary svg{width:9px;height:9px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform 280ms var(--ease)} #roi .roi-kepl[open] summary svg{transform:rotate(90deg)} #roi .roi-kepl[open] summary{color:var(--ink)} @media(hover:hover) and (pointer:fine){#roi .roi-kepl summary:hover{color:var(--ink)}} #roi .roi-kepl summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r)} #roi .roi-kepl ul{list-style:none;margin:2px 0 0;padding:0 0 0 17px;display:grid;gap:7px;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:56ch} #roi .roi-kepl .k{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink)} #roi .roi-cimke{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3)} #roi .roi-kfej{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} #roi .roi-per{display:flex;gap:8px} #roi .roi-nagy{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:22px} #roi .roi-nagy b{font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums} #roi .roi-nagy span{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink-3);white-space:nowrap} #roi .roi-mondat{margin-top:12px;font-size:17px;color:var(--ink-2)} #roi .roi-mondat strong{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} #roi .roi-szaml{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)} #roi .roi-szaml .ertek{margin-top:8px;font-family:var(--mono);font-size:clamp(22px,2.3vw,30px);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)} #roi .roi-szaml .tized{color:var(--ink-3)} #roi .roi-szaml .al{margin-top:6px;font-size:13px;color:var(--ink-3)} #roi .zaro{border-top:1px solid var(--line)} @media(max-width:899px){ #roi .roi{display:flex;flex-direction:column;padding:0 var(--gutter)} #roi .roi-bal,#roi .roi-jobb{display:contents} #roi .roi-kartya{order:1;padding:22px 0 8px} #roi .roi-mezok{order:2} #roi .roi-szaml{order:3;margin-top:18px;padding-bottom:28px} #roi .roi-mondat{font-size:16px} #roi .roi-nagy{margin-top:16px} #roi .roi-nagy b{font-size:40px} #roi .roi-kfej{align-items:flex-start} } /* ---------- 04 Megepitett rendszerek: valaszto, ragado kepernyo, ablakgombok ---------- A mockup: mockups/2026-10-04-02-03-b-states.html (B valtozat). Balra a 12 cim, jobbra a ragado kepernyo. A valaszto a ket blokk sorrendjet csereli (CSS order), a sarok-gombok a 01 mintajara mukodnek (oldal.js). Video meg nincs: a .vid.is-missing helyorzo all. */ #epitett .pick-row{display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:0 var(--cell-pad) 44px;flex-wrap:wrap} #epitett .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:2px;background:var(--surface)} #epitett .seg button{appearance:none;min-height:48px;padding:6px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;border:0;background:none;border-radius:2px;font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:color 200ms var(--ease),background-color 200ms var(--ease)} #epitett .seg button.on{background:var(--ink);color:var(--bg)} #epitett .seg button small{display:block;margin-top:2px;font-size:11.5px;font-weight:400} #epitett .seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} #epitett .rendszerek{display:flex;flex-direction:column} /* A vonal a szekcio teljes szelessegeben fut (a .kulon es a szekcio-vonalak szerint); a szovegszelesseget a cim es a bevezeto korlatozza. */ #epitett .sys{border-top:1px solid var(--line);padding:56px var(--cell-pad) 36px} #epitett .sys h3{margin:0;font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.018em;text-wrap:balance;max-width:calc(860px - 2*var(--cell-pad))} #epitett .sys p.s{margin:12px 0 0;font-size:17px;color:var(--ink-2);line-height:1.5;max-width:60ch;text-wrap:pretty} #epitett .sys .demo-cta{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px} #epitett .sys .demo-info{font-size:14px;color:var(--ink-2);line-height:1.4;max-width:42ch} #epitett .b-grid{display:grid;grid-template-columns:minmax(260px,357px) minmax(0,1fr);gap:0 40px;padding:0 var(--cell-pad) 40px} #epitett .b-list{list-style:none;margin:0;padding:12px 0 0;order:0} #epitett .b-stage{order:1;position:relative;padding-top:40px} #epitett .b-stick{position:sticky;top:calc(var(--hdr-h) + 24px)} #epitett .b-list li{position:relative;border-bottom:1px solid var(--line)} #epitett .b-list li::before{content:"";position:absolute;left:calc(-1 * var(--cell-pad));top:0;bottom:-1px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 420ms var(--ease)} #epitett .b-list li.on::before{transform:none} #epitett .b-list button{appearance:none;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:17px 0 16px;color:var(--ink-3);font:inherit;font-size:15.5px;line-height:1.35;font-weight:400;cursor:pointer;transition:color 280ms var(--ease)} #epitett .b-list button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} #epitett .b-list .ix{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em} #epitett .b-list li.on button{color:var(--ink);font-weight:500} #epitett .b-list li.on .ix{color:var(--accent)} #epitett .b-list li.kesz button{color:var(--ink-3);opacity:.6} #epitett .b-list .dx{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)} #epitett .b-list .dx p{overflow:hidden;margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5;padding-left:36px;text-wrap:pretty} #epitett .b-list li.on .dx{grid-template-rows:1fr} #epitett .b-list li.on .dx p{padding-bottom:18px} #epitett .b-cap{margin:12px 0 0;display:flex;justify-content:space-between;gap:16px;color:var(--ink-3)} #epitett .b-cap .nev{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* macOS ablak */ #epitett .mac{position:relative;border-radius:8px;overflow:hidden;font-size:13px;line-height:1.35; --win-bg:#fbfbfc;--win-bar:#ececed;--win-line:#dcdce0;--win-muted:#626267; background:var(--win-bg);box-shadow:0 0 0 1px var(--win-line),0 14px 30px -14px rgba(0,0,0,.45)} :root[data-theme="sotet"] #epitett .mac{--win-bg:#1f1f21;--win-bar:#2b2b2d;--win-line:#48484b;--win-muted:#b0b0b6} #epitett .mac.is-flying{position:fixed;inset:auto;margin:0;padding:0;box-sizing:border-box;visibility:visible;transform-origin:center;animation:none;transition:none;pointer-events:none;z-index:60} #epitett .mac.is-flying::backdrop{background:transparent;pointer-events:none} #epitett .mac-bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 10px;background:var(--win-bar);border-bottom:1px solid var(--win-line)} #epitett .lights{display:flex;gap:7px} #epitett .lights button{appearance:none;position:relative;border:0;padding:0;margin:0;font:inherit;cursor:pointer;width:11px;height:11px;border-radius:50%;display:flex;align-items:center;justify-content:center} #epitett .lights button::before{content:"";position:absolute;inset:-7px} #epitett .lights button svg{width:7px;height:7px;opacity:0;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity 120ms ease} #epitett .lights:hover button svg,#epitett .lights button:focus-visible svg{opacity:1} #epitett .lights button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} #epitett .lights .r{background:#ff5f57}#epitett .lights .r svg{stroke:#7a1410;stroke-width:1.6} #epitett .lights .y{background:#febc2e}#epitett .lights .y svg{stroke:#8a5a06;stroke-width:1.7} #epitett .lights .g{background:#28c840}#epitett .lights .g svg{stroke:#0f5c22;stroke-width:1.3} #epitett .mac-bar .title{flex:1;min-width:0;text-align:center;font-size:11.5px;font-weight:500;color:var(--win-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:47px} /* a kepernyo: amig nincs felvetel, csendes helyorzo all a mono sorral */ #epitett .vid{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--win-bg)} #epitett .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--win-bg)} #epitett .vid .lab{position:absolute;inset:0;margin:0;display:flex;gap:8px;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-3)} #epitett .vid:not(.is-missing){background:#000} #epitett .vid:not(.is-missing) .lab{display:none} #epitett .vid.is-missing video{display:none} #epitett .vid.is-ended video,#epitett .vid.is-ended .lab{display:none} #epitett .vid.is-ended{background:var(--surface-2)} #epitett .endcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--ink-2);font-size:15px;text-align:center;padding:16px} #epitett .endcard[hidden]{display:none} #epitett .endcard .ix{color:var(--ink-3)} /* zold: a helyen no a teljes tartalomszelessegre, a lista helyett szamsor */ #epitett .b-grid.is-large{grid-template-columns:minmax(0,1fr)} #epitett .b-grid.is-large .b-list{display:none} #epitett .b-grid.is-large .b-stage{padding-top:24px} #epitett .b-grid.is-large .b-stick{position:static} #epitett .b-grid.is-large .b-cap{display:none} #epitett .b-nums{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap} #epitett .b-nums[hidden]{display:none} #epitett .b-nums button{appearance:none;height:28px;min-width:34px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--ink-3);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;cursor:pointer} #epitett .b-nums button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} #epitett .b-nums button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} #epitett .b-capL{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline} #epitett .b-capL[hidden]{display:none} #epitett .b-capL b{font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.3;display:block} #epitett .b-capL p{margin:8px 0 0;font-size:15.5px;color:var(--ink-2);line-height:1.5;max-width:64ch;text-wrap:pretty} #epitett .b-capL p:empty{display:none} #epitett .b-capL .ix{color:var(--ink-3);white-space:nowrap} /* sarga: a hely marad, szaggatott korvonal (a 01 minimized-note mintaja) */ #epitett .b-ghost{appearance:none;width:100%;aspect-ratio:16/9;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);border-radius:8px;background:transparent;color:var(--ink-2);font:inherit;font-size:13.5px;line-height:1.4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;cursor:pointer} #epitett .b-ghost[hidden]{display:none} #epitett .b-ghost .mono{color:var(--ink-3)} #epitett .b-ghost:focus-visible{outline:2px solid var(--focus);outline-offset:3px} #epitett .is-min .mac:not(.is-flying){display:none} #epitett .kulon{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px var(--cell-pad);border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)} #epitett .kulon a{color:var(--ink);font-weight:500;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;text-decoration:none} #epitett .kulon a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} @media(hover:hover) and (pointer:fine){#epitett .kulon a:hover{text-decoration:underline;text-underline-offset:3px}} /* telefon: a nagyitas teljes kepernyo (Fullscreen API), tartalek a sotet reteg */ #epitett .mac:fullscreen{width:100vw;height:100vh;border-radius:0;display:flex;flex-direction:column;justify-content:center;background:#0b0b0c} #epitett .mac:fullscreen .vid{width:100%;aspect-ratio:16/9} #epitett .b-stage.is-ovl{position:fixed;inset:0;z-index:30;background:rgba(11,11,12,.92);padding:0 16px;display:flex;align-items:center;justify-content:center} #epitett .b-stage.is-ovl .b-stick{position:static;width:100%;max-width:840px} #epitett .b-stage.is-ovl .b-cap{color:#a1a1a6} /* ---------- dokk: a 04 sarga gombja ide kuldi az ablakot ---------- */ .appdock .dsep{width:1px;height:28px;background:color-mix(in srgb,var(--ink) 20%,transparent);flex:none;display:none} .appdock.van-ablak .dsep{display:block} .appdock .ad-thumb{appearance:none;border:0;background:none;padding:0;margin:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transform-origin:bottom center} .appdock .ad-thumb[hidden]{display:none} .appdock .ad-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px} .appdock .tw{position:relative;width:36px;height:26px;border-radius:4px;overflow:hidden;background:linear-gradient(160deg,#eceef1,#f7f8fa);box-shadow:0 0 0 1px #dcdce0,0 4px 10px -4px rgba(0,0,0,.45)} :root[data-theme="sotet"] .appdock .tw{background:linear-gradient(160deg,#2b2b2d,#1f1f21);box-shadow:0 0 0 1px #48484b,0 4px 10px -4px rgba(0,0,0,.6)} .appdock .tw i{display:block;height:6px;background:#ececed;border-bottom:1px solid #dcdce0} :root[data-theme="sotet"] .appdock .tw i{background:#2b2b2d;border-bottom-color:#48484b} .appdock .tw i::before{content:"";position:absolute;left:3px;top:2px;width:2px;height:2px;border-radius:50%;background:#ff5f57;box-shadow:4px 0 0 #febc2e,8px 0 0 #28c840} /* ---------- 02 es 04: koztes szelesseg es telefon ---------- */ @media(max-width:1199px){ #mit .lst{grid-template-columns:repeat(2,minmax(0,1fr))} #mit .lst .it:nth-child(3n){border-right:1px solid var(--line)} #mit .lst .it:nth-child(2n){border-right:0} #epitett .b-grid{gap:0 28px} } @media(max-width:899px){ #mit .chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 var(--gutter) 14px} #mit .chip{height:auto;min-height:44px;padding:7px 10px;font-size:13px;line-height:1.25;white-space:normal;text-align:left;display:flex;align-items:center} #mit .cnt{padding:0 var(--gutter) 12px} #mit .lst{grid-template-columns:minmax(0,1fr)} #mit .lst .it,#mit .lst .it:nth-child(3n),#mit .lst .it:nth-child(2n){border-right:0} #mit .lst .it{padding:9px var(--gutter)} #mit .lst.filt .it:not(.hit){opacity:.3} #mit .ky{padding:0 var(--gutter) 14px;gap:12px} #mit .zaro,#roi .zaro{padding:22px var(--gutter) 44px;font-size:15px;flex-direction:column;align-items:flex-start;gap:12px} #epitett .pick-row{padding:0 var(--gutter) 28px} #epitett .seg{display:flex;width:100%} #epitett .seg button{flex:1 1 auto;min-height:52px;padding:6px;white-space:nowrap} #epitett .sys{padding:36px var(--gutter) 24px} #epitett .sys h3{font-size:22px} #epitett .sys p.s{font-size:16px} #epitett .b-grid{display:block;padding:0} /* a kepernyo a fejlec es a fejezet-sav alatt ragad, a lista alatta gordul */ #epitett .b-stage{position:sticky;top:calc(var(--hdr-h) + var(--bar-h));z-index:2;background:var(--bg);padding:14px var(--gutter) 10px;border-bottom:1px solid var(--line)} #epitett .b-stick{position:static} #epitett .b-list{padding:4px var(--gutter) 24px} #epitett .b-list li::before{left:calc(-1 * var(--gutter))} #epitett .b-list button{padding:14px 0 13px;font-size:15px;min-height:44px} #epitett .b-ghost{aspect-ratio:auto;min-height:72px} #epitett .kulon{padding:18px var(--gutter);font-size:14px;flex-direction:column;align-items:flex-start;gap:12px} } /* ---------- Tap-celok: ujjnal legalabb 44 px, a kinezet valtozasa nelkul ---------- Atlatszo ::after a latszo elem koré. A .lights gombok kozt 7 px a hely, ezert ott a talalati terulet 18 px szeles es 44 px magas (44 px szelesseghez a pontoknak kellene tavolabb allniuk); felfele az ablak pereme vag, ezert lefele nyulik tobbet. */ @media (pointer:coarse){ #kezzel .mac-bar .lights button,#epitett .lights button,#velunk .li,.hdr .btn,.adatkez-info a,#mit .zaro a,#roi .zaro a,#roi .chip,#epitett .kulon a{position:relative} #kezzel .mac-bar .lights button::after,#epitett .lights button::after{content:"";position:absolute;inset:-9.5px -3.5px -23.5px} #epitett .lights button::before{display:none} #velunk .li::after{content:"";position:absolute;inset:-11px} .hdr .btn::after{content:"";position:absolute;inset:-5px 0} .adatkez-info a::after,#mit .zaro a::after,#roi .zaro a::after,#epitett .kulon a::after{content:"";position:absolute;inset:-14px -8px} #roi .chip::after{content:"";position:absolute;inset:-5px 0} /* foglalo: a 36x36-os het-nyil 4 px-szel nyulik ki (44x44); a 34 px-es idopontcella 5 px-szel fel es le (44), ehhez a sorkoz 8-rol 10 px-re no, hogy a szomszedos sorok talalati terulete ne fedje egymast */ .fg-lep,.fg-ido{position:relative} .fg-lep::after{content:"";position:absolute;inset:-4px} .fg-idok{row-gap:10px} .fg-ido::after{content:"";position:absolute;inset:-5px 0} } /* ---------- 02 es 04: csokkentett mozgas ---------- */ @media(prefers-reduced-motion:reduce){ #mit .chip,#roi .chip,#roi .roi-kepl summary,#roi .roi-kepl summary svg,#mit .lst .it,#epitett .seg button,#epitett .b-list button, #epitett .b-list li::before,#epitett .b-list .dx{transition:none} }