/* Üzletkereső webes „Radar” bevezetője (STORE_COMMUNITY_PWA_SYSTEM §47.8/A; projektgazdai választás, 2026-10-22). Csak a
   megjelenés (kereső, szűrők, térkép, lista és Akciók nézet közös); a PWA-t nem érinti. Mozgás csak `.ukk-mozgas` alatt
   (js/kereso-kinezet.js; csökkentett mozgásnál nem kapcsol be). Oldalsó / felső hangsúlycsík nincs (§27). */

/* ---------- Közös ---------- */
.ukk-oldal main { overflow-x: clip; }
.uk.uk--a { padding-top: 0; }
.uk--a .uk__keret { margin-top: 0; }
.ukk-hos { position: relative; margin: 0 calc(-1 * var(--kilogas, 24px)); padding: clamp(38px, 5vw, 72px) var(--kilogas, 24px) clamp(30px, 4vw, 48px); overflow: hidden; }
.ukk-hos__belso { position: relative; z-index: 1; }
.ukk-hos__szoveg { display: grid; justify-items: start; min-width: 0; }
.ukk-felcim { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(60, 148, 141, .12); color: var(--aq-accent-sotetebb); font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ukk-felcim__ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; }
.ukk-felcim__ikon .ikon { width: 16px; height: 16px; }
.ukk-cim { margin: 0 0 14px; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.ukk-kiemel { background: linear-gradient(transparent 60%, rgba(159, 211, 201, .6) 60%, rgba(159, 211, 201, .6) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ukk-lead { max-width: 58ch; margin: 0 0 22px; font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); line-height: 1.6; }
.ukk-szamok { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.ukk-szamok li { display: grid; min-width: 116px; padding: 12px 18px; border-radius: 18px; line-height: 1.15; }
.ukk-szamok b { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ukk-szamok span { font-size: .84rem; font-weight: 700; opacity: .8; }
.ukk-nezetek { width: min(100%, 420px); }

/* ---------- A: Radar ---------- */
.ukk-hos--a { padding-bottom: clamp(80px, 8vw, 110px); color: #fff;
  background: radial-gradient(55% 85% at 76% 42%, rgba(60, 148, 141, .38), transparent 66%), linear-gradient(150deg, #0A2226 0%, #0F3A3E 55%, #14514B 100%); }
.ukk-hos--a .ukk-hos__belso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.ukk-hos--a .ukk-felcim { background: rgba(255, 255, 255, .12); color: #9FD3C9; }
.ukk-hos--a .ukk-felcim__ikon { background: #9FD3C9; color: #0A2226; }
.ukk-hos--a .ukk-cim { color: #fff; }
.ukk-hos--a .ukk-kiemel { background-image: linear-gradient(transparent 62%, rgba(159, 211, 201, .42) 62%, rgba(159, 211, 201, .42) 92%, transparent 92%); }
.ukk-hos--a .ukk-lead { color: rgba(255, 255, 255, .86); }
.ukk-hos--a .ukk-szamok li { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ukk-hos--a .ukk-szamok b { color: #9FD3C9; }
.ukk-hos--a .ukk-nezetek { background: rgba(255, 255, 255, .1); }
.ukk-hos--a .ukk-nezetek button { color: #fff; }
.ukk-hos--a .ukk-nezetek button[aria-selected="true"] { background: #9FD3C9; color: #0A2226; }
.ukk-radar { position: relative; aspect-ratio: 1040 / 658; }
.ukk-radar__terkep { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.ukk-p { fill: rgba(159, 211, 201, .5); }
.ukk-p--szikra { fill: rgba(220, 245, 238, .9); }
.ukk-p--akcio { fill: #F08A3C; }
/* A körök és a sugár középpontja Budapest a vetületen (x 43,7%, y 39,7%). */
.ukk-radar__kor, .ukk-radar__sugar { position: absolute; left: 43.7%; top: 39.7%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.ukk-radar__kor { width: 28%; border: 1px solid rgba(159, 211, 201, .22); }
.ukk-radar__kor:nth-child(2) { width: 58%; }
.ukk-radar__kor:nth-child(3) { width: 90%; border-color: rgba(159, 211, 201, .14); }
.ukk-radar__sugar { width: 125%; background: conic-gradient(from 0deg, rgba(159, 211, 201, .32), rgba(159, 211, 201, .08) 40deg, transparent 75deg, transparent);
  -webkit-mask-image: radial-gradient(circle, #000 0 58%, transparent 71%); mask-image: radial-gradient(circle, #000 0 58%, transparent 71%); opacity: .9; }
.ukk-radar__jel { position: absolute; right: 2%; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 34, 38, .7); color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 700; }
.ukk-radar__pont { width: 10px; height: 10px; border-radius: 50%; background: #F08A3C; box-shadow: 0 0 0 4px rgba(240, 138, 60, .25); }
.uk--a .uk-vezerlo { position: relative; z-index: 2; margin-top: calc(-1 * clamp(64px, 6vw, 86px)); padding: 16px; border-radius: 24px; background: var(--td-felulet, #fff);
  box-shadow: 0 26px 60px rgba(10, 34, 38, .22); }

/* ---------- Mozgás ---------- */
.ukk-mozgas .ukk-hos__szoveg > * { animation: ukk-be .7s cubic-bezier(.2, .8, .2, 1) both; }
.ukk-mozgas .ukk-hos__szoveg > :nth-child(2) { animation-delay: .08s; }
.ukk-mozgas .ukk-hos__szoveg > :nth-child(3) { animation-delay: .16s; }
.ukk-mozgas .ukk-hos__szoveg > :nth-child(n+4) { animation-delay: .24s; }
.ukk-mozgas .ukk-kiemel { animation: ukk-kiemel 1.2s .45s cubic-bezier(.2, .8, .2, 1) both; }
.ukk-mozgas .ukk-radar__sugar { animation: ukk-forog 7s linear infinite; }
.ukk-mozgas .ukk-radar__kor { animation: ukk-kor 4.5s ease-out infinite; }
.ukk-mozgas .ukk-radar__kor:nth-child(2) { animation-delay: 1.5s; } .ukk-mozgas .ukk-radar__kor:nth-child(3) { animation-delay: 3s; }
.ukk-mozgas .ukk-radar__terkep { animation: ukk-terkep 1.4s .2s cubic-bezier(.2, .8, .2, 1) both; }
.ukk-mozgas .ukk-p--akcio, .ukk-mozgas .ukk-p--szikra { transform-box: fill-box; transform-origin: center; }
.ukk-mozgas .ukk-p--akcio { animation: ukk-luktet 1.8s ease-in-out infinite; }
.ukk-mozgas .ukk-p--szikra { animation: ukk-szikra 3.6s ease-in-out infinite; }
.ukk-mozgas .ukk-p--1 { animation-delay: .6s; } .ukk-mozgas .ukk-p--2 { animation-delay: 1.2s; } .ukk-mozgas .ukk-p--3 { animation-delay: 1.8s; }
.ukk-mozgas .ukk-p--4 { animation-delay: 2.4s; } .ukk-mozgas .ukk-p--5 { animation-delay: 3s; }
.ukk-mozgas .ukk-radar__pont { animation: ukk-pulzus 1.8s ease-out infinite; }
@keyframes ukk-be { from { opacity: 0; transform: translateY(16px); } }
@keyframes ukk-kiemel { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes ukk-forog { to { rotate: 360deg; } }
@keyframes ukk-kor { 0% { scale: .7; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1.12; opacity: 0; } }
@keyframes ukk-terkep { from { opacity: 0; transform: scale(.94); } }
@keyframes ukk-luktet { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: .55; } }
@keyframes ukk-szikra { 0%, 70%, 100% { transform: scale(1); opacity: .5; } 82% { transform: scale(1.8); opacity: 1; } }
@keyframes ukk-pulzus { 0% { box-shadow: 0 0 0 0 rgba(240, 138, 60, .5); } 100% { box-shadow: 0 0 0 12px rgba(240, 138, 60, 0); } }

/* ---------- Keskeny kijelző ---------- */
@media (max-width: 899px) {
  .ukk-hos--a .ukk-hos__belso { grid-template-columns: minmax(0, 1fr); }
  .ukk-radar { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 599px) {
  .ukk-szamok li { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .ukk-szamok b { font-size: 1.35rem; }
  .ukk-nezetek { width: 100%; }
  .uk--a .uk-vezerlo { padding: 12px; }
}