/* cryptoreel.net - sign to enter */

@font-face {
  font-family: "Betu Cim";
  src: url("/fonts/betu-cim-24.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Betu Szoveg";
  src: url("/fonts/betu-szoveg.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Betu Szam";
  src: url("/fonts/betu-szam.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --lap: #f6f5fa;
  --feher: #ffffff;
  --tinta: #1c1b22;
  --halvany: #5f5c6b;
  --vonal: #dad7e3;
  --vonal-2: #c6c2d4;
  --ibolya: #5b45d9;
  --ibolya-tinta: #3f2fa8;
  --ibolya-mos: #ece8ff;
  --vaj: #f7cf3d;
  --vaj-sotet: #d9b01e;
  --vaj-tinta: #6a5200;
  --vaj-mos: #fff3c4;
  --zold: #1e7f4f;
  --zold-tinta: #16623c;
  --zold-mos: #e4f4eb;
  --piros: #c2362b;
  --piros-tinta: #a12a21;
  --piros-mos: #fbe9e7;
  --narancs: #d9731e;
  --narancs-tinta: #8a4a0f;
  --narancs-mos: #fdebdc;
  --rozsa: #b8367f;
  --rozsa-tinta: #8c2a60;
  --rozsa-mos: #fae6f1;
  --moha: #5b8c1a;
  --moha-tinta: #3f6512;
  --moha-mos: #edf4df;
  --pala: #5f5c6b;
  --pala-tinta: #3d3a47;
  --pala-mos: #ecebf1;
  --sotet: #15131c;
  --sotet-2: #211e2c;
  --sotet-szoveg: #f2f0f7;
  --sotet-halvany: #b8b3c7;
  --cim: "Betu Cim", "Segoe UI", system-ui, sans-serif;
  --szoveg: "Betu Szoveg", "Segoe UI", system-ui, sans-serif;
  --szam: "Betu Szam", ui-monospace, Consolas, monospace;
  --keret: clamp(1180px, 76vw, 1900px);
  --olvas: 800px;
  --r: 10px;
  --r-k: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--szoveg);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--lap);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ibolya-tinta); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
h1, h2, h3, h4 { font-family: var(--cim); line-height: 1.15; margin: 0 0 .6em; color: var(--tinta); letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 2.4vw + .6rem, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.2vw + .7rem, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.keret { max-width: var(--keret); margin: 0 auto; padding: 0 16px; }
.szam { font-family: var(--szam); font-variant-numeric: tabular-nums; }
.skip-to { position: absolute; left: -999px; top: 8px; background: var(--vaj); color: var(--tinta); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip-to:focus { left: 16px; }

/* ---------- section hues: every band, its rail chip and its devices share one ---------- */
.szin-ibolya { --szin: var(--ibolya); --szin-tinta: var(--ibolya-tinta); --szin-mos: var(--ibolya-mos); --szin-szoveg: #fff; }
.szin-zold { --szin: var(--zold); --szin-tinta: var(--zold-tinta); --szin-mos: var(--zold-mos); --szin-szoveg: #fff; }
.szin-piros { --szin: var(--piros); --szin-tinta: var(--piros-tinta); --szin-mos: var(--piros-mos); --szin-szoveg: #fff; }
.szin-vaj { --szin: var(--vaj); --szin-tinta: var(--vaj-tinta); --szin-mos: var(--vaj-mos); --szin-szoveg: var(--tinta); }
.szin-narancs { --szin: var(--narancs); --szin-tinta: var(--narancs-tinta); --szin-mos: var(--narancs-mos); --szin-szoveg: #fff; }
.szin-rozsa { --szin: var(--rozsa); --szin-tinta: var(--rozsa-tinta); --szin-mos: var(--rozsa-mos); --szin-szoveg: #fff; }
.szin-moha { --szin: var(--moha); --szin-tinta: var(--moha-tinta); --szin-mos: var(--moha-mos); --szin-szoveg: #fff; }
.szin-pala { --szin: var(--pala); --szin-tinta: var(--pala-tinta); --szin-mos: var(--pala-mos); --szin-szoveg: #fff; }
.szin-sotet { --szin: var(--vaj); --szin-tinta: var(--vaj); --szin-mos: var(--sotet); --szin-szoveg: var(--tinta); }

/* ---------- buttons ---------- */
.gomb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cim); font-weight: 700; font-size: 1rem; line-height: 1.2; padding: 13px 22px; border-radius: 999px; background: var(--vaj); color: var(--tinta); text-decoration: none; border: 0; cursor: pointer; }
.gomb:hover { background: var(--vaj-sotet); color: var(--tinta); }
.gomb-ibolya { background: var(--ibolya); color: #fff; }
.gomb-ibolya:hover { background: var(--ibolya-tinta); color: #fff; }
.gomb-keret { background: transparent; border: 1.5px solid var(--vonal-2); }
.gomb-keret:hover { background: var(--ibolya-mos); border-color: var(--ibolya); }

/* ---------- header (fejlec) ---------- */
#header { position: sticky; top: 0; z-index: 50; min-height: 66px; }
.fejlec { background: var(--sotet); border-bottom: 1px solid rgba(255, 255, 255, .1); position: relative; color: var(--sotet-szoveg); }
.fejlec-sor { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; position: relative; }
.fejlec-cimer { display: inline-flex; align-items: center; flex: none; }
.fejlec-cimer img { display: block; height: 52px; width: auto; }
.utvonal { display: none; }
.utvonal > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.utvonal a, .utvonal-nyit { font-family: var(--cim); font-weight: 700; font-size: .98rem; color: var(--sotet-szoveg); text-decoration: none; padding: 10px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 1.2; white-space: nowrap; }
.utvonal a:hover, .utvonal-nyit:hover, .utvonal-ag.nyitva > .utvonal-nyit { background: rgba(255, 255, 255, .08); color: #fff; }
.utvonal a[aria-current="page"], .utvonal-ag.itt > .utvonal-nyit { box-shadow: inset 0 -3px 0 var(--vaj); border-radius: 8px 8px 0 0; color: #fff; }
.utvonal-nyit img { transition: transform .15s; filter: brightness(0) invert(1); opacity: .75; }
.utvonal-ag.nyitva .utvonal-nyit img { transform: rotate(180deg); }
.utvonal-ag { position: static; }
.utvonal-tabla { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); background: var(--sotet-2); border: 1px solid rgba(255, 255, 255, .12); border-top: 0; border-radius: 0 0 var(--r) var(--r); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); padding: 18px 18px 14px; display: none; color: var(--sotet-szoveg); }
.utvonal-tabla.utvonal-szeles { width: min(900px, calc(100vw - 32px)); }
.utvonal-ag.nyitva .utvonal-tabla { display: block; }
.utvonal-tabla ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.utvonal-tabla li { min-width: 0; max-width: none; }
.utvonal-tabla a:hover { background: rgba(255, 255, 255, .08); }
.utvonal-tabla a { display: block; padding: 7px 10px; border-radius: var(--r-k); font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--sotet-szoveg); overflow-wrap: anywhere; }
.utvonal-tabla a em { font: 700 .82rem/1.5 var(--szam); font-style: normal; color: #4fd18f; }
.utvonal-harom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }
.utvonal-harom > div { min-width: 0; }
.utvonal-csoport { font: 700 .68rem/1.2 var(--szam); text-transform: uppercase; letter-spacing: .14em; color: var(--sotet-halvany); margin: 2px 10px 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.utvonal-tabla a.utvonal-fo { color: var(--vaj); font-weight: 700; }
.utvonal-pontok { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.utvonal-pontok a { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 0 12px; padding: 6px 10px; }
.utvonal-pontok img { width: 80px; height: 30px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; }
.utvonal-pontok b { font-weight: 600; }
.fejlec-gombok { display: flex; align-items: center; gap: 10px; flex: none; }
.fejlec-kereso, .fejlec-menu { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; border-radius: 999px; cursor: pointer; }
.fejlec-kereso img, .fejlec-menu img { filter: brightness(0) invert(1); }
.fejlec-kereso:hover, .fejlec-kereso[aria-expanded="true"], .fejlec-menu:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.fejlec-menu .zar { display: none; }
body.fiok-nyitva .fejlec-menu .nyit { display: none; }
body.fiok-nyitva .fejlec-menu .zar { display: block; }

/* search (kereso) */
.kereso { position: relative; }
.kereso-cimke { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kereso-jel { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .7; pointer-events: none; filter: brightness(0) invert(1); }
.kereso-mezo { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); font: 400 .95rem var(--szoveg); color: #fff; }
.kereso-mezo::placeholder { color: var(--sotet-halvany); }
.kereso-mezo:focus { outline: 2px solid var(--vaj); outline-offset: 1px; background: rgba(255, 255, 255, .1); }
#keresoAsztal { display: none; width: 170px; }
.kereso-lista { position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, calc(100vw - 32px)); list-style: none; margin: 0; padding: 6px; background: var(--sotet-2); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); z-index: 60; }
.kereso-lista li a { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 8px 10px; border-radius: var(--r-k); text-decoration: none; color: var(--sotet-szoveg); }
.kereso-lista li a:hover { background: rgba(255, 255, 255, .08); }
.kereso-lista em { font: 700 .66rem/1.6 var(--szam); text-transform: uppercase; letter-spacing: .1em; color: var(--vaj); font-style: normal; }
.kereso-lista b { font-size: .95rem; }
.kereso-lista span { grid-column: 1 / -1; font-size: .82rem; color: var(--sotet-halvany); line-height: 1.4; }
.kereso-ures { padding: 10px; font-size: .9rem; color: var(--sotet-halvany); }
.kereso-telefon { background: var(--sotet); border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 0 14px; }
.kereso-telefon .kereso-doboz { position: relative; }
.kereso-telefon .kereso-jel { top: 21px; left: 28px; transform: none; }
.kereso-telefon .kereso-lista { position: static; width: auto; margin-top: 8px; box-shadow: none; }

/* phone drawer (fiok) */
.fiok { display: none; background: var(--sotet); border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--sotet-szoveg); position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 66px); overflow: auto; padding: 14px 16px 24px; z-index: 55; }
body.fiok-nyitva .fiok { display: block; }
.fiok-resz { border-top: 1px solid rgba(255, 255, 255, .12); }
.fiok-resz:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fiok-resz summary { font-family: var(--cim); font-weight: 700; font-size: 1.02rem; padding: 12px 2px; cursor: pointer; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fiok-resz summary::-webkit-details-marker { display: none; }
.fiok-resz summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--sotet-halvany); border-bottom: 2px solid var(--sotet-halvany); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.fiok-resz[open] summary::after { transform: rotate(-135deg); }
.fiok-resz ul { list-style: none; margin: 0; padding: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fiok-resz li a { display: grid; gap: 1px; padding: 9px 10px; background: rgba(255, 255, 255, .06); border-radius: var(--r-k); text-decoration: none; color: var(--sotet-szoveg); font-weight: 700; font-size: .92rem; line-height: 1.25; }
.fiok-resz li a span { font-weight: 400; font-size: .78rem; color: var(--sotet-halvany); }
.fiok-resz li a[aria-current="page"] { background: rgba(91, 69, 217, .4); box-shadow: inset 3px 0 0 var(--vaj); color: #fff; }

/* ---------- the rail: on-page nav that stays put and lights up in the section's hue (iranytu) ---------- */
.iranytu { position: sticky; top: 66px; z-index: 45; background: rgba(21, 19, 28, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.iranytu-sor { max-width: var(--keret); margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; gap: 16px; }
.iranytu ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.iranytu ul::-webkit-scrollbar { display: none; }
.iranytu li { flex: 1 0 auto; display: flex; }
.iranytu a { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 12px 10px 11px; font: 600 .84rem/1.2 var(--szoveg); color: var(--sotet-halvany); text-decoration: none; }
.iranytu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--szin); opacity: .4; }
.iranytu a i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--szin); flex: none; }
.iranytu a img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.iranytu .szin-vaj img { filter: none; }
.iranytu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.iranytu a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
.iranytu a[aria-current="true"]::after { opacity: 1; height: 4px; }
.iranytu a.szin-sotet img { filter: none; }
.iranytu .iranytu-cta { display: none; align-self: center; padding: 9px 16px; font: 700 .86rem/1.2 var(--cim); background: var(--vaj); color: var(--tinta); border-radius: 8px; }
.iranytu .iranytu-cta:hover { background: var(--vaj-sotet); }

/* ---------- hero: the signature sheet over the casino's own screens (alairas) ---------- */
.alairas { position: relative; overflow: hidden; background: var(--sotet) url("/images/hatter-alairas-lagy.webp") center / cover no-repeat; color: var(--sotet-szoveg); padding: 34px 0 30px; }
.alairas::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 19, 28, .7) 0%, rgba(21, 19, 28, .42) 55%, rgba(21, 19, 28, .2) 100%); }
.alairas .keret { position: relative; }
.alairas-racs { display: grid; gap: 34px; }
.alairas-cim { display: grid; gap: 18px; align-content: start; }
.alairas-fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font: 500 .78rem/1.3 var(--szam); color: var(--sotet-halvany); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.alairas-fej b { color: #fff; font-weight: 700; }
.alairas-fej span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.alairas-sor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alairas-cimke { display: block; height: 60px; width: 160px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-k); }
.gyuru { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; margin: 0; padding: 0 16px 0 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); }
.gyuru svg { width: 60px; height: 60px; transform: rotate(-90deg); display: block; flex: none; }
.gyuru-alap { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 6; }
.gyuru-iv { fill: none; stroke: var(--vaj); stroke-width: 6; stroke-linecap: round; }
.gyuru b { display: flex; align-items: baseline; gap: 3px; font: 800 1.45rem/1 var(--szam); color: #fff; }
.gyuru b small { font: 600 .78rem/1 var(--szam); color: var(--sotet-halvany); }
.gyuru span { font: 600 .68rem/1.2 var(--szoveg); color: var(--sotet-halvany); text-transform: uppercase; letter-spacing: .1em; }
.alairas h1 { margin: 0; color: #fff; }
.alairas-szerzo { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--sotet-halvany); margin: 0; }
.alairas-szerzo a { color: #fff; }
.alairas-szerzo img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.alairas-uzenet { background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .24); border-radius: var(--r); padding: 14px 16px; margin: 0; }
.bevezeto { font-size: 1.05rem; line-height: 1.6; margin: 0; color: var(--sotet-szoveg); }
.alairas-cta { display: grid; gap: 14px; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 14px 16px; }
.alairas-ajanlat { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--sotet-halvany); }
.alairas-ajanlat small { display: block; font: 700 .64rem/1.2 var(--szam); text-transform: uppercase; letter-spacing: .14em; color: var(--vaj); margin-bottom: 4px; }
.alairas-ajanlat b { display: block; color: #fff; font-family: var(--cim); font-size: 1.05rem; line-height: 1.3; margin-bottom: 3px; }
.alairas-cta .gomb { justify-self: start; }
.alairas-kep { position: relative; padding: 0 0 54px; }
.ablak { background: #0f0e14; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(91, 69, 217, .3), 0 0 60px rgba(91, 69, 217, .25); }
.ablak-cim { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1a1823; }
.ablak-cim i { width: 9px; height: 9px; border-radius: 50%; background: #3a3744; }
.ablak-cim span { margin-left: 8px; flex: 1; background: #0f0e14; border-radius: 999px; padding: 4px 12px; font: 500 .7rem/1.2 var(--szam); color: var(--sotet-halvany); }
.ablak img { width: 100%; }
.alairas-belepes { position: absolute; left: 0; bottom: 0; width: 46%; max-width: 300px; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 44px rgba(91, 69, 217, .5); background: #0f0e14; }
.alairas-belepes img { width: 100%; }
.alairas-belepes figcaption { position: absolute; top: 10px; left: 10px; background: var(--vaj); color: var(--tinta); font: 700 .64rem/1.2 var(--szam); text-transform: uppercase; letter-spacing: .12em; padding: 5px 9px; border-radius: 999px; }

/* ---------- bands (sav): one hue per section, full width, the head carries the rail's icon ---------- */
.sav { background: var(--feher); padding: 34px 0 24px; scroll-margin-top: 118px; }
main > .sav:nth-of-type(even) { background: var(--lap); }
main > .sav.szin-sotet { background: var(--sotet); }
.sav + .sav { border-top: 1px solid rgba(28, 27, 34, .07); }
.sav-fej { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 18px; }
.sav-jel { display: block; width: 56px; height: 56px; color: var(--szin, var(--ibolya)); }
.sav-jel svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sav h2 { margin: 0; }
.sav p, .sav li { max-width: 66ch; }
.sav-test { display: grid; gap: 4px; }
.sav-resz { min-width: 0; }
.sav-resz > p { margin-left: auto; margin-right: auto; }
.sav-ket .sav-resz > p { margin-left: 0; }
.sav-resz > .nyugta, .sav-resz > .lepesek, .sav-resz > .tabla-tok, .sav-resz > .figyelem, .sav-resz > .idezet, .sav-resz > .jovahagyas, .sav-resz > .rokon, .sav-resz > .zsetonok, .sav-resz > .paros, .sav-resz > .hasabok { margin-left: auto; margin-right: auto; }
.sav-ket .sav-resz > .nyugta, .sav-ket .sav-resz > .tabla-tok, .sav-ket .sav-resz > .figyelem { margin-left: 0; margin-right: 0; max-width: none; }
.sav-elr-ermek-kozep .erme-sor, .sav-elr-paros .sav-resz > p, .sav-elr-itelet .sav-resz > p { text-align: center; }
.sav-elr-ermek-kozep .ermek, .sav-elr-paros .ermek { justify-content: center; }
.sav-elr-ermek-kozep .erme-sor p { margin-left: auto; margin-right: auto; max-width: 70ch; }
.sav-elr-hasab .idezet { max-width: 880px; margin-bottom: 26px; border-left: 0; background: transparent; padding: 0; text-align: center; }
.sav-elr-hasab .idezet blockquote { font-size: 1.3rem; line-height: 1.45; font-weight: 600; }
.sav-elr-hasab .idezet figcaption { justify-content: center; }
.hasabok { max-width: 1200px; }
.hasabok p { max-width: none; break-inside: avoid; }
.paros { display: grid; gap: 0; max-width: 1200px; margin: 0 0 20px; border-bottom: 1px solid var(--vonal); }
.paros > div { padding: 14px 0; border-top: 1px solid var(--vonal); }
.paros h3 { font-size: 1.05rem; color: var(--szin-tinta, var(--tinta)); margin-bottom: 8px; }
.paros p { margin: 0; max-width: none; }
.lenyeg { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1100px; margin: 0 auto 26px; padding: 0; border-bottom: 1px solid var(--vonal); }
.lenyeg li { padding: 14px 12px 13px; text-align: center; max-width: none; border-top: 1px solid var(--vonal); border-left: 1px solid var(--vonal); }
.lenyeg li:nth-child(odd) { border-left: 0; }
.lenyeg b { display: block; font: 800 clamp(1.3rem, 1.1vw + .7rem, 1.7rem)/1.1 var(--szam); color: var(--szin-tinta, var(--tinta)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lenyeg span { display: block; font-size: .8rem; line-height: 1.35; color: var(--halvany); margin-top: 4px; }
.szin-sotet { color: var(--sotet-szoveg); }
.szin-sotet h2, .szin-sotet h3 { color: #fff; }
.szin-sotet p, .szin-sotet li { color: var(--sotet-szoveg); }
.szin-sotet a { color: var(--vaj); }
.szin-sotet a:hover { color: #fff; }
.szin-sotet .lenyeg span { color: var(--sotet-halvany); }

/* ---------- the sign-in sheet + key facts (belepo + tarca) ---------- */
.kulcs-racs { display: grid; gap: 16px; margin: 0 auto 6px; max-width: 1600px; align-items: start; }
.kulcs-racs > * { min-width: 0; }
.kulcs-kep { margin: 0; align-self: start; }
.kulcs-kep .nyugta { margin: 0 auto; max-width: 440px; }
.belepo, .tarca { padding: 0; }
.belepo h3, .tarca h3 { font-size: 1.15rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.szint { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; font: 700 .86rem/1.2 var(--szoveg); margin: 0 0 12px; }
.szint img { width: 18px; height: 18px; }
.szint-1 { background: var(--zold-mos); color: var(--zold); }
.szint-2 { background: var(--ibolya-mos); color: var(--ibolya-tinta); }
.szint-3 { background: var(--piros-mos); color: var(--piros); }
.tarcak { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tarcak img { width: 96px; height: 36px; border: 1px solid var(--vonal); border-radius: var(--r-k); background: #fff; }
.belepo-sor { display: grid; gap: 0; margin: 0; border-bottom: 1px solid var(--vonal); }
.belepo-sor > div { display: grid; gap: 3px; padding: 9px 0 10px; border-top: 1px solid var(--vonal); }
.belepo-sor dt { font: 700 .68rem/1.3 var(--cim); text-transform: uppercase; letter-spacing: .1em; color: var(--szin-tinta, var(--halvany)); }
.belepo-sor dd { margin: 0; font-size: .93rem; line-height: 1.5; }

.zsetonok { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: 1200px; border-bottom: 1px solid var(--vonal); }
.zsetonok li { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; gap: 1px 12px; align-items: center; padding: 10px 0 11px; border-top: 1px solid var(--vonal); font-size: .93rem; max-width: none; }
.zsetonok li > img { grid-row: 1 / span 2; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--feher); box-shadow: 0 1px 2px rgba(28, 27, 34, .12); }
.zsetonok span { font: 700 .66rem/1.3 var(--cim); text-transform: uppercase; letter-spacing: .1em; color: var(--halvany); }
.zsetonok b { font-weight: 600; line-height: 1.4; }
.zsetonok .zold { color: var(--zold-tinta); }
.zsetonok .piros { color: var(--piros-tinta); }
.tarca .zsetonok { margin: 0; }

/* every ruled device on a dark band */
.szin-sotet :is(.lenyeg, .lenyeg li, .paros, .paros > div, .lepesek, .lepesek li, .figyelem, .figyelem p, .rokon, .rokon a, .tabla, .tabla th, .tabla td, .jovahagyas, .jovahagyas > div, .zsetonok, .zsetonok li, .belepo-sor, .belepo-sor > div, .kerdesek, .kerdesek details, .segelyvonal, .segelyvonal li, .szempontok, .szempontok > div) { border-color: rgba(255, 255, 255, .16); }

/* tables (tabla) */
.tabla-tok { overflow-x: auto; margin: 0 0 18px; max-width: 1100px; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; border-bottom: 1px solid var(--vonal); }
.tabla caption { caption-side: bottom; text-align: left; padding: 8px 4px 0; font: 400 .8rem/1.4 var(--szoveg); color: var(--halvany); }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--vonal); }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla thead th { color: var(--szin-tinta, var(--halvany)); font: 700 .7rem/1.3 var(--cim); text-transform: uppercase; letter-spacing: .1em; border-top: 0; border-bottom: 2px solid var(--szin, var(--vonal)); padding-top: 4px; }
.tabla tbody th { font-weight: 700; }
.tabla .szam { font-family: var(--szoveg); font-weight: 600; font-variant-numeric: tabular-nums; }
.szin-sotet .tabla { color: var(--sotet-szoveg); }
.szin-sotet .tabla caption { color: var(--sotet-halvany); }

/* transaction steps (lepesek) */
.lepesek { list-style: none; counter-reset: lepes; margin: 0 0 18px; padding: 0; display: grid; gap: 0; max-width: 1100px; border-bottom: 1px solid var(--vonal); }
.lepesek li { counter-increment: lepes; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--vonal); max-width: none; }
.lepesek li::before { content: counter(lepes); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--szin, var(--ibolya)); color: var(--szin-szoveg, #fff); font: 700 .95rem/1 var(--szam); }
.lepesek b { display: block; margin-bottom: 2px; font-family: var(--cim); }

/* approve / reject (jovahagyas) */
.jovahagyas { display: grid; gap: 0; margin: 0 0 18px; max-width: 1300px; border-bottom: 1px solid var(--vonal); }
.jovahagyas > div { padding: 14px 0; border-top: 1px solid var(--vonal); }
.jovahagyas h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin-bottom: 10px; }
.jovahagyas ul { margin: 0; padding: 0 0 0 18px; }
.jovahagyas li { margin-bottom: 6px; font-size: .96rem; }
.elfogad h3 { color: var(--zold); }
.elutasit h3 { color: var(--piros); }
.szin-sotet .elfogad h3 { color: #4fd18f; }
.szin-sotet .elutasit h3 { color: #ff8a7a; }
.szin-sotet .jovahagyas h3 img { filter: brightness(0) invert(1); opacity: .9; }

/* receipt figure (nyugta) */
.nyugta { margin: 0 0 20px; padding: 0; }
.nyugta img { width: 100%; border-radius: var(--r-k); border: 1px solid var(--vonal); }
.nyugta figcaption { font-size: .86rem; color: var(--halvany); padding: 10px 0 2px; line-height: 1.45; }
.nyugta-keskeny { max-width: 420px; margin-left: auto; margin-right: auto; }
.nyugta-ket { display: grid; gap: 16px; margin: 0 0 18px; }

/* quote, notice (idezet, figyelem) */
.idezet { margin: 0 0 20px; max-width: 1100px; padding: 16px 18px 14px 22px; border-left: 5px solid var(--szin, var(--ibolya)); background: var(--feher); }
.idezet blockquote { margin: 0 0 8px; font-size: 1.05rem; font-family: var(--cim); font-weight: 500; }
.idezet figcaption { font-size: .86rem; color: var(--halvany); display: flex; align-items: center; gap: 8px; }
.idezet figcaption img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.figyelem { margin: 0 0 20px; max-width: 1100px; padding: 0; border-bottom: 1px solid var(--vonal); color: var(--tinta); }
.figyelem p { position: relative; margin: 0; padding: 13px 0 13px 24px; border-top: 1px solid var(--vonal); max-width: none; font-size: .96rem; }
.figyelem p::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 10px; height: 10px; border-radius: 3px; background: var(--szin, var(--vaj)); }
.figyelem-piros p::before { background: var(--piros); }
.figyelem-zold p::before { background: var(--zold); }

/* coin + wallet tile rows (ermek) */
.ermek { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ermek img { width: 96px; height: 36px; border: 1px solid var(--vonal); border-radius: var(--r-k); background: #fff; }
.erme-sor { margin: 0 0 16px; }
.erme-sor h3 { font-size: 1rem; margin-bottom: 8px; color: var(--szin-tinta, var(--tinta)); }
.erme-sor p { margin-top: 8px; font-size: .95rem; }

/* related (rokon) */
.rokon { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; max-width: 1300px; border-bottom: 1px solid var(--vonal); }
.rokon li { max-width: none; display: grid; }
.rokon a { display: grid; grid-template-columns: 88px 1fr; grid-template-areas: "faj cim" "faj jegy"; gap: 2px 14px; align-content: start; padding: 12px 0; border-top: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.rokon a:hover b { color: var(--szin-tinta, var(--ibolya-tinta)); }
.rokon b { grid-area: cim; font-family: var(--cim); }
.rokon-faj { grid-area: faj; padding-top: 3px; font: 700 .66rem/1.3 var(--szam); text-transform: uppercase; letter-spacing: .14em; color: var(--szin-tinta, var(--ibolya-tinta)); }
.rokon-jegy { grid-area: jegy; font-size: .88rem; color: var(--halvany); }
.farok .rokon { max-width: none; margin-bottom: 26px; }
.szin-sotet .rokon a { color: #fff; }
.szin-sotet .rokon a:hover b { color: var(--vaj); }
.szin-sotet .rokon-faj { color: var(--vaj); }
.szin-sotet .rokon-jegy { color: var(--sotet-halvany); }

/* FAQ (kerdesek) */
.kerdesek { display: grid; gap: 0; margin: 0 auto 8px; max-width: 1300px; border-top: 1px solid var(--vonal); }
.kerdesek details { border-bottom: 1px solid var(--vonal); }
.kerdesek summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font-family: var(--cim); font-weight: 700; font-size: 1.02rem; }
.kerdesek summary::-webkit-details-marker { display: none; }
.kerdesek details[open] summary img { transform: rotate(180deg); }
.kerdesek details > div { padding: 0 0 14px; }
.kerdesek details > div p { margin-bottom: 0; }

/* the other reviews (tobbi), author, safe play (szerzo, ovatos) */
.farok { padding: 30px 0 0; }
.farok > .keret > h2 { font-size: 1.15rem; text-align: center; margin-bottom: 14px; }
.tobbi { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.tobbi a { display: grid; gap: 5px; justify-items: center; padding: 10px 6px 9px; text-decoration: none; color: var(--tinta); font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.2; }
.tobbi a:hover img { border-color: var(--ibolya); }
.tobbi img { width: 96px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vonal); }
.tobbi em { font: 700 .78rem/1.2 var(--szoveg); font-style: normal; color: var(--zold-tinta); font-variant-numeric: tabular-nums; }
.farok-also { display: grid; gap: 14px; margin-bottom: 10px; }
.szerzo { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding: 18px 0 0; border-top: 1px solid var(--vonal); margin: 0; }
.szerzo img { width: 80px; height: 100px; object-fit: cover; border-radius: 8px; }
.szerzo h2 { font-size: 1.05rem; margin-bottom: 6px; }
.szerzo p { margin: 0; font-size: .93rem; }
.ovatos { padding: 18px 0 0; border-top: 1px solid var(--vonal); margin: 0; }
.ovatos h2 { font-size: 1.05rem; margin-bottom: 6px; }
.ovatos p { font-size: .93rem; margin: 0; }

/* phone bottom bar (also-gomb) */
.also-gomb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(21, 19, 28, .96); backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.also-gomb span { font: 600 .8rem/1.3 var(--szoveg); color: var(--sotet-halvany); }
.also-gomb span b { display: block; font: 800 1.05rem/1.2 var(--szam); color: #fff; }
.also-gomb .gomb { padding: 10px 16px; font-size: .92rem; flex: none; }
body.van-also-gomb { padding-bottom: 72px; }
body.van-also-gomb .back-to-top { bottom: 84px; }

/* ---------- footer (lablec) ---------- */
.lablec { background: var(--sotet); color: var(--sotet-szoveg); padding: 36px 0 28px; margin-top: 30px; }
.lablec a { color: var(--sotet-szoveg); }
.lablec a:hover { color: var(--vaj); }
.lablec-felso { display: grid; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lablec-rolunk .fejlec-cimer img { height: 60px; }
.lablec-rolunk p { color: var(--sotet-halvany); font-size: .95rem; margin: 12px 0 0; max-width: 560px; }
.lablec-szerkeszto { display: flex; align-items: center; gap: 10px; }
.lablec-szerkeszto img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lablec-segely { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .92rem; color: var(--sotet-halvany); }
.lablec-segely strong { color: #fff; }
.lablec-kor { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--vaj); color: var(--vaj); font: 800 .95rem/1 var(--szam); }
.lablec-vonalak { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; }
.lablec-vonalak li { display: grid; gap: 0 12px; align-items: baseline; }
.lablec-vonalak a { font-family: var(--szam); font-weight: 600; font-size: .9rem; }
.lablec-tovabb { font-weight: 600; }
.lablec-utak { display: grid; gap: 0; padding: 0 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lablec-utak > div { padding: 18px 0 4px; }
.lablec-utak > div + div { border-top: 1px solid rgba(255, 255, 255, .12); }
.lablec-utak h2 { font: 700 .68rem/1.2 var(--szam); text-transform: uppercase; letter-spacing: .14em; color: var(--vaj); margin: 0 0 10px; }
.lablec-utak ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lablec-utak a { font-size: .92rem; text-decoration: none; color: var(--sotet-szoveg); }
.lablec-utak a:hover { color: var(--vaj); text-decoration: underline; }
.lablec-jog { display: grid; gap: 4px; padding-top: 18px; font-size: .82rem; color: var(--sotet-halvany); }

/* ---------- back to top ---------- */
.back-to-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vonal); background: var(--feher); display: none; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(28, 27, 34, .5); z-index: 40; }
.back-to-top.lathato { display: grid; }

/* ---------- 404 ---------- */
.eltevedt { padding: 50px 0 20px; text-align: center; }
.eltevedt-szam { display: block; font: 800 5rem/1 var(--szam); color: var(--ibolya-mos); }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .lablec-vonalak li { grid-template-columns: 1fr auto; }
  .kulcs-racs { grid-template-columns: 1.15fr 1fr; }
  .tarca { grid-column: 1 / -1; }
  .jovahagyas { grid-template-columns: 1fr 1fr; }
  .jovahagyas > .elfogad { padding-right: 24px; }
  .jovahagyas > .elutasit { border-left: 1px solid var(--vonal); padding-left: 24px; }
  .lenyeg { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .alairas:not(.alairas-egy) .lenyeg { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .lenyeg li:nth-child(odd) { border-left: 1px solid var(--vonal); }
  .lenyeg li:first-child { border-left: 0; }
  .nyugta-ket { grid-template-columns: 1fr 1fr; }
  .rokon { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .lablec-utak { grid-template-columns: 1.3fr 1fr 1fr; }
  .lablec-utak > div { padding: 22px 24px 0; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
  .lablec-utak > div:first-child { padding-left: 0; border-left: 0; }
  .lablec-utak > div + div { border-top: 0; }
  .alairas-cta { grid-template-columns: 1fr auto; }
  .paros { grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .paros > div { padding: 6px 24px 10px; border-top: 0; border-left: 1px solid var(--vonal); }
  .paros > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .paros > div:nth-child(even) { padding-right: 0; }
  .paros > div:nth-child(n+3) { border-top: 1px solid var(--vonal); padding-top: 14px; }
}
@media (min-width: 900px) {
  .alairas { padding: 44px 0 40px; }
  .alairas-racs { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .alairas-kep { perspective: 1400px; padding: 10px 0 64px 24px; }
  .ablak { transform: rotateY(-9deg) rotateX(2deg); transform-origin: left center; }
  .alairas-belepes { left: -10px; bottom: 0; }
  .sav { padding: 44px 0 32px; }
  .sav-fej { margin-bottom: 22px; }
  .sav-jel { width: 68px; height: 68px; }
  .sav-ket .sav-test { grid-template-columns: 1fr 1fr; gap: 10px 44px; align-items: start; }
  .sav-ket .sav-resz > .zsetonok { grid-template-columns: 1fr 1fr; }
  .sav-ket .sav-resz:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; }
  .sav-ket .sav-resz:not(:nth-child(2)) { grid-column: 1; }
  .sav-elr-kep-bal .sav-test, .sav-elr-tabla-bal .sav-test { grid-template-columns: minmax(320px, 520px) 1fr; }
  .sav-elr-kep-bal .sav-resz:nth-child(2), .sav-elr-tabla-bal .sav-resz:nth-child(2) { grid-column: 1; }
  .sav-elr-kep-bal .sav-resz:not(:nth-child(2)), .sav-elr-tabla-bal .sav-resz:not(:nth-child(2)) { grid-column: 2; }
  .sav-elr-kep-bal .sav-test { align-items: center; }
  .sav-elr-jegyzet-jobb .sav-test { grid-template-columns: 1.1fr 1fr; }
  .sav-elr-sor .lepesek { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; gap: 0; border-bottom: 0; }
  .sav-elr-sor .lepesek li { grid-template-columns: 1fr; gap: 10px; padding: 18px 22px 12px; align-content: start; border-left: 1px solid var(--vonal); }
  .sav-elr-sor .lepesek li:first-child { padding-left: 0; border-left: 0; }
  .sav-elr-sor .lepesek li:last-child { padding-right: 0; }
  .sav-elr-sor .lepesek:has(li:nth-child(5)) { grid-template-columns: 1fr; max-width: 1300px; margin-left: auto; margin-right: auto; border-bottom: 1px solid var(--vonal); }
  .sav-elr-sor .lepesek:has(li:nth-child(5)) li { grid-template-columns: 38px minmax(200px, 300px) 1fr; gap: 0 24px; padding: 16px 0; border-left: 0; align-items: start; }
  .sav-elr-sor .lepesek:has(li:nth-child(5)) li > div { display: contents; }
  .sav-elr-sor .lepesek:has(li:nth-child(5)) b { margin: 0; line-height: 1.5; }
  .szempontok { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-bottom: 0; }
  .szempontok > div { padding: 4px 20px 8px; border-top: 0; border-left: 1px solid var(--vonal); }
  .szempontok > div:first-child { border-left: 0; padding-left: 0; }
  .szempontok > div:last-child { padding-right: 0; }
  .hasabok { column-count: 2; column-gap: 44px; }
  .kerdesek { grid-template-columns: 1fr 1fr; column-gap: 44px; align-items: start; }
  .farok-also { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
  .farok-also .szerzo { padding-right: 28px; }
  .farok-also .ovatos { border-left: 1px solid var(--vonal); padding-left: 28px; }
  .lablec-felso { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .lablec-segely { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
  .lablec-jog { grid-template-columns: 1fr auto; }
}
@media (min-width: 1024px) {
  .utvonal { display: block; }
  .fejlec-sor { justify-content: center; gap: 28px; }
  .fejlec-menu, .kereso-telefon { display: none; }
  #keresoAsztal { display: block; }
  .fejlec-kereso { display: none; }
  .iranytu .iranytu-cta { display: inline-flex; flex: none; }
  .farok .rokon { grid-template-columns: repeat(3, 1fr); }
  .also-gomb { display: none; }
  body.van-also-gomb { padding-bottom: 0; }
  body.van-also-gomb .back-to-top { bottom: 16px; }
}
@media (min-width: 1200px) {
  #keresoAsztal { width: 230px; }
}
@media (min-width: 1500px) {
  .kulcs-racs { grid-template-columns: 1fr minmax(300px, 400px) 1fr; }
  .tarca { grid-column: auto; }
  .tarca .zsetonok { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1700px) {
  .kulcs-racs { grid-template-columns: 1.1fr minmax(320px, 440px) 1fr; }
  .sav-ket .sav-test { max-width: 1400px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- ranking pages: head (homlok), cards (jelolt), window (kirakat), criteria (szempontok) ---------- */
.kozles { font-size: .82rem; color: var(--halvany); margin: 22px 0 0; max-width: none; }
.tilalom { font-size: .8rem; line-height: 1.45; color: var(--halvany); margin: 6px 0 0; max-width: none; }
.rangsor-jegyzet { text-align: center; margin: -6px auto 22px; color: var(--halvany); font-size: .95rem; }
.rangsor { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 0; max-width: 1500px; border-bottom: 1px solid var(--vonal); }
.sav .jelolt { max-width: none; }
.jelolt { padding: 24px 0; border-top: 1px solid var(--vonal); display: grid; gap: 16px; }
.jelolt-fej { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; }
.jelolt-szam { font: 800 1.4rem/1 var(--cim); color: var(--ibolya); min-width: 2ch; }
.jelolt-cimer { width: 120px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vonal); }
.jelolt-pont { margin: 0; justify-self: end; text-align: right; }
.jelolt-pont b { display: block; font: 800 1.5rem/1 var(--cim); color: var(--tinta); }
.jelolt-pont span { font-size: .7rem; color: var(--halvany); text-transform: uppercase; letter-spacing: .08em; }
.jelolt h3 { font-size: 1.3rem; margin: 0; }
.jelolt-cim { margin: 0 0 10px; font-size: 1rem; max-width: none; }
.jelolt-cim b { color: var(--ibolya-tinta); }
.jelolt .tarcak { margin-bottom: 12px; }
.jelolt-adatok { display: grid; gap: 0 24px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-bottom: 1px solid var(--vonal); }
.jelolt-adatok > div { padding: 8px 0 9px; border-top: 1px solid var(--vonal); }
.jelolt-adatok dt { font: 700 .66rem/1.3 var(--cim); text-transform: uppercase; letter-spacing: .1em; color: var(--halvany); }
.jelolt-adatok dd { margin: 0; font-size: .92rem; line-height: 1.45; }
.jelolt-szoveg p { max-width: 68ch; }
.jelolt-bizonyitek { margin: 0; align-self: start; }
.jelolt-bizonyitek img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--vonal); }
.jelolt-bizonyitek figcaption { font-size: .8rem; line-height: 1.4; color: var(--halvany); padding: 8px 4px 2px; }
.jelolt-merleg { display: grid; gap: 10px; }
.jelolt-merleg ul { margin: 0; padding: 0 0 0 18px; font-size: .92rem; list-style: disc; }
.sav .jelolt-merleg li { margin: 0 0 4px; max-width: none; }
.jelolt-mellett li::marker { color: var(--zold); }
.jelolt-ellen li::marker { color: var(--piros); }
.jelolt-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 14px; border-top: 1px solid var(--vonal); }
.jelolt-lab small { color: var(--halvany); margin-left: auto; font-size: .78rem; }
.kirakat { border: 0; border-radius: 14px; padding: 0; width: min(660px, 92vw); max-height: 86vh; overflow: auto; background: var(--feher); color: var(--tinta); box-shadow: 0 30px 60px -30px rgba(21, 19, 28, .7); }
.kirakat::backdrop { background: rgba(21, 19, 28, .62); }
.kirakat-fej { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--vonal); position: sticky; top: 0; background: var(--feher); }
.kirakat-fej h2 { font-size: 1.1rem; margin: 0; }
.kirakat-zar { background: none; border: 0; cursor: pointer; padding: 6px; display: grid; place-items: center; border-radius: 50%; }
.kirakat-zar:hover { background: var(--lap); }
.kirakat ol { list-style: none; margin: 0; padding: 4px 18px; }
.kirakat li { display: grid; grid-template-columns: 22px 80px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--vonal); max-width: none; }
.kirakat li:first-child { border-top: 0; }
.kirakat-szam { font: 800 1rem/1 var(--cim); color: var(--ibolya); }
.kirakat li > img { width: 80px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vonal); }
.kirakat-adat { display: grid; gap: 2px; font-size: .86rem; line-height: 1.35; }
.kirakat-adat b { font-size: .95rem; }
.kirakat-adat small { color: var(--halvany); }
.kirakat-gombok { display: grid; gap: 4px; justify-items: center; }
.kirakat-gombok .gomb { padding: 8px 14px; font-size: .86rem; }
.kirakat-gombok a:not(.gomb) { font-size: .8rem; }
.kirakat-lab { font-size: .78rem; color: var(--halvany); padding: 12px 18px 16px; margin: 0; border-top: 1px solid var(--vonal); max-width: none; }
.szempontok { display: grid; gap: 0; grid-template-columns: 1fr; max-width: 1300px; margin: 0 auto 18px; border-bottom: 1px solid var(--vonal); }
.szempontok > div { padding: 14px 0; border-top: 1px solid var(--vonal); }
.szempontok img { width: 28px; height: 28px; margin-bottom: 8px; }
.szempontok h3 { font-size: 1rem; margin: 0 0 6px; }
.szempontok p { margin: 0; font-size: .92rem; max-width: none; }
.also-gomb button.gomb { padding: 10px 16px; font-size: .9rem; }
@media (min-width: 640px) {
  .jelolt-merleg { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .jelolt { grid-template-columns: 1fr minmax(260px, 340px); grid-template-areas: "fej fej" "adat kep" "test kep" "lab lab"; gap: 14px 24px; padding: 28px 0; align-items: start; }
  .jelolt-fej { grid-area: fej; }
  .jelolt-adat { grid-area: adat; }
  .jelolt-test { grid-area: test; }
  .jelolt-bizonyitek { grid-area: kep; }
  .jelolt-lab { grid-area: lab; }
}
@media (min-width: 1200px) {
  .jelolt { grid-template-columns: minmax(240px, 290px) 1fr minmax(280px, 340px); grid-template-areas: "fej fej fej" "adat test kep" "lab lab lab"; gap: 16px 28px; }
  .jelolt-adatok { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .jelolt-cimer { width: 96px; min-width: 96px; height: 36px; }
  .jelolt h3 { font-size: 1.1rem; }
  .jelolt-pont b { font-size: 1.25rem; }
  .kirakat li { grid-template-columns: 22px 1fr; }
  .kirakat li > img { display: none; }
  .kirakat-gombok { grid-column: 2; grid-auto-flow: column; justify-content: start; gap: 12px; }
}

/* trust pages: one-column hero, or the portrait beside it on the author page */
.farok-also.farok-egy { grid-template-columns: 1fr; max-width: 900px; margin-left: auto; margin-right: auto; }
.segelyvonal { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; max-width: 1200px; border-bottom: 1px solid var(--vonal); }
.segelyvonal li { display: grid; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--vonal); max-width: none; }
.segelyvonal b { font-family: var(--cim); font-size: 1.05rem; }
.segelyvonal span { font-size: .93rem; color: var(--halvany); }
.segelyvonal a { font: 700 1.05rem/1.3 var(--szam); color: var(--zold-tinta); text-decoration: none; }
.segelyvonal a:hover { text-decoration: underline; }
.segelyvonal em { font-style: normal; font: 700 .66rem/1.3 var(--szam); text-transform: uppercase; letter-spacing: .12em; color: var(--halvany); }
@media (min-width: 900px) {
  .segelyvonal li { grid-template-columns: 1fr auto; align-items: center; }
  .segelyvonal li > span { grid-column: 1; }
  .segelyvonal li > a { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .segelyvonal li > em { grid-column: 1 / -1; }
}

/* home page: the stage and the lines. The mission H1 over a wall of the ten casino home pages as seen on a phone;
   below it every band is a way in, drawn with rules and aligned columns rather than cards: four columns of doors,
   the counts, four screens of a Web3 casino, a ledger of the ten, an index of the twelve rankings, five price
   columns, the guides as a route, four checks on a dark ground, the method as a numbered line, the editor, six
   answers as a list, help as rows, the latest pages. */
.szinpad { position: relative; overflow: hidden; background: var(--sotet) url("/images/hatter-alairas-lagy.webp") center / cover no-repeat; color: var(--sotet-szoveg); padding: 44px 0 0; }
.szinpad::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(21, 19, 28, .3), rgba(21, 19, 28, .84) 72%); }
.szinpad > * { position: relative; }
.szinpad-cim { display: grid; gap: 18px; justify-items: center; text-align: center; }
.szinpad h1 { margin: 0; color: #fff; font-size: clamp(2rem, 3vw + .6rem, 3.9rem); }
.szinpad-lede { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--sotet-szoveg); }
.szinpad-gombok { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; margin: 4px 0 0; }
.szinpad .gomb-keret { border-color: rgba(255, 255, 255, .3); color: #fff; }
.szinpad .gomb-keret:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.szinpad-link { color: #fff; font-weight: 600; }
.fal { margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fal ul { list-style: none; margin: 0; padding: 14px 24px 40px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fal ul::-webkit-scrollbar { display: none; }
.fal-lap { flex: 0 0 196px; max-width: none; scroll-snap-align: center; }
.fal-lap a { display: block; position: relative; border-radius: 18px; overflow: hidden; background: #0f0e14; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 36px rgba(91, 69, 217, .22); text-decoration: none; color: #fff; transition: transform .25s ease, border-color .25s ease; }
.fal-lap:nth-child(odd) a { transform: rotate(-1.6deg) translateY(10px); }
.fal-lap:nth-child(even) a { transform: rotate(1.6deg); }
.fal-lap a:hover { transform: translateY(-6px) rotate(0); border-color: var(--vaj); }
.fal-lap img { width: 100%; height: auto; aspect-ratio: 390 / 680; object-fit: cover; object-position: top; display: block; }
.fal-lap span { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(180deg, transparent, rgba(15, 14, 20, .96) 60%); font-family: var(--cim); font-size: .98rem; }

.oszlopsor { display: grid; gap: 26px; max-width: 1400px; margin: 0 auto; }
.oszlop { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--vonal); }
.oszlop h3 { margin: 0; font-size: 1.3rem; }
.oszlop h3 a { color: var(--tinta); text-decoration: none; }
.oszlop h3 a:hover { color: var(--ibolya-tinta); }
.oszlop > p { margin: 0; font-size: .95rem; color: var(--halvany); max-width: none; }
.oszlop-tovabb { font-weight: 600; font-size: .92rem; align-self: end; }
.oszlop-tovabb::after { content: " →"; }
.pontsav { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.pontsav li { display: grid; grid-template-columns: 56px auto 1fr auto; align-items: baseline; gap: 8px; font-size: .9rem; max-width: none; }
.pontsav img { width: 56px; height: 21px; object-fit: cover; border-radius: 3px; border: 1px solid var(--vonal); align-self: center; }
.pontsav a { color: var(--tinta); text-decoration: none; font-weight: 600; white-space: nowrap; }
.pontsav a:hover { color: var(--ibolya-tinta); text-decoration: underline; }
.pontsav i { display: block; border-bottom: 2px dotted var(--vonal-2); margin-bottom: .3em; }
.pontsav em { font: 700 .9rem/1 var(--szam); font-style: normal; text-align: right; color: var(--zold-tinta); font-variant-numeric: tabular-nums; }
.szamsor { list-style: none; margin: 4px 0 0; padding: 0; }
.szamsor li { max-width: none; }
.szamsor a { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.szamsor a:hover strong { color: var(--ibolya-tinta); }
.szamsor b { font: 800 1.3rem/1.1 var(--szam); color: var(--ibolya-tinta); white-space: nowrap; }
.szamsor strong { display: block; font-family: var(--cim); font-size: 1rem; }
.szamsor span { display: block; font-size: .86rem; color: var(--halvany); }
.tarcafal { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.tarcafal li { max-width: none; }
.tarcafal a { display: grid; gap: 3px; justify-items: center; text-align: center; text-decoration: none; color: var(--tinta); }
.tarcafal a:hover b { color: var(--ibolya); }
.tarcafal img { width: 72px; height: 27px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vonal); }
.tarcafal b { font: 800 1rem/1.1 var(--szam); color: var(--ibolya-tinta); white-space: nowrap; }
.tarcafal span { font-size: .78rem; color: var(--halvany); }
.alairaslap { margin: 4px 0 0; border: 1px dashed var(--vonal-2); border-radius: 12px; padding: 14px 16px; font-size: .9rem; }
.alairaslap p { margin: 0 0 8px; max-width: none; }
.alairaslap p:last-child { margin-bottom: 0; }
.alairaslap .alairaslap-dom { font: 700 .72rem/1.3 var(--szam); text-transform: uppercase; letter-spacing: .12em; color: var(--halvany); }
.alairaslap .alairaslap-mezo { font: 500 .86rem/1.5 var(--szam); color: var(--tinta); overflow-wrap: break-word; }
.alairaslap .alairaslap-mezo b { color: var(--halvany); font-weight: 500; }
.alairaslap-gombok { display: flex; gap: 10px; margin-top: 12px; }
.alairaslap-gombok span { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; font: 700 .86rem/1.2 var(--cim); }
.alairaslap-gombok .alairaslap-nem { border: 1.5px solid var(--vonal-2); color: var(--halvany); }
.alairaslap-gombok .alairaslap-igen { background: var(--ibolya); color: #fff; }

.szamlalo .lenyeg { max-width: 1300px; margin-bottom: 6px; }
.szamlalo p { text-align: center; margin: 0 auto; font-size: .9rem; color: var(--sotet-halvany); }

.negy-kep { list-style: none; counter-reset: kep; margin: 0 auto; padding: 0; display: grid; gap: 26px 22px; max-width: 1400px; }
.negy-kep li { max-width: none; display: grid; gap: 8px; align-content: start; }
.negy-kep img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; border-radius: 10px; border: 1px solid var(--vonal); }
.negy-kep h3 { margin: 4px 0 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.negy-kep h3::before { counter-increment: kep; content: counter(kep); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pala); color: #fff; font: 700 .85rem/1 var(--szam); flex: none; }
.negy-kep p { margin: 0; font-size: .95rem; max-width: none; }
.negy-kep a { font-size: .9rem; font-weight: 600; }

.sorok { list-style: none; margin: 0 auto 14px; padding: 0; max-width: 1400px; border-top: 1px solid var(--vonal); }
.sorok li { max-width: none; }
.sorok a { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "pont cimer" "pont nev" "pont sor" "pont tarcak" "pont link"; column-gap: 14px; row-gap: 5px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.sorok a:hover b { color: var(--zold-tinta); }
.sorok em { grid-area: pont; align-self: start; font: 800 1.35rem/1 var(--szam); font-style: normal; color: var(--zold-tinta); font-variant-numeric: tabular-nums; }
.sorok .sorok-cimer { grid-area: cimer; width: 96px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vonal); }
.sorok b { grid-area: nev; font-family: var(--cim); font-size: 1.05rem; }
.sorok .sorok-sor { grid-area: sor; font-size: .9rem; color: var(--halvany); line-height: 1.4; }
.sorok .sorok-tarcak { grid-area: tarcak; display: flex; flex-wrap: wrap; gap: 4px; }
.sorok .sorok-tarcak img { width: 64px; height: 24px; object-fit: cover; border-radius: 3px; border: 1px solid var(--vonal); }
.sorok small { grid-area: link; font: 700 .68rem/1.3 var(--szam); text-transform: uppercase; letter-spacing: .12em; color: var(--zold-tinta); }
.sorok small::after { content: " →"; }

.mutato { max-width: 1400px; margin: 0 auto; display: grid; gap: 22px; }
.mutato-fo { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-top: 2px solid var(--zold); border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.mutato-fo:hover strong, .mutato-oszlop li a:hover strong { color: var(--zold-tinta); }
.mutato b { font: 800 1.25rem/1.1 var(--szam); color: var(--zold-tinta); text-align: right; font-variant-numeric: tabular-nums; }
.mutato b small { display: block; font: 600 .58rem/1.2 var(--szoveg); letter-spacing: .1em; text-transform: uppercase; color: var(--halvany); }
.mutato strong { display: block; font-family: var(--cim); font-size: 1rem; }
.mutato span small { display: block; font-size: .84rem; color: var(--halvany); }
.mutato-oszlop h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--vonal); font: 700 .72rem/1.3 var(--szam); text-transform: uppercase; letter-spacing: .14em; color: var(--zold-tinta); }
.mutato-oszlop ul { list-style: none; margin: 0; padding: 0; }
.mutato-oszlop li { max-width: none; }
.mutato-oszlop li a { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }

.arfolyamsor { list-style: none; margin: 0 auto 10px; padding: 0; max-width: 1400px; display: grid; border-top: 1px solid var(--vonal); }
.arfolyamsor li { max-width: none; }
.arfolyamsor a { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "kep nev ar" "kep sor sor" "kep link link"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.arfolyamsor img { grid-area: kep; width: 72px; height: 27px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vonal); }
.arfolyamsor b { grid-area: nev; font-family: var(--cim); font-size: 1rem; }
.arfolyamsor em { grid-area: ar; font: 700 1.1rem/1.2 var(--szam); font-style: normal; font-variant-numeric: tabular-nums; }
.arfolyamsor span { grid-area: sor; font-size: .84rem; color: var(--halvany); }
.arfolyamsor small { grid-area: link; font-size: .8rem; color: var(--ibolya-tinta); text-decoration: underline; text-underline-offset: 2px; }
.arfolyamsor-jegy { text-align: center; font-size: .82rem; color: var(--halvany); margin: 0 auto; }

.tanut { list-style: none; margin: 0 auto; padding: 0; max-width: 1400px; display: grid; gap: 26px; position: relative; }
.tanut-fok { max-width: none; position: relative; padding-left: 48px; }
.tanut-fok::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: -26px; border-left: 2px solid var(--narancs-mos); }
.tanut-fok:last-child::before { bottom: 0; }
.tanut-fok h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 32px; }
.tanut-fok h3 i { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--narancs); color: #fff; font: 700 .9rem/1 var(--szam); font-style: normal; }
.tanut-fok ul { list-style: none; margin: 0; padding: 0; }
.tanut-fok li { max-width: none; }
.tanut-fok ul > li > a { display: block; padding: 8px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.tanut-fok ul > li > a:hover b, .tanut-fok ul > li > a:hover span { color: var(--narancs-tinta); }
.tanut-fok b { display: block; font-family: var(--cim); font-size: .98rem; }
.tanut-fok small { display: block; font-size: .82rem; color: var(--halvany); }
.tanut-fok .tanut-tarcak a { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.tanut-tarcak img, .tanut-tarcak .tanut-jel { width: 56px; height: 21px; object-fit: cover; border-radius: 3px; border: 1px solid var(--vonal); }
.tanut-tarcak .tanut-jel { display: grid; place-items: center; background: var(--feher); }
.tanut-tarcak .tanut-jel img { width: 14px; height: 14px; border: 0; }
.tanut-tarcak span { font-size: .86rem; font-weight: 600; white-space: nowrap; }

.elott { list-style: none; margin: 0 auto 14px; padding: 0; max-width: 1400px; display: grid; }
.elott li { max-width: none; }
.elott a { display: grid; gap: 6px; align-content: start; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .14); text-decoration: none; color: var(--sotet-szoveg); }
.elott a:hover strong { color: var(--vaj); }
.elott b { font: 800 1.7rem/1.1 var(--szam); color: var(--vaj); }
.elott i { font-style: normal; font-size: .8rem; color: var(--sotet-halvany); }
.elott strong { font-family: var(--cim); font-size: 1.05rem; color: #fff; margin-top: 4px; }
.elott span { font-size: .92rem; color: var(--sotet-szoveg); }
.elott small { font-size: .84rem; color: var(--vaj); font-weight: 600; }

.menet { list-style: none; counter-reset: menet; margin: 0 auto 16px; padding: 0; max-width: 1400px; display: grid; gap: 22px; }
.menet li { max-width: none; counter-increment: menet; position: relative; padding: 2px 0 0 48px; }
.menet li::before { content: counter(menet); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--moha); color: #fff; font: 700 .9rem/1 var(--szam); }
.menet b { display: block; font-family: var(--cim); font-size: 1.02rem; margin-bottom: 2px; line-height: 1.5; }
.menet p { margin: 0; font-size: .95rem; max-width: none; }
.menet-jegy { text-align: center; margin: 0 auto; }

.szerkeszto-racs { display: grid; gap: 20px; max-width: 1100px; margin: 0 auto; align-items: center; }
.szerkeszto-racs figure { margin: 0; justify-self: center; width: min(100%, 260px); }
.szerkeszto-racs figure img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--vonal); display: block; }
.szerkeszto-racs figcaption { font-size: .8rem; color: var(--halvany); text-align: center; padding-top: 6px; }
.szerkeszto-racs h3 { margin: 0 0 4px; font-size: 1.3rem; }
.szerkeszto-szerep { margin: 0 0 12px; color: var(--halvany); font-size: .92rem; }
.szerkeszto-hitvallas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.szerkeszto-hitvallas li { max-width: none; position: relative; padding-left: 22px; font-size: .96rem; }
.szerkeszto-hitvallas li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 3px; background: var(--moha); }

.valaszok { max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--vonal); }
.valaszok > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--vonal); }
.valaszok dt { margin: 0; font-family: var(--cim); font-size: 1.05rem; font-weight: 700; }
.valaszok dd { margin: 0; font-size: .96rem; max-width: none; }

.segitseg { list-style: none; margin: 0 auto 12px; padding: 0; max-width: 1400px; display: grid; border-top: 1px solid var(--vonal); }
.segitseg li { max-width: none; }
.segitseg a { display: grid; grid-template-columns: 1fr 22px; grid-template-areas: "q nyil" "a nyil"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vonal); text-decoration: none; color: var(--tinta); }
.segitseg b { grid-area: q; font-family: var(--cim); font-size: 1rem; }
.segitseg span { grid-area: a; font-size: .86rem; color: var(--piros-tinta); }
.segitseg img { grid-area: nyil; width: 18px; height: 18px; opacity: .55; }
.segitseg a:hover img { opacity: 1; }

.friss { list-style: none; margin: 0 auto 12px; padding: 0; display: grid; gap: 22px; max-width: 1400px; }
.friss li { max-width: none; }
.friss a { display: grid; gap: 10px; text-decoration: none; color: var(--tinta); }
.friss a:hover b { color: var(--vaj-tinta); }
.friss img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; display: block; border-radius: 10px; border: 1px solid var(--vonal); }
.friss a > span { display: grid; gap: 3px; }
.friss time { font: 600 .72rem/1.3 var(--szam); color: var(--halvany); text-transform: uppercase; letter-spacing: .1em; }
.friss b { font-family: var(--cim); font-size: 1rem; }
.friss small { font-size: .84rem; color: var(--halvany); }

@media (min-width: 640px) {
  .oszlopsor { grid-template-columns: 1fr 1fr; }
  .negy-kep { grid-template-columns: 1fr 1fr; }
  .elott { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .elott li { display: contents; }
  .elott a { grid-row: span 5; grid-template-rows: subgrid; }
  .friss { grid-template-columns: 1fr 1fr; }
  .menet { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}
@media (min-width: 900px) {
  .szinpad { padding-top: 56px; }
  .fal-lap { flex-basis: 220px; }
  .sorok a { grid-template-columns: 56px 110px minmax(240px, 1fr) 300px 150px; grid-template-areas: "pont cimer nev tarcak link" "pont cimer sor tarcak link"; row-gap: 2px; padding: 12px 0; }
  .sorok em { align-self: center; }
  .sorok small { justify-self: end; }
  .mutato { grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
  .mutato-fo { grid-column: 1 / -1; }
  .arfolyamsor { grid-template-columns: repeat(5, 1fr); border-top: 0; }
  .arfolyamsor li { display: contents; }
  .arfolyamsor a { grid-row: span 5; grid-template-rows: subgrid; align-items: start; grid-template-columns: 1fr; grid-template-areas: "kep" "ar" "nev" "sor" "link"; justify-items: center; text-align: center; row-gap: 4px; padding: 6px 18px 10px; border-bottom: 0; border-left: 1px solid var(--vonal); }
  .arfolyamsor li:first-child a { border-left: 0; }
  .arfolyamsor em { font-size: 1.7rem; }
  .tanut { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 34px; }
  .szerkeszto-racs { grid-template-columns: 260px 1fr; gap: 34px; }
  .valaszok > div { grid-template-columns: minmax(220px, 1fr) 2fr; column-gap: 36px; }
  .segitseg { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .friss { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .oszlopsor { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .oszlop { padding: 0 22px; border-top: 0; border-left: 1px solid var(--vonal); }
  .oszlop:first-child { padding-left: 0; border-left: 0; }
  .oszlop:last-child { padding-right: 0; }
  .tarcafal { grid-template-columns: repeat(2, 1fr); }
  .negy-kep { grid-template-columns: repeat(4, 1fr); }
  .elott { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .elott a { padding: 4px 22px 8px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
  .elott li:first-child a { padding-left: 0; border-left: 0; }
  .elott li:last-child a { padding-right: 0; }
  .menet { grid-template-columns: repeat(4, 1fr); column-gap: 26px; }
  .menet li { padding: 30px 0 0; border-top: 2px solid var(--moha-mos); }
  .menet li::before { top: -17px; }
}
@media (min-width: 1200px) {
  .tanut { grid-template-columns: repeat(4, 1fr); padding-top: 48px; }
  .tanut::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; border-top: 2px solid var(--narancs-mos); }
  .tanut-fok { padding-left: 0; }
  .tanut-fok::before { display: none; }
  .tanut-fok h3 i { top: -48px; }
}
@media (min-width: 2500px) {
  .fal ul { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fal-lap a { transition: none; }
}

/* the dark signature hero on rankings, guides, site pages and the home page (the reviews' .alairas, reused) */
.alairas-egy .alairas-racs { grid-template-columns: 1fr; }
.alairas-egy::before { background: linear-gradient(180deg, rgba(21, 19, 28, .58) 0%, rgba(21, 19, 28, .5) 100%); }
.alairas-egy .alairas-cim { max-width: none; justify-items: center; text-align: center; }
.alairas-egy .alairas-sor, .alairas-egy .alairas-szerzo, .alairas-egy .alairas-gombsor { justify-content: center; }
.alairas-egy .alairas-uzenet { background: transparent; border: 0; padding: 0; }
.alairas-egy .bevezeto { font-size: 1.12rem; }
.alairas-egy .lenyeg { justify-self: stretch; width: 100%; max-width: 1100px; margin: 0 auto; }
.alairas-egy .alairas-cta { justify-self: center; }
.alairas-egy .kozles, .alairas-egy .tilalom { text-align: center; }
.pecset { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); margin: 0; max-width: 100%; }
.pecset img { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: .85; flex: none; }
.pecset b { font: 800 1.35rem/1 var(--szam); color: #fff; white-space: nowrap; }
.pecset span { font: 600 .68rem/1.25 var(--szoveg); color: var(--sotet-halvany); text-transform: uppercase; letter-spacing: .08em; max-width: 220px; }
.pecset-faj b { font: 700 .82rem/1.2 var(--cim); letter-spacing: .06em; text-transform: uppercase; }
.alairas .lenyeg { max-width: none; margin: 0; }
.alairas .lenyeg, .alairas .lenyeg li { border-color: rgba(255, 255, 255, .16); }
.alairas .lenyeg b { color: var(--vaj); }
.alairas .lenyeg span { color: var(--sotet-halvany); }
.alairas-gombsor { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.alairas .gomb-keret { border-color: rgba(255, 255, 255, .3); color: #fff; }
.alairas .gomb-keret:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.alairas .kozles, .alairas .tilalom { color: var(--sotet-halvany); }
.alairas .kozles a { color: #fff; }
.alairas-ajanlat b { font-size: 1.02rem; }
.alairas-csak-elol { padding: 0; }
.alairas-csak-elol .alairas-belepes { position: static; width: min(100%, 320px); max-width: none; margin: 0 auto; }
.alairas-belepes.alairas-szeles { width: 60%; max-width: 380px; }
@media (min-width: 900px) {
  .alairas-egy .alairas-racs { grid-template-columns: 1fr; }
  .alairas-kep.alairas-csak-elol { padding: 0; perspective: none; }
  .alairas-kep.alairas-csak-elol .alairas-belepes { left: auto; }
}
@media (min-width: 1024px) {
  .sav-elr-paros .paros, .sav-elr-kozep .paros { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  :is(.sav-elr-paros, .sav-elr-kozep) .paros > div { border-top: 0; padding-top: 6px; border-left: 1px solid var(--vonal); padding-left: 24px; padding-right: 24px; }
  :is(.sav-elr-paros, .sav-elr-kozep) .paros > div:first-child { border-left: 0; padding-left: 0; }
  :is(.sav-elr-paros, .sav-elr-kozep) .paros > div:last-child { padding-right: 0; }
  .zsetonok:has(li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* the hero trail wraps on a phone; one line from 640px */
.alairas-fej span:first-child { display: inline; white-space: normal; }
@media (min-width: 640px) {
  .alairas-fej span:first-child { display: inline-flex; white-space: nowrap; }
}