/* A Miriad blog- és termékoldalainak stílusa. A tokenek a landingéi
   (2026-10-01_uj-oldal-synapse/prototipus/uzleti-agy.html), hogy a blog ugyanabban a világban éljen. */
:root{
  --bg:#0e0e0e; --fel:#141414; --fel2:#1a1a1a; --vonal:#2a2a2a;
  --sz:#e8e8e8; --sz2:#bbbbbb; --halk:#8a8a8a;
  --piros:#fa2e2e; --piros-h:rgba(250,46,46,.12);
  --piros-felirat:#0e0e0e; /* felirat a piros kitöltésen: 5,05:1, hoverre 5,85:1 (a #fff 3,82:1, bukik) */
  --cim:'Space Grotesk',system-ui,sans-serif;
  --betu:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --max:1080px;
  --olvas:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--sz);font-family:var(--betu);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 24px}}
h1,h2,h3{font-family:var(--cim);font-weight:500;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:0}
.mono{font-family:var(--mono);font-size:.76rem;color:var(--halk);letter-spacing:.03em}
.cimke{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;color:var(--piros);background:var(--piros-h);padding:4px 10px;border-radius:5px;text-decoration:none}
.gomb{display:inline-flex;align-items:center;gap:10px;background:var(--piros);color:var(--piros-felirat);text-decoration:none;font-weight:500;padding:14px 22px;border-radius:9px;transition:background .15s}
.gomb:hover{background:#ff4b4b}
.gomb::after{content:"→";font-family:var(--mono)}

/* felső sáv: ragadós, mint a landingen */
.sav{position:sticky;top:0;z-index:10;background:rgba(14,14,14,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--vonal)}
.sav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px}
.sav img{height:30px;width:auto}
.menu{display:flex;gap:18px;font-size:.92rem}
.menu a{text-decoration:none;color:var(--sz2)}
.menu a:hover{color:var(--sz)}

/* oldalfej */
.oldalfej{padding:40px 0 28px;border-bottom:1px solid var(--vonal)}
.morzsa{font-family:var(--mono);font-size:.74rem;color:var(--halk);margin:0 0 22px}
.morzsa ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.morzsa li+li::before{content:"/";margin-right:6px;color:var(--vonal)}
.morzsa a{text-decoration:none}
.morzsa a:hover{color:var(--sz)}
.oldalfej .al{color:var(--sz2);font-size:1.12rem;margin:18px 0 0;max-width:var(--olvas)}
.oldalfej .mono{display:block;margin-top:16px}
.boritokep{margin:28px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--vonal)}

/* cikk-elrendezés: tartalomjegyzék oldalt széles kijelzőn, felül mobilon */
.cikkvaz{display:grid;gap:32px;padding:36px 0 56px}
@media(min-width:1000px){.cikkvaz{grid-template-columns:minmax(0,var(--olvas)) 240px;justify-content:space-between}.tj{order:2;position:sticky;top:84px;align-self:start}}
.tj{border:1px solid var(--vonal);border-radius:12px;padding:16px 18px;background:var(--fel);font-size:.9rem}
.tj b{display:block;font-family:var(--mono);font-size:.72rem;color:var(--halk);font-weight:400;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.tj ol{margin:0;padding-left:18px}
.tj li{margin:4px 0}
.tj a{text-decoration:none;color:var(--sz2)}
.tj a:hover{color:var(--sz)}

/* olvasható törzs: 18 px, ~70 karakteres sor */
.cikk{max-width:var(--olvas);min-width:0;font-size:18px;line-height:1.7;overflow-wrap:anywhere}
@media(max-width:600px){.cikk{font-size:17px}}
.cikk>*:first-child{margin-top:0}
.cikk p,.cikk ul,.cikk ol{margin:0 0 1.1em}
.cikk h2{font-size:clamp(1.5rem,3.4vw,2rem);margin:2em 0 .6em;scroll-margin-top:80px}
.cikk h3{font-size:1.2rem;margin:1.6em 0 .5em;scroll-margin-top:80px}
.cikk a{color:var(--sz);text-decoration-color:var(--piros);text-underline-offset:3px}
.cikk a:hover{color:var(--piros)}
.cikk li{margin:.3em 0}
.cikk blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--piros);color:var(--sz2)}
.cikk code{font-family:var(--mono);font-size:.86em;background:var(--fel2);border:1px solid var(--vonal);border-radius:4px;padding:1px 5px}
.cikk pre{background:#000;border:1px solid var(--vonal);border-radius:10px;padding:16px;overflow-x:auto;font-size:.85rem;line-height:1.55}
.cikk pre code{background:none;border:0;padding:0;font-size:inherit}
.cikk table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;font-size:.9em}
.cikk th,.cikk td{border:1px solid var(--vonal);padding:8px 12px;text-align:left;vertical-align:top}
.cikk th{background:var(--fel2);font-weight:500}
.cikk img{border-radius:10px;margin:1.4em 0}
.cikk hr{border:0;border-top:1px solid var(--vonal);margin:2.4em 0}

