/* =====================================================================
   Téli-Nyári – döntést segítő szakaszok (tn-dontes)
   Így áll az autódon (.tna) · Fékút-verseny (.tnf) · Hallgasd meg (.tnz)
   Gumi-tanácsadó (.tnt) · Összehasonlítás (.tno)
   A teli-nyari.css tokenjeire épül. Mozgás: csak transform / opacity.
   ===================================================================== */

.nincs-js .tn-csak-js { display: none !important }

/* ------------------------------------------------------------------ Így áll az autódon */
.tna-lead { max-width: 64ch; margin: -8px 0 24px; color: var(--tinta-2); font-size: 16px }
.tna-valaszto { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; margin: 0 0 18px }
.tna-valaszto fieldset { border: 0; margin: 0; padding: 0; min-width: 0 }
.tna-valaszto legend { padding: 0; margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3) }
.tna-refek { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px }
.tna-ref { position: relative; cursor: pointer; min-width: 0 }
.tna-ref input { position: absolute; opacity: 0; width: 1px; height: 1px }
.tna-ref > span { display: block; padding: 11px 16px 11px 38px; border-radius: 16px; background: #fff; border: 1px solid var(--vonal); position: relative; transition: border-color .25s, box-shadow .3s, transform .35s var(--rugo) }
.tna-ref > span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid var(--vonal-e); background: #fff; transition: border-color .2s, box-shadow .2s }
.tna-ref b { display: block; font-size: 14px; line-height: 1.3 }
.tna-ref small { display: block; font-size: 12.5px; color: var(--tinta-2); font-weight: 600 }
.tna-ref:hover > span { border-color: var(--vonal-e) }
.tna-ref input:checked + span { border-color: var(--kek); box-shadow: 0 0 0 3px rgba(36, 80, 143, .12), var(--arny) }
.tna-ref input:checked + span::before { border-color: var(--kek); box-shadow: inset 0 0 0 3.5px #fff; background: var(--kek) }
.tna-ref input:focus-visible + span { outline: 3px solid rgba(36, 80, 143, .55); outline-offset: 2px }
.tna-selectek { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap }
.tna-selectek label { display: grid; gap: 4px }
.tna-selectek label span { font-size: 11.5px; font-weight: 600; color: var(--tinta-3) }
.tna-selectek select { width: 94px; height: 48px; border-radius: 14px; font-weight: 700; font-size: 16px; background-color: #fff }
.tna-selectek > i { font-style: normal; font-weight: 700; color: var(--tinta-3); padding-bottom: 13px }
.tna-selectek .tna-kuld { height: 48px; margin-left: 4px }
.tna.el .tna-kuld { display: none }
.tna-kezi.masodlagos legend { color: var(--tinta-3) }

.tna-szinpad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch }
.tna-auto { position: relative; isolation: isolate; border-radius: 30px; overflow: hidden; border: 1px solid var(--vonal);
  background: radial-gradient(90% 120% at 50% 0%, #FFFFFF 0%, #F3F6FB 55%, #E9EEF6 100%); padding: 36px 30px 18px }
.tna-auto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; background: linear-gradient(180deg, rgba(233, 238, 246, 0), rgba(222, 229, 240, .7)) }
.tna-svg { display: block; width: 100%; height: auto; overflow: visible }
.tna-szellem { stroke: var(--kek); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .9; vector-effect: non-scaling-stroke }
[data-tna-szellem],
[data-tna-mref], [data-tna-muj], [data-tna-hjel], [data-tna-hvonal], [data-tna-hszov], [data-tna-wszov] { transition: transform 1.1s var(--lassu) }
.tna-jelmagy { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 12px; font-size: 13px; color: var(--tinta-2); font-weight: 600 }
.tna-jelmagy span { display: inline-flex; align-items: center; gap: 9px }
.tna-jelmagy b { color: var(--tinta) }
.tna-jelmagy i { display: inline-block; width: 24px }
.tna-jelmagy i.szaggatott { border-top: 2px dashed var(--kek) }
.tna-jelmagy i.tomor { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #12151B, #2A2F38) }

.tna-nagyito { margin: 0; display: flex; flex-direction: column; border-radius: 30px; background: #fff; border: 1px solid var(--vonal); padding: 20px 18px 14px }
.tna-nagyito figcaption { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3) }
.tna-nagyito svg { display: block; width: 100%; height: auto; margin: auto 0; overflow: visible }
.tna-nagyito text { font: 700 12.5px var(--test); fill: var(--tinta-2) }
.tna-nagyito .tna-meret-w { fill: var(--tinta) }
.tna-nagyito .vonal { stroke: var(--tinta-3); stroke-width: 1.2 }
.tna-nagyito .futo path { stroke: rgba(255, 255, 255, .22); stroke-width: 2.2; stroke-linecap: round }

.tna-nagy-adat { display: grid; gap: 10px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--vonal) }
.tna-nagy-adat > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.tna-nagy-adat dt { font-size: 13px; font-weight: 600; color: var(--tinta-2) }
.tna-nagy-adat dd { margin: 0; font: 800 16px var(--disp); color: var(--tinta); white-space: nowrap }
.tna-nagy-adat small { font: 700 12.5px var(--test); color: var(--kek); margin-left: 4px }
.tna-nagy-jel { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--tinta-3) }
.tna-nagy-jel i { width: 20px; border-top: 1.6px dashed var(--kek) }
.tna-itelet { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--vonal) }
.tna-itelet .jel { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--kek-h) }
.tna-itelet .jel::before, .tna-itelet .jel::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--kek); border-radius: 2px }
.tna-itelet.azonos .jel::before { width: 14px; height: 2.4px; transform: translate(-50%, -4px) }
.tna-itelet.azonos .jel::after { width: 14px; height: 2.4px; transform: translate(-50%, 2px) }
.tna-itelet.jo .jel { background: var(--zold-h) }
.tna-itelet.jo .jel::before { width: 7px; height: 13px; background: none; border: solid var(--zold); border-width: 0 2.6px 2.6px 0; border-radius: 1px; transform: translate(-50%, -62%) rotate(45deg) }
.tna-itelet.jo .jel::after { display: none }
.tna-itelet.rossz .jel { background: #FDECEA }
.tna-itelet.rossz .jel::before { width: 2.6px; height: 13px; background: var(--piros); transform: translate(-50%, -70%) }
.tna-itelet.rossz .jel::after { width: 3px; height: 3px; border-radius: 50%; background: var(--piros); transform: translate(-50%, 5px) }
.tna-itelet b { display: block; font: 800 17px/1.3 var(--disp); letter-spacing: -.01em }
.tna-itelet p { margin: 3px 0 0; color: var(--tinta-2); font-size: 14px }

.tna-szamok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0 }
.tna-szamok > div { background: #fff; border: 1px solid var(--vonal); border-radius: 22px; padding: 18px 20px }
.tna-szamok dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3) }
.tna-szamok dd { margin: 6px 0 0 }
.tna-szamok b { display: block; font: 800 23px/1.15 var(--disp); letter-spacing: -.02em; color: var(--tinta); white-space: nowrap }
.tna-szamok small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tinta-2) }
.tna-szabaly { margin: 16px 0 0; max-width: 96ch; font-size: 13px; color: var(--tinta-3) }
.tna-szabaly b { color: var(--tinta-2) }

@media (max-width: 1100px) { .tna-szinpad { grid-template-columns: minmax(0, 1fr) 260px } }
@media (max-width: 900px) {
  .tna-szinpad { grid-template-columns: 1fr }
  .tna-nagyito svg { max-width: 420px; margin: 6px auto 0 }
  .tna-szamok { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .tna-valaszto { gap: 16px }
  .tna-refek { flex: 1 1 100% }
  .tna-ref { flex: 1 1 100% }
  .tna-auto { padding: 22px 8px 14px; border-radius: 24px }
  .tna-nagyito { border-radius: 24px }
  .tna-nagyito svg { max-width: none; margin: 4px 0 0 }
  .tna-selectek select { width: 84px }
  .tna-szamok > div { padding: 14px 14px; border-radius: 18px }
  .tna-szamok b { font-size: 18px }
  .tna-itelet { align-items: flex-start; padding: 14px 16px }
}

/* ------------------------------------------------------------------ Fékút-verseny */
.tnf-szek > h2, .tna > h2, .tnz > h2 { margin: 10px 0 22px }
.tno-torzs > .tnf-szek { margin-top: 64px }
.tnf-lead { max-width: 66ch; margin: -8px 0 24px; color: var(--tinta-2); font-size: 16px }
/* a verseny maga: public/css/fekut-verseny.css (kozos komponens) */

/* ------------------------------------------------------------------ Hallgasd meg a zajt */
.tnz-doboz { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); border-radius: 32px; overflow: hidden; background: #fff; border: 1px solid var(--vonal); box-shadow: var(--arny-e) }
.tnz-lejatszo { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 34px 28px; color: #fff;
  background: radial-gradient(110% 80% at 20% 0%, #1B2756 0%, #16233D 45%, #0B1322 100%) }
.tnz-lejatszo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 85% 85%, rgba(61, 95, 158, .22), transparent 70%) }
.tnz-szint { display: flex; align-items: baseline; gap: 8px }
.tnz-szint b { font: 800 clamp(68px, 8vw, 104px)/.9 var(--disp); letter-spacing: -.05em; transition: opacity .3s }
.tnz-szint span { font: 700 22px var(--disp); color: #8F9BBB }
.tnz-szint-al { margin-top: 8px; color: #8F9BBB; font-size: 13px; font-weight: 600 }
.tnz-gomb { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 26px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--tinta); font-weight: 700; font-size: 16px; box-shadow: 0 20px 44px -18px rgba(79, 168, 232, .7); transition: transform .35s var(--rugo), box-shadow .3s }
.tnz-gomb:hover { transform: translateY(-2px) }
.tnz-gomb .ik { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff }
.tnz-gomb .ik svg { grid-area: 1 / 1 }
.tnz-gomb .all, .tnz-gomb[aria-pressed="true"] .lej { opacity: 0; transform: scale(.6) }
.tnz-gomb[aria-pressed="true"] .all { opacity: 1; transform: none }
.tnz-gomb svg { transition: opacity .25s, transform .35s var(--rugo) }
.tnz-mero { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 46px; margin-top: 22px }
.tnz-mero i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(0deg, #4FA8E8, #3D5F9E 70%, #E4951C); transform-origin: 50% 100%; transform: scaleY(.05); opacity: .85; transition: transform .1s linear }
.tnz-ab { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.tnz-ab button { text-align: left; padding: 10px 14px; border-radius: 16px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .25s, border-color .25s, transform .35s var(--rugo) }
.tnz-ab button:hover { background: rgba(255, 255, 255, .1) }
.tnz-ab button.on { background: rgba(255, 255, 255, .15); border-color: rgba(79, 168, 232, .7) }
.tnz-ab b { display: block; font: 800 15px var(--disp) }
.tnz-ab small { display: block; font-size: 12px; color: #9AA5C2; font-weight: 600 }
.tnz-jelzes { margin: 20px 0 0; font-size: 12.5px; color: #8F9BBB }
.tnz-energia { padding: 34px }
.tnz-energia h3 { font-size: 22px }
.tnz-energia > p { margin: 8px 0 0; color: var(--tinta-2); font-size: 14.5px; max-width: 52ch }
.tnz-energia ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px }
.tnz-energia .fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px }
.tnz-energia .fej > span:first-child { min-width: 0 }
.tnz-energia .fej b { display: block; font-size: 14.5px }
.tnz-energia .fej small { display: block; font-size: 12.5px; color: var(--tinta-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tnz-energia .ert { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--tinta-2) }
.tnz-energia .ert b { display: inline; color: var(--tinta); font: 800 16px var(--disp) }
.tnz-energia .sav { height: 12px; margin-top: 9px; border-radius: 999px; background: var(--hatter); overflow: hidden }
.tnz-energia .sav i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #AEB6C4, #8A93AB); transform-origin: 0 50%; transition: transform 1.3s var(--lassu) }
.tnz-energia li.ez .sav i { background: var(--grad) }
.tnz-energia li.szol .fej > span:first-child > b::after { content: "Most ezt hallod"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--kek-h); color: var(--kek); font-weight: 700; font-size: 11.5px; vertical-align: 1px }
.tnz-labj { display: block; margin-top: 22px; font-size: 12px; color: var(--tinta-3) }
.tnz-ugro { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--kek) }
.tnz-ugro span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kek-h); transition: transform .35s var(--rugo) }
.tnz-ugro:hover span { transform: scale(1.1) }
@media (max-width: 960px) { .tnz-doboz { grid-template-columns: 1fr } }
@media (max-width: 640px) {
  .tnz-doboz { border-radius: 26px }
  .tnz-lejatszo, .tnz-energia { padding: 24px 20px }
  .tnz-ab button { flex: 1 1 calc(50% - 4px) }
}

/* ------------------------------------------------------------------ Gumi-tanácsadó */
.tnt { margin: 0 0 18px }
.tnt-doboz { background: #fff; border: 1px solid var(--vonal); border-radius: 24px; box-shadow: var(--arny); overflow: hidden }
.tnt-doboz > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer }
.tnt-doboz > summary::-webkit-details-marker { display: none }
.tnt-jel { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--kek); background: var(--grad-lagy) }
.tnt-cim { min-width: 0 }
.tnt-cim b { display: block; font: 800 17px/1.2 var(--disp); letter-spacing: -.01em }
.tnt-cim small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tinta-2); font-weight: 500 }
.tnt-nyil { flex: 0 0 auto; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--hatter); position: relative; transition: transform .45s var(--lassu) }
.tnt-nyil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid var(--tinta-2); border-width: 0 2px 2px 0; transform: translate(-50%, -70%) rotate(45deg) }
.tnt-doboz[open] .tnt-nyil { transform: rotate(180deg) }
.tnt-test { padding: 0 18px 16px; border-top: 1px solid var(--vonal) }
.tnt-csuszkak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; margin-top: 14px }
.tnt-cs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0 }
.tnt-cs > * { min-width: 0 }
.tnt-cs .fej b { display: block; font-size: 14.5px }
.tnt-cs .fej small { display: block; font-size: 12px; color: var(--tinta-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tnt-cs .ertek { font-size: 12.5px; font-weight: 600; color: var(--tinta-2) }
.tnt-cs input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 50% }
.tnt-cs input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--kek) 0 var(--p), var(--vonal) var(--p) 100%) }
.tnt-cs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 1px solid var(--vonal-e); box-shadow: 0 2px 8px rgba(11, 18, 36, .22); transition: transform .3s var(--rugo) }
.tnt-cs input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12) }
.tnt-cs input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--vonal) }
.tnt-cs input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--kek) }
.tnt-cs input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--vonal-e); box-shadow: 0 2px 8px rgba(11, 18, 36, .22) }
.tnt-cs input[type=range]:disabled { opacity: .4; cursor: not-allowed }
.tnt-lab { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px }
.tnt-allapot { margin: 0; font-size: 13.5px; color: var(--tinta-2); font-weight: 600 }
.tnt-megj { margin: 8px 0 0; font-size: 12px; color: var(--tinta-3) }
/* a kartyakon: helyezes, pontszam, indoklas */
.tnt-sor { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; min-width: 0 }
.tnt-sor .pont { flex: 0 0 auto; min-width: 44px; height: 28px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font: 800 13.5px var(--disp); color: #fff; background: var(--ej) }
.tnt-sor .pont small { font: 700 10px var(--test); opacity: .7 }
.tnt-sor.dobogo .pont { background: var(--grad) }
.tnt-sor .ok { min-width: 0; flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tnt-sor .ok i { font-style: normal; color: var(--nap-s) }
.tk.tnt-rendel { opacity: .7 }
@media (max-width: 1180px) { .tnt-csuszkak { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) {
  .tnt-doboz > summary { padding: 13px 14px; gap: 12px }
  .tnt-jel { width: 38px; height: 38px; border-radius: 12px }
  .tnt-cim small { font-size: 12.5px }
  .tnt-test { padding: 0 14px 14px }
  .tnt-csuszkak { gap: 12px 16px }
  .tnt-cs .fej small { white-space: normal }
}

/* ------------------------------------------------------------------ Összehasonlítás */
.tno-fej { position: relative; isolation: isolate; overflow: hidden; background: var(--ej); color: #fff; padding: 36px 0 34px }
.tno-fej::before { content: ""; position: absolute; inset: -40% -10% auto; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 240px at 12% 40%, rgba(79, 168, 232, .26), transparent 65%), radial-gradient(520px 240px at 88% 10%, rgba(228, 149, 28, .22), transparent 65%) }
.tno-morzsa { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #8F9BBB; font-weight: 600; margin-bottom: 16px; flex-wrap: wrap }
.tno-morzsa a { color: #B9C3DB }
.tno-morzsa a:hover { color: #fff }
.tno-fej h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -.03em; margin: 10px 0 10px; max-width: 20ch }
.tno-fej p { margin: 0; color: #B9C3DB; max-width: 60ch }
.tno-torzs { padding-top: 28px; padding-bottom: 56px }
.tno-gorgo { overflow-x: auto; margin: 0 -20px; padding: 4px 20px 20px; scroll-snap-type: x proximity; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch }
.tno-gorgo:focus-visible { outline: 3px solid rgba(36, 80, 143, .45); outline-offset: -3px }
.tno-oszlopok { display: grid; grid-template-columns: repeat(var(--db, 3), minmax(250px, 1fr)); gap: 16px; max-width: calc(var(--db, 3) * 420px) }
.tno-osz { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border-radius: 28px; background: #fff; border: 1px solid var(--vonal); box-shadow: var(--arny); scroll-snap-align: start }
.tno-kep { display: grid; place-items: center; aspect-ratio: 1.25; border-radius: 20px; background: radial-gradient(80% 80% at 50% 35%, #fff, #EEF2FA 75%, #E4E9F3) }
.tno-kep img { width: 70%; height: auto; mix-blend-mode: multiply }
.tno-nev { min-height: 86px }
.tno-logo { height: 20px; width: auto; max-width: 110px; object-fit: contain; margin-bottom: 6px }
.tno-marka { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kek); margin-bottom: 4px }
.tno-nev a { display: block; font: 800 18px/1.2 var(--disp); letter-spacing: -.01em; color: var(--tinta) }
.tno-nev a:hover { color: var(--kek) }
.tno-nev span { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-3); font-weight: 600 }
.tno-ar b { display: block; font: 800 27px/1.1 var(--disp); letter-spacing: -.03em }
.tno-ar small { color: var(--tinta-2); font-size: 12.5px; font-weight: 600 }
.tno-ar.legjobb small::after { content: " · a legkedvezőbb"; color: var(--zold); font-weight: 700 }
.tno-keszlet { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--tinta-2) }
.tno-keszlet i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3) }
.tno-keszlet.van { color: var(--zold) }
.tno-keszlet.van i { background: var(--zold); animation: tnPulz 2.2s infinite }
.tno-cimke { display: grid; gap: 8px; padding-top: 13px; border-top: 1px solid var(--vonal) }
.tno-cimke .c b { display: block; font-size: 13.5px }
.tno-cimke .c small { display: block; font-size: 12px; color: var(--tinta-3); font-weight: 600 }
.tno-cimke.legjobb .c b::after { content: "  · a legjobb"; color: var(--zold); font-size: 12px; font-weight: 700 }
.tno-cimke .skala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px }
.tno-cimke .skala i { height: 24px; border-radius: 7px; display: grid; place-items: center; font: 800 12.5px var(--disp); font-style: normal; color: #fff; opacity: .22 }
.tno-cimke .skala i.ez { opacity: 1; transform: scaleY(1.14) }
.tno-cimke .s-a { background: #0E8C3A } .tno-cimke .s-b { background: #57A80F } .tno-cimke .s-c { background: #C8C000 } .tno-cimke .s-d { background: #EE8A00 } .tno-cimke .s-e { background: #D93A20 }
.tno-cimke .zaj { font-size: 14px; font-weight: 600; color: var(--tinta-2) }
.tno-cimke .zaj b { font: 800 24px var(--disp); color: var(--tinta); letter-spacing: -.02em }
.tno-fek { font-size: 12.5px; color: var(--tinta-2); font-weight: 600 }
.tno-osz .nincs { font-size: 13px; color: var(--tinta-3) }
.tno-jelek { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; padding-top: 13px; border-top: 1px solid var(--vonal) }
.tno-lab { margin-top: auto; display: grid; gap: 6px; justify-items: center }
.tno-lab form { width: 100% }
.tno-kivesz { background: none; border: 0; padding: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px }
.tno-kivesz:hover { color: var(--piros) }
.tno-ures { max-width: 640px; margin: 10px auto; text-align: center; padding: 54px 28px; border-radius: 30px; background: #fff; border: 1px solid var(--vonal); box-shadow: var(--arny-e) }
.tno-ures b { display: block; font: 800 22px var(--disp); margin-bottom: 8px }
.tno-ures p { color: var(--tinta-2); margin: 0 auto 20px; max-width: 46ch }
.tno-megj { margin-top: 26px; font-size: 13.5px; color: var(--tinta-3) }
@media (max-width: 560px) {
  .tno-gorgo { margin: 0 -16px; padding: 4px 16px 18px; scroll-padding: 0 16px }
  .tno-oszlopok { grid-template-columns: repeat(var(--db, 3), minmax(258px, 78vw)) }
}
/* a hosszu felirat telefonon tobb sorba torik (a .g gomb alapbol nem tor: 87 px-szel kilogott) */
.tnf-kulon { margin-top: 18px; white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; height: auto }