/* Teli-Nyari – aquaplaning-szimulator (shop/_tn_aqua) es gumi-orvos (shop/_tn_orvos), docs/102 tn-aqua.
   Elotag: tna- (aquaplaning), tno2- (gumi-orvos). A bolt tokenjei (teli-nyari.css). */

.tna { margin-top: 40px }
.tna-oldal-torzs > .tna { margin-top: 36px }
.tna-doboz { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--r-l); box-shadow: var(--arny-e); padding: 22px; min-width: 0 }
.tna-fej h2 { margin: 8px 0 6px; font-size: clamp(22px, 2.6vw, 30px) }
.tna-fej p { margin: 0 0 14px; color: var(--tinta-2) }
.tna-rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.tna-racs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 6px }
.tna-kep { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ej); aspect-ratio: 960 / 390 }
.tna-kep svg, .tna-kep canvas { display: block; width: 100%; height: 100% }
.tna-kep canvas[hidden], .tna-kep svg[hidden] { display: none }
.tna-cimke { position: absolute; left: 10px; top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: #B9C3DB; background: rgba(11, 19, 34, .62); padding: 3px 8px; border-radius: 999px }
/* lejatszas gomb (3 kor) - jobb also sarok; futas kozben a gyuru jelzi */
.tna-lejatszas { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 8px; border: 1px solid rgba(233, 243, 252, .28); border-radius: 999px; background: rgba(11, 19, 34, .72); color: #E9F3FC; font: 700 13px/1 inherit; cursor: pointer }
.tna-lejatszas svg { width: 20px; height: 20px }
.tna-lejatszas:hover { background: rgba(22, 35, 61, .9) }
.tna-lejatszas:focus-visible { outline: 3px solid #E4951C; outline-offset: 2px }
.tna-lejatszas[aria-pressed="true"] { border-color: #E4951C }

.tna-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.tna-mero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 12px }
.tna-mero-cim { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2) }
.tna-szam { grid-column: 2; grid-row: 1; justify-self: end; font: 800 40px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.tna-sav { grid-column: 1 / -1; display: block; height: 10px; border-radius: 999px; background: var(--hatter); overflow: hidden; border: 1px solid var(--vonal) }
.tna-sav i { display: block; height: 100%; border-radius: inherit; background: var(--zold); transition: width .25s var(--lassu), background .25s }
.tna-mero[data-fok="konnyu"] .tna-sav i { background: var(--nap) }
.tna-mero[data-fok="uszik"] .tna-sav i { background: var(--piros) }
.tna-mero[data-fok="tart"] .tna-szam { color: var(--zold) }
.tna-mero[data-fok="konnyu"] .tna-szam { color: var(--nap-s) }
.tna-mero[data-fok="uszik"] .tna-szam { color: var(--piros) }
.tna-itelet { margin: 0; font-weight: 600; min-height: 3em; color: var(--tinta) }

.tna-csuszkak { display: grid; gap: 4px 12px; grid-template-columns: 1fr }
.tna-csuszkak label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-top: 6px }
.tna-csuszkak label b { color: var(--tinta); font-variant-numeric: tabular-nums }
.tna-csuszkak input[type=range] { width: 100%; accent-color: var(--kek); height: 28px; margin: 0; touch-action: pan-y }
.tna-szamol { margin-top: 8px; justify-self: start }
html:not(.nincs-js) .tna-szamol { display: none }

.tna-gombok { display: flex; flex-wrap: wrap; gap: 8px }
.tna-gomb { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--vonal-e); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--tinta); text-align: left }
.tna-gomb:hover { border-color: var(--tinta) }
.tna-gomb[aria-pressed="true"] { border-color: var(--kek); background: var(--kek-h); color: var(--kek-s) }
.tna-gomb[data-kulcs="sajat"] { border-color: var(--nap) }

.tna-tabla { margin-top: 18px; border-top: 1px solid var(--vonal); padding-top: 12px }
.tna-tabla summary { cursor: pointer; font-weight: 700; color: var(--tinta) }
.tna-tabla-g { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch }
.tna-tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.tna-tabla th, .tna-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--vonal); text-align: center; font-size: 14.5px }
.tna-tabla thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); background: var(--hatter) }
.tna-tabla tbody th { text-align: left; white-space: nowrap }
.tna-tabla td.f-tart { color: var(--zold); font-weight: 700 }
.tna-tabla td.f-konnyu { color: var(--nap-s); font-weight: 700 }
.tna-tabla td.f-uszik { color: var(--piros); font-weight: 700; background: rgba(229, 55, 43, .05) }
.tna-megj { margin: 14px 0 0; font-size: 13.5px; color: var(--tinta-2) }
.tna-megj a { color: var(--kek); font-weight: 600 }