/* GYIK */
.gyik{margin-top:2.4em}
.gyik details{border:1px solid var(--vonal);border-radius:10px;background:var(--fel);margin:10px 0}
.gyik summary{cursor:pointer;padding:14px 18px;font-weight:500;font-size:1rem}
.gyik details p{margin:0;padding:0 18px 16px;color:var(--sz2);font-size:1rem}

/* kapcsolódó cikkek, kártyák */
.blokk{padding:48px 0;border-top:1px solid var(--vonal)}
.blokk h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 20px}
.racs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));list-style:none;margin:0;padding:0}
.kartya{display:block;height:100%;border:1px solid var(--vonal);border-radius:12px;padding:18px;background:var(--fel);text-decoration:none;transition:border-color .2s}
.kartya:hover{border-color:var(--halk)}
.kartya b{display:block;font-family:var(--cim);font-weight:500;font-size:1.08rem;line-height:1.3;margin:8px 0 6px}
.kartya span.l{display:block;color:var(--sz2);font-size:.92rem}
.kartya.piller{border-color:rgba(250,46,46,.45);background:linear-gradient(var(--piros-h),var(--piros-h)),var(--fel)}
/* esettanulmány: Friss munkák rács (címke · cím · eredmény · link) és a case-cikk fejléce;
   a piros szöveg a --fel felületen 4,8:1, a --bg-n 5,05:1 */
.kartya.eset{display:flex;flex-direction:column;overflow-wrap:anywhere}
.kartya.eset .eredmeny{display:block;margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.8rem;color:var(--piros)}
.kartya.eset .tovabb-jel{display:block;margin-top:12px;font-size:.88rem;color:var(--sz2)}
.kartya.eset .tovabb-jel::after{content:" →";font-family:var(--mono);color:var(--piros)}
.kartya.eset:hover{border-color:rgba(250,46,46,.45)}
.kartya.eset:hover .tovabb-jel{color:var(--sz)}
.oldalfej .eredmeny{font-family:var(--mono);font-size:.82rem;color:var(--piros);margin:14px 0 0}
.iparag{padding:36px 0 8px}
.iparag h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 16px}
.iparag h2 a{text-decoration:none}

/* termék-CTA sáv */
.cta{padding:48px 0;border-top:1px solid var(--vonal);background:var(--fel)}
.cta h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 8px}
.cta p{color:var(--sz2);margin:0 0 20px;max-width:var(--olvas)}
.cta ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cta li a{display:inline-block;font-family:var(--mono);font-size:.78rem;color:var(--sz2);border:1px solid var(--vonal);border-radius:999px;padding:6px 12px;text-decoration:none}
.cta li a:hover{border-color:var(--piros);color:var(--sz)}

/* termék-kártya (store, cikk végi CTA) */
.tkartya{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;border:1px solid var(--vonal);border-radius:12px;padding:20px;background:var(--fel)}
.tkartya b{font-family:var(--cim);font-weight:500;font-size:1.15rem;line-height:1.3}
.tkartya b a{text-decoration:none}
.tkartya b a:hover{color:var(--piros)}
.tkartya p{margin:0;color:var(--sz2);font-size:.95rem}
.tkartya .ar{font-family:var(--cim);font-size:1.4rem;color:var(--sz);margin-top:auto;padding-top:6px}
.cta .tkartya{max-width:560px;height:auto;margin-bottom:20px}
.tkartya.koteg{max-width:560px;border-color:rgba(250,46,46,.45)}
.tovabb{margin:0}
.tovabb a{color:var(--sz);text-decoration-color:var(--piros);text-underline-offset:3px}
.tovabb a:hover{color:var(--piros)}
.iparag .tovabb{margin-top:20px}
.iparag>.wrap>p{color:var(--sz2);margin:0 0 16px}
.oldalfej .szerzosor{margin-top:6px}
.oldalfej .szerzosor a{color:var(--sz2)}
.oldalfej .bio{color:var(--sz2);margin:14px 0 0;max-width:var(--olvas)}

