/* =========================================================================
   circle.choir – arculati és komponensréteg
   Stackbyte-vizuális világ · Cunnet-szerkezet · Bootstrap 5.2.3 rács
   Betöltési sorrend: bootstrap.min.css → main.css → spacing.css → EZ
   ========================================================================= */

:root {
  --cc-bg: #0d1117;
  --cc-bg-soft: #111827;
  --cc-text: #f3f4f6;
  --cc-muted: #9ca3af;
  --cc-dim: #6b7280;

  --cc-accent: #06b6d4;
  --cc-accent-2: #22d3ee;
  --cc-accent-3: #818cf8;

  --cc-card-bg: rgba(255, 255, 255, .038);
  --cc-card-bg-hover: rgba(255, 255, 255, .07);
  --cc-card-line: rgba(255, 255, 255, .08);
  --cc-card-line-hover: rgba(255, 255, 255, .18);

  --cc-radius: 24px;
  --cc-ease: cubic-bezier(.22, 1, .36, 1);

  --cc-ff-display: 'Sequel Sans Heavy Disp', 'Sequel Sans Bold Head', sans-serif;
  --cc-ff-head: 'Sequel Sans Semi Bold Head', 'Sequel Sans Bold Head', sans-serif;
  --cc-ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- alap ---------- */

/* ==========================================================================
   SÖTÉT FELÜLET — AZ OPERÁCIÓS RENDSZERNEK IS SZÓLNI KELL
   --------------------------------------------------------------------------
   A <select> keretét a böngésző rajzolja, a LENYÍLÓ LISTÁT viszont az
   operációs rendszer. Az OS-nek meg kell mondani, hogy sötét felületről van
   szó; enélkül világos listát rajzol — a mi világos szövegszínünkkel, azaz
   fehéret a fehéren. Windowson pontosan ez történt: a szólamválasztó
   olvashatatlan volt, és ez a JELENTKEZŐK űrlapját is érintette, nemcsak a
   szervezői felületet.

   A `color-scheme` a görgetősávokat, a dátumválasztókat és az automatikus
   kitöltés hátterét is sötétre állítja — azok eddig világosak voltak.

   Az `option` kifejezett színe azért kell mellé, mert néhány böngésző a
   `color-scheme`-et figyelmen kívül hagyja a lenyíló elemeinél.
   ========================================================================== */
.cunnet-dark { color-scheme: dark; }

.cc-page select option,
.cc-page select optgroup {
  background-color: var(--cc-bg-soft);
  color: var(--cc-text);
}

body.cc-page {
  background-color: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-ff-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.cc-page ::selection {
  background: var(--cc-accent);
  color: var(--cc-bg);
}

.cc-page h1, .cc-page h2, .cc-page h3, .cc-page h4 {
  color: var(--cc-text);
}

.cc-page p {
  color: var(--cc-muted);
}

/* ---------- közös segédosztályok ---------- */

.cc-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cc-bg);
}

/* Fényfoltok: nincs filter: blur() – a lágy átmenetet maga a színátmenet adja.
   Az elmosás régebbi grafikus vezérlőn görgetéskor újrarasztereződik, ezért drága. */
.cc-glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.cc-glow--cyan {
  width: 58rem;
  height: 58rem;
  top: -22rem;
  right: -20rem;
  background: radial-gradient(closest-side circle,
      rgba(6, 182, 212, .17) 0%,
      rgba(6, 182, 212, .105) 26%,
      rgba(6, 182, 212, .05) 48%,
      rgba(6, 182, 212, .018) 68%,
      rgba(6, 182, 212, 0) 100%);
}

.cc-glow--indigo {
  width: 62rem;
  height: 62rem;
  bottom: -26rem;
  left: -22rem;
  background: radial-gradient(closest-side circle,
      rgba(129, 140, 248, .14) 0%,
      rgba(129, 140, 248, .085) 26%,
      rgba(129, 140, 248, .04) 48%,
      rgba(129, 140, 248, .015) 68%,
      rgba(129, 140, 248, 0) 100%);
}

.cc-eyebrow {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-family: var(--cc-ff-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-accent-2);
}

.cc-eyebrow span {
  color: var(--cc-dim);
}

.cc-gradient {
  background: linear-gradient(90deg, var(--cc-accent) 0%, var(--cc-accent-2) 60%, var(--cc-accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Ragyogás szűrő nélkül.
   A filter: drop-shadow() a background-clip: text-tel együtt a legdrágább
   párosítás: a böngészőnek előbb a betűk alakjára kell maszkolnia a
   színátmenetet, majd egy széles sugarú elmosást futtatnia rajta – a nagy
   címeknél ez több százezer képpontnyi terület, minden újrarajzoláskor.
   Helyette egy előre kikevert, statikus fényfolt ül a szöveg mögött. */
.cc-gradient--glow {
  position: relative;
  display: inline-block;
}

.cc-gradient--glow::before {
  content: "";
  position: absolute;
  inset: -55% -5%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 46% at 50% 50%,
      rgba(34, 211, 238, .26) 0%,
      rgba(34, 211, 238, .15) 30%,
      rgba(34, 211, 238, .07) 52%,
      rgba(34, 211, 238, .022) 72%,
      rgba(34, 211, 238, 0) 100%);
}

.cc-card {
  position: relative;
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-line);
  border-radius: var(--cc-radius);
  transition: background-color .4s var(--cc-ease), border-color .4s var(--cc-ease), transform .4s var(--cc-ease);
}

.cc-lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cc-muted);
}

.cc-lead strong {
  color: var(--cc-text);
  font-weight: 600;
}

/* =========================================================================
   1. „Hogyan jutunk el a koncertig?"  – Stackbyte #about idővonala
   ========================================================================= */

.cc-journey-area {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.cc-journey__intro {
  position: sticky;
  top: 8.5rem;
}

.cc-journey__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.01em;
  margin-bottom: 1.75rem;
}

.cc-journey__meta {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cc-card-line);
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.cc-journey__meta div span {
  display: block;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: .35rem;
}

.cc-journey__meta div strong {
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  color: var(--cc-text);
}

/* --- idővonal --- */

.cc-timeline {
  position: relative;
  padding-left: 3.25rem;
}

.cc-timeline__rail {
  position: absolute;
  left: 6px;
  top: .75rem;
  bottom: .75rem;
  width: 2px;
  background: var(--cc-card-line);
  border-radius: 2px;
  overflow: hidden;
}

.cc-timeline__rail i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  background: linear-gradient(180deg, var(--cc-accent) 0%, var(--cc-accent-2) 100%);
}

.cc-timeline__item {
  position: relative;
  margin-bottom: 1.5rem;
  perspective: 1200px;
}

.cc-timeline__item:last-child {
  margin-bottom: 0;
}

.cc-timeline__dot {
  position: absolute;
  left: -3.25rem;
  top: 2.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cc-bg);
  border: 2px solid var(--cc-card-line-hover);
  transition: border-color .45s var(--cc-ease), box-shadow .45s var(--cc-ease);
}

.cc-timeline__item.is-active .cc-timeline__dot {
  border-color: var(--cc-accent-2);
  box-shadow: 0 0 24px rgba(34, 211, 238, .55);
}

.cc-timeline__card {
  padding: 2rem;
  transform-style: preserve-3d;
}

.cc-timeline__item:hover .cc-timeline__card {
  background: var(--cc-card-bg-hover);
  border-color: var(--cc-card-line-hover);
}

.cc-timeline__index {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: .8125rem;
  letter-spacing: .16em;
  color: var(--cc-accent-2);
  opacity: .8;
  margin-bottom: .85rem;
}

.cc-timeline__card h3 {
  font-family: var(--cc-ff-head);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: .75rem;
}

.cc-timeline__card p {
  margin: 0;
  font-size: .9875rem;
  line-height: 1.7;
}

/* =========================================================================
   2. „Egy kórus, több helyszín" – Stackbyte #process kártyasora
   ========================================================================= */

.cc-locations-area {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.cc-locations__head {
  max-width: 68rem;
  margin: 0 auto 5.5rem;
  text-align: center;
}

.cc-locations__head .cc-lead {
  max-width: 46rem;
  margin: 0 auto;
}

.cc-locations__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.25rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.cc-marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.5rem;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--cc-ff-display);
  font-size: clamp(4rem, 8vw, 8rem);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .009);
  line-height: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cc-marquee span {
  display: inline-block;
  padding-right: 2rem;
  animation: cc-marquee 46s linear infinite;
}

@keyframes cc-marquee {
  to { transform: translateX(-50%); }
}

/* --- kártyasor --- */

.cc-locations {
  position: relative;
}

.cc-loc-card {
  height: 100%;
  padding: 2rem 1.75rem;
  transform-style: preserve-3d;
}

.cc-loc-card:hover {
  background: var(--cc-card-bg-hover);
  border-color: var(--cc-card-line-hover);
  transform: translateY(-6px);
}

.cc-loc-card__dot {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  margin-bottom: 1.75rem;
  border-radius: 50%;
  background: var(--cc-bg);
  border: 2px solid var(--cc-accent);
  transition: box-shadow .4s var(--cc-ease), background-color .4s var(--cc-ease);
}

.cc-loc-card:hover .cc-loc-card__dot {
  background: var(--cc-accent);
  box-shadow: 0 0 28px rgba(34, 211, 238, .6);
}

.cc-loc-card h3 {
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--cc-dim);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.cc-loc-card h3 em {
  display: block;
  font-style: normal;
  font-family: var(--cc-ff-display);
  font-size: 1.75rem;
  color: var(--cc-text);
  letter-spacing: -.01em;
}

.cc-loc-card dl {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cc-card-line);
}

.cc-loc-card dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: .2rem;
}

.cc-loc-card dd {
  margin: 0 0 .9rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--cc-text);
}

.cc-loc-card dd:last-child {
  margin-bottom: 0;
}

.cc-loc-card__note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--cc-dim);
}

/* =========================================================================
   Képernyőméretek
   ========================================================================= */

/* 1024 px – két oszlop, vízszintes vonal nélkül */
@media (max-width: 1199.98px) {
  .cc-journey-area,
  .cc-locations-area { padding-top: 7rem; padding-bottom: 7rem; }
  .cc-timeline__card { padding: 1.75rem; }
  .cc-locations__head { margin-bottom: 3.5rem; }
}

/* mobil – egy oszlop, függőleges vonal */
@media (max-width: 991.98px) {
  .cc-journey-area,
  .cc-locations-area { padding-top: 5rem; padding-bottom: 5rem; }

  .cc-journey__intro { position: static; margin-bottom: 3rem; }
  .cc-journey__meta { gap: 1.75rem; }

  .cc-timeline { padding-left: 2.25rem; }
  .cc-timeline__rail { left: 5px; }
  .cc-timeline__dot { left: -2.25rem; top: 1.9rem; }
  .cc-timeline__card { padding: 1.5rem; }
  .cc-timeline__card h3 { font-size: 1.3125rem; }

}

@media (max-width: 767.98px) {
  .cc-marquee { display: none; }
  .cc-journey__meta { gap: 1.25rem 2rem; }
  .cc-journey__meta div { flex: 0 0 calc(50% - 1rem); }

  .cc-locations { padding-left: 2.25rem; }



  .cc-loc-card__dot { position: absolute; left: -2.25rem; top: 2.25rem; margin-bottom: 0; }
  .cc-loc-card { padding: 1.5rem; }
  .cc-loc-card h3 em { font-size: 1.5rem; }
}

/* =========================================================================
   Csökkentett mozgás
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cc-timeline__rail i { transform: scaleY(1) !important; }
  .cc-timeline__item .cc-timeline__dot {
    border-color: var(--cc-accent-2);
    box-shadow: 0 0 18px rgba(34, 211, 238, .4);
  }
  .cc-marquee span { animation: none; }
  .cc-timeline__card,
  .cc-loc-card { transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Ugyanaz osztállyal is – a cc-motion-guard.js teszi ki (?nomotion=1 vagy rendszerbeállítás) */
.cc-reduced-motion .cc-timeline__rail i { transform: scaleY(1) !important; }
.cc-reduced-motion.cc-reduced-motion .cc-timeline__dot {
  border-color: var(--cc-accent-2);
  box-shadow: 0 0 18px rgba(34, 211, 238, .4);
}
.cc-reduced-motion .cc-marquee span { animation: none; }
.cc-reduced-motion .cc-timeline__card,
.cc-reduced-motion .cc-loc-card { transform: none !important; }

/* =========================================================================
   FEJLÉC · GOMBOK · GLOBÁLIS ELEMEK
   ========================================================================= */

.cc-skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: var(--cc-accent);
  color: #04202a;
  font-weight: 600;
  transition: top .25s var(--cc-ease);
}
.cc-skip-link:focus { top: 1rem; color: #04202a; }

.cc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 999;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.cc-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2), var(--cc-accent-3));
}

/* --- gombok --- */

.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--cc-ff-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .35s var(--cc-ease), background-color .35s var(--cc-ease),
              border-color .35s var(--cc-ease), color .35s var(--cc-ease), box-shadow .35s var(--cc-ease);
}
.cc-btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }

.cc-btn--accent {
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  color: #04202a;
  box-shadow: 0 8px 32px rgba(6, 182, 212, .22);
}
.cc-btn--accent:hover,
.cc-btn--accent:focus-visible {
  color: #04202a;
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(34, 211, 238, .38);
}

.cc-btn--ghost {
  background: var(--cc-card-bg);
  border-color: var(--cc-card-line);
  color: var(--cc-text);
}
.cc-btn--ghost:hover,
.cc-btn--ghost:focus-visible {
  color: var(--cc-text);
  background: var(--cc-card-bg-hover);
  border-color: var(--cc-card-line-hover);
  transform: translateY(-2px);
}

/* --- fejléc: Cunnet váz, Stackbyte felület --- */

.cc-page .tp-header-area.cc-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99;
  padding: 1.25rem 0;
  background: transparent;
  transition: background-color .4s var(--cc-ease), border-color .4s var(--cc-ease), padding .4s var(--cc-ease);
  border-bottom: 1px solid transparent;
}
.cc-page .tp-header-area.cc-header.is-scrolled {
  padding: .75rem 0;
  background: rgba(13, 17, 23, .82);
  border-bottom-color: var(--cc-card-line);
}

.cc-brand a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.cc-brand img { width: 38px; height: 38px; }
.cc-brand__word {
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--cc-text);
}

.cc-page .tp-main-menu nav > ul > li > a {
  font-family: var(--cc-ff-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--cc-muted);
  padding: 0 1rem;
  transition: color .3s var(--cc-ease);
}
.cc-page .tp-main-menu nav > ul > li > a:hover { color: var(--cc-text); }

.cc-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border: 1px solid var(--cc-card-line);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--cc-muted);
  background: var(--cc-card-bg);
}
.cc-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cc-accent-2);
  box-shadow: 0 0 12px var(--cc-accent-2);
}

.cc-page .tp-btn.cc-btn--accent {
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  color: #04202a;
  border: 0;
}
.cc-page .tp-btn.cc-btn--accent .text-1,
.cc-page .tp-btn.cc-btn--accent .text-2 { color: #04202a; }

.cc-page .tp-menu-bar span { background-color: var(--cc-text); }

/* offcanvas – sötét felület */
.cc-page .tp-offcanvas { background: var(--cc-bg-soft); }
.cc-page .tp-offcanvas-title { color: var(--cc-text); font-family: var(--cc-ff-head); }
.cc-page .tp-offcanvas p,
.cc-page .tp-offcanvas li { color: var(--cc-muted); }
.cc-offcanvas-list ul { list-style: none; padding: 0; margin: 0; }
.cc-offcanvas-list li { padding: .45rem 0; border-bottom: 1px solid var(--cc-card-line); font-size: .9375rem; }
.cc-offcanvas-list li span { display: block; color: var(--cc-text); font-weight: 600; }
.cc-offcanvas-links { list-style: none; padding: 0; margin: 0; }
.cc-offcanvas-links a { color: var(--cc-accent-2); }

/* =========================================================================
   CÍMSKÁLA
   ========================================================================= */

.cc-h1 {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.4rem, 5vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.015em;
  margin-bottom: 1.5rem;
}

.cc-h2 {
  font-family: var(--cc-ff-display);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}

/* =========================================================================
   NYITÓKÉPERNYŐ
   ========================================================================= */

.cc-hero {
  padding-top: 11rem;
  padding-bottom: 6rem;
}

.cc-hero__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.2rem, 3.7vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin-bottom: 1.75rem;
}
.cc-hero__title span[data-cc-title-line] { display: block; }

.cc-hero__lead { max-width: 38rem; margin-bottom: 2.25rem; }

.cc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.cc-hero__micro { font-size: .875rem; color: var(--cc-dim); margin: 0; }

.cc-hero__facts { margin-top: 6rem; }

