/* App-letöltés a 10 lépés alatt: az AquaLog-oldal elemei (aqualog-bemutato.css), mozgása a --p szekcióhaladásból (aqualog-bemutato.js).
   A háttérdiagramok, a telefonok és a kártyák külön sebességgel mozognak; a középső telefon felül kilóg a szekcióból. */
.aql.appsav { position: relative; z-index: 2; padding: 0; overflow: visible; overflow-x: clip; background: transparent; }
.appsav > .aql-hullam:first-child { margin: 0; }
.appsav__test { --nyit: clamp(0, (var(--p, .5) - .1) / .32, 1); position: relative; padding-bottom: clamp(44px, 5vw, 76px); background: radial-gradient(50% 45% at 82% 18%, rgba(159, 211, 201, .22), transparent 70%), linear-gradient(180deg, #0F3038 0%, #154650 52%, #22605C 100%); }
.appsav__hatter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.appsav__szo { position: absolute; left: -2%; top: 3%; font-size: clamp(7rem, 23vw, 28rem); font-weight: 900; line-height: 1; letter-spacing: -.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(159, 211, 201, .1); translate: calc((.5 - var(--p, .5)) * 34vw) 0; }
.appsav__vonalak { position: absolute; left: 0; top: 8%; width: 100%; height: 76%; }
.appsav__racs line { stroke: rgba(159, 211, 201, .1); stroke-width: 1; stroke-dasharray: 3 9; }
.appsav__vonal { fill: none; stroke: rgba(159, 211, 201, .42); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: max(0, calc(1 - (var(--p, .75) - .08) * 1.9)); }
.appsav__vonal--2 { stroke: rgba(224, 164, 58, .34); stroke-width: 2.5; stroke-dashoffset: max(0, calc(1 - (var(--p, .75) - .16) * 2.1)); }
.appsav__vonal--3 { stroke: rgba(124, 196, 214, .32); stroke-width: 2; stroke-dashoffset: max(0, calc(1 - (var(--p, .75) - .24) * 2.3)); }
.appsav__tarcsa { position: absolute; fill: none; }
.appsav__tarcsa--1 { right: -9%; top: -6%; width: clamp(420px, 56vw, 980px); height: auto; translate: 0 calc((.5 - var(--p, .5)) * 170px); rotate: calc(var(--p, .5) * 150deg); opacity: .5; }
.appsav__tarcsa--2 { left: -11%; bottom: -14%; width: clamp(280px, 30vw, 520px); height: auto; translate: 0 calc((.5 - var(--p, .5)) * -130px); rotate: calc(var(--p, .5) * -200deg); opacity: .42; }
.appsav__forog { transform-origin: 200px 200px; }
.appsav__oszto { stroke: rgba(159, 211, 201, .55); stroke-width: 12; stroke-dasharray: 1.2 4.8; }
.appsav__iv { stroke: rgba(159, 211, 201, .5); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 36 64; }
.appsav__iv--2 { stroke: rgba(224, 164, 58, .5); stroke-dasharray: 16 84; stroke-dashoffset: -42; }
.appsav__iv--3 { stroke: rgba(124, 196, 214, .45); stroke-width: 22; stroke-dasharray: 54 46; stroke-linecap: butt; }
.appsav__iv--4 { stroke: rgba(255, 255, 255, .22); stroke-width: 22; stroke-dasharray: 22 78; stroke-dashoffset: -58; stroke-linecap: butt; }
.appsav__belso-kor { stroke: rgba(159, 211, 201, .3); stroke-width: 2; stroke-dasharray: 4 8; }
.appsav__oszlopok { position: absolute; left: 3%; bottom: 0; display: flex; align-items: flex-end; gap: clamp(5px, .7vw, 11px); height: 34%; opacity: .34; }
.appsav__oszlopok i { --m: .5; display: block; width: clamp(9px, 1.25vw, 22px); height: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #9FD3C9, rgba(159, 211, 201, .08)); transform-origin: bottom; scale: 1 calc(var(--m) * (.2 + var(--nyit, 1) * .8)); }
.appsav__oszlopok i:nth-child(3n) { --m: .78; } .appsav__oszlopok i:nth-child(3n+1) { --m: .36; } .appsav__oszlopok i:nth-child(4n) { --m: .94; } .appsav__oszlopok i:nth-child(7n) { --m: .62; }

.appsav__racs { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.appsav__szoveg { position: relative; z-index: 3; padding-top: 14px; }
.appsav .aql-fej h2 { font-size: clamp(2.2rem, 1.1rem + 2.7vw, 4.2rem); line-height: 1.03; letter-spacing: -.04em; }
.appsav .aql-bevezeto { margin-bottom: 22px; font-size: clamp(1.04rem, 1rem + .3vw, 1.2rem); }
.appsav__kerdes { margin: 0 0 10px; color: #9FD3C9; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.appsav-gombok { display: flex; gap: 12px; }
.appsav-gomb { display: inline-flex; flex: 1 1 0; align-items: center; gap: 12px; min-width: 0; min-height: 72px; padding: 9px 22px 9px 9px; border: 0; border-radius: 20px; background: #fff; color: #0D1A17; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 36px rgba(4, 16, 14, .36); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s; }
.appsav-gomb:hover { background: #EAF4F0; transform: translateY(-3px); }
.appsav-gomb:focus-visible { outline: 3px solid #9FD3C9; outline-offset: 3px; }
.appsav-gomb__ikon { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: #0F3038; color: #fff; }
.aql .appsav-gomb__ikon .ikon { width: 28px; height: 28px; }
.appsav-gomb__szoveg { display: grid; min-width: 0; line-height: 1.15; }
.appsav-gomb__szoveg small { color: #5B6B66; font-size: .78rem; font-weight: 700; }
.appsav-gomb__szoveg b { font-size: clamp(1.02rem, .95rem + .4vw, 1.3rem); font-weight: 900; letter-spacing: -.01em; }
.appsav__megj { margin: 12px 0 0; color: rgba(255, 255, 255, .74); font-size: .9rem; }

.appsav-szinpad { position: relative; z-index: 2; height: clamp(430px, 118vw, 560px); perspective: 1700px; }
.appsav-csoport { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(-7deg + (var(--p, .5) - .5) * 20deg)) rotateX(calc(4deg + (var(--p, .5) - .5) * -9deg)); }
.appsav-tel { position: absolute; top: 0; }
.appsav-tel .aql-tel { width: 100%; }
.appsav-tel--kozep { z-index: 3; left: 50%; width: min(64vw, 270px); margin-left: calc(min(64vw, 270px) / -2); transform: translateZ(70px); translate: 0 calc((.5 - var(--p, .5)) * 46px); }
.appsav-tel--bal, .appsav-tel--jobb { top: 46px; z-index: 1; width: min(50vw, 214px); opacity: .96; }
.appsav-tel--bal { left: -13%; rotate: -7deg; transform: translateX(calc((1 - var(--nyit, 1)) * 34%)); translate: 0 calc((.5 - var(--p, .5)) * -80px); }
.appsav-tel--jobb { right: -13%; top: 90px; rotate: 7deg; transform: translateX(calc((1 - var(--nyit, 1)) * -34%)); translate: 0 calc((.5 - var(--p, .5)) * 110px); }
.appsav-csoport > .aql-jelzes, .appsav-csoport > .appsav-kor { position: absolute; z-index: 5; translate: 0 var(--par, 0px) 130px; }
.appsav-hely--1 { left: -2%; top: 12%; }
.appsav-hely--2 { right: -2%; top: 66%; }
.appsav-hely--3, .appsav-hely--4 { display: none; }
.appsav .appsav-kor { grid-template-columns: 76px auto; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; color: #14211E; box-shadow: 0 18px 40px rgba(13, 26, 23, .24); }
.appsav .appsav-kor svg { width: 76px; height: 76px; }

.appsav .aql-graf__idok span { padding: 5px 7px; white-space: nowrap; }
.appsav-tudas { position: relative; z-index: 4; margin-top: -46px; }
.appsav-tudas::before { content: ""; position: absolute; left: -50vw; right: -50vw; top: -96px; z-index: -1; height: 190px; background: linear-gradient(180deg, rgba(20, 66, 74, 0), #14424A 52%, #14424A 72%, rgba(20, 66, 74, 0)); pointer-events: none; }
.appsav-tudas__cim { margin: 0 0 14px; color: #fff; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); letter-spacing: -.02em; }
.aql .appsav-tudas__cim { margin-bottom: 14px; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); }
.appsav-tudas__cim a { margin-left: 8px; color: #9FD3C9; font-size: .62em; font-weight: 800; letter-spacing: 0; white-space: nowrap; text-underline-offset: 4px; }
.appsav-tudas__cim a:hover { color: #fff; }
.appsav-tudas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.appsav-elem { --e: 0px; --s: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 8px 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; background: rgba(9, 34, 38, .74); color: #fff; backdrop-filter: blur(8px); translate: 0 calc(var(--e) + (.5 - var(--p, .5)) * var(--s)); }
.appsav-elem:nth-child(2n) { --e: 12px; --s: -22px; }
.appsav-elem__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #9FD3C9; color: #0F3038; }
.aql .appsav-elem__ikon .ikon { width: 20px; height: 20px; }
.appsav-elem b { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.appsav-elem small { grid-column: 1 / -1; color: rgba(255, 255, 255, .74); font-size: .84rem; line-height: 1.35; }
.appsav__zaro { margin-top: 30px; }
.appsav__alul { position: absolute; left: 0; right: 0; top: 100%; height: clamp(22px, 3.4vw, 54px); margin-top: -1px; }
.appsav__alul svg { top: 0; bottom: auto; scale: 1 -1; }
.appsav__alul path { fill: #22605C; }

@media (prefers-reduced-motion: no-preference) {
  .aql--mozgas .appsav__forog { animation: appsav-forog 46s linear infinite; }
  .aql--mozgas .appsav__forog--vissza { animation-duration: 34s; animation-direction: reverse; }
  .aql--mozgas .appsav__forog--lassu { animation-duration: 70s; }
  .aql--mozgas .appsav-gomb { animation: aql-gomb-pulzus 2.8s ease-in-out infinite; }
  .aql--mozgas .appsav-elem:nth-child(5n+2) { transition-delay: .07s; } .aql--mozgas .appsav-elem:nth-child(5n+3) { transition-delay: .14s; }
  .aql--mozgas .appsav-elem:nth-child(5n+4) { transition-delay: .21s; } .aql--mozgas .appsav-elem:nth-child(5n) { transition-delay: .28s; }
}
@keyframes appsav-forog { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  .appsav-tudas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appsav-szinpad { height: 600px; }
  .appsav-tel--kozep { width: 300px; margin-left: -150px; }
  .appsav-tel--bal, .appsav-tel--jobb { width: 246px; }
  .appsav-tel--bal { left: 3%; } .appsav-tel--jobb { right: 3%; }
}
@media (min-width: 960px) {
  .appsav__racs { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(20px, 3vw, 56px); }
  .appsav__szoveg { padding: 20px 0 110px; }
  .appsav-gombok { max-width: 540px; }
  .appsav-szinpad { height: clamp(620px, 50vw, 760px); }
  .appsav-tel--kozep { top: clamp(-120px, -7vw, -70px); width: clamp(270px, 24vw, 340px); margin-left: calc(clamp(270px, 24vw, 340px) / -2); }
  .appsav-tel--bal, .appsav-tel--jobb { width: clamp(210px, 18.5vw, 268px); }
  .appsav-tel--bal { left: -3%; top: 30px; }
  .appsav-tel--jobb { right: -3%; top: 92px; }
  .appsav-hely--1 { left: -7%; top: 6%; }
  .appsav-hely--2 { right: 0; top: 12%; }
  .appsav-hely--3 { display: flex; left: 9%; top: 74%; }
  .appsav-hely--4 { display: grid; right: 3%; top: 70%; }
  .appsav-tudas { margin-top: -74px; }
  .appsav-tudas::before { display: none; }
  .appsav-tudas__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .appsav-elem { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .appsav-elem__ikon { width: 42px; height: 42px; border-radius: 13px; }
  .aql .appsav-elem__ikon .ikon { width: 22px; height: 22px; }
  .appsav-elem b { font-size: 1rem; }
  .appsav-elem:nth-child(n) { --e: 0px; --s: 34px; }
  .appsav-elem:nth-child(5n+2) { --e: 26px; --s: -30px; } .appsav-elem:nth-child(5n+3) { --e: 8px; --s: 60px; }
  .appsav-elem:nth-child(5n+4) { --e: 34px; --s: -46px; } .appsav-elem:nth-child(5n) { --e: 14px; --s: 26px; }
  .appsav__zaro { display: none; }
}

/* A /app letöltőoldal (nezetek/aqualog/app_oldal.php). A nyitórész a fenti blokk; ott a gombok a cím alatt állnak, nincs kilógás felül. */
.appsav--oldal .appsav__test { padding: clamp(26px, 4vw, 56px) 0 0; }
.appsav--oldal .appsav__szoveg { display: flex; flex-direction: column; }
.appsav--oldal .appsav__felhivas { order: 1; margin-bottom: 20px; }
.appsav--oldal .aql-bevezeto { order: 2; }
.appsav--oldal .aql-fej h1 { position: relative; margin: 0; font-size: clamp(2.3rem, 1.2rem + 3vw, 4.4rem); line-height: 1.03; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.appsav--oldal .appsav-tudas { padding-bottom: clamp(30px, 4vw, 56px); }
.appoldal__tovabb { display: inline-block; margin-top: 18px; color: var(--aql-teal); font-weight: 800; text-underline-offset: 4px; }
.appoldal-terkep { display: flex; flex-direction: column; border-radius: 0 0 12.5cqw 12.5cqw; background: #EEF3EC; }
.appoldal-terkep svg { display: block; flex: 1 1 auto; min-height: 0; width: 100%; }
.appoldal-terkep__alap { fill: #E6EFE3; }
.appoldal-terkep__viz { fill: #BFE0E8; }
.appoldal-terkep__utak path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.appoldal-terkep__pont circle { fill: #22605C; stroke: #fff; stroke-width: 2.5; }
.appoldal-terkep__pont--2 circle { fill: #E0A43A; } .appoldal-terkep__pont--4 circle { fill: #3C948D; }
.appoldal-terkep .appoldal-terkep__gyuru { fill: rgba(34, 96, 92, .24); stroke: none; transform-box: fill-box; transform-origin: center; }
.appoldal-terkep__lista { display: grid; gap: 6px; padding: 8px; color: #14211E; }
.appoldal-terkep__lista p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 12px; background: #fff; font-size: 12px; line-height: 1.2; box-shadow: 0 2px 6px rgba(13, 26, 23, .06); }
.appoldal-terkep__lista b { flex: 1 1 auto; min-width: 0; }
.appoldal-terkep__lista small { color: #5B6B66; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.aql--mozgas .appoldal-terkep__gyuru { animation: appoldal-pulzus 2.6s ease-out infinite; }
.aql--mozgas .appoldal-terkep__pont--2 .appoldal-terkep__gyuru { animation-delay: .7s; }
.aql--mozgas .appoldal-terkep__pont--3 .appoldal-terkep__gyuru { animation-delay: 1.3s; }
.aql--mozgas .appoldal-terkep__pont--4 .appoldal-terkep__gyuru { animation-delay: 1.9s; }
@keyframes appoldal-pulzus { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.appoldal-telepites .aql-bevezeto { margin-bottom: 26px; }
.appoldal-lepesek { display: grid; gap: 18px; }
.appoldal-kartya { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 32px); border-radius: 28px; background: #fff; color: #14211E; box-shadow: 0 30px 60px rgba(6, 20, 18, .28); }
.aql .appoldal-kartya__cim { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: #0F3038; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.02em; }
.appoldal-kartya ol { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: lepes; }
.appoldal-kartya li { position: relative; min-height: 34px; padding-left: 46px; font-size: 1.04rem; line-height: 1.45; counter-increment: lepes; }
.appoldal-kartya li::before { content: counter(lepes); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E3F1EE; color: #22605C; font-weight: 900; }
.aql-szekcio--zold .appoldal-kartya p.appoldal-kartya__megj { flex: 1 1 auto; margin: 0 0 18px; color: #5B6B66; font-size: .9rem; }
.appoldal-kartya .appsav-gomb { flex: 0 0 auto; background: #0F3038; color: #fff; }
.appoldal-kartya .appsav-gomb:hover { background: #22605C; }
.appoldal-kartya .appsav-gomb .appsav-gomb__ikon { background: rgba(255, 255, 255, .14); }
.appoldal-kartya .appsav-gomb__szoveg small { color: rgba(255, 255, 255, .74); }
.aql--mozgas .appoldal-kartya .appsav-gomb { animation: none; }
.appoldal-telepites__gep { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-weight: 600; }
.appoldal-telepites__gep .ikon { color: var(--aql-menta); }
.appoldal .aql-zaro .appsav-gombok { max-width: 540px; }
@media (min-width: 760px) { .appoldal-lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .appsav--oldal .appsav-tel--kozep { top: 0; }
  .appsav--oldal .appsav-tel--bal { top: 44px; }
  .appsav--oldal .appsav-tel--jobb { top: 96px; }
  .appsav--oldal .appsav__szoveg { padding-bottom: 40px; }
  .appsav--oldal .appsav-tudas { margin-top: -40px; }
}