/* Vállalati hirdetések (ADVERTISING_SYSTEM.md §24, §36): előre foglalt hely (aspect-ratio → minimális CLS), torzításmentes
   kreatív, jól látható „Hirdetés” jelölés, a lista elemeitől megkülönböztethető reklámkomponens. Mobil ≤ 767 px. */

.reklam-hely {
  margin: 1.5rem auto;
  max-width: 100%;
  text-align: center;
}
.reklam-hely[hidden] { display: none; }
.reklam-hely__keret {
  margin: 0 auto;
  max-width: 100%;
  background: var(--aq-paper-meleg, var(--td-felulet-2, #f4f1ea));
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.reklam-hely--kitoltve .reklam-hely__keret { background: transparent; aspect-ratio: auto; }

.reklam-cimke {
  display: block;
  margin: 0 0 .25rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aq-muted, var(--td-halk, #5b6662));
  text-align: left;
}
.reklam-hely > .reklam-cimke { display: none; }
.reklam-hely:not(.reklam-hely--kitoltve) > .reklam-cimke { display: block; max-width: 100%; }

.reklam {
  display: block;
  color: inherit;
  text-decoration: none;
}
.reklam img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-xs, 4px);
}
.reklam:focus-visible { outline: 3px solid var(--aq-accent, #1f7a6d); outline-offset: 3px; }

/* Foglalt hely eszközönként (az első konfigurált méret): mobil */
@media (max-width: 767.98px) {
  .reklam-hely--nincs-mobil, .reklam-hely--oldalsav { display: none; }
  .reklam-m--320x50 .reklam-hely__keret { aspect-ratio: 320 / 50; width: 320px; }
  .reklam-m--320x100 .reklam-hely__keret { aspect-ratio: 320 / 100; width: 320px; }
  .reklam-m--300x250 .reklam-hely__keret { aspect-ratio: 300 / 250; width: 300px; }
  .reklam-m--728x90 .reklam-hely__keret { aspect-ratio: 728 / 90; width: 728px; }
}
/* desktop */
@media (min-width: 768px) {
  .reklam-hely--nincs-desktop { display: none; }
  .reklam-d--728x90 .reklam-hely__keret { aspect-ratio: 728 / 90; width: 728px; }
  .reklam-d--970x250 .reklam-hely__keret { aspect-ratio: 970 / 250; width: 970px; }
  .reklam-d--300x250 .reklam-hely__keret { aspect-ratio: 300 / 250; width: 300px; }
  .reklam-d--300x600 .reklam-hely__keret { aspect-ratio: 300 / 600; width: 300px; }
  .reklam-d--320x100 .reklam-hely__keret { aspect-ratio: 320 / 100; width: 320px; }
}
.reklam-hely--banner { padding: 0 var(--gutter, 16px); }
.reklam-hely--tartalom { margin: 2rem auto; }

/* Lista közé szúrt reklám: a lista rácsában egy elem helyén, de saját, keretezett reklámkártya. */
.reklam-elem {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem;
  border: 1px dashed var(--aq-line, var(--td-keret, #d9d4c7));
  border-radius: var(--radius-md, 10px);
  background: var(--aq-paper-meleg, var(--td-felulet-2, #f4f1ea));
  min-width: 0;
}
.reklam-elem .reklam-cimke { margin-bottom: .4rem; }
.reklam-elem .reklam img { width: auto; max-width: 100%; }
.reklam-elem--store_list_inline { margin: .25rem 0; }
.akk-lista > .reklam-elem, .pt-racs > .reklam-elem { align-self: stretch; }

/* Popup: desktopon középre igazított, mobilon alsó lap; könnyen bezárható. */
.reklam-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(13, 26, 23, .55);
  animation: reklam-be .2s ease-out;
}
.reklam-popup__doboz {
  position: relative;
  max-width: min(800px, 100%);
  max-height: calc(100dvh - 2rem);
  padding: 2.75rem .75rem .75rem;
  background: var(--aq-surface, var(--td-felulet, #fff));
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-raised, 0 12px 40px rgba(0, 0, 0, .25));
  overflow: auto;
}
.reklam-popup__doboz .reklam img { max-height: calc(100dvh - 7rem); width: auto; }
.reklam-popup__bezar {
  position: absolute;
  top: .25rem;
  right: .25rem;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aq-text, var(--td-szoveg, #10201c));
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.reklam-popup__bezar:focus-visible { outline: 3px solid var(--aq-accent, #1f7a6d); }
@media (max-width: 767.98px) {
  .reklam-popup { align-items: flex-end; padding: 0; }
  .reklam-popup__doboz { width: 100%; max-width: 100%; border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  .reklam-popup__doboz .reklam img { width: 100%; max-height: 60dvh; object-fit: contain; }
}
@keyframes reklam-be { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reklam-popup { animation: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Saját „Hirdess nálunk” banner (fallback, ADVERTISING_SYSTEM §36.10): reszponzív HTML/CSS, a méretosztály dönti el az
   elrendezést; a szövegméret a banner szélességéhez kötött (container query), így minden helyen arányos és olvasható.
   --------------------------------------------------------------------------------------------------------------- */
.sajat {
  --s-bg1: #133b2d; --s-bg2: #2c6a4e; --s-ink: #fff; --s-halvany: rgba(255, 255, 255, .84); --s-jel: #bfe6d3;
  --s-cta-bg: #f6e9c8; --s-cta-ink: #133b2d;
  --s-hullam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C160 104 360 8 600 52s450 46 600 6v62H0z' fill='%23fff' fill-opacity='.10'/%3E%3Cpath d='M0 88c200 30 400-30 600-6s400 34 600 6v32H0z' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "jel szoveg cta";
  align-items: center;
  column-gap: 3%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  color: var(--s-ink);
  font-family: var(--betu, inherit);
  text-align: left;
  text-decoration: none;
  background:
    var(--s-hullam) left bottom / 100% 46% no-repeat,
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, .18) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 34%, rgba(255, 255, 255, .13) 0 3px, transparent 4px),
    radial-gradient(circle at 83% 42%, rgba(255, 255, 255, .10) 0 2px, transparent 3px),
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(125deg, var(--s-bg1), var(--s-bg2));
}
.sajat--turkiz { --s-bg1: #0a4a50; --s-bg2: #188a88; --s-jel: #b9ece4; --s-cta-bg: #f4f1ea; --s-cta-ink: #0a4a50; }
.sajat--kek { --s-bg1: #0e2c48; --s-bg2: #1f5d8c; --s-jel: #bcd8f2; --s-cta-bg: #ffd88a; --s-cta-ink: #0e2c48; }
.sajat--homok {
  --s-bg1: #efe0c2; --s-bg2: #faf3e4; --s-ink: #173d30; --s-halvany: #3d5a4f; --s-jel: #2c6a4e; --s-cta-bg: #1f5c46; --s-cta-ink: #fff;
  --s-hullam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C160 104 360 8 600 52s450 46 600 6v62H0z' fill='%231f5c46' fill-opacity='.10'/%3E%3Cpath d='M0 88c200 30 400-30 600-6s400 34 600 6v32H0z' fill='%231f5c46' fill-opacity='.08'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(31, 92, 70, .14);
}
.sajat:focus-visible { outline: 3px solid var(--aq-accent, #1f7a6d); outline-offset: 3px; }
.sajat__jel { grid-area: jel; display: flex; color: var(--s-jel); }
.sajat__logo { display: block; width: 100%; height: auto; }
.sajat__szoveg { grid-area: szoveg; display: grid; gap: .35em; min-width: 0; }
.sajat__cim, .sajat__kieg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sajat__cim { font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.sajat__kieg { color: var(--s-halvany); line-height: 1.3; font-weight: 500; }
.sajat__cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border-radius: 999px;
  background: var(--s-cta-bg);
  color: var(--s-cta-ink);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: transform .15s ease;
}
.sajat:hover .sajat__cta { transform: translateY(-1px); }

/* Vízszintes sávok */
.sajat--728x90 { aspect-ratio: 728 / 90; padding: 0 3%; }
.sajat--728x90 .sajat__jel { width: 8cqw; }
.sajat--728x90 .sajat__cim { font-size: 2.75cqw; -webkit-line-clamp: 1; }
.sajat--728x90 .sajat__kieg { font-size: 1.85cqw; -webkit-line-clamp: 1; }
.sajat--728x90 .sajat__cta { font-size: 1.9cqw; padding: 1.15cqw 2.2cqw; }
.sajat--970x250 { aspect-ratio: 970 / 250; padding: 0 5%; column-gap: 4%; }
.sajat--970x250 .sajat__jel { width: 13cqw; }
.sajat--970x250 .sajat__cim { font-size: 3.5cqw; }
.sajat--970x250 .sajat__kieg { font-size: 2cqw; }
.sajat--970x250 .sajat__cta { font-size: 1.95cqw; padding: 1.3cqw 2.6cqw; }
.sajat--320x50 { aspect-ratio: 320 / 50; padding: 0 3%; column-gap: 3%; }
.sajat--320x50 .sajat__jel { width: 9cqw; }
.sajat--320x50 .sajat__cim { font-size: 4.4cqw; -webkit-line-clamp: 1; }
.sajat--320x50 .sajat__cta { font-size: 3.7cqw; padding: 1.5cqw 2.6cqw; }
.sajat--320x100 { aspect-ratio: 320 / 100; padding: 0 4.5%; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "jel szoveg" "jel cta"; align-content: center; row-gap: 2.6cqw; }
.sajat--320x100 .sajat__jel { width: 17cqw; }
.sajat--320x100 .sajat__kieg { display: none; }
.sajat--320x100 .sajat__cim { font-size: 5.3cqw; }
.sajat--320x100 .sajat__cta { font-size: 4cqw; padding: 1.6cqw 3.4cqw; }

/* Álló / doboz méretek: középre rendezett oszlop */
.sajat--300x250, .sajat--300x600, .sajat--600x400, .sajat--800x600 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "jel" "szoveg" "cta";
  align-content: center;
  justify-items: center;
  text-align: center;
}
.sajat--300x250 .sajat__cta, .sajat--300x600 .sajat__cta, .sajat--600x400 .sajat__cta, .sajat--800x600 .sajat__cta { justify-self: center; }
.sajat--300x250 { aspect-ratio: 300 / 250; padding: 7% 8%; row-gap: 4.5cqw; }
.sajat--300x250 .sajat__jel { width: 15cqw; }
.sajat--300x250 .sajat__cim { font-size: 7cqw; -webkit-line-clamp: 3; }
.sajat--300x250 .sajat__kieg { font-size: 4.5cqw; -webkit-line-clamp: 3; }
.sajat--300x250 .sajat__cta { font-size: 4.9cqw; padding: 2.8cqw 5.4cqw; }
.sajat--300x600 { aspect-ratio: 300 / 600; padding: 14% 9%; row-gap: 9cqw; }
.sajat--300x600 .sajat__jel { width: 34cqw; }
.sajat--300x600 .sajat__cim { font-size: 9.5cqw; -webkit-line-clamp: 4; }
.sajat--300x600 .sajat__kieg { font-size: 5.8cqw; -webkit-line-clamp: 4; }
.sajat--300x600 .sajat__cta { font-size: 5.6cqw; padding: 3.4cqw 6.4cqw; }
.sajat--600x400 { aspect-ratio: 600 / 400; padding: 6% 9%; row-gap: 3cqw; }
.sajat--600x400 .sajat__jel { width: 12cqw; }
.sajat--600x400 .sajat__cim { font-size: 5.6cqw; }
.sajat--600x400 .sajat__kieg { font-size: 3.2cqw; }
.sajat--600x400 .sajat__cta { font-size: 3.2cqw; padding: 1.9cqw 3.8cqw; }
.sajat--800x600 { aspect-ratio: 800 / 600; padding: 8% 10%; row-gap: 3cqw; }
.sajat--800x600 .sajat__jel { width: 13cqw; }
.sajat--800x600 .sajat__cim { font-size: 5.4cqw; -webkit-line-clamp: 3; }
.sajat--800x600 .sajat__kieg { font-size: 3cqw; }
.sajat--800x600 .sajat__cta { font-size: 2.9cqw; padding: 1.8cqw 3.6cqw; }

/* Elhelyezés: fix helyen a foglalt keretet tölti ki; listában a névleges szélességig; popupban a dobozt. */
.reklam-hely--sajat .reklam-hely__keret { background: transparent; }
.reklam-elem--sajat { padding: .5rem; }
.reklam-elem .sajat--300x250 { width: min(100%, 300px); margin: 0 auto; }
.reklam-elem .sajat--320x100, .reklam-elem .sajat--320x50 { width: min(100%, 320px); margin: 0 auto; }
.reklam-elem .sajat--728x90 { width: min(100%, 728px); margin: 0 auto; }
.reklam-popup__doboz .sajat--600x400 { width: min(600px, calc(100vw - 3.5rem)); }
.reklam-popup__doboz .sajat--800x600 { width: min(800px, calc(100vw - 3.5rem)); }
@media (max-width: 767.98px) {
  .reklam-popup__doboz .sajat { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sajat__cta { transition: none; }
  .sajat:hover .sajat__cta { transform: none; }
}

/* Mobilon a rácsos listákban (pl. kétoszlopos piactér) a beszúrt reklám a teljes sort kitölti, hogy ne szoruljon keskeny cellába. */
@media (max-width: 767.98px) {
  .reklam-elem { grid-column: 1 / -1; }
}

/* Keskeny (mobil, alsó lapos) popupban a szöveg arányosan nagyobb, hogy olvasható maradjon. */
@container (max-width: 460px) {
  .sajat--600x400 .sajat__cim, .sajat--800x600 .sajat__cim { font-size: 6.6cqw; }
  .sajat--600x400 .sajat__kieg, .sajat--800x600 .sajat__kieg { font-size: 4.2cqw; }
  .sajat--600x400 .sajat__cta, .sajat--800x600 .sajat__cta { font-size: 4.2cqw; padding: 2.4cqw 4.8cqw; }
  .sajat--600x400 .sajat__jel, .sajat--800x600 .sajat__jel { width: 14cqw; }
}

/* ---------- A felugró ablak saját tartaléka: az AquaLog bemutatójának hőse kicsiben (reklam_sajat_popup_html). ---------- */
.reklam-popup__doboz--aqualog { width: min(1000px, 100%); max-width: min(1000px, 100%); padding: 0; overflow: hidden; background: #0F3038; animation: akp-doboz .45s cubic-bezier(.2, .9, .3, 1.1); }
.reklam-popup__doboz--aqualog .reklam-popup__bezar { z-index: 6; top: .5rem; right: .5rem; background: rgba(255, 255, 255, .16); color: #fff; }
.reklam-popup__doboz--aqualog .reklam-popup__bezar:hover { background: rgba(255, 255, 255, .28); }
.reklam-popup__doboz--aqualog .reklam-popup__bezar:focus-visible { outline-color: #fff; }
.akp { position: relative; display: block; max-height: calc(100dvh - 2rem); overflow: hidden auto; color: #fff; text-decoration: none;
  background: radial-gradient(60% 80% at 85% 15%, rgba(159, 211, 201, .3), transparent 62%), linear-gradient(155deg, #0F3038 0%, #22605C 58%, #3F7050 100%); }
.akp:hover, .akp:focus { color: #fff; text-decoration: none; }
.akp:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.akp .ikon { flex: none; width: 1em; height: 1em; }
.akp__hatter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.akp__hatter > i { position: absolute; bottom: -24px; width: 12px; height: 12px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 60%); animation: akp-buborek 11s linear infinite; }
.akp__hatter > i:nth-child(1) { left: 5%; } .akp__hatter > i:nth-child(2) { left: 18%; width: 7px; height: 7px; animation-delay: -3s; }
.akp__hatter > i:nth-child(3) { left: 33%; width: 16px; height: 16px; animation-delay: -6s; } .akp__hatter > i:nth-child(4) { left: 46%; width: 8px; height: 8px; animation-delay: -9s; }
.akp__hatter > i:nth-child(5) { left: 57%; animation-delay: -2s; animation-duration: 14s; } .akp__hatter > i:nth-child(6) { left: 70%; width: 18px; height: 18px; animation-delay: -7s; animation-duration: 13s; }
.akp__hatter > i:nth-child(7) { left: 84%; width: 8px; height: 8px; animation-delay: -4s; } .akp__hatter > i:nth-child(8) { left: 95%; width: 14px; height: 14px; animation-delay: -10s; }
.akp__hullam { position: absolute; left: -5%; bottom: 0; width: 110%; height: 56px; animation: akp-hullam 7s ease-in-out infinite alternate; }
.akp__hullam path { fill: rgba(255, 255, 255, .07); }
.akp__racs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "fej szinpad" "graf szinpad" "funkciok szinpad" "also szinpad"; column-gap: 12px; row-gap: 14px; padding: 28px 0 24px 32px; }
.akp__fej { grid-area: fej; display: block; }
.akp__felcim { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #9FD3C9; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.akp__logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.05rem; }
.akp__cim { display: block; margin-bottom: 10px; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.akp__kiemel { background: linear-gradient(transparent 62%, rgba(159, 211, 201, .42) 62%, rgba(159, 211, 201, .42) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: akp-kiemel .9s .35s ease-out both; }
.akp__lead { display: block; color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.4; }

.akp-graf { grid-area: graf; display: block; padding: 10px 14px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .08); }
.akp-graf__fej { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.akp-graf__fulek { display: inline-flex; gap: 4px; }
.akp-ful { padding: 3px 9px; border-radius: 999px; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 800; animation: akp-ful 12s infinite; }
.akp-graf__ertekek { display: grid; text-align: right; }
.akp-graf__ertekek > span { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; grid-area: 1 / 1; }
.akp-graf__ertekek b { font-size: 1.05rem; font-weight: 800; }
.akp-graf__ertekek small { color: #9FD3C9; font-size: .75rem; font-weight: 700; }
.akp-graf__rajz { position: relative; display: block; height: 76px; }
.akp-graf__sor { position: absolute; inset: 0; display: block; }
.akp-graf__sor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.akp-graf__zona { fill: rgba(159, 211, 201, .13); }
.akp-graf__terulet { fill: rgba(159, 211, 201, .16); }
.akp-graf__vonal { fill: none; stroke: #BFEBE0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.akp-graf__pont { position: absolute; right: 1.1%; width: 10px; height: 10px; margin: -5px -5px 0 0; border: 2px solid #22605C; border-radius: 50%; background: #fff; animation: akp-pont 2s ease-in-out infinite; }
.akp-sor--1 .akp-graf__pont { top: 47.9%; } .akp-sor--2 .akp-graf__pont { top: 42.9%; } .akp-sor--3 .akp-graf__pont { top: 45.4%; }
.akp-sor { animation: akp-sorozat 12s infinite; }
.akp-graf__sor { animation: akp-sorozat 12s infinite, akp-rajz 12s infinite; }
.akp-sor--2 { animation-delay: -8s; } .akp-sor--3 { animation-delay: -4s; }

.akp__funkciok { grid-area: funkciok; display: flex; flex-wrap: wrap; gap: 6px; }
.akp-cimke { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8125rem; font-weight: 700; animation: akp-cimke .4s ease-out both; }
.akp-cimke .ikon { color: #9FD3C9; font-size: .95rem; }
.akp-cimke:nth-child(2) { animation-delay: .06s; } .akp-cimke:nth-child(3) { animation-delay: .12s; } .akp-cimke:nth-child(4) { animation-delay: .18s; }
.akp-cimke:nth-child(5) { animation-delay: .24s; } .akp-cimke:nth-child(6) { animation-delay: .3s; } .akp-cimke:nth-child(7) { animation-delay: .36s; } .akp-cimke:nth-child(8) { animation-delay: .42s; }
.akp__also { grid-area: also; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.akp__gomb { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px; border-radius: 16px; background: #fff; color: #22605C; font-size: 1.04rem; font-weight: 800; animation: akp-gomb 2.6s ease-in-out infinite; transition: background-color .15s; }
.akp:hover .akp__gomb { background: #EAF4F0; }
.akp__jelek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; color: rgba(255, 255, 255, .85); font-size: .8125rem; font-weight: 600; }
.akp__jelek .ikon { color: #9FD3C9; }
.akp__jelek .ikon:not(:first-child) { margin-left: 7px; }

.akp__szinpad { grid-area: szinpad; position: relative; display: block; min-height: min(490px, 72dvh); }
.akp__folt { position: absolute; left: 50%; top: 45%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; background: radial-gradient(circle, rgba(159, 211, 201, .42), transparent 66%); animation: akp-lukt 6s ease-in-out infinite; }
.akp-tel { position: absolute; display: block; container-type: inline-size; }
.akp-tel--elso { z-index: 2; right: 38px; top: 0; width: min(216px, 32dvh); animation: akp-telefon .6s .1s cubic-bezier(.2, .9, .3, 1.1) both; }
.akp-tel--hatso { z-index: 1; left: 8px; top: 34px; width: min(186px, 27dvh); opacity: .92; animation: akp-telefon-hatso .6s .25s cubic-bezier(.2, .9, .3, 1.1) both; }
.akp-tel__keret { display: block; padding: 3.1cqw; border-radius: 15.5cqw; background: linear-gradient(145deg, #23302D, #0B1513 45%, #1A2623); box-shadow: 0 26px 54px rgba(6, 20, 18, .5); }
.akp-tel__allapot { position: relative; display: flex; align-items: center; height: 9cqw; padding: 0 7.5cqw; border-radius: 12.5cqw 12.5cqw 0 0; background: #fff; color: #0D1A17; font-size: 4.2cqw; font-weight: 700; }
.akp-tel__allapot::before { content: ""; position: absolute; left: 50%; top: 1.7cqw; width: 26cqw; height: 6.8cqw; margin-left: -13cqw; border-radius: 4cqw; background: #0B1513; }
.akp-tel__sav { display: block; width: 100%; height: auto; background: #fff; }
.akp-tel__sav--lab { border-radius: 0 0 12.5cqw 12.5cqw; }
.akp-tel__kepernyo { position: relative; display: block; overflow: hidden; aspect-ratio: 390 / 690; background: #F2F5F2; }
.akp-tel__tartalom { display: block; width: 100%; height: auto; will-change: transform; animation: akp-gorget 18s ease-in-out infinite; }
.akp-tel--hatso .akp-tel__tartalom { animation-duration: 22s; animation-delay: -5s; }
.akp-tel__erintes { position: absolute; left: 62%; top: 58%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border: 2px solid rgba(255, 255, 255, .95); border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: 0; animation: akp-koppint 6s 1s infinite; }
.akp-tel--hatso .akp-tel__erintes { display: none; }
.akp__jelzesek { display: contents; }
.akp-jelzes { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; color: #0D1A17; box-shadow: 0 16px 34px rgba(13, 26, 23, .28), 0 2px 6px rgba(13, 26, 23, .1); line-height: 1.22; white-space: nowrap; animation: akp-jelzes-be .5s both, akp-lebeg 5s ease-in-out infinite; }
.akp-jelzes > .ikon { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: #E3F1EE; color: #22605C; }
.akp-jelzes > span { display: grid; }
.akp-jelzes b { font-size: .86rem; font-weight: 800; }
.akp-jelzes small { color: #5B6B66; font-size: .75rem; font-weight: 600; }
.akp-jelzes--siker { right: 256px; top: 52px; animation-delay: .7s, 1.2s; }
.akp-jelzes--siker > .ikon { background: #DCEFE2; color: #2E7D4F; }
.akp-jelzes--figyel { right: 12px; top: 232px; animation-delay: 1.1s, 1.6s; }
.akp-jelzes--figyel > .ikon { background: #FBEBD3; color: #9A5B12; }
.akp-jelzes--ertesit { right: 262px; bottom: 58px; animation-delay: 1.5s, 2s; }
.akp-jelzes--ertesit > .ikon { background: #E3ECF8; color: #2C5F9E; }

@media (max-width: 899.98px) {
  .reklam-popup__doboz--aqualog { width: 100%; max-width: 100%; }
  .akp { max-height: 94dvh; }
  .akp__racs { grid-template-columns: clamp(112px, min(36vw, 20dvh), 176px) minmax(0, 1fr); grid-template-areas: "fej fej" "szinpad graf" "szinpad jelzesek" "funkciok funkciok" "also also"; grid-template-rows: auto auto 1fr auto auto; gap: 10px 12px; padding: 16px 16px 14px; }
  .akp__felcim { margin-bottom: 8px; padding-right: 44px; font-size: .6875rem; letter-spacing: .06em; }
  .akp__logo { width: 26px; height: 26px; font-size: .95rem; }
  .akp__cim { margin-bottom: 0; font-size: clamp(1.3rem, 5.8vw, 1.9rem); }
  .akp__lead { display: none; }
  .akp-graf { padding: 8px 10px 6px; border-radius: 14px; }
  .akp-graf__fej { display: grid; gap: 4px; }
  .akp-graf__ertekek > span { justify-content: flex-start; }
  .akp-ful { padding: 2px 7px; font-size: .72rem; }
  .akp-graf__rajz { height: 58px; }
  .akp__szinpad { min-height: 0; }
  .akp__folt { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .akp-tel--hatso { display: none; }
  .akp-tel--elso { position: relative; right: auto; width: 100%; }
  .akp__jelzesek { grid-area: jelzesek; display: grid; align-content: start; gap: 8px; }
  .akp-jelzes { position: static; padding: 6px 8px 6px 6px; border-radius: 12px; white-space: normal; animation: akp-jelzes-be .5s both; }
  .akp-jelzes > .ikon { width: 28px; height: 28px; padding: 6px; border-radius: 9px; }
  .akp-jelzes b { font-size: .78rem; } .akp-jelzes small { font-size: .6875rem; }
  .akp-jelzes--ertesit { display: none; }
  .akp-cimke { padding: 4px 9px; font-size: .75rem; }
  .akp__also { gap: 6px 12px; }
  .akp__gomb { width: 100%; min-height: 50px; }
  .akp__jelek { justify-content: center; width: 100%; font-size: .75rem; }
}
@media (max-width: 767.98px) {
  .akp { max-height: 92dvh; }
  .reklam-popup__doboz--aqualog { max-height: 92dvh; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .akp-jelzes--ertesit { display: flex; }
}
@keyframes akp-doboz { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes akp-buborek { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .85; } 50% { transform: translate(9px, -300px); } 88% { opacity: .55; } 100% { opacity: 0; transform: translate(-5px, -620px); } }
@keyframes akp-hullam { from { transform: translateX(-2.5%) scaleY(1); } to { transform: translateX(2.5%) scaleY(1.2); } }
@keyframes akp-kiemel { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes akp-sorozat { 0%, 30% { opacity: 1; } 33.4%, 96.6% { opacity: 0; } 100% { opacity: 1; } }
@keyframes akp-rajz { 0% { clip-path: inset(-10px 100% -10px -10px); } 18%, 100% { clip-path: inset(-10px -10px -10px -10px); } }
@keyframes akp-pont { 0%, 100% { box-shadow: 0 0 0 0 rgba(191, 235, 224, .7); } 60% { box-shadow: 0 0 0 9px rgba(191, 235, 224, 0); } }
@keyframes akp-ful { 0%, 30% { background: #fff; color: #22605C; } 33.4%, 96.6% { background: transparent; color: rgba(255, 255, 255, .7); } 100% { background: #fff; color: #22605C; } }
@keyframes akp-cimke { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes akp-gomb { 0%, 100% { box-shadow: 0 10px 26px rgba(13, 26, 23, .3), 0 0 0 0 rgba(255, 255, 255, .5); } 50% { box-shadow: 0 10px 26px rgba(13, 26, 23, .3), 0 0 0 10px rgba(255, 255, 255, 0); } }
@keyframes akp-lukt { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes akp-telefon { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes akp-telefon-hatso { from { opacity: 0; transform: translateY(26px) rotate(0); } to { opacity: .92; transform: rotate(-4deg); } }
@keyframes akp-gorget { 0%, 8% { transform: translateY(0); } 46%, 56% { transform: translateY(-62%); } 94%, 100% { transform: translateY(0); } }
@keyframes akp-koppint { 0%, 8% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } 22% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes akp-jelzes-be { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes akp-lebeg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .reklam-popup__doboz--aqualog, .akp__hatter > i, .akp__hullam, .akp__kiemel, .akp-ful, .akp-graf__pont, .akp-cimke, .akp__gomb, .akp__folt, .akp-tel, .akp-tel__tartalom, .akp-tel__erintes, .akp-jelzes { animation: none; }
  .akp__hatter > i { display: none; }
  .akp-sor, .akp-graf__sor { animation: none; }
  .akp-sor--2, .akp-sor--3 { opacity: 0; }
  .akp-ful.akp-sor--1 { background: #fff; color: #22605C; }
  .akp-ful.akp-sor--2, .akp-ful.akp-sor--3 { opacity: 1; }
  .akp-tel--hatso { transform: rotate(-4deg); }
}