.cc-fact {
  height: 100%;
  padding: 1.5rem 1.4rem;
}
.cc-fact > span {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--cc-accent-2);
  margin-bottom: .9rem;
}
.cc-fact strong {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: 1.25rem;
  color: var(--cc-text);
  margin-bottom: .2rem;
}
.cc-fact small { font-size: .8125rem; color: var(--cc-dim); }

/* --- körhálózat (egyetlen összeállított SVG) --- */

.cc-network {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 1;
}

.cc-network__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* gyűrűk és osztásgyűrű */
.cc-network__ticks {
  transform-origin: 300px 300px;
  animation: cc-spin 64s linear infinite;
}
.cc-network__rings circle:nth-child(1) {
  transform-origin: 300px 300px;
  animation: cc-spin-back 46s linear infinite;
}

@keyframes cc-spin      { to { transform: rotate(360deg); } }
@keyframes cc-spin-back { to { transform: rotate(-360deg); } }

/* összekötő vonalak */
.cc-network__links line { stroke-dasharray: 128; stroke-dashoffset: 128; }
.cc-reduced-motion .cc-network__links line { stroke-dashoffset: 0; }

/* középpont */
.cc-network__core-label {
  font-family: var(--cc-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  fill: var(--cc-dim);
}

/* csomópontok */
.cc-network__node { cursor: default; }

.cc-network__pulse {
  fill: rgba(34, 211, 238, .10);
  transform-origin: center;
  animation: cc-pulse 3.6s var(--cc-ease) infinite;
}
.cc-network__node:nth-child(2) .cc-network__pulse { animation-delay: .9s; }
.cc-network__node:nth-child(3) .cc-network__pulse { animation-delay: 1.8s; }
.cc-network__node:nth-child(4) .cc-network__pulse { animation-delay: 2.7s; }

@keyframes cc-pulse {
  0%   { transform: scale(.55); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.cc-network__ring {
  fill: var(--cc-bg);
  stroke: var(--cc-accent-2);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 7px rgba(34, 211, 238, .55));
}
.cc-network__dot { fill: var(--cc-accent-2); }

.cc-network__name {
  font-family: var(--cc-ff-head);
  font-size: 17px;
  fill: var(--cc-text);
}
.cc-network__day {
  font-family: var(--cc-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--cc-dim);
}

.cc-reduced-motion .cc-network__ticks,
.cc-reduced-motion .cc-network__rings circle,
.cc-reduced-motion .cc-network__pulse { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-network__ticks,
  .cc-network__rings circle,
  .cc-network__pulse { animation: none !important; }
  .cc-network__links line { stroke-dashoffset: 0 !important; }
}

/* =========================================================================
   A PRÓBA IS ZENEI ÉLMÉNY
   ========================================================================= */

.cc-experience-area { padding-top: 8rem; padding-bottom: 8rem; }

.cc-feature { height: 100%; padding: 1.75rem 1.6rem; transform-style: preserve-3d; }
.cc-feature:hover { background: var(--cc-card-bg-hover); border-color: var(--cc-card-line-hover); }
.cc-feature__num {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--cc-accent-2);
  margin-bottom: 1rem;
}
.cc-feature h3 { font-family: var(--cc-ff-head); font-size: 1.1875rem; margin-bottom: .6rem; }
.cc-feature p { font-size: .9375rem; line-height: 1.65; margin: 0; }

.cc-sound { margin-top: 1.5rem; padding: 2rem; }
.cc-sound h3 { font-family: var(--cc-ff-head); font-size: 1.375rem; line-height: 1.3; margin-bottom: .75rem; }
.cc-sound p { font-size: .9375rem; margin-bottom: 1.5rem; }

.cc-wave {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
  margin-bottom: 1.5rem;
}
.cc-wave i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, var(--cc-accent-2), rgba(6, 182, 212, .18));
  opacity: .65;
}

/* =========================================================================
   HELYSZÍNEK – záró jegyzet
   ========================================================================= */

.cc-locations__note {
  margin: 3rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: .9375rem;
  color: var(--cc-muted);
}
.cc-locations__note strong { color: var(--cc-text); }

/* =========================================================================
   NAGY TIPOGRÁFIAI ÁTVEZETÉS
   ========================================================================= */

.cc-manifesto {
  padding: 9rem 0;
  text-align: center;
}
.cc-manifesto p {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.5rem, 8vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cc-text);
  margin: 0;
}
.cc-manifesto__rings {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(46rem, 90vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
}
.cc-manifesto__rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
}
.cc-manifesto__rings i:nth-child(2) { inset: 12%; border-color: rgba(6, 182, 212, .10); }
.cc-manifesto__rings i:nth-child(3) { inset: 24%; }
.cc-manifesto__rings i:nth-child(4) { inset: 36%; border-color: rgba(129, 140, 248, .10); }

/* =========================================================================
   KONCERT
   ========================================================================= */

.cc-concert {
  padding-top: 10rem;
  padding-bottom: 8rem;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
}
.cc-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cc-stage__beam {
  position: absolute;
  top: -30%;
  width: 46%;
  height: 130%;
  opacity: .85;
}
.cc-stage__beam--one {
  left: 4%;
  background: radial-gradient(ellipse 48% 62% at 50% 4%,
      rgba(6, 182, 212, .20) 0%,
      rgba(6, 182, 212, .09) 34%,
      rgba(6, 182, 212, .03) 60%,
      rgba(6, 182, 212, 0) 100%);
  transform: rotate(-9deg);
}
.cc-stage__beam--two {
  right: 6%;
  background: radial-gradient(ellipse 48% 62% at 50% 4%,
      rgba(129, 140, 248, .17) 0%,
      rgba(129, 140, 248, .08) 34%,
      rgba(129, 140, 248, .028) 60%,
      rgba(129, 140, 248, 0) 100%);
  transform: rotate(9deg);
}
.cc-stage__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(0deg, rgba(6, 182, 212, .10), transparent);
}

/* =========================================================================
   ALAPÍTÓI HÁTTÉR
   ========================================================================= */

.cc-founder-area { padding-top: 8rem; padding-bottom: 8rem; }

.cc-founder__visual {
  position: relative;
  max-width: 24rem;
  margin-inline: auto;
}
.cc-founder__visual img {
  width: 100%;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-card-line);
}
.cc-founder__ring {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px dashed rgba(6, 182, 212, .22);
  pointer-events: none;
}

.cc-quote { padding: 1.75rem; margin: 2rem 0 0; }
.cc-quote p {
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--cc-text);
  margin-bottom: 1rem;
}
.cc-quote footer {
  font-size: .875rem;
  font-weight: 600;
  color: var(--cc-accent-2);
}
.cc-quote footer span { display: block; font-weight: 400; color: var(--cc-dim); }

/* =========================================================================
   ŰRLAP
   ========================================================================= */

.cc-form-area { padding-top: 8rem; padding-bottom: 8rem; }

.cc-note { padding: 1.5rem; margin-top: 2rem; }
.cc-note span {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-accent-2);
  margin-bottom: .6rem;
}
.cc-note p { margin: 0; font-size: .9375rem; }
.cc-note strong { color: var(--cc-text); }

.cc-form { padding: 2.25rem; position: relative; }
.cc-form__index {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-family: var(--cc-ff-head);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--cc-dim);
}

.cc-field { margin-bottom: 1.25rem; }
.cc-field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cc-muted);
}
.cc-field label small { text-transform: none; letter-spacing: 0; color: var(--cc-dim); font-weight: 400; }

.cc-page .cc-field input,
.cc-page .cc-field select,
.cc-page .cc-field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--cc-card-line);
  background: rgba(255, 255, 255, .02);
  color: var(--cc-text);
  font-family: var(--cc-ff-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .3s var(--cc-ease), background-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
}
.cc-page .cc-field input::placeholder,
.cc-page .cc-field textarea::placeholder { color: var(--cc-dim); }

.cc-page .cc-field input:focus,
.cc-page .cc-field select:focus,
.cc-page .cc-field textarea:focus {
  outline: 0;
  border-color: var(--cc-accent);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .18);
}

.cc-page .cc-field input[aria-invalid="true"],
.cc-page .cc-field select[aria-invalid="true"],
.cc-page .cc-field textarea[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .16);
}

.cc-field__error {
  display: block;
  min-height: 1rem;
  margin-top: .4rem;
  font-size: .8125rem;
  color: #fca5a5;
}
.cc-field__error:empty { min-height: 0; margin-top: 0; }

.cc-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1.25rem 0 .25rem;
}
.cc-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--cc-accent);
  cursor: pointer;
}
.cc-check label {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--cc-muted);
  cursor: pointer;
}
.cc-check label a { color: var(--cc-accent-2); text-decoration: underline; }

.cc-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.cc-form__submit { width: 100%; justify-content: center; margin-top: 1.5rem; }

.cc-form__status {
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cc-muted);
}
.cc-form__status.is-success { color: var(--cc-accent-2); }
.cc-form__status.is-error { color: #fca5a5; }
.cc-form__status:empty { margin-top: 0; }

.cc-form__note { margin: 1rem 0 0; font-size: .8125rem; color: var(--cc-dim); }

/* =========================================================================
   ZÁRÓ CTA
   ========================================================================= */

.cc-final-cta { padding: 8rem 0 9rem; }
.cc-final-cta__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 auto 2.5rem;
  max-width: 52rem;
}

/* =========================================================================
   LÁBLÉC
   ========================================================================= */

.cc-footer {
  position: relative;
  padding-top: 5rem;
  border-top: 1px solid var(--cc-card-line);
  background: #0a0e14;
  overflow: hidden;
}

.cc-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.cc-footer__brand img { width: 42px; height: 42px; }
.cc-footer__brand span {
  font-family: var(--cc-ff-head);
  font-size: 1.25rem;
  color: var(--cc-text);
}
.cc-footer__top p { font-size: .9375rem; line-height: 1.7; max-width: 30rem; }

.cc-footer h2 {
  font-family: var(--cc-ff-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: 1rem;
}
.cc-footer__top a:not(.cc-footer__brand) {
  display: block;
  margin-bottom: .55rem;
  font-size: .9375rem;
  color: var(--cc-muted);
  transition: color .3s var(--cc-ease);
}
.cc-footer__top a:not(.cc-footer__brand):hover { color: var(--cc-accent-2); }

.cc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cc-card-line);
  font-size: .8125rem;
  color: var(--cc-dim);
}

.cc-footer__wordmark {
  margin-top: 2rem;
  font-family: var(--cc-ff-display);
  font-size: clamp(3rem, 13vw, 13rem);
  line-height: .85;
  text-align: center;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .035);
  user-select: none;
  white-space: nowrap;
}

/* =========================================================================
   COOKIE-HOZZÁJÁRULÁS
   ========================================================================= */

.cc-cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 1200;
  padding: 1rem;
  background: rgba(10, 14, 20, .98);
  border-top: 1px solid rgba(34, 211, 238, .28);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .38);
  color: var(--cc-text);
}

.cc-cookie-banner[hidden] { display: none; }

.cc-cookie-banner__content {
  width: min(90rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: end;
  gap: 1.25rem 2rem;
}

.cc-cookie-banner .cc-eyebrow {
  margin-bottom: .45rem;
  font-size: .6875rem;
}

.cc-cookie-banner h2 {
  margin: 0 0 .45rem;
  font-family: var(--cc-ff-head);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.cc-cookie-banner p {
  max-width: 55rem;
  margin: 0 0 .45rem;
  font-size: .875rem;
  line-height: 1.6;
}

.cc-cookie-banner__copy > a {
  color: var(--cc-accent-2);
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cc-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.cc-cookie-banner__actions .cc-btn {
  min-height: 2.9rem;
  justify-content: center;
  padding: .85rem 1.2rem;
}

.cc-cookie-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 2.25rem;
  border: 1px solid var(--cc-card-line-hover);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.cc-cookie-dialog:not([open]) { display: none; }
.cc-cookie-dialog::backdrop { background: rgba(3, 6, 10, .88); }
.cc-cookie-dialog .cc-eyebrow { margin-bottom: .65rem; }

.cc-cookie-dialog h2 {
  margin: 0 0 .75rem;
  font-family: var(--cc-ff-display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.05;
}

.cc-cookie-dialog > p {
  margin: 0 0 1.5rem;
  font-size: .9375rem;
  line-height: 1.65;
}

.cc-cookie-dialog__close {
  position: absolute;
  top: .9rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--cc-card-line);
  border-radius: 999px;
  background: var(--cc-card-bg);
  color: var(--cc-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cc-cookie-dialog__close:hover,
.cc-cookie-dialog__close:focus-visible {
  border-color: var(--cc-accent);
  color: var(--cc-text);
}

.cc-cookie-dialog__categories {
  display: grid;
  gap: .75rem;
}

.cc-cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cc-card-line);
  border-radius: 16px;
  background: var(--cc-card-bg);
  cursor: pointer;
}

.cc-cookie-category--locked { cursor: default; }

.cc-cookie-category span,
.cc-cookie-category strong,
.cc-cookie-category small { display: block; }

.cc-cookie-category strong {
  margin-bottom: .2rem;
  color: var(--cc-text);
  font-family: var(--cc-ff-head);
  font-size: .9375rem;
}

.cc-cookie-category small {
  color: var(--cc-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.cc-cookie-category input {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  accent-color: var(--cc-accent);
  cursor: pointer;
}

.cc-cookie-category input:disabled {
  opacity: .75;
  cursor: default;
}

.cc-cookie-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.cc-cookie-dialog__actions .cc-btn { justify-content: center; }

@media (max-width: 991.98px) {
  .cc-cookie-banner__content {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cc-cookie-banner__actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
  .cc-cookie-banner { padding: .85rem; }
  .cc-cookie-banner p { font-size: .8125rem; }
  .cc-cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .cc-cookie-banner__actions .cc-btn { width: 100%; }
  .cc-cookie-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    padding: 1.5rem 1rem 1rem;
    border-radius: 18px;
  }
  .cc-cookie-category { padding: .85rem; }
  .cc-cookie-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cc-cookie-dialog__actions .cc-btn { width: 100%; }
}

/* =========================================================================
   MOBIL CTA · ÉRTESÍTÉS
   ========================================================================= */

.cc-mobile-cta {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 98;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  border-radius: 999px;
  font-weight: 700;
  color: #04202a;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  box-shadow: 0 12px 40px rgba(6, 182, 212, .3);
}
.cc-mobile-cta:hover { color: #04202a; }

.cc-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  max-width: 22rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--cc-card-line-hover);
  background: rgba(17, 24, 39, .96);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .35s var(--cc-ease), transform .35s var(--cc-ease), visibility .35s;
}
.cc-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-toast strong { display: block; color: var(--cc-accent-2); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.cc-toast span { font-size: .9375rem; color: var(--cc-muted); }
.cc-toast button {
  position: absolute;
  top: .5rem; right: .75rem;
  background: none; border: 0;
  color: var(--cc-dim);
  font-size: 1.25rem;
  cursor: pointer;
}

/* =========================================================================
   KÉPERNYŐMÉRETEK – oldalszintű elemek
   ========================================================================= */

@media (max-width: 1199.98px) {
  .cc-hero { padding-top: 9rem; padding-bottom: 4rem; }
  .cc-hero__facts { margin-top: 4rem; }
  .cc-experience-area,
  .cc-founder-area,
  .cc-form-area { padding-top: 6rem; padding-bottom: 6rem; }
  .cc-manifesto { padding: 6.5rem 0; }
  .cc-concert { padding-top: 7rem; padding-bottom: 6rem; }
  .cc-final-cta { padding: 6rem 0 7rem; }
}

@media (max-width: 991.98px) {
  .cc-hero { padding-top: 8rem; }
  .cc-network { max-width: 26rem; margin-top: 1.5rem; }
  .cc-experience-area,
  .cc-founder-area,
  .cc-form-area { padding-top: 5rem; padding-bottom: 5rem; }
  .cc-manifesto { padding: 5rem 0; }
  .cc-concert { padding-top: 6rem; padding-bottom: 5rem; min-height: 0; }
  .cc-final-cta { padding: 5rem 0 6rem; }
  .cc-footer { padding-top: 3.5rem; }
  .cc-form { padding: 1.75rem; }
}

@media (max-width: 767.98px) {
  .cc-mobile-cta { display: flex; }
  body.cc-page { padding-bottom: 5rem; }
  .cc-toast { right: 1rem; left: 1rem; bottom: 5.5rem; max-width: none; }
  .cc-hero__actions .cc-btn { flex: 1 1 100%; justify-content: center; }
  .cc-network { max-width: 21rem; }
  .cc-footer__wordmark { font-size: 3.25rem; }
  .cc-card.cc-fact { padding: 1.15rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-network__orbit { animation: none !important; }
}

/* --- logójel (assets/img/cc-mark.svg) --- */
.cc-mark { display: block; width: auto; }
.cc-brand .cc-mark { height: 34px; }
.cc-footer__brand .cc-mark { height: 42px; }
.tp-offcanvas-logo .cc-mark { height: 48px; }


/* --- alapítói vizuál: logójel keretben, körívekkel --- */
.cc-founder__visual {
  position: relative;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.cc-founder__plate {
  width: 68%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
}
.cc-founder__plate .cc-mark { height: 92px; }
.cc-founder__plate span {
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-muted);
}
.cc-founder__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(6, 182, 212, .25);
  pointer-events: none;
}
.cc-founder__ring--two {
  inset: 12%;
  border-style: solid;
  border-color: rgba(129, 140, 248, .16);
}

/* --- finomhangolás --- */
.cc-hero__facts { margin-top: 4rem; }
.cc-concert { padding-bottom: 7rem; }

/* =========================================================================
   JELENTKEZÉSI OLDAL
   ========================================================================= */

.cc-detail-hero { padding-top: 11rem; padding-bottom: 6rem; }

.cc-personal-note { padding: 2rem; }
.cc-personal-note .cc-mark { height: 40px; margin-bottom: 1.25rem; }
.cc-personal-note p {
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cc-text);
  margin-bottom: 1.25rem;
}
.cc-personal-note footer { font-size: .875rem; font-weight: 600; color: var(--cc-accent-2); }
.cc-personal-note footer span { display: block; font-weight: 400; color: var(--cc-dim); margin-top: .2rem; }

.cc-facts-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-facts-area .cc-h2 { margin-bottom: 3rem; }
.cc-fact--lg { padding: 1.75rem; }
.cc-fact--lg > span { color: var(--cc-accent-2); letter-spacing: .14em; text-transform: uppercase; }
.cc-fact--lg strong { font-size: 1.3125rem; line-height: 1.25; margin-bottom: .6rem; }
.cc-fact--lg small { display: block; font-size: .875rem; line-height: 1.6; color: var(--cc-muted); }

/* --- pipás lista --- */
.cc-tick-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.cc-tick-list li {
  position: relative;
  padding: .7rem 0 .7rem 2rem;
  border-bottom: 1px solid var(--cc-card-line);
  font-size: .9375rem;
  color: var(--cc-muted);
}
.cc-tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--cc-accent);
}

/* --- vállalások --- */
.cc-commitment-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-commitment-list { list-style: none; padding: 0; margin: 0; counter-reset: cc; }
.cc-commitment-list li {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--cc-card-line);
  font-size: 1rem;
  color: var(--cc-text);
}
.cc-commitment-list li span {
  flex: 0 0 auto;
  font-family: var(--cc-ff-head);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--cc-accent-2);
}