/* store-szűrő JS nélkül: a rádiógomb a címke; a kiválasztott címke szerint rejti a többi kártyát */
.szuro-r{position:absolute;opacity:0;pointer-events:none}
.szurok{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.szurok label{font-family:var(--mono);font-size:.78rem;color:var(--sz2);border:1px solid var(--vonal);border-radius:999px;padding:6px 12px;cursor:pointer}
.szurok label:hover{color:var(--sz)}
#sz-mind:checked~.szurok [for=sz-mind],#sz-seo:checked~.szurok [for=sz-seo],#sz-copy:checked~.szurok [for=sz-copy],
#sz-ad:checked~.szurok [for=sz-ad],#sz-brand:checked~.szurok [for=sz-brand],#sz-brain:checked~.szurok [for=sz-brain],
#sz-influencer:checked~.szurok [for=sz-influencer]{color:var(--piros);border-color:rgba(250,46,46,.4);background:var(--piros-h)}
#sz-mind:focus-visible~.szurok [for=sz-mind],#sz-seo:focus-visible~.szurok [for=sz-seo],#sz-copy:focus-visible~.szurok [for=sz-copy],
#sz-ad:focus-visible~.szurok [for=sz-ad],#sz-brand:focus-visible~.szurok [for=sz-brand],#sz-brain:focus-visible~.szurok [for=sz-brain],
#sz-influencer:focus-visible~.szurok [for=sz-influencer]{outline:2px solid #fff;outline-offset:3px}
#sz-seo:checked~.racs li:not([data-c=seo]),#sz-copy:checked~.racs li:not([data-c=copy]),#sz-ad:checked~.racs li:not([data-c=ad]),
#sz-brand:checked~.racs li:not([data-c=brand]),#sz-brain:checked~.racs li:not([data-c=brain]),
#sz-influencer:checked~.racs li:not([data-c=influencer]){display:none}

/* termékoldal */
.ertesit{padding:48px 0;border-top:1px solid var(--vonal)}
.ertesit h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 10px}
.ertesit p{color:var(--sz2);margin:0}
.oldalfej .gomb{margin-top:24px}

.lab{border-top:1px solid var(--vonal);padding:28px 0;font-size:.86rem;color:var(--halk)}
.lab .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.lab nav{display:flex;gap:16px}
.lab a{text-decoration:none}
.lab a:hover{color:var(--sz)}

/* termékoldal áruképei (mockup_epit.py): hős a fejlécben, belelapozó sor; a vízszintes görgetés a soron belül marad */
.termekfej .wrap{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.termekfej .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px}}
.termek-hos{margin:0}
.termek-hos img{display:block;width:100%;height:auto;border:1px solid var(--vonal);border-radius:12px}
.oldalfej .ar{font-family:var(--cim);font-size:1.6rem;color:var(--sz);margin:22px 0 14px}
.lapozo{padding:36px 0 8px;border-bottom:1px solid var(--vonal)}
.lapozo h2{font-family:var(--cim);font-weight:500;font-size:1.4rem;margin:0}
.lapozo .mono{margin:6px 0 18px}
.lapsor{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;overscroll-behavior-x:contain}
.lapsor figure{margin:0;flex:0 0 min(70%,300px);scroll-snap-align:start}
.lapsor .lap-zip{flex-basis:min(88%,450px)}
.lapsor img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.lapsor .lap img{background:#fff}
.oldalfej .garancia{font-size:.92rem;color:var(--sz2);margin:-6px 0 16px}
/* fejléc keskeny kijelzőn: a menü a logó alá kerül, és ha kell, a soron belül görget (5 pont nem fér el a logó mellett) */
@media(max-width:600px){.sav .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;row-gap:6px}.menu{width:100%;gap:16px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}}