.tna-cikk { max-width: 72ch; margin-top: 46px }
.tna-cikk h2 { margin: 0 0 10px }
.tna-cikk p { line-height: 1.65 }
.tna-cikk a { color: var(--kek); font-weight: 600 }
.tna-tenyek { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.tna-tenyek li { background: var(--hatter); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 4px }
.tna-tenyek b { font: 800 22px var(--disp); color: var(--ej-2) }
.tna-tenyek span { font-size: 14px; color: var(--tinta-2) }
.tna-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 }
.tna-cta .g { white-space: normal }
.tna-forras { margin-top: 18px; background: var(--hatter); border-radius: var(--r); padding: 14px 16px }
.tna-forras summary { cursor: pointer; font-weight: 700 }
.tna-forras ol, .tna-forras-lista { padding-left: 20px; font-size: 14px; color: var(--tinta-2) }
.tna-forras-lista li { margin: 6px 0; overflow-wrap: anywhere }

@media (max-width: 900px) {
  .tna-racs { grid-template-columns: 1fr }
  .tna-tenyek { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .tna-doboz { padding: 16px; border-radius: var(--r) }
  .tna-szam { font-size: 34px }
  .tna-tabla th, .tna-tabla td { padding: 7px 5px; font-size: 13.5px }
  .tna-tabla thead th { font-size: 10.5px; letter-spacing: .02em }
}

/* ------------------------------------------------------------------ gumi-orvos */
.tno2 { margin-top: 36px }
.tno2-doboz { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--r-l); box-shadow: var(--arny-e); padding: 22px; min-width: 0 }
.tno2-doboz h2 { margin: 6px 0 6px; font-size: clamp(22px, 2.6vw, 30px) }
.tno2-al { margin: 0 0 16px; color: var(--tinta-2) }
.tno2-kepek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.tno2-kep { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: var(--r); border: 1.5px solid var(--vonal); background: #fff; color: var(--tinta); font-weight: 700; font-size: 14px; text-align: center; transition: border-color .2s, box-shadow .2s, transform .3s var(--rugo) }
.tno2-kep:hover { border-color: var(--vonal-e); box-shadow: var(--arny) }
.tno2-kep[aria-current="true"] { border-color: var(--kek); box-shadow: 0 0 0 3px var(--kek-h) }
.tno2-kep svg { width: 100%; max-width: 120px; height: auto; display: block }
.tno2-kep small { font-weight: 600; color: var(--tinta-2); font-size: 12.5px }
.tno2-eredmeny { margin-top: 18px; border-radius: var(--r); background: var(--hatter); padding: 18px; scroll-margin-top: 110px }
.tno2-eredmeny[hidden] { display: none }
.tno2-eredmeny h3 { margin: 0 0 6px; font-size: 20px }
.tno2-ok { font-weight: 700; margin: 0 0 4px }
.tno2-miert { margin: 0 0 12px; color: var(--tinta-2) }
.tno2-szolg { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px }
.tno2-szolg li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-s); padding: 10px 12px }
.tno2-szolg b { font-weight: 700 }
.tno2-szolg small { display: block; color: var(--tinta-3); font-size: 12.5px; font-weight: 500 }
.tno2-ar { font: 800 17px var(--disp); white-space: nowrap; font-variant-numeric: tabular-nums }
.tno2-nincsar { font-size: 13px; color: var(--tinta-2) }
.tno2-megerosit { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--kek-s) }
.tno2-megerosit svg { width: 18px; height: 18px; flex: 0 0 auto }
.tno2-gombok { display: flex; flex-wrap: wrap; gap: 10px }
.tno2-gombok .g { white-space: normal }
.tno2-ai { margin-top: 18px; padding: 16px; border-radius: var(--r); border: 1.5px dashed var(--vonal-e); scroll-margin-top: 110px }
.tno2-ai h3 { margin: 0 0 6px; font-size: 18px }
.tno2-ai p { margin: 0 0 10px; font-size: 14px; color: var(--tinta-2) }
.tno2-ai form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.tno2-ai input[type=file] { max-width: 100%; font-size: 14px }
.tno2-javaslat { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--kek-h); color: var(--kek-s); font-weight: 600 }
.tno2-javaslat.bizonytalan { background: var(--nap-h); color: var(--nap-s) }
.tno2-hiba { color: var(--piros); font-weight: 600; margin: 8px 0 0 }
.tno2-fiok .tno2-kepek { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 760px) {
  .tno2-kepek, .tno2-fiok .tno2-kepek { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tno2-doboz { padding: 16px; border-radius: var(--r) }
}

@media (prefers-reduced-motion: reduce) {
  .tna-sav i, .tno2-kep { transition: none }
}