/* --- díjkártya --- */
.cc-price {
  margin-top: 4rem;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.cc-price__head strong {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 1rem;
}
.cc-price__head strong i { font-style: normal; font-size: .35em; }
.cc-price__head p { font-size: .9375rem; }
.cc-price__head p strong { display: inline; font-family: inherit; font-size: inherit; color: var(--cc-text); }
.cc-price__list { list-style: none; padding: 0; margin: 0; }
.cc-price__list li {
  position: relative;
  padding: .45rem 0 .45rem 1.65rem;
  font-size: .9375rem;
  color: var(--cc-muted);
}
.cc-price__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .95rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cc-accent);
}
.cc-price__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cc-card-line);
  font-size: .875rem;
}

.cc-task-area { padding-top: 8rem; padding-bottom: 8rem; }

/* --- GYIK: Cunnet tp-faq, Stackbyte felület --- */
.cc-faq-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-page .cc-faq .tp-faq-item {
  margin-bottom: .75rem;
  padding: 0 1.5rem;
  border-radius: 18px;
}
.cc-page .cc-faq .tp-faq-button {
  width: 100%;
  padding: 1.35rem 2.5rem 1.35rem 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--cc-text);
  position: relative;
  cursor: pointer;
}
.cc-page .cc-faq .tp-faq-button::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--cc-accent-2);
  transition: transform .3s var(--cc-ease);
}
.cc-page .cc-faq .tp-faq-button:not(.collapsed)::after { transform: translateY(-50%) rotate(45deg); }
.cc-page .cc-faq .tp-faq-body { padding: 0 0 1.5rem; }
.cc-page .cc-faq .tp-faq-body p { margin: 0; font-size: .9375rem; line-height: 1.7; }

/* --- űrlap: mezőcsoportok --- */
.cc-application-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 2.5rem;
}
.cc-application-form legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin-bottom: 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--cc-card-line);
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-text);
}
.cc-application-form legend span {
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--cc-accent-2);
}

.cc-fieldset-help { font-size: .875rem; color: var(--cc-muted); margin-bottom: 1rem; }
.cc-fieldset-help small { color: var(--cc-dim); }

.cc-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
}
.cc-choice-grid label {
  position: relative;
  display: block;
  cursor: pointer;
}
.cc-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-choice-grid span {
  display: block;
  padding: .95rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--cc-card-line);
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s var(--cc-ease), background-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
}
.cc-choice-grid strong { display: block; font-family: var(--cc-ff-head); font-size: .9375rem; color: var(--cc-text); }
.cc-choice-grid small { display: block; font-size: .8125rem; color: var(--cc-dim); margin-top: .15rem; }
.cc-choice-grid label:hover span { border-color: var(--cc-card-line-hover); background: rgba(255, 255, 255, .04); }
.cc-choice-grid input:checked + span {
  border-color: var(--cc-accent);
  background: rgba(6, 182, 212, .10);
  box-shadow: 0 0 0 1px var(--cc-accent) inset;
}
.cc-choice-grid input:focus-visible + span { box-shadow: 0 0 0 3px rgba(6, 182, 212, .3); }
.cc-choice-grid--compact span { padding: .7rem .9rem; }

.cc-check-list { display: grid; gap: .6rem; }
.cc-check-list label {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--cc-card-line);
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: border-color .3s var(--cc-ease), background-color .3s var(--cc-ease);
}
.cc-check-list label:hover { border-color: var(--cc-card-line-hover); }
.cc-check-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--cc-accent);
  cursor: pointer;
}
.cc-check-list span { font-size: .875rem; line-height: 1.6; color: var(--cc-muted); }
.cc-check-list a { color: var(--cc-accent-2); text-decoration: underline; }
.cc-check-list label:has(input:checked) { border-color: rgba(6, 182, 212, .45); background: rgba(6, 182, 212, .07); }

.cc-form__aside { position: sticky; top: 8.5rem; }
.cc-note ol { margin: .5rem 0 0; padding-left: 1.15rem; }
.cc-note ol li { font-size: .875rem; color: var(--cc-muted); padding: .2rem 0; }

/* --- választható helyszínkártya --- */
.cc-loc-card--selectable { display: flex; flex-direction: column; }
.cc-loc-card__select {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  font-size: .8125rem;
  padding: .75rem 1rem;
}
.cc-loc-card--selectable.is-selected,
.cc-loc-card:has(.is-selected) { border-color: var(--cc-accent); }
.cc-loc-card__select.is-selected {
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  border-color: transparent;
  color: #04202a;
}

/* --- sikeres jelentkezés párbeszédablak --- */
.cc-success-dialog {
  width: min(34rem, calc(100vw - 2rem));
  padding: 2.5rem;
  border: 1px solid var(--cc-card-line-hover);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
}
.cc-success-dialog::backdrop { background: rgba(3, 6, 10, .86); }
.cc-success-dialog .cc-mark { height: 40px; margin-bottom: 1.25rem; }
.cc-success-dialog h2 { font-family: var(--cc-ff-display); font-size: 1.75rem; line-height: 1.2; margin-bottom: 1rem; }
.cc-success-dialog p { font-size: .9375rem; line-height: 1.7; margin-bottom: 1rem; }
.cc-success-dialog__note { font-size: .8125rem; color: var(--cc-dim); }
.cc-success-dialog__close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none; border: 0;
  font-size: 1.5rem;
  color: var(--cc-dim);
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .cc-detail-hero { padding-top: 8rem; padding-bottom: 3rem; }
  .cc-commitment-area,
  .cc-task-area,
  .cc-faq-area { padding-top: 5rem; padding-bottom: 5rem; }
  .cc-price { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem; }
  .cc-form__aside { position: static; }
}

.cc-status { white-space: nowrap; }
@media (max-width: 1399.98px) { .cc-status { display: none !important; } }

/* GYIK: a Cunnet ikonjának semlegesítése (Font Awesome nem töltődik) */
.cc-page .cc-faq .tp-faq-button::before { content: none !important; }
.cc-page .cc-faq .tp-faq-button::after {
  content: "+" !important;
  font-family: var(--cc-ff-body) !important;
  font-weight: 300 !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  background: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* rádió- és jelölőrács: két hasáb asztali nézetben */
.cc-choice-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cc-choice-grid--compact { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* =========================================================================
   JOGI OLDALAK
   ========================================================================= */

.cc-legal-hero { padding-top: 11rem; padding-bottom: 3.5rem; }
.cc-legal-hero__inner { border-bottom: 1px solid var(--cc-card-line); padding-bottom: 2.5rem; }
.cc-legal-hero__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0;
}

.cc-legal-body { padding-top: 3.5rem; padding-bottom: 7rem; }

.cc-legal__content { max-width: 46rem; }
.cc-legal__intro {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--cc-text);
  padding-left: 1.25rem;
  border-left: 2px solid var(--cc-accent);
  margin-bottom: 2.5rem;
}
.cc-legal__content h2 {
  font-family: var(--cc-ff-head);
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}
.cc-legal__content p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; }
.cc-legal__content ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.cc-legal__content ul li {
  position: relative;
  padding: .5rem 0 .5rem 1.65rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cc-muted);
  border-bottom: 1px solid var(--cc-card-line);
}
.cc-legal__content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.1rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--cc-accent);
}
.cc-legal__cta { margin-top: 2.5rem; }

.cc-legal__aside { position: sticky; top: 8.5rem; padding: 1.75rem; }
.cc-legal__aside p { font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }

@media (max-width: 991.98px) {
  .cc-legal-hero { padding-top: 8rem; padding-bottom: 2.5rem; }
  .cc-legal-body { padding-top: 2.5rem; padding-bottom: 5rem; }
}

/* a hálózati feliratok a viewBoxszal együtt kicsinyednének – kisebb képernyőn
   arányosan nagyobb betű, hogy olvasható maradjon */
@media (max-width: 1199.98px) {
  .cc-network__name { font-size: 20px; }
  .cc-network__day { font-size: 13px; }
  .cc-network__core-label { font-size: 12px; }
}
@media (max-width: 991.98px) {
  .cc-network__name { font-size: 23px; }
  .cc-network__day { font-size: 15px; }
  .cc-network__core-label { font-size: 14px; }
}

/* =========================================================================
   OLDALSZÉLESSÉG – nagyobb margó a böngésző szélétől asztali nézetben
   A Cunnet bootstrap.min.css-ében a .container xxl lépcsője 1750 px, ami
   1440-en gyakorlatilag széltől szélig ér. Ezt szűkítjük.
   ========================================================================= */

.cc-page .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1400px) {
  .cc-page .container { max-width: 1300px; }
}
@media (min-width: 1800px) {
  .cc-page .container { max-width: 1440px; }
}
@media (max-width: 575.98px) {
  .cc-page .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* a hálózati csomópont helyét a transform attribútum tartja,
   a mozgatás a belső csoporton történik */
.cc-network__node-inner { transform-box: view-box; }

/* =========================================================================
   TELJESÍTMÉNY – a végtelen animációk állnak, amíg nincsenek a képernyőn
   A kapcsolót az assets/js/cc-sections.js IntersectionObserverje teszi ki.
   ========================================================================= */

.cc-network.is-offscreen .cc-network__ticks,
.cc-network.is-offscreen .cc-network__rings circle,
.cc-network.is-offscreen .cc-network__pulse,
.cc-marquee.is-offscreen span {
  animation-play-state: paused;
}

/* a választható kártyán a zárószöveg és a gomb közé térköz,
   a gomb marad a kártya alján */
.cc-loc-card--selectable .cc-loc-card__note { margin-bottom: 1.25rem; }

/* =========================================================================
   FEJLÉCGOMB – a Cunnet .tp-btn sötét témában fehér hátteret és fekete
   szöveget kap (.cunnet-dark .tp-btn), rámutatáskor pedig fehér szövegre vált
   (.tp-btn:hover). Emiatt a fehér feliratt a fehér háttéren eltűnt.
   Itt mindkét állapotot egyértelműen rögzítjük.
   ========================================================================= */

.cc-page a.tp-btn.cc-btn--accent,
.cc-page a.tp-btn.cc-btn--accent:link,
.cc-page a.tp-btn.cc-btn--accent:visited,
.cc-page a.tp-btn.cc-btn--accent:hover,
.cc-page a.tp-btn.cc-btn--accent:focus,
.cc-page a.tp-btn.cc-btn--accent:focus-visible,
.cc-page a.tp-btn.cc-btn--accent:active {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  color: #04202a;
  border: 0;
}

.cc-page a.tp-btn.cc-btn--accent:hover {
  background-image: linear-gradient(90deg, var(--cc-accent-2), var(--cc-accent));
  box-shadow: 0 12px 36px rgba(34, 211, 238, .35);
}

/* a felirat mindkét rétege és a nyíl is sötét marad */
.cc-page a.tp-btn.cc-btn--accent span,
.cc-page a.tp-btn.cc-btn--accent span span.text-1,
.cc-page a.tp-btn.cc-btn--accent span span.text-2,
.cc-page a.tp-btn.cc-btn--accent:hover span span.text-1,
.cc-page a.tp-btn.cc-btn--accent:hover span span.text-2 {
  color: #04202a;
}

.cc-page a.tp-btn.cc-btn--accent i,
.cc-page a.tp-btn.cc-btn--accent i svg,
.cc-page a.tp-btn.cc-btn--accent:hover i svg {
  color: #04202a;
  fill: #04202a;
}

/* =========================================================================
   FEJLÉC-NAVIGÁCIÓ – a Cunnet fehér „pirulát" tesz a hivatkozás mögé
   (.tp-main-menu nav ul li a:hover { background: white }), ami sötét alapon
   olvashatatlan és nem is illik ide. Helyette vastag cián aláhúzás.
   ========================================================================= */

.cc-page .tp-main-menu nav > ul > li > a {
  position: relative;
  margin: 0 .9rem;
  padding: .45rem 0;
  background: transparent;
  border-radius: 0;
  color: var(--cc-muted);
}

.cc-page .tp-main-menu nav > ul > li > a:hover,
.cc-page .tp-main-menu nav > ul > li > a:focus-visible {
  background: transparent;
  color: var(--cc-text);
}

.cc-page .tp-main-menu nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--cc-ease);
}

.cc-page .tp-main-menu nav > ul > li > a:hover::after,
.cc-page .tp-main-menu nav > ul > li > a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .cc-page .tp-main-menu nav > ul > li > a::after { transition: none; }
}

/* =========================================================================
   GÖRGETÉS – natív
   A Cunnet ScrollSmoothere sajat, transzformalt gorgetest hasznal, ami
   kettevalt a bongeszo natív gorgetesetol: horgonyra kattintas utan a ket
   allapot elcsuszott, es nem lehetett visszagorgetni. Ezert a #smooth-wrapper
   / #smooth-content azonositokat osztalyra csereltuk – a main.js igy el sem
   inditja a Smoothert –, es a bongeszo sajat, sima gorgeteset hasznaljuk.
   ========================================================================= */

html { scroll-behavior: smooth; }

/* a rogzitett fejlec alá csusszanjon a horgony celja */
.cc-page section[id],
.cc-page [id^="main-content"] { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================================
   SORSZÁMOS KÁRTYÁK – határozott sorszám, feszesebb sorköz
   ========================================================================= */

.cc-card.cc-fact { padding: 1.6rem 1.5rem 1.5rem; }

.cc-fact > span {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: 2.6rem;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--cc-accent-2);
  margin-bottom: .7rem;
}

.cc-fact strong {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: 1.3125rem;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}

.cc-fact small {
  display: block;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--cc-dim);
}

.cc-feature { padding: 1.6rem 1.5rem 1.5rem; }

.cc-feature__num {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: 2.1rem;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--cc-accent-2);
  margin-bottom: .65rem;
}

.cc-feature h3 {
  font-size: 1.1875rem;
  line-height: 1.18;
  margin-bottom: .4rem;
}

.cc-feature p {
  font-size: .9375rem;
  line-height: 1.55;
}

/* a folyamat-idővonal sorszáma is határozottabb */
.cc-timeline__index {
  font-family: var(--cc-ff-display);
  font-size: 1.125rem;
  letter-spacing: .02em;
  opacity: 1;
  margin-bottom: .5rem;
}

.cc-timeline__card h3 { margin-bottom: .55rem; }

@media (max-width: 767.98px) {
  .cc-fact > span { font-size: 2.1rem; margin-bottom: .55rem; }
  .cc-fact strong { font-size: 1.1875rem; }
  .cc-feature__num { font-size: 1.9rem; }
}

/* --- sorszám / címsor arány finomítása --- */
.cc-fact > span { font-size: 1.6rem; line-height: .9; margin-bottom: .55rem; }
.cc-fact strong { font-size: 1.5rem; line-height: 1.15; }

.cc-feature__num { font-size: 1.45rem; line-height: .9; margin-bottom: .5rem; }
.cc-feature h3 { font-size: 1.375rem; line-height: 1.22; }

@media (max-width: 767.98px) {
  .cc-fact > span { font-size: 1.4rem; margin-bottom: .45rem; }
  .cc-fact strong { font-size: 1.25rem; }
  .cc-feature__num { font-size: 1.3rem; }
  .cc-feature h3 { font-size: 1.25rem; }
}

/* --- a sorszám még visszafogottabb, a sorközök változatlanul feszesek --- */
.cc-fact > span { font-size: 1.125rem; letter-spacing: .01em; }
.cc-feature__num { font-size: 1.0625rem; letter-spacing: .01em; }

@media (max-width: 767.98px) {
  .cc-fact > span { font-size: 1.0625rem; }
  .cc-feature__num { font-size: 1rem; }
}

/* =========================================================================
   „MI EZ AZ EGÉSZ?" – háromlépéses magyarázat
   ========================================================================= */

.cc-howto-area { padding-top: 7rem; padding-bottom: 7rem; }
.cc-howto-area .cc-h2 { margin-bottom: 1rem; }
.cc-howto__lead { max-width: 40rem; margin: 0 auto 3.5rem; }

.cc-howto {
  height: 100%;
  padding: 2rem 1.75rem;
  transform-style: preserve-3d;
}
.cc-howto:hover { background: var(--cc-card-bg-hover); border-color: var(--cc-card-line-hover); }

.cc-howto__num {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: 1.125rem;
  letter-spacing: .01em;
  line-height: .9;
  color: var(--cc-accent-2);
  margin-bottom: .55rem;
}
.cc-howto h3 { font-family: var(--cc-ff-head); font-size: 1.5rem; line-height: 1.15; margin-bottom: .5rem; }
.cc-howto p { font-size: .9375rem; line-height: 1.6; margin: 0; }

/* a zenei ízelítő kártya most hivatkozás */
a.cc-sound { display: block; text-decoration: none; }
a.cc-sound:hover { background: var(--cc-card-bg-hover); border-color: var(--cc-card-line-hover); }

/* =========================================================================
   A FILMHATÁS – háttérszakasz videóval
   ========================================================================= */

.cc-brand-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-brand-area .cc-lead + .cc-lead { margin-top: 1rem; }
.cc-brand-area em { font-style: normal; color: var(--cc-text); }

.cc-brand-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin: 2rem 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cc-card-line);
  border-bottom: 1px solid var(--cc-card-line);
}
.cc-brand-facts strong {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--cc-accent-2);
}
.cc-brand-facts span { font-size: .8125rem; color: var(--cc-dim); }

/* --- videó: külső kérés nélkül, csak kattintásra tölt be --- */
.cc-video { margin: 0; }

.cc-video__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--cc-card-line);
  border-radius: var(--cc-radius);
  overflow: hidden;
  background: var(--cc-bg-soft);
  cursor: pointer;
  transition: border-color .4s var(--cc-ease), transform .4s var(--cc-ease);
}
.cc-video__poster img { width: 100%; height: auto; display: block; }
.cc-video__poster:hover { border-color: var(--cc-card-line-hover); transform: translateY(-4px); }

.cc-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #04202a;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  box-shadow: 0 12px 40px rgba(6, 182, 212, .45);
  transition: transform .35s var(--cc-ease);
}
.cc-video__poster:hover .cc-video__play { transform: translate(-50%, -50%) scale(1.08); }

.cc-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--cc-card-line);
  border-radius: var(--cc-radius);
  display: block;
}

.cc-video figcaption { padding-top: 1.1rem; }
.cc-video figcaption strong {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-text);
}
.cc-video figcaption span { display: block; font-size: .8125rem; color: var(--cc-dim); margin-top: .15rem; }
.cc-video figcaption em {
  display: block;
  font-style: normal;
  font-size: .875rem;
  color: var(--cc-accent-2);
  margin-top: .5rem;
}

@media (max-width: 991.98px) {
  .cc-howto-area { padding-top: 5rem; padding-bottom: 5rem; }
  .cc-howto__lead { margin-bottom: 2.5rem; }
  .cc-brand-area { padding-top: 5rem; padding-bottom: 5rem; }
  .cc-brand-facts { gap: 1.5rem; }
  .cc-video__play { width: 62px; height: 62px; font-size: 1.25rem; }
}

.cc-howto__note {
  margin: 3rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cc-muted);
}
.cc-howto__note strong { color: var(--cc-text); }

/* =========================================================================
   TIPOGRÁFIAI SÚLYOZÁS – nagyobb magyarázó és kísérőszövegek
   ========================================================================= */

/* nyitóképernyő: a gomb alatti sor */
.cc-hero__micro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cc-muted);
  max-width: 34rem;
}
.cc-hero__micro strong { color: var(--cc-text); font-weight: 600; }

/* nyitó gyorskártyák alsó sora */
.cc-fact small { font-size: .9375rem; line-height: 1.4; }

/* „Mi ez az egész?" – bővebb, nagyobb magyarázat */
.cc-howto__lead {
  max-width: 52rem;
  font-size: 1.1875rem;
  line-height: 1.75;
  margin: 0 auto 1.1rem;
}
.cc-howto__lead:last-of-type { margin-bottom: 3.5rem; }

/* célközönség-mondat */
.cc-howto__note {
  max-width: 54rem;
  margin-top: 3.5rem;
  font-family: var(--cc-ff-head);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--cc-muted);
}

@media (max-width: 991.98px) {
  .cc-howto__lead { font-size: 1.0625rem; }
  .cc-howto__lead:last-of-type { margin-bottom: 2.5rem; }
  .cc-howto__note { margin-top: 2.5rem; }
  .cc-hero__micro { font-size: 1rem; }
}

/* --- a KórusKörök záró mondata akkora, mint a célközönség-mondat --- */
.cc-locations__note {
  max-width: 54rem;
  margin-top: 3.5rem;
  font-family: var(--cc-ff-head);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--cc-muted);
}

/* --- videófelirat: nagyobb, összefogottabb --- */
.cc-video figcaption { padding-top: 1.35rem; }
.cc-video figcaption strong {
  font-family: var(--cc-ff-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.cc-video figcaption strong i {
  font-style: normal;
  color: var(--cc-accent-2);
  margin: 0 .15em;
}
.cc-video figcaption span {
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--cc-muted);
  margin-top: .3rem;
}
.cc-video figcaption em {
  margin-top: .85rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--cc-dim);
}

.cc-founder__link { margin-top: 1.75rem; }

/* --- Filmhatás produkciólista --- */
.cc-projects {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem 1.5rem;
}
.cc-projects li {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--cc-muted);
}
.cc-projects b {
  flex: 0 0 2.6rem;
  font-family: var(--cc-ff-head);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--cc-accent-2);
}
@media (max-width: 575.98px) {
  .cc-projects { grid-template-columns: 1fr; }
}

/* --- sorszámkártyák: azonos magasságú, elválasztott alsó sor --- */
.cc-card.cc-fact {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
}

.cc-fact strong {
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.cc-fact small {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--cc-card-line);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--cc-muted);
}

@media (max-width: 767.98px) {
  .cc-fact strong { font-size: 1.25rem; margin-bottom: .8rem; }
  .cc-fact small { font-size: .9375rem; padding-top: .7rem; }
}

/* az elválasztó vonal minden kártyán azonos magasságban álljon:
   közvetlenül a címsor alatt, ne a szöveg hosszához igazodva */
.cc-fact small { margin-top: 0; }

/* =========================================================================
   ZENEI ÍZELÍTŐ – saját lista, mögötte cserélhető lejátszómotor
   ========================================================================= */

.cc-playlist { margin-top: 1.5rem; padding: 2rem 1.75rem 1.75rem; }
.cc-playlist__head h3 { font-family: var(--cc-ff-head); font-size: 1.375rem; line-height: 1.25; margin-bottom: .6rem; }
.cc-playlist__head p { font-size: .9375rem; line-height: 1.6; margin-bottom: 1.5rem; }

/* A teljes lista látszik, görgetés nélkül.
   Korábban `max-height: 26rem` és görgetés volt rajta. Négy számnál ez még
   csak takarékos volt, hétnél viszont elrejtette az utolsókat — és mivel a
   görgetősáv alig látszik egy kártyán belül, a látogató nem is sejtette,
   hogy van még. Amit nem tud, azt nem hallgatja meg. */
.cc-playlist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .7rem .65rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s var(--cc-ease);
}
.cc-track:hover { background: rgba(255, 255, 255, .04); }
.cc-track.is-active { background: rgba(6, 182, 212, .10); }

.cc-track__art {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--cc-card-line);
}

.cc-track__meta { flex: 1 1 auto; min-width: 0; }
.cc-track__composer {
  display: block;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-accent-2);
}
.cc-track__title {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--cc-text);
  margin-top: .1rem;
}
.cc-track__perf {
  display: block;
  font-size: .8125rem;
  color: var(--cc-dim);
  margin-top: .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-track__time { flex: 0 0 auto; font-size: .875rem; color: var(--cc-dim); font-variant-numeric: tabular-nums; }

.cc-track__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cc-card-line-hover);
  color: var(--cc-accent-2);
  transition: background-color .3s var(--cc-ease), border-color .3s var(--cc-ease);
}
.cc-track:hover .cc-track__icon,
.cc-track.is-active .cc-track__icon { border-color: var(--cc-accent); background: rgba(6, 182, 212, .16); }

/* háromszög alaphelyzetben, hanghullám lejátszás közben */
.cc-track__bars { display: block; width: 14px; height: 14px; position: relative; }
.cc-track__bars::before {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent currentColor;
}
.cc-track__bars b { display: none; }

.cc-track.is-playing .cc-track__bars::before { display: none; }
.cc-track.is-playing .cc-track__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.cc-track.is-playing .cc-track__bars b {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  animation: cc-bars .9s ease-in-out infinite;
}
.cc-track.is-playing .cc-track__bars b:nth-child(1) { height: 6px;  animation-delay: 0s; }
.cc-track.is-playing .cc-track__bars b:nth-child(2) { height: 12px; animation-delay: .15s; }
.cc-track.is-playing .cc-track__bars b:nth-child(3) { height: 8px;  animation-delay: .3s; }
.cc-track.is-playing .cc-track__bars b:nth-child(4) { height: 11px; animation-delay: .45s; }

@keyframes cc-bars {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

.cc-playlist__player {
  margin-top: 1.25rem;
  border-radius: 14px;
  overflow: hidden;
}
.cc-playlist__player iframe { display: block; width: 100%; border: 0; }

.cc-playlist__note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--cc-dim); }

@media (prefers-reduced-motion: reduce) {
  .cc-track.is-playing .cc-track__bars b { animation: none; }
}

@media (max-width: 575.98px) {
  .cc-playlist { padding: 1.5rem 1.25rem; }
  .cc-track { gap: .75rem; padding: .6rem .4rem; }
  .cc-track__art { width: 40px; height: 40px; }
  .cc-track__perf, .cc-track__time { display: none; }
}

/* a Spotify vezérlősáv rögzített magassággal, hogy a kártya ne ugráljon */
.cc-playlist__player iframe { height: 80px; }

/* --- zenei ízelítő szakasz --- */
.cc-music-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-music-area .cc-playlist { margin-top: 0; }
.cc-music-area .cc-lead + .cc-lead { margin-top: 1rem; }

@media (max-width: 991.98px) {
  .cc-music-area { padding-top: 5rem; padding-bottom: 5rem; }
}

/* A logójel közvetlenül a HTML-ben van, nem külön .svg fájlban:
   a tárhely nginx rétege nem szolgálja ki az .svg kiterjesztést. */
.cc-mark { color: var(--cc-text); }

/* =========================================================================
   MOBIL MENÜ
   A Cunnet a hamburgergombnak fehér hátteret ad sötét témában, a
   .tp-offcanvas-social listáját pedig vízszintes ikonsornak tervezte.
   Itt mindkettőt a circle.choir rendjéhez igazítjuk.
   ========================================================================= */

.cc-page .tp-menu-bar.tp-header-sidebar-btn-bg {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-line-hover);
  border-radius: 50%;
  transition: background-color .3s var(--cc-ease), border-color .3s var(--cc-ease);
}
.cc-page .tp-menu-bar.tp-header-sidebar-btn-bg:hover {
  background: var(--cc-card-bg-hover);
  border-color: var(--cc-accent);
}
.cc-page .tp-menu-bar span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  margin: 0;           /* a Cunnet 24px bal margot ad, ezert csuszott jobbra */
  background-color: var(--cc-text);
}

/* --- az oldalmenü lapja --- */
.cc-page .tp-offcanvas.cc-offcanvas {
  width: min(23rem, 88vw);
  padding: 1.75rem 1.5rem 2rem;
  background: var(--cc-bg-soft);
  border-left: 1px solid var(--cc-card-line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.cc-offcanvas .tp-offcanvas-top { margin-bottom: 1.75rem; }
.cc-offcanvas .cc-mark { height: 34px; }
.cc-offcanvas .close-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--cc-card-line);
  border-radius: 50%;
  background: transparent;
  color: var(--cc-text);
}
.cc-offcanvas .close-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent-2); }

/* --- fő menüpontok --- */
.cc-offcanvas__nav { display: flex; flex-direction: column; }
.cc-offcanvas__nav a {
  display: block;
  padding: .8rem 0;
  border-bottom: 1px solid var(--cc-card-line);
  font-family: var(--cc-ff-head);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--cc-text);
  transition: color .3s var(--cc-ease), padding-left .3s var(--cc-ease);
}
.cc-offcanvas__nav a:hover { color: var(--cc-accent-2); padding-left: .35rem; }

/* --- alsó adatblokkok --- */
.cc-offcanvas__block { margin-top: 2rem; }
.cc-offcanvas__block h3 {
  font-family: var(--cc-ff-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: .75rem;
}
.cc-offcanvas__block a {
  display: block;
  padding: .6rem 0;
  border-bottom: 1px solid var(--cc-card-line);
  transition: padding-left .3s var(--cc-ease);
}
.cc-offcanvas__block a:hover { padding-left: .35rem; }
.cc-offcanvas__block b {
  display: block;
  font-family: var(--cc-ff-head);
  font-weight: 400;
  font-size: 1rem;
  color: var(--cc-text);
}
.cc-offcanvas__block span {
  display: block;
  font-size: .8125rem;
  color: var(--cc-dim);
  margin-top: .1rem;
}
.cc-offcanvas__block i { font-style: normal; color: var(--cc-accent-2); }

.cc-offcanvas__cta { margin-top: auto; justify-content: center; width: 100%; }
.cc-offcanvas__block + .cc-offcanvas__cta { margin-top: 2rem; }

/* --- háttérfátyol --- */
.cc-page .body-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(3, 6, 10, .7);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--cc-ease), visibility .4s;
}
.cc-page .body-overlay.apply { opacity: 1; visibility: visible; }

/* 1400 px alatt feszesebb fejlécmenü, hogy ötödik ponttal se törjön */
@media (max-width: 1399.98px) {
  .cc-page .tp-main-menu nav > ul > li > a { margin: 0 .6rem; font-size: .875rem; }
}

/* =========================================================================
   KONCEPCIÓ OLDAL
   ========================================================================= */

.cc-concept-hero { padding-top: 11rem; padding-bottom: 4rem; }

.cc-concept-hero__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin-bottom: 1.75rem;
}
.cc-concept-hero__lead { max-width: 44rem; font-size: 1.1875rem; line-height: 1.75; }

.cc-concept-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cc-card-line);
}
.cc-concept-hero__meta span {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: .3rem;
}
.cc-concept-hero__meta strong {
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-text);
}

.cc-concept-body { padding-bottom: 7rem; }

/* --- ragadós tartalomjegyzék --- */
.cc-toc { position: sticky; top: 7.5rem; }
.cc-toc h2 {
  font-family: var(--cc-ff-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: 1rem;
}
.cc-toc a {
  display: block;
  padding: .4rem 0 .4rem .9rem;
  border-left: 2px solid var(--cc-card-line);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--cc-muted);
  transition: color .3s var(--cc-ease), border-color .3s var(--cc-ease);
}
.cc-toc a:hover,
.cc-toc a.is-current { color: var(--cc-text); border-left-color: var(--cc-accent); }

/* --- dokumentumtipográfia --- */
.cc-doc h2 {
  font-family: var(--cc-ff-display);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 4.5rem 0 1.5rem;
  scroll-margin-top: 7rem;
}
.cc-doc > h2:first-child { margin-top: 0; }

.cc-doc h3 {
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  letter-spacing: .01em;
  color: var(--cc-text);
  margin: 2.25rem 0 1rem;
}

.cc-doc p { font-size: 1.0625rem; line-height: 1.8; margin-bottom: 1.25rem; }
.cc-doc p strong { color: var(--cc-text); font-weight: 600; }

.cc-doc__intro {
  font-size: 1.1875rem !important;
  padding-left: 1.25rem;
  border-left: 2px solid var(--cc-accent);
}

.cc-statement {
  font-family: var(--cc-ff-head);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem) !important;
  line-height: 1.4 !important;
  color: var(--cc-text) !important;
  margin: 2.5rem 0 !important;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cc-card-line);
  border-bottom: 1px solid var(--cc-card-line);
}

/* --- pontos felsorolás két hasábban --- */
.cc-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 2rem;
}
.cc-points li {
  position: relative;
  padding: .55rem 0 .55rem 1.5rem;
  border-bottom: 1px solid var(--cc-card-line);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--cc-muted);
}
.cc-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 2px solid var(--cc-accent);
}

/* --- számozott kártyák --- */
.cc-doc__cards { margin-bottom: 2rem; }
.cc-doc__card {
  height: 100%;
  padding: 1.1rem 1.2rem;
  font-family: var(--cc-ff-head);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--cc-text);
}
.cc-doc__card span {
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--cc-accent-2);
  margin-bottom: .4rem;
}

.cc-doc__timeline { margin: 2.5rem 0; padding-left: 3.25rem; }
.cc-doc__timeline .cc-timeline__card { padding: 1.1rem 1.4rem; }
.cc-doc__timeline .cc-timeline__card h3 { margin: 0; font-size: 1.125rem; }
.cc-doc__timeline .cc-timeline__index { margin-bottom: .3rem; }
.cc-doc__timeline .cc-timeline__rail i { transform: scaleY(1); }
.cc-doc__timeline .cc-timeline__dot { top: 1.6rem; }

/* --- két hasábos vállalás --- */
.cc-compare { margin: 2rem 0 2.5rem; }
.cc-compare__card { height: 100%; padding: 1.75rem; }
.cc-compare__card h3 {
  margin: 0 0 1.25rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--cc-card-line);
  font-size: 1.0625rem;
}
.cc-compare__card ul { list-style: none; padding: 0; margin: 0; }
.cc-compare__card li {
  position: relative;
  padding: .45rem 0 .45rem 1.5rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--cc-muted);
}
.cc-compare__card li::before {
  content: "";
  position: absolute;
  left: 0; top: .95rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 2px solid var(--cc-card-line-hover);
}
.cc-compare__card--accent { border-color: rgba(6, 182, 212, .3); background: rgba(6, 182, 212, .05); }
.cc-compare__card--accent li::before { border-color: var(--cc-accent); }

/* --- záró kártya --- */
.cc-author { margin-top: 3.5rem; padding: 2rem; }
.cc-author > strong {
  display: block;
  font-family: var(--cc-ff-display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--cc-text);
}
.cc-author__role { display: block; font-size: .9375rem; color: var(--cc-dim); margin-top: .25rem; }
.cc-author dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1.25rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cc-card-line);
}
.cc-author dt { font-size: .8125rem; color: var(--cc-dim); }
.cc-author dd { margin: 0; font-size: .8125rem; color: var(--cc-text); }
.cc-author__copy { margin: 1.25rem 0 0 !important; font-size: .8125rem !important; color: var(--cc-dim); }

.cc-doc__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; }

/* --- aktív fejlécpont --- */
.cc-page .tp-main-menu nav > ul > li > a.is-current { color: var(--cc-text); }
.cc-page .tp-main-menu nav > ul > li > a.is-current::after { transform: scaleX(1); }
.cc-offcanvas__nav a[aria-current="page"] { color: var(--cc-accent-2); }

@media (max-width: 1199.98px) {
  .cc-toc {
    position: static;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--cc-card-line);
    columns: 2;
    column-gap: 2rem;
  }
  .cc-toc h2 { column-span: all; }
}

@media (max-width: 767.98px) {
  .cc-concept-hero { padding-top: 8rem; padding-bottom: 2.5rem; }
  .cc-concept-hero__meta { gap: 1.25rem 2rem; }
  .cc-concept-body { padding-bottom: 4.5rem; }
  .cc-doc h2 { margin-top: 3.25rem; }
  .cc-points { grid-template-columns: 1fr; }
  .cc-toc { columns: 1; }
  .cc-doc__timeline { padding-left: 2.25rem; }
}

/* =========================================================================
   RAGADÓS ELEMEK
   A position: sticky nem működik olyan ősben, amelyen overflow: hidden van.
   A .cc-section alapból rejti a túlnyúlást, ezért a ragadós tartalomjegyzék,
   a folyamat bal hasábja és az űrlap melletti blokk sem tapadt meg.
   Ezekben a szakaszokban overflow: clip kell, ami vág, de a sticky működik.
   ========================================================================= */

.cc-section.cc-concept-body,
.cc-section.cc-journey-area,
.cc-section.cc-form-area {
  overflow: clip;
}

/* a tartalomjegyzék a szakasz tetejéhez igazodjon, ne lógjon lejjebb */
.cc-concept-body { padding-top: 2rem; }
.cc-toc { top: 7rem; }

/* --- fenntartott együttesek kártyái --- */
.cc-org-card { height: 100%; padding: 1.4rem 1.35rem; }
.cc-org-card h3 {
  margin: 0 0 .6rem;
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-text);
}
.cc-org-card p {
  margin: 0 !important;
  font-size: .9375rem !important;
  line-height: 1.6 !important;
  color: var(--cc-muted);
}
.cc-org-card--accent { border-color: rgba(6, 182, 212, .3); background: rgba(6, 182, 212, .05); }
.cc-org-card--accent h3 { color: var(--cc-accent-2); }

/* a pontos lista félkövér nyitánnyal */
.cc-points li b { color: var(--cc-text); font-weight: 600; }

/* =========================================================================
   JELENTKEZÉSI OLDAL – A MENET SZAKASZAI
   ========================================================================= */

.cc-circles-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-circles-area .cc-lead { max-width: 46rem; }
.cc-circles { margin-top: 3rem; }

/* --- közös próbanapok és koncert --- */
.cc-concert__facts { margin-top: 3.5rem; }
.cc-concert__copy { margin-top: 3.5rem; }
.cc-concert__copy p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--cc-muted);
  margin-bottom: 1.25rem;
}
.cc-concert__copy strong { color: var(--cc-text); font-weight: 600; }
.cc-concert__claim {
  margin-top: 2rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cc-card-line);
  font-size: 1.1875rem !important;
  color: var(--cc-text) !important;
}

/* --- a zenei feladat kifejtése --- */
.cc-task__more { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--cc-card-line); }
.cc-task__more h3 {
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  color: var(--cc-text);
  margin: 0 0 .85rem;
}
.cc-task__more h3 + p + h3 { margin-top: 2.25rem; }
.cc-task__more p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cc-muted);
  margin-bottom: 0;
}
.cc-task__more strong { color: var(--cc-text); font-weight: 600; }
.cc-task__more .cc-points { grid-template-columns: 1fr; margin-bottom: 1.5rem; }

/* --- az első négy hét --- */
.cc-trial-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-trial-area .cc-lead { max-width: 46rem; }
.cc-trial-area .cc-compare { margin-top: 3rem; }
.cc-trial-area .cc-statement { max-width: 52rem; }

/* --- kinek szól --- */
.cc-audience-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-audience__copy p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--cc-muted);
  margin-bottom: 1.25rem;
}
.cc-audience__copy p:last-child { margin-bottom: 0; }
.cc-audience__copy strong { color: var(--cc-text); font-weight: 600; }

/* --- két gomb az alapítói szakaszban --- */
.cc-founder__links { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* --- kapcsolatgomb a kérdéseknél --- */
.cc-faq__contact { margin-top: 1.5rem; }

@media (max-width: 767.98px) {
  .cc-circles-area,
  .cc-trial-area,
  .cc-audience-area { padding-top: 5rem; padding-bottom: 5rem; }
  .cc-task__more { margin-top: 3rem; padding-top: 2.5rem; }
  .cc-concert__facts,
  .cc-concert__copy { margin-top: 2.5rem; }
}

/* --- felsorolás az idővonal kártyáin --- */
.cc-timeline__list {
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
}
.cc-timeline__list li {
  position: relative;
  padding: .25rem 0 .25rem 1.1rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--cc-dim);
}
.cc-timeline__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .78rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cc-accent);
}

/* --- a résztvevői applikáció szakasza --- */
.cc-app-area { padding-top: 8rem; padding-bottom: 8rem; }
.cc-app-area .cc-lead { max-width: 46rem; }
.cc-app__grid { margin-top: 3rem; }

@media (max-width: 767.98px) {
  .cc-app-area { padding-top: 5rem; padding-bottom: 5rem; }
}

/* összetartozó adatok – dátum, időpont – ne törjenek szét */
.cc-nowrap { white-space: nowrap; }

/* =========================================================================
   JOGI DOKUMENTUM – ADATKEZELÉSI TÁBLÁK
   ========================================================================= */

.cc-dpa { margin: 1.75rem 0 2.25rem; padding: 1.5rem 1.75rem; }
.cc-dpa h3 {
  margin: 0 0 1.1rem !important;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--cc-card-line);
  font-family: var(--cc-ff-head);
  font-size: 1.0625rem;
  color: var(--cc-text);
}
.cc-dpa dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: .1rem 1.75rem;
  margin: 0;
}
.cc-dpa dt {
  padding: .55rem 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-accent-2);
  border-top: 1px solid var(--cc-card-line);
}
.cc-dpa dd {
  margin: 0;
  padding: .55rem 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cc-muted);
  border-top: 1px solid var(--cc-card-line);
}
.cc-dpa dt:first-of-type,
.cc-dpa dt:first-of-type + dd { border-top: 0; }
.cc-dpa dd strong { color: var(--cc-text); font-weight: 600; }
.cc-dpa dd a { color: var(--cc-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.cc-dpa dd a:hover { color: var(--cc-text); }

.cc-doc p a {
  color: var(--cc-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-doc p a:hover { color: var(--cc-text); }

@media (max-width: 575.98px) {
  .cc-dpa { padding: 1.25rem 1.25rem; }
  .cc-dpa dl { grid-template-columns: 1fr; gap: 0; }
  .cc-dpa dd { border-top: 0; padding-top: 0; padding-bottom: .9rem; }
  .cc-dpa dt { padding-bottom: .3rem; }
}

/* =========================================================================
   JELENTKEZŐI FELÜLET — belepes.html
   ========================================================================= */

.cc-page--belepes .cc-page-content { min-height: 70vh; }

/* --- 0. belépés --- */
.cc-gate { padding-top: 10rem; padding-bottom: 8rem; }
.cc-gate__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
.cc-gate__form { padding: 2rem; margin-top: 2rem; }
.cc-gate__form .cc-btn { width: 100%; justify-content: center; margin-top: .5rem; }
.cc-gate__form #kod {
  font-family: var(--cc-ff-head);
  font-size: 1.5rem;
  letter-spacing: .35em;
  text-align: center;
}
.cc-gate__help { margin: 1.25rem 0 0; font-size: .875rem; color: var(--cc-dim); }
.cc-gate__help a { color: var(--cc-accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* --- állapotsáv ---
   A sortávolságot MINDENHOL meg kell adni: a sablon 28 pixeles alapértéke
   egy 16 pixeles szöveg alatt tizenkét pixel üres teret hagy, és ettől a
   címke meg az értéke messze kerül egymástól.

   A határidő nem egy adat a többi között: ez az egyetlen, ami múlik.
   Ezért nem sorban áll velük, hanem saját kártyát kap. */
.cc-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: 1.25rem 0 1.75rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--cc-card-line);
}

.cc-status-bar__adat {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
}

.cc-status-bar span {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-dim);
  margin-bottom: .35rem;
}
.cc-status-bar strong {
  display: block;
  font-family: var(--cc-ff-head);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--cc-text);
}

/* --- a határidő kártyája --- */
.cc-status-bar__hatarido {
  position: relative;
  padding: 1rem 1.35rem 1rem 1.5rem;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-card-line);
  background: var(--cc-card-bg);
  overflow: hidden;
}
/* egy vékony akcentuscsík: ettől olvasható úgy, hogy ez a fontos */
.cc-status-bar__hatarido::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cc-accent), var(--cc-accent-3));
}
.cc-status-bar__hatarido span { color: var(--cc-accent-2); }
.cc-status-bar__hatarido strong {
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cc-status-bar small {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--cc-muted);
}
/* Kilépés: csendes, a három adat mellett. Amíg a belépés nem maradt meg,
   ez nem hiányzott — a frissítés úgyis kiléptetett. Most már kell. */
.cc-status-bar__kilep {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--cc-card-line);
  border-radius: 10px;
  padding: .3rem .8rem;
  font-family: var(--cc-ff-body);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--cc-muted);
  cursor: pointer;
  transition: color .2s var(--cc-ease), border-color .2s var(--cc-ease);
}
.cc-status-bar__kilep:hover { color: var(--cc-text); border-color: var(--cc-card-line-hover); }

/* A „maradjak bejelentkezve” magyarázata halkabb, mint maga a kérdés. */
.cc-gate__marad { margin: 1.25rem 0 .5rem; }
.cc-gate__marad small {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--cc-dim);
}

/* --- a kiemelt kártya változatai ---
   Ugyanaz a szerkezet, más jelentés. A szín mondja meg, hogy sürget-e,
   lezárult-e, vagy épp jó hír. */
.cc-status-bar__hatarido--lejart::before {
  background: linear-gradient(180deg, #f87171, #fbbf24);
}
.cc-status-bar__hatarido--lejart span { color: #f87171; }

.cc-status-bar__hatarido--kesz::before {
  background: linear-gradient(180deg, #34d399, var(--cc-accent-2));
}
.cc-status-bar__hatarido--kesz span { color: #34d399; }

.cc-status-bar__hatarido--semleges::before {
  background: var(--cc-card-line-hover);
}
.cc-status-bar__hatarido--semleges span { color: var(--cc-muted); }

/* a hátralévő napok száma nagyban — ez az, amit egy pillantással keresel */
.cc-status-bar small b {
  font-family: var(--cc-ff-head);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cc-accent-2);
  margin-right: .3rem;
  vertical-align: -.1em;
}

/* --- 1. a feladat --- */
.cc-task-page { padding-top: 9rem; padding-bottom: 8rem; }
.cc-task-page__steps { margin-top: 2.5rem; }
.cc-task-page__steps h3 { margin-top: 2rem; }
.cc-task-page__steps h3:first-child { margin-top: 0; }
.cc-task-page__steps .cc-points { grid-template-columns: 1fr; margin-bottom: 0; }

.cc-download, .cc-upload { padding: 1.75rem; }
.cc-upload { margin-top: 1.5rem; }
.cc-download h3, .cc-upload h3 {
  margin: .5rem 0 1.25rem;
  font-family: var(--cc-ff-head);
  font-size: 1.125rem;
  color: var(--cc-text);
}
/* A `space-between` a régi, kétrészes felirathoz kellett („A kottarészlet"
   balra, „PDF" jobbra). Egyetlen gombnál, felirat + ikon párossal a
   középre zárás a helyes, hogy a feltöltés gombjával egy formát mutasson. */
.cc-download .cc-btn { width: 100%; justify-content: center; gap: .5rem; margin-bottom: .75rem; }
.cc-download .cc-btn small { font-size: .75rem; letter-spacing: .1em; color: var(--cc-dim); }
.cc-download__note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--cc-dim); }

.cc-upload__drop {
  display: block;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--cc-card-line-hover);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .3s var(--cc-ease), background-color .3s var(--cc-ease);
}
.cc-upload__drop:hover { border-color: var(--cc-accent); background: rgba(6, 182, 212, .05); }
.cc-upload__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cc-upload__drop span { font-size: .9375rem; color: var(--cc-muted); }
.cc-upload__status { margin: .9rem 0; font-size: .875rem; line-height: 1.5; color: var(--cc-muted); min-height: 1.3em; }
.cc-upload__status.is-error { color: #fca5a5; }
.cc-upload .cc-btn { width: 100%; justify-content: center; }

/* --- üzenetképernyők --- */
.cc-message { padding-top: 10rem; padding-bottom: 8rem; }
.cc-message .cc-lead { max-width: 40rem; }
.cc-message .cc-lead a { color: var(--cc-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.cc-message .cc-dpa { margin: 2rem 0; }

/* --- 3. meghívás --- */
.cc-invite { padding-top: 9rem; padding-bottom: 8rem; }
.cc-invite__title {
  font-family: var(--cc-ff-display);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.cc-invite__lead { max-width: 44rem; }
.cc-invite__form { padding: 2rem; }
.cc-invite__note { padding: 1.75rem; }
.cc-invite__note .cc-points { grid-template-columns: 1fr; margin: 1rem 0 0; }
.cc-invite__note .cc-points li { font-size: .875rem; }
.cc-invite__note a { color: var(--cc-accent-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 991.98px) {
  /* keskenyen a kártya teljes szélességű, hogy ne szoruljon össze */
  .cc-status-bar { justify-content: flex-start; }
  .cc-status-bar__hatarido { width: 100%; }
  .cc-gate, .cc-message, .cc-invite, .cc-task-page { padding-top: 7rem; padding-bottom: 5rem; }
}

.cc-upload__consent { margin: 1rem 0; }
.cc-upload .cc-field__error { display: block; }
.cc-upload .cc-field__error:empty { display: none; }
.cc-upload__consent label { font-size: .8125rem; line-height: 1.55; }
.cc-invite__form fieldset:last-of-type { margin-bottom: 1.5rem; }

.cc-invite__aside .cc-invite__title { font-size: clamp(2rem, 3.4vw, 3rem); }
.cc-invite__aside .cc-lead { font-size: 1rem; }
.cc-invite__note { margin-top: 2rem; }

/* ==========================================================================
   A KARNAGY SZEMÉLYES ÜZENETE
   --------------------------------------------------------------------------
   A várólista és a lezárult képernyőn ez áll a helyén, ahol egyébként egy
   semleges rendszerüzenet lenne. Idézetként viselkedik: a bal oldali vonal
   jelzi, hogy ez valakinek a szava, nem az oldalé.
   ========================================================================== */
.cc-personal-msg {
   margin: 32px 0 40px;
   padding: 4px 0 4px 24px;
   border-left: 2px solid var(--cc-accent);
}

.cc-personal-msg .cc-lead:last-child {
   margin-bottom: 0;
}

@media (max-width: 575.98px) {
   .cc-personal-msg {
      padding-left: 16px;
      margin: 24px 0 32px;
   }
}

/* ==========================================================================
   SZERVEZŐI FELÜLET — szervezes.html
   --------------------------------------------------------------------------
   Ez nem bemutatkozó oldal, hanem munkaeszköz: sűrűbb, csendesebb, és a
   képernyő teljes magasságát használja. A színvilág ugyanaz, de a mozgás
   és a levegő elmarad — itt a döntés a főszereplő, nem a hatás.
   ========================================================================== */

/* ==========================================================================
   A SZERSZÁM SZÓTÁRA
   --------------------------------------------------------------------------
   Ez NEM a bemutatkozó oldal szótára. Ott nagy betűk és sok levegő van, itt
   sűrű munkafelület — ugyanaz a méretezés a kettőn máshogy viselkedik.

   Két szabály, és mindkettőt meg lehet jegyezni:

     1. A FORMA MEGMONDJA, MI AZ
        --cc-ctl-r        10px   amit MEGNYOMSZ  (gomb, mező, választó)
        --cc-ctl-r-cimke  999px  amit ELOLVASOL  (jelvény, chip, állapot)

        Ma a kettő ugyanúgy néz ki, ezért egy állapotjelvényről nem látszik,
        hogy nem lehet rákattintani.

     2. A KERET LEGYEN KIVÉTEL
        A vezérlők többsége csendes: keret nélkül, halvány szöveggel, és a
        keret csak rámutatáskor jelenik meg. Keret azt illeti, ami tagol —
        a kártyákat. Ma tizenöt vezérlőből tizenháromnak van saját kerete,
        és ezek versengenek a kártyák keretével, amikben ülnek.

   HÁROM MÉRETLÉPCSŐ, nem nyolc. Ha egy új vezérlőhöz egyik sem illik, az
   majdnem biztosan azt jelenti, hogy a vezérlő nem oda való — nem azt, hogy
   kell egy negyedik lépcső.

   A szótár a szervezői oldalra van szabva, ezért a .cc-page--admin
   hatókörében él: a nyilvános oldalak nem látják, tehát nem is tudja
   véletlenül elmozdítani őket.
   ========================================================================== */
.cc-page--admin {
  /* kerekítés — a forma megmondja, mi az */
  --cc-ctl-r: 10px;
  --cc-ctl-r-cimke: 999px;

  /* méret: kicsi — másodlagos, szövegbe ágyazott */
  --cc-ctl-sm-pad: .25rem .65rem;
  --cc-ctl-sm-font: .75rem;

  /* méret: közepes — az alapértelmezett */
  --cc-ctl-md-pad: .4rem .85rem;
  --cc-ctl-md-font: .8125rem;

  /* méret: nagy — súlyos műveletek */
  --cc-ctl-lg-pad: .55rem 1.1rem;
  --cc-ctl-lg-font: .875rem;

  /* ikongomb: karika nélkül, négyzetes. A jel betűmérete külön, mert az
     nem szöveg: egy rajzot kell kitöltenie a dobozban. */
  --cc-ctl-icon: 28px;
  --cc-ctl-icon-font: 1rem;

  /* fejlécsor magassága */
  --cc-ctl-row: 40px;

  /* a csendes súly rámutatáskor kap hátteret, nem keretet */
  --cc-ctl-hover-bg: rgba(255, 255, 255, .05);
}

/* --------------------------------------------------------------------------
   A KÖZÖS ALAP — EGY helyen, nem tizenöt helyen ismételve

   Épp az ismétlés csúszott szét: minden vezérlő maga választott keretet,
   kerekítést és belső teret, és nyolcféle érték lett belőle. Innentől a
   közös rész itt áll, a vezérlőknél már csak az marad, ami TÉNYLEG eltér.

   Csendes az alap: keret nélkül, halvány szöveggel. A keret átlátszó, nem
   hiányzik — így rámutatáskor nem ugrik meg a felület.
   -------------------------------------------------------------------------- */
.cc-page--admin .cc-nezet__gomb,
.cc-page--admin .cc-admin__refresh,
.cc-page--admin .cc-admin__szurok button,
.cc-page--admin .cc-jelolo,
.cc-page--admin .cc-admin__templates button,
.cc-page--admin .cc-magyarazat__fulek button,
.cc-page--admin .cc-reteg__cimke button,
.cc-page--admin .cc-admin__balance-toggle,
.cc-page--admin .cc-magyarazat__frissit,
.cc-page--admin .cc-player__jump button,
.cc-page--admin .cc-nezet__lista button {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--cc-ctl-r);
  color: var(--cc-muted);
  cursor: pointer;
  transition: color .2s var(--cc-ease), border-color .2s var(--cc-ease),
              background-color .2s var(--cc-ease);
}

.cc-page--admin .cc-nezet__gomb:hover,
.cc-page--admin .cc-admin__refresh:hover,
.cc-page--admin .cc-admin__szurok button:hover,
.cc-page--admin .cc-jelolo:hover:not(:disabled),
.cc-page--admin .cc-admin__templates button:hover,
.cc-page--admin .cc-magyarazat__fulek button:hover,
.cc-page--admin .cc-reteg__cimke button:hover,
.cc-page--admin .cc-admin__balance-toggle:hover,
.cc-page--admin .cc-magyarazat__frissit:hover,
.cc-page--admin .cc-player__jump button:hover,
.cc-page--admin .cc-nezet__lista button:hover {
  background: var(--cc-ctl-hover-bg);
  color: var(--cc-text);
}

/* ---- kicsi: másodlagos, szövegbe ágyazott ---- */
.cc-page--admin .cc-admin__szurok button,
.cc-page--admin .cc-admin__templates button,
.cc-page--admin .cc-magyarazat__fulek button,
.cc-page--admin .cc-reteg__cimke button,
.cc-page--admin .cc-admin__balance-toggle,
.cc-page--admin .cc-magyarazat__frissit,
.cc-page--admin .cc-player__jump button {
  padding: var(--cc-ctl-sm-pad);
  font-size: var(--cc-ctl-sm-font);
}

/* ---- közepes: az alapértelmezett ---- */
.cc-page--admin .cc-nezet__gomb,
.cc-page--admin .cc-nezet__lista button,
.cc-page--admin .cc-jelolo {
  padding: var(--cc-ctl-md-pad);
  font-size: var(--cc-ctl-md-font);
}

/* ---- ami épp AKTÍV, az kap keretet — ez a „kiemelt” súly ---- */
.cc-page--admin .cc-nezet__lista button[aria-selected="true"],
.cc-page--admin .cc-magyarazat__fulek button[aria-selected="true"],
.cc-page--admin .cc-admin__templates button.is-active,
.cc-page--admin .cc-admin__szurok button.is-active,
.cc-page--admin .cc-jelolo.is-active {
  color: var(--cc-text);
  border-color: var(--cc-card-line-hover);
  background: var(--cc-card-bg);
}

/* ---- fókusz: mindig látszódjon, billentyűvel is használható ---- */
.cc-page--admin button:focus-visible,
.cc-page--admin input:focus-visible,
.cc-page--admin textarea:focus-visible,
.cc-page--admin select:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}


/* A `body`-ra SEMMILYEN overflow nem kerül. Azzal a body maga válik
   görgető dobozzá, az oldal szokásos görgetése elveszik, és keskeny
   képernyőn a tartalom alja elérhetetlen lesz. Nincs is rá szükség: az
   alábbi magasságlánc gondoskodik róla, hogy asztali méretben ne lógjon túl.

   A magasságot végig KORLÁTOZNI kell, különben a belső sávok nem tudnak
   görögni: egy `overflow: auto` doboz csak akkor görget, ha van neki
   megszabott magassága. A lánc: cc-admin → a látszó section → a body.
   Ha bárhol kimarad a `min-height: 0`, a rács a tartalomhoz nő, és mivel
   az oldal görgetése ki van kapcsolva, az alja elérhetetlenné válik. */
.cc-admin { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

.cc-admin > [data-cc-nezet="munka"] {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

/* ---- belépőkép ---- */
.cc-admin__gate {
   flex: 1;
   display: grid;
   place-items: center;
   padding: 2rem 1.25rem;
}
.cc-admin__gate-box { width: 100%; max-width: 420px; }
.cc-admin__gate-box .cc-h2 { margin: .5rem 0 1.5rem; }
.cc-admin__note { color: var(--cc-muted); font-size: .9375rem; margin-bottom: 2rem; }
.cc-admin__gate-box .cc-btn { width: 100%; justify-content: center; }
.cc-admin__gate-box .cc-btn--ghost { margin-top: .75rem; }
.cc-admin__code { letter-spacing: .5em; font-size: 1.5rem !important; text-align: center; }
#recaptcha-container { margin-top: 1rem; }

/* ---- fejsáv ---- */
.cc-admin__bar {
   display: flex; align-items: center; justify-content: space-between; gap: 1rem;
   padding: .875rem 1.5rem;
   border-bottom: 1px solid var(--cc-card-line);
   background: var(--cc-bg-soft);
   flex-wrap: wrap;
}
.cc-admin__bar-left, .cc-admin__bar-right { display: flex; align-items: center; gap: .75rem; }
.cc-admin__logo { font-size: .9375rem; letter-spacing: .02em; }
.cc-admin__role {
   font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
   padding: .2rem .55rem; border-radius: 999px;
   border: 1px solid var(--cc-card-line); color: var(--cc-accent-2);
}
.cc-admin__who { font-size: .8125rem; color: var(--cc-muted); }
.cc-admin__bar .cc-btn { padding: .4rem .9rem; font-size: .8125rem; }

/* ---- kétoszlopos munkafelület ---- */
.cc-admin__body {
   flex: 1;
   display: grid;
   grid-template-columns: minmax(280px, 360px) 1fr;
   min-height: 0;
}

.cc-admin__list {
   border-right: 1px solid var(--cc-card-line);
   overflow-y: auto;
   min-height: 0;
   padding: 1.25rem 1rem 3rem;
}
.cc-admin__list-head {
   display: flex; align-items: center; gap: .5rem;
   min-height: var(--cc-ctl-row);
   margin-bottom: .85rem;
}
.cc-admin__list-head h2 { font-size: 1rem; margin: 0; }
.cc-admin__refresh {
   flex: 0 0 auto;
   width: var(--cc-ctl-icon); height: var(--cc-ctl-icon);
   padding: 0;
   font-size: var(--cc-ctl-icon-font);
}
.cc-admin__refresh:hover { color: var(--cc-accent-2); border-color: var(--cc-card-line-hover); }

.cc-admin__rows { list-style: none; margin: 0; padding: 0; }

.cc-admin__row {
   position: relative;
   padding: .55rem .9rem .55rem 1rem;
   border-radius: 12px;
   cursor: pointer;
   display: block;
   transition: background-color .2s, border-color .2s;
}
/* A sablonból örökölt 28 pixeles sortávolság a 15 pixeles névnél
   tizenhárom pixel üres teret jelentene, soronként kétszer. */
.cc-admin__row strong { display: block; font-size: .9375rem; line-height: 1.3; }
.cc-admin__row-meta {
   display: block; font-size: .8125rem; line-height: 1.35;
   color: var(--cc-muted); margin-top: .1rem;
}

/* A hétnapos ígéret a listán is látszik, nemcsak a reggeli levélben. */
/* A sürgősség a JOBB szélen, mert az állapot a balon van: a kettő két
   különböző kérdésre válaszol, és így egyszerre olvasható. */
.cc-admin__row[data-surgos]::before {
   content: ""; position: absolute; right: 0; top: .55rem; bottom: .55rem;
   width: 2px; border-radius: 2px;
}
.cc-admin__row[data-surgos="kozeleg"]::before { background: var(--cc-accent); }
.cc-admin__row[data-surgos="ma"]::before      { background: #fbbf24; }
.cc-admin__row[data-surgos="lejart"]::before  { background: #f87171; }

.cc-admin__tag {
   display: inline-block; margin-top: .35rem;
   font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
   color: var(--cc-dim);
}

.cc-admin__subhead { font-size: .875rem; margin: 2rem 0 .35rem; }
.cc-admin__hint { font-size: .8125rem; color: var(--cc-dim); margin: 0 0 .75rem; }
.cc-admin__empty { font-size: .875rem; color: var(--cc-muted); padding: 1rem 0; }

/* ---- döntőlap ---- */
.cc-admin__panel { overflow-y: auto; min-height: 0; padding: 2.5rem 2.5rem 6rem; }
.cc-admin__placeholder {
   color: var(--cc-dim); font-size: .9375rem;
   display: grid; place-items: center;
   min-height: 40vh; margin: 0; text-align: center;
}

.cc-admin__person { margin-bottom: 2rem; }
.cc-admin__person .cc-eyebrow { margin-bottom: .75rem; }
.cc-admin__name {
   font-family: var(--cc-ff-head);
   font-size: clamp(1.75rem, 3vw, 2.5rem);
   line-height: 1.1;
   margin: 0 0 1.25rem;
}

.cc-admin__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc-admin__chip {
   display: inline-block;
   padding: .35rem .85rem;
   border-radius: 999px;
   border: 1px solid var(--cc-card-line);
   background: var(--cc-card-bg);
   font-size: .8125rem;
   color: var(--cc-muted);
   text-decoration: none;
   transition: color .25s var(--cc-ease), border-color .25s var(--cc-ease);
}
a.cc-admin__chip:hover { color: var(--cc-accent-2); border-color: var(--cc-accent); }
.cc-admin__chip--wait[data-surgos="kozeleg"] { color: var(--cc-accent-2); border-color: var(--cc-accent); }
.cc-admin__chip--wait[data-surgos="ma"]     { color: #fbbf24; border-color: rgba(251,191,36,.45); }
.cc-admin__chip--wait[data-surgos="lejart"] { color: #f87171; border-color: rgba(248,113,113,.45); }

/* ---- a felvétel kártyája ---- */
.cc-admin__rec { padding: 1.75rem 1.6rem; margin-bottom: 1.25rem; }
.cc-admin__rec-label {
   display: block;
   font-family: var(--cc-ff-head);
   font-size: .75rem;
   letter-spacing: .16em;
   color: var(--cc-accent-2);
   margin-bottom: 1.25rem;
}
.cc-admin__file { font-size: .75rem; color: var(--cc-dim); }

/* ---- e-mailben érkezett felvétel ----
   Ritka kivétel, ezért csendes: szaggatott keret, kisebb súly. A lejátszó
   marad a fő elem; ez csak akkor jelenik meg, amikor tényleg kell. */
.cc-admin__email {
   margin-top: 1.1rem;
   padding: 1rem 1.1rem;
   border: 1px dashed var(--cc-card-line);
   border-radius: 12px;
   background: rgba(255, 255, 255, .02);
}
.cc-admin__email p:last-child { margin-bottom: 0; }
.cc-admin__email-cim { font-size: .9375rem; color: var(--cc-text); margin: 0 0 .35rem; }
.cc-admin__email-megj {
   font-size: .875rem; color: var(--cc-muted); margin: 0 0 .75rem;
   padding-left: .75rem; border-left: 2px solid var(--cc-card-line);
}
.cc-admin__email-mezok {
   display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.cc-admin__email-mezok label {
   display: flex; flex-direction: column; gap: .3rem;
   flex: 1 1 12rem;
   font-family: var(--cc-ff-head);
   font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
   color: var(--cc-accent-2);
}
.cc-admin__email-mezok input {
   padding: .5rem .7rem;
   border-radius: 10px; border: 1px solid var(--cc-card-line);
   background: rgba(255, 255, 255, .02); color: var(--cc-text);
   font-family: var(--cc-ff-body); font-size: .875rem;
   letter-spacing: 0; text-transform: none;
}
.cc-admin__email-mezok input::placeholder { color: var(--cc-dim); }

/* ---- saját lejátszó ----
   A böngészőbe épített <audio> minden rendszeren máshogy néz ki, és sehol
   sem illik ide. Ez ugyanabból a szótárból épül, mint az oldal többi eleme. */
.cc-player { display: flex; align-items: center; gap: 1.1rem; }

.cc-player__play {
   flex: 0 0 auto;
   position: relative;
   width: 56px; height: 56px;
   border-radius: 50%;
   border: 1px solid var(--cc-accent);
   background: rgba(6, 182, 212, .12);
   color: var(--cc-accent-2);
   cursor: pointer;
   display: grid; place-items: center;
   transition: background-color .3s var(--cc-ease), transform .3s var(--cc-ease);
}
.cc-player__play:hover { background: rgba(6, 182, 212, .22); transform: scale(1.04); }
.cc-player__play:active { transform: scale(.97); }
.cc-player__icon { width: 24px; height: 24px; grid-area: 1 / 1; }
.cc-player__play.is-loading .cc-player__icon { opacity: 0; }
.cc-player__spin {
   grid-area: 1 / 1;
   width: 20px; height: 20px;
   border: 2px solid rgba(255, 255, 255, .2);
   border-top-color: var(--cc-accent-2);
   border-radius: 50%;
   animation: cc-spin .8s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

.cc-player__body { flex: 1; min-width: 0; }

/* Hullámsáv: állandó mintázat, a lejátszott részt színnel jelöli.
   Két réteg, azonos oszlopokkal; a felsőt clip-path vágja a haladáshoz.
   Így egyetlen CSS-változó mozgatja az egészet, és nem kell oszloponként
   stílust írni minden képkockában. */
.cc-player__bars {
   --cc-hol: 0%;
   position: relative;
   height: 38px;
   margin-bottom: .35rem;
}
.cc-player__bars-l {
   position: absolute; inset: 0;
   display: flex; align-items: flex-end; gap: 2px;
}
.cc-player__bars-l i {
   flex: 1; min-width: 2px; border-radius: 2px;
   background: rgba(255, 255, 255, .13);
}
.cc-player__bars-l--on {
   clip-path: inset(0 calc(100% - var(--cc-hol)) 0 0);
   transition: clip-path .1s linear;
}
.cc-player__bars-l--on i {
   background: linear-gradient(180deg, var(--cc-accent-2), var(--cc-accent));
}

.cc-player__track {
   position: relative;
   height: 4px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .1);
   cursor: pointer;
   touch-action: none;
}
.cc-player__track:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 4px; }
.cc-player__fill {
   position: absolute; inset: 0 auto 0 0;
   width: 0;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
}
.cc-player__knob {
   position: absolute; top: 50%; left: 0;
   width: 12px; height: 12px; margin: -6px 0 0 -6px;
   border-radius: 50%;
   background: var(--cc-accent-2);
   box-shadow: 0 0 0 4px rgba(6, 182, 212, .18);
   pointer-events: none;
}
.cc-player__meta {
   display: flex; justify-content: space-between; align-items: baseline;
   gap: 1rem; margin-top: .5rem;
   font-size: .8125rem; color: var(--cc-muted);
   font-variant-numeric: tabular-nums;
}

.cc-player__jump { display: flex; flex-direction: column; gap: .35rem; flex: 0 0 auto; }
.cc-player__jump button { font-variant-numeric: tabular-nums; }
.cc-player__jump button:hover { color: var(--cc-accent-2); border-color: var(--cc-accent); }

/* ---- amit magáról írt ---- */
/* Egymás ALATT, nem egymás mellett: két hasáb közül a hosszabb üresen
   hagyja a másik alját, és egy hosszú üzenet keskeny oszlopban
   olvashatatlanul magas lesz. */
.cc-admin__said {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   margin-bottom: 1.25rem;
}
.cc-admin__said .cc-fact p { margin: 0; font-size: .9375rem; color: var(--cc-text); line-height: 1.7; }
.cc-admin__said .cc-personal-msg { margin: 0; }
.cc-admin__said .cc-personal-msg p { font-size: .9375rem; line-height: 1.7; }

/* ---- két oszlop, ha van hely ----
   A jobb oldali sáv széles ablakban ezer képpont fölött van; egy oszlopba
   zsúfolva fölösleges görgetés lenne közte és a döntés között. Balra kerül,
   amit MEGHALLGATSZ és ELOLVASOL, jobbra, amit ELDÖNTESZ — és a döntés
   ragadós, tehát a szemed előtt marad, amíg a bal oldalt görgeted. */
.cc-admin__cols { display: block; }

/* A küszöb azért ilyen magas, mert a bal oldalt is használni kell: a
   listasáv 360 pixelt elvesz, és ha a maradékot kettéosztjuk, 1400 alatt a
   bal oszlop szűkebb lenne, mint egyoszlopos elrendezésben. Akkor pedig
   nem nyertünk semmit. */
@media (min-width: 1400px) {
   .cc-admin__cols {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.75rem;
      align-items: start;
   }
   /* A jobb oszlop SZÁNDÉKOSAN NEM ragadós.
      Kipróbáltam, és minden változatban ugyanabba futott: a döntőkártya a
      nyitott egyensúlytáblával magasabb lesz a képernyőnél, a ragasztás
      pedig épp azt akadályozza meg, hogy a végére lehessen görgetni — a
      döntőgombok elérhetetlenné válnak. Saját görgetéssel megoldható
      lenne, de akkor két görgetősáv verseng egymással ugyanabban a
      sarokban. A haszon — hogy egyszerre látod a felvételt és a döntést —
      a kétoszlopos elrendezésből jön, nem a ragasztásból. */
}

/* ---- a jobb oszlop kártyái ----
   A döntés három lépés, tehát három kártya: mennyi hely van (egyensúly),
   hova kerül (KórusKör, szólam), és mit írunk neki (válasz, gombok).
   Egyetlen hosszú kártyában ez a három összemosódott. */
.cc-admin__block { padding: 1.6rem 1.5rem 1.4rem; margin-bottom: 1.25rem; }
.cc-admin__block .cc-eyebrow { margin-bottom: 1.25rem; }
.cc-admin__block:last-child { margin-bottom: 0; }
.cc-admin__block .cc-field:last-of-type { margin-bottom: 0; }
.cc-admin__block .cc-admin__row2 { margin-bottom: 0; }
.cc-admin__block .cc-admin__row2 .cc-field { margin-bottom: 0; }

/* A magyarázó mondat a személyes válasz fölött: fontos, de nem címsor. */
.cc-admin__note {
   font-size: .8125rem;
   line-height: 1.6;
   color: var(--cc-muted);
   margin: -.25rem 0 .85rem;
}
.cc-admin__note strong { color: var(--cc-text); }

/* ---- a döntés kártyája ---- */
.cc-admin__decide { padding: 1.6rem 1.5rem 1.4rem; }
.cc-admin__decide .cc-field label { line-height: 1.5; }

/* A személyes válasz gyakran több bekezdés. Ha alacsony a mező, a karnagy
   egy ablakon át ír, és nem látja egyben, amit mond — ettől lesz a szöveg
   szaggatott. Legyen elég magas, hogy egy teljes válasz elférjen. */
.cc-admin__decide textarea {
   line-height: 1.65;
   min-height: 16rem;
   resize: vertical;
}
.cc-admin__decide .cc-eyebrow { margin-bottom: 1.5rem; }
.cc-admin__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cc-admin__templates {
   display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
   margin-bottom: .5rem; font-size: .75rem; color: var(--cc-dim);
}



.cc-admin__buttons { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0 .75rem; }

/* EGYIK DÖNTŐGOMB SEM LÁTSZIK KIJELÖLTNEK.
   Kitöltött gomb azt sugallná, hogy az a választott — miközben itt épp az
   a lényeg, hogy még nem döntöttél. Mind a négy azonos súlyú; a jelentésük
   csak rámutatáskor válik el, a keret színével. Így semmi nem tereli a
   kezed, de a súlyos gomb azért felismerhető marad. */
/* A DÖNTŐGOMBOK KIEMELTEK, nem csendesek.
   A csendes súly a másodlagos vezérlőké. Ezek a lap legfontosabb és
   visszavonhatatlan műveletei — ha ugyanolyan halkak, mint egy sablon-
   választó, akkor sima szövegnek látszanak. Keretet kapnak, a szín pedig
   rámutatáskor mondja meg, melyik mit jelent. */
.cc-admin__buttons .cc-btn {
   padding: var(--cc-ctl-lg-pad);
   border-radius: var(--cc-ctl-r);
   font-size: var(--cc-ctl-lg-font);
   background: var(--cc-card-bg);
   border: 1px solid var(--cc-card-line-hover);
   color: var(--cc-text);
   box-shadow: none;
   cursor: pointer;
   transition: color .2s var(--cc-ease), border-color .2s var(--cc-ease),
               background-color .2s var(--cc-ease);
}
.cc-admin__buttons .cc-btn:hover:not(:disabled) { background: var(--cc-ctl-hover-bg); }
.cc-admin__buttons .cc-btn:hover,
.cc-admin__buttons .cc-btn:focus-visible {
   background: rgba(255, 255, 255, .04);
}
.cc-admin__buttons .cc-btn[data-cc-dont="meghivom"]:hover,
.cc-admin__buttons .cc-btn[data-cc-behiv]:hover {
   color: var(--cc-accent-2); border-color: var(--cc-accent);
}
.cc-admin__buttons .cc-btn[data-cc-dont="varolista"]:hover {
   color: #fbbf24; border-color: rgba(251, 191, 36, .5);
}
.cc-admin__buttons .cc-btn[data-cc-dont="elutasitom"]:hover {
   color: #f87171; border-color: rgba(248, 113, 113, .5);
}
.cc-admin__buttons .cc-btn[data-cc-dont="meghallgatva"] { color: var(--cc-muted); }
.cc-admin__buttons .cc-btn[data-cc-dont="meghallgatva"]:hover { color: var(--cc-text); }

/* ---- nézetválasztó ----
   Négy fül és a frissítő gomb nem fért el egy 280 pixeles sávban. Egy
   lenyíló bármilyen szélességnél elfér, és kinyitva mind a négy
   darabszáma egyszerre látszik — ami a füleknél is csak akkor látszott,
   ha volt hely rájuk. */
.cc-nezet { position: relative; flex: 1; min-width: 0; }

.cc-nezet__gomb { width: 100%; display: flex; align-items: center; gap: .5rem; }
.cc-nezet__gomb:hover { border-color: var(--cc-card-line-hover); }
.cc-nezet__gomb > span:first-child {
   min-width: 0; text-align: left;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-nezet__gomb .cc-nezet__nyil { margin-left: auto; }
.cc-nezet__szam {
   flex: 0 0 auto;
   font-size: .6875rem; padding: .1rem .45rem; border-radius: 999px;
   background: var(--cc-card-bg-hover); color: var(--cc-accent-2);
}
.cc-nezet__nyil { flex: 0 0 auto; color: var(--cc-muted); font-size: .75rem; }
.cc-nezet__gomb[aria-expanded="true"] .cc-nezet__nyil { transform: rotate(180deg); }

.cc-nezet__lista {
   position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; right: 0;
   padding: .3rem;
   border-radius: 14px;
   border: 1px solid var(--cc-card-line-hover);
   background: var(--cc-bg-soft);
   box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.cc-nezet__lista button {
   width: 100%;
   display: flex; align-items: center; justify-content: space-between; gap: .75rem;
   text-align: left;
}
.cc-nezet__lista button:hover { background: var(--cc-card-bg); color: var(--cc-text); }

.cc-nezet__lista button span:last-child {
   font-size: .6875rem; padding: .1rem .45rem; border-radius: 999px;
   background: var(--cc-card-bg-hover); color: var(--cc-accent-2);
}
.cc-nezet__lista button[aria-selected="true"] span:last-child { background: rgba(6, 182, 212, .16); }

/* ---- egyensúlytábla ---- */

.cc-admin__balance {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: 1rem; flex-wrap: wrap;
   margin: 0;
}
.cc-admin__balance-now { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cc-admin__balance-now strong { font-size: 1rem; }
.cc-admin__balance-now span { font-size: .8125rem; color: var(--cc-muted); }
.cc-admin__balance-now em { font-size: .8125rem; font-style: normal; margin-top: .25rem; }
.cc-admin__balance-now[data-allapot="hianyzik"] strong { color: var(--cc-accent-2); }
.cc-admin__balance-now[data-allapot="tele"] strong,
.cc-admin__balance-now[data-allapot="tele"] em { color: #fbbf24; }
.cc-admin__balance-now[data-allapot="tul"] strong,
.cc-admin__balance-now[data-allapot="tul"] em { color: #f87171; }

.cc-admin__balance-toggle { white-space: nowrap; }
.cc-admin__balance-toggle:hover { color: var(--cc-accent-2); border-color: var(--cc-accent); }

.cc-admin__balance-full { margin-top: .75rem; overflow-x: auto; }
.cc-admin__table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 480px; }
.cc-admin__table th, .cc-admin__table td {
   padding: .55rem .6rem; text-align: center; border-bottom: 1px solid var(--cc-card-line);
}
.cc-admin__table th {
   font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
   color: var(--cc-muted); font-weight: 600;
}
.cc-admin__table th.is-row { text-align: left; color: var(--cc-text); }
.cc-admin__table .is-total { border-left: 1px solid var(--cc-card-line); font-weight: 600; }
.cc-admin__table td[data-allapot="hianyzik"] { color: var(--cc-accent-2); }
.cc-admin__table td[data-allapot="tele"]     { color: #fbbf24; }
.cc-admin__table td[data-allapot="tul"]      { color: #f87171; }
.cc-admin__wl { margin-left: .3rem; font-size: .75rem; color: var(--cc-dim); }

/* Keskeny képernyőn az egészet VISSZABONTJUK sima dokumentumfolyammá.
   Ott a rögzített magasságú, belül görgő elrendezés nem nyer semmit, viszont
   minden kimaradt `min-height: 0` azonnal elérhetetlen tartalmat okoz. Az
   oldal görögjön, ahogy minden más oldal — ez kevesebb, és nem tud elromlani.

   FIGYELEM: ennek a blokknak a FÁJL VÉGÉN kell maradnia. Egyszer már
   kitörölte egy szakaszcsere, ami átnyúlt rajta — és a hiba csak telefonon
   jött elő, elérhetetlen tartalom formájában. */
@media (max-width: 900px) {
   .cc-admin { display: block; height: auto; min-height: 0; }
   .cc-admin > [data-cc-nezet="munka"] { display: block; min-height: 0; }
   .cc-admin__gate { display: block; padding: 3rem 1.25rem; }
   .cc-admin__gate-box { margin: 0 auto; }
   .cc-admin__body { display: block; }
   .cc-admin__list {
      border-right: 0;
      border-bottom: 1px solid var(--cc-card-line);
      max-height: none;
      overflow: visible;
      min-height: 0;
   }
   .cc-admin__panel { overflow: visible; min-height: 0; padding: 1.5rem 1.25rem 4rem; }
   .cc-admin__row2 { grid-template-columns: 1fr; }
   .cc-admin__said { grid-template-columns: 1fr; }
}

/* ---- levegő a személyes válasz fölött ----
   A mező közvetlenül az egyensúlytábla alatt állt, összeragadva vele.
   Ez a mező a lap legfontosabb része: kapjon szünetet maga előtt. */
/* (Az egyensúly külön kártyára került, így ez a távolságigazítás
   tárgytalanná vált.) */

.cc-admin__templates button.is-asking {
   color: #fbbf24;
   border-color: rgba(251, 191, 36, .55);
}

/* ---- megerősítés ----
   A böngésző rendszerablaka helyett. Itt annak van tétje, hogy KI kap
   MILYEN levelet — azt látni kell, nem egy sorban elolvasni. */
.cc-admin__confirm {
   margin-top: 1.25rem;
   padding: 1.25rem 1.3rem;
   border-radius: var(--cc-radius);
   border: 1px solid rgba(251, 191, 36, .35);
   background: rgba(251, 191, 36, .06);
}
.cc-admin__confirm > strong { display: block; font-size: 1.0625rem; margin-bottom: .35rem; }
.cc-admin__confirm > p { margin: 0 0 1rem; font-size: .875rem; color: var(--cc-muted); }
.cc-admin__confirm ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.cc-admin__confirm li {
   display: flex; gap: .75rem; align-items: baseline;
   padding: .4rem 0;
   border-top: 1px solid var(--cc-card-line);
   font-size: .9375rem;
}
.cc-admin__confirm li:first-child { border-top: 0; }
.cc-admin__confirm li span {
   flex: 0 0 9rem;
   font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
   color: var(--cc-dim);
}
.cc-admin__confirm-buttons { display: flex; gap: .65rem; flex-wrap: wrap; }
.cc-admin__confirm-buttons .cc-btn[data-cc-megerosit] {
   background: #fbbf24; border-color: #fbbf24; color: #1a1a1a; font-weight: 600;
}
.cc-admin__confirm-buttons .cc-btn[data-cc-megerosit]:hover { background: #fcd34d; border-color: #fcd34d; }

/* ---- jelölőgombok ----
   A jelölés BELSŐ: nem küld levelet, nem látja a jelentkező. Ezért itt —
   a döntőgombokkal ellentétben — LÁTSZIK, melyik az aktív: épp az a
   kérdés, mit jelöltél be. */
.cc-admin__marks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }

.cc-jelolo:disabled { opacity: .45; cursor: default; }

.cc-jelolo[data-cc-jeloles="javasolt"].is-active {
   color: #34d399; border-color: rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .1);
}
.cc-jelolo[data-cc-jeloles="talan"].is-active {
   color: #fbbf24; border-color: rgba(251, 191, 36, .55); background: rgba(251, 191, 36, .1);
}
.cc-jelolo[data-cc-jeloles="nemjavasolt"].is-active {
   color: #f87171; border-color: rgba(248, 113, 113, .55); background: rgba(248, 113, 113, .1);
}

/* ==========================================================================
   AZ ÁLLAPOT VIZUÁLIS NYELVE
   --------------------------------------------------------------------------
   Nyolc állapot, mindegyikhez egy szín. A színt EGY helyen kötjük az
   állapothoz — változóban —, a jelvény és a listasor pedig ugyanazt
   használja. Így nem fordulhat elő, hogy a lista mást mond, mint a jelvény.

   A „talán” és a „várólistán” is borostyán, és ez szándékos: mindkettő azt
   jelenti, hogy még nyitva van. Az egyik belül, a másik kimondva. A
   feliratuk különbözteti meg őket, nem a szín.
   ========================================================================== */
[data-allapot="var"]          { --cc-all: #9ca3af; }   /* semleges: még nem hallgattad meg */
[data-allapot="javasolt"]     { --cc-all: #34d399; }
[data-allapot="talan"]        { --cc-all: #fbbf24; }
[data-allapot="nemjavasolt"]  { --cc-all: #f87171; }
[data-allapot="meghivva"]     { --cc-all: #22d3ee; }   /* a márka színe: ő már bent van */
[data-allapot="varolistan"]   { --cc-all: #fbbf24; }
[data-allapot="lezarult"]     { --cc-all: #6b7280; }
[data-allapot="veglegesitve"] { --cc-all: #10b981; }

/* ---- a jelvény ---- */
.cc-jelveny {
   display: inline-flex; align-items: center; gap: .4rem;
   padding: .35rem .8rem .35rem .65rem;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--cc-all) 45%, transparent);
   background: color-mix(in srgb, var(--cc-all) 12%, transparent);
   color: var(--cc-all);
   font-size: .8125rem;
   white-space: nowrap;
}
/* A vonalbeállítások ITT állnak, nem a jelkészlet <svg>-jén: a <use> egy
   MÁSIK <svg>-ből hivatkozik a jelre, és a hivatkozó elem tulajdonságai
   érvényesek, nem a jelkészleté. Enélkül minden ikon kitöltött folt. */
.cc-jelveny svg {
   width: 16px; height: 16px; flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* A listasoron csak az ikon fér el, felirat nélkül. */
.cc-admin__row .cc-jelveny {
   padding: .2rem; border: 0; background: none; gap: 0;
}
.cc-admin__row .cc-jelveny svg { width: 18px; height: 18px; }

/* A jelkészlet maga nem jelenik meg. */
.cc-ikonok { display: none; }

/* ---- a listasor felveszi az állapot színét ----
   Halványan: a sor olvasható marad, de végigfutva a listán látszik, hol
   tartasz — a zöldek mennek, a pirosak lezárandók, a szürkéket még meg sem
   hallgattad. */
/* A szín a BAL CSÍKON és az IKONON van, nem az egész háttéren.
   Tíz teljes hátterű sor egymás alatt figyelmeztetéslistának néz ki, nem
   névsornak. A halvány háttér marad, de alig — épp csak annyi, hogy a
   csoportok elváljanak. */
.cc-admin__row {
   border: 1px solid transparent;
   background: color-mix(in srgb, var(--cc-all, transparent) 3%, transparent);
}
.cc-admin__row::after {
   content: "";
   position: absolute; left: 0; top: .55rem; bottom: .55rem;
   width: 2px; border-radius: 2px;
   background: color-mix(in srgb, var(--cc-all, transparent) 55%, transparent);
}
.cc-admin__row:hover {
   background: color-mix(in srgb, var(--cc-all, #fff) 8%, var(--cc-card-bg));
}
.cc-admin__row.is-active {
   background: color-mix(in srgb, var(--cc-all, #fff) 10%, var(--cc-card-bg-hover));
   border-color: color-mix(in srgb, var(--cc-all, #fff) 40%, transparent);
}

/* név és jelvény egy sorban */
.cc-admin__row-head {
   display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}

/* A döntőgombok fölötti figyelmeztetés — ez a mondat választja el a
   következmények nélküli gombsort a visszavonhatatlantól. */
.cc-admin__note--warn {
   padding: .7rem .85rem;
   border-radius: 12px;
   border: 1px solid rgba(251, 191, 36, .28);
   background: rgba(251, 191, 36, .05);
   margin-top: 1.25rem;
}

/* ---- „Mit kap pontosan” — magyarázó kártya ----
   A levél szövege NEM kézzel írt leírás: a szerver ugyanabból a sablonból
   adja, amiből a kiküldött levél készül. Ezért `pre`-ben jelenik meg,
   sortartóan — pontosan úgy tördelve, ahogy a levélben áll. */
.cc-magyarazat { padding: 0; overflow: hidden; }

.cc-magyarazat__nyit {
   width: 100%;
   display: flex; align-items: center; justify-content: space-between; gap: 1rem;
   padding: 1.35rem 1.5rem;
   background: none; border: 0; cursor: pointer; text-align: left;
}
.cc-magyarazat__nyit .cc-eyebrow { margin: 0; }
.cc-magyarazat__jel {
   font-size: var(--cc-ctl-icon-font); line-height: 1; color: var(--cc-muted);
   width: var(--cc-ctl-icon); height: var(--cc-ctl-icon);
   display: grid; place-items: center;
   border-radius: var(--cc-ctl-r);
}
.cc-magyarazat__nyit:hover .cc-magyarazat__jel { background: var(--cc-ctl-hover-bg); }
.cc-magyarazat__nyit:hover .cc-magyarazat__jel { color: var(--cc-accent-2); border-color: var(--cc-accent); }

.cc-magyarazat > div { padding: 0 1.5rem 1.5rem; }

.cc-magyarazat__fulek { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }



.cc-magyarazat__mit { font-size: .9375rem; line-height: 1.7; margin: 0 0 1rem; }

.cc-magyarazat__lat,
.cc-magyarazat__level > span:first-child {
   display: block;
   font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
   color: var(--cc-dim); margin-bottom: .3rem;
}
.cc-magyarazat__lat { margin-bottom: 1.25rem; }
.cc-magyarazat__lat span:last-child {
   display: block; text-transform: none; letter-spacing: 0;
   font-size: .9375rem; line-height: 1.7; color: var(--cc-muted); margin-top: .3rem;
}

.cc-magyarazat__level pre {
   margin: 0 0 .85rem;
   padding: 1.1rem 1.2rem;
   max-height: 26rem;
   overflow: auto;
   border-radius: 14px;
   border: 1px solid var(--cc-card-line);
   background: rgba(0, 0, 0, .22);
   color: var(--cc-text);
   font-family: var(--cc-ff-body);
   font-size: .875rem;
   line-height: 1.7;
   white-space: pre-wrap;
   word-break: break-word;
}

.cc-magyarazat__frissit:hover { color: var(--cc-accent-2); border-color: var(--cc-accent); }

/* A kötelező mező jelzése: amíg üres, a címke figyelmeztet és a két
   érintett gomb nem nyomható. Kitöltve a figyelmeztetés elhalványul —
   nem tűnik el, mert a szabály attól még érvényes. */
[data-cc-uzenet-kell] { color: #fbbf24; }
[data-cc-uzenet-kell][data-kesz] { color: var(--cc-dim); }

.cc-admin__buttons .cc-btn:disabled {
   opacity: .4;
   cursor: not-allowed;
}
.cc-admin__buttons .cc-btn:disabled:hover {
   background: none; color: var(--cc-text); border-color: var(--cc-card-line);
}

/* ---- a levél négy rétege ----
   Ez a kártya legfontosabb üzenete: LÁTSZIK, hol végződik a karnagy szövege
   és hol kezdődik az állandó keret. A színes bal szegély a „sajátot”
   jelöli, a szaggatott a nem szerkeszthetőt. */
.cc-reteg {
   position: relative;
   padding: .85rem 0 .85rem 1rem;
   border-left: 2px solid var(--cc-card-line);
   margin-bottom: .35rem;
}
.cc-reteg[data-reteg="sajat"]  { border-left-color: var(--cc-accent); }
.cc-reteg[data-reteg="keret"]  { border-left-color: #818cf8; }
.cc-reteg[data-reteg="zaras"]  { border-left-style: dashed; }

.cc-reteg__cimke {
   display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
   font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
   color: var(--cc-muted); margin-bottom: .4rem;
}
.cc-reteg__cimke em {
   text-transform: none; letter-spacing: 0; font-style: normal;
   font-size: .75rem; color: var(--cc-dim);
}
.cc-reteg[data-reteg="sajat"] .cc-reteg__cimke { color: var(--cc-accent-2); }
.cc-reteg[data-reteg="keret"] .cc-reteg__cimke { color: #a5b4fc; }

.cc-reteg > p { margin: 0; font-size: .875rem; line-height: 1.7; }
.cc-reteg__ures { color: var(--cc-dim); font-size: .8125rem; }

.cc-reteg__cimke button { margin-left: auto; text-transform: none; letter-spacing: 0; }
.cc-reteg__cimke button:hover { color: var(--cc-accent-2); border-color: var(--cc-accent); }

.cc-reteg textarea {
   width: 100%; min-height: 11rem; margin-bottom: .5rem;
   padding: .85rem 1rem;
   border-radius: 12px; border: 1px solid var(--cc-card-line);
   background: rgba(255, 255, 255, .02); color: var(--cc-text);
   font-family: var(--cc-ff-body); font-size: .875rem; line-height: 1.65;
}
.cc-reteg code {
   font-size: .8125rem; padding: .05rem .3rem; border-radius: 4px;
   background: rgba(255, 255, 255, .07); color: var(--cc-accent-2);
}
.cc-reteg__gombok { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.cc-btn--sm { padding: .35rem .9rem; font-size: .8125rem; }

.cc-magyarazat__egesz { margin-top: 1rem; }
.cc-magyarazat__egesz summary {
   cursor: pointer; font-size: .8125rem; color: var(--cc-muted); padding: .35rem 0;
}
.cc-magyarazat__egesz summary:hover { color: var(--cc-accent-2); }

/* Az „ez csak előnézet” figyelmeztetés — más színű, mint a döntésé, mert
   az ellenkezőjét mondja: itt semmi nem történik. */
.cc-admin__note--info {
   padding: .7rem .85rem;
   border-radius: 12px;
   border: 1px solid rgba(6, 182, 212, .28);
   background: rgba(6, 182, 212, .05);
   margin-bottom: 1.25rem;
}

[data-allapot="feltoltesre"] { --cc-all: #818cf8; }   /* még nála van a labda */
[data-allapot="lejartFel"]   { --cc-all: #f87171; }   /* letelt, nem töltött fel */

/* ---- kereső és állapotszűrők ---- */
.cc-admin__kereso { position: relative; margin-bottom: .75rem; }
.cc-admin__kereso input {
   width: 100%;
   padding: var(--cc-ctl-md-pad);
   padding-right: 2rem;
   border-radius: var(--cc-ctl-r);
   border: 1px solid transparent;
   background: var(--cc-ctl-hover-bg);
   color: var(--cc-text);
   font-family: var(--cc-ff-body);
   font-size: var(--cc-ctl-md-font);
}
.cc-admin__kereso input::placeholder { color: var(--cc-dim); }
.cc-admin__kereso input:focus {
   outline: 0; border-color: var(--cc-accent);
   box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}
.cc-admin__kereso button {
   position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
   background: none; border: 0; color: var(--cc-muted);
   font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.cc-admin__kereso button:hover { color: var(--cc-text); }

.cc-admin__szurok { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .85rem; }
/* Kivétel a szabály alól: ez ÁLLAPOTOT mutat, ezért címke-formájú —
   de meg lehet nyomni, ezért kap hátteret rámutatáskor. */
.cc-admin__szurok button { border-radius: var(--cc-ctl-r-cimke); }
.cc-admin__szurok button[data-allapot] { color: var(--cc-all, var(--cc-muted)); }


.cc-admin__allapot-magyarazat {
   margin: 0 0 .5rem;
   padding: .85rem 1rem;
   border-radius: 12px;
   border: 1px solid var(--cc-card-line);
   background: var(--cc-card-bg);
   font-size: .9375rem;
   color: var(--cc-muted);
}

/* A sablonválasztó és az előnézeti fülek halvány keretet kapnak: enélkül
   szövegnek látszanak, pedig megnyomhatók. Nem annyit, mint a döntés —
   csak annyit, hogy látszódjon a határuk. */
.cc-page--admin .cc-admin__templates button,
.cc-page--admin .cc-magyarazat__fulek button,
.cc-page--admin .cc-admin__szurok button,
.cc-page--admin .cc-jelolo {
  border-color: var(--cc-card-line);
}

/* Szövegbe ágyazott gomb, ami linknek látszik.
   Azért gomb és nem link, mert nem másik OLDALRA visz, hanem ugyanennek az
   oldalnak egy másik képernyőjére. Linkként újratöltötte volna a lapot, és
   a bejelentkezett állapot helyett a makett fogadta a jelentkezőt. */
.cc-szoveggomb {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cc-accent, #c9a24a);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cc-szoveggomb:hover,
.cc-szoveggomb:focus-visible { text-decoration-thickness: 2px; }

/* A visszajelző sáv (belepes.html).
   Ott van rá szükség, ahol a beküldés után azonnal más képernyő jön: a
   váltás önmagában nem mondja meg, hogy sikerült-e, és mi következik. */
.cc-sav {
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
}
.cc-sav--siker { background: rgba(120, 200, 140, .10); border-bottom-color: rgba(120, 200, 140, .28); }
.cc-sav--hiba  { background: rgba(230, 120, 120, .10); border-bottom-color: rgba(230, 120, 120, .28); }

.cc-sav__belso {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cc-sav__szoveg { font-size: .9375rem; line-height: 1.5; }
.cc-sav__zar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: none; border: 0; padding: 0;
  font-size: 1.25rem; line-height: 1;
  color: inherit; opacity: .6; cursor: pointer;
}
.cc-sav__zar:hover, .cc-sav__zar:focus-visible { opacity: 1; }

/* Kötelező mező jelölése.
   A csillag `aria-hidden`, mert a mezőn ott a `required` — a képernyőolvasó
   onnan tudja meg, hogy kötelező, nem egy díszítő karakterből. A csillag a
   látó olvasónak szól, akinek viszont meg kell mondani, mit jelent: ezért
   áll az űrlap tetején a jelmagyarázat. */
.cc-kotelezo {
  color: #e06666;
  margin-left: .2em;
  font-weight: 600;
}
.cc-form__jelmagyarazat {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  opacity: .75;
}

/* Figyelmeztető súgósor a szervezői felületen.
   Nem hibaüzenet — csak annyit mond, hogy amit látsz, az egy korábbi
   állapotra vonatkozik. Ezért halvány, nem piros. */
.cc-admin__hint--figyelem {
  border-left: 2px solid rgba(230, 190, 120, .55);
  padding-left: .65rem;
  color: rgba(230, 190, 120, .95);
}

/* A „Miért pont így?" rész a feladat képernyőn, a kártyák alatt.
   Nem kártya és nincs kerete: ez nem figyelmeztetés, hanem a feladat
   folytatása. Csak levegő választja el a fölötte lévő űrlaptól. */
.cc-task-page__miert { margin-top: 3.5rem; }
.cc-task-page__miert h3 { margin: .35rem 0 1rem; }
.cc-task-page__miert .cc-lead:last-child { margin-bottom: 0; }

/* Ha a feladatcsomag nem érhető el. Nem hibaüzenet a szó rossz értelmében:
   megmondja, mi a helyzet, és hogy hova írjon. */
.cc-download__hiany {
  margin: .5rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(230, 190, 120, .95);
}