/* holazenergia.hu — a hologramasztal (C3). A közös alap.css-re és a kozos/jelenetek.css-re épül; a stílus a
   design/koncepciok/holazenergia-koncepciok.html C3 változatából való (fejléc és ticker, kártyaszöveg, HUD-csík, C3), mind
   a `.kC3` hatókörben. Az oldal első képernyője a `main.kC3`: fent a fejléc, alatta három lebegő, áttetsző hologrampanel a
   fénylő padlórács fölött. A panel aktív állapotát (`.on`, `.van-aktiv`) a kartyak.js kapcsolja. A három testvéroldal
   színe: szél kék, nap borostyán, tároló lila. */
body.energia{--kiemel:var(--ink)}

.kC3{
  --szel-feny:#6fd0ee; --tarolo:#9b6cf0;
  --lassu:cubic-bezier(.2,.7,.15,1);
  --gutter:clamp(18px,3vw,44px);
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  min-height:max(560px,100vh);min-height:max(560px,100svh);
  background:radial-gradient(900px 520px at 50% 100%,#0c1626 0%,#04060a 65%);
}
.kC3 .szel{--szin:var(--szel);--feny:var(--szel-feny)}
.kC3 .nap{--szin:var(--nap);--feny:var(--nap-feny)}
.kC3 .tarolo{--szin:var(--tarolo);--feny:var(--tarolo-feny)}

/* ── fejléc: cím, mondat, vékony mix-sáv; a nyelvváltó jobb fent ──
   A <header> elemre az alap.css saját (szakaszfejléc) szabályai is illenek: itt kikapcsoljuk őket. */
.kC3 .fej{position:relative;z-index:3;display:block;overflow:visible;border:0;background:none;
  padding:var(--gutter) var(--gutter) 0}
.kC3 .logo{margin:0;max-width:calc(100% - 250px);font-size:clamp(34px,5vw,74px);font-weight:780;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.kC3 .logo em{font-style:normal;background:linear-gradient(92deg,var(--szel-feny) 0%,var(--nap-feny) 52%,var(--tarolo-feny) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kC3 .mondat{margin:.7em 0 0;max-width:min(88ch,100%);font-size:clamp(15px,1.4vw,20px);line-height:1.42;color:var(--ink-2);text-wrap:balance}
.kC3 .ticker{margin-top:14px;max-width:min(820px,100%)}
.kC3 .mix-csik{display:flex;height:4px;max-width:620px;border-radius:2px;overflow:hidden;background:var(--line)}
.kC3 .mix-csik i{display:block;height:100%}
.kC3 .mix-sor{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;font:11.5px/1.4 var(--mono);color:var(--ink-3)}
.kC3 .mix-sor .jm{display:contents}
.kC3 .mix-sor span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kC3 .mix-sor i{width:7px;height:7px;border-radius:2px}
.kC3 .mix-sor .ar{color:var(--ink-2)} .kC3 .mix-sor .ar b{color:var(--ink);font-weight:650}
.kC3 .mix-sor .ar small{font-size:inherit;color:var(--ink-3)}
.kC3 .mix-sor em{font-style:normal}
.kC3 .mix-sor .forras i{border-radius:50%;background:var(--ink-3)}
.kC3 .mix-sor .forras.friss i{background:var(--jo);box-shadow:0 0 8px rgba(47,191,90,.6)}
.kC3 .mix-sor .forras.kesik{color:var(--figyelem)} .kC3 .mix-sor .forras.kesik i{background:var(--figyelem)}
.kC3 .mix-sor .forras.hibas i{background:var(--kritikus)}
.m-atom{background:var(--atom)} .m-fosszilis{background:var(--fosszilis)} .m-nap{background:var(--nap)}
.m-szel{background:var(--szel)} .m-egyeb_megujulo{background:var(--megujulo)} .m-egyeb{background:var(--egyeb)}
.kC3 .nyelvvalto{position:absolute;top:calc(var(--gutter) - 2px);right:calc(var(--gutter) - 8px);margin:0}
.hiba-sor{color:#f3a08a}
.hiba-link{white-space:nowrap}

/* ── kártyaszöveg ── */
.kC3 .kartya{color:inherit;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
.kC3 .kartya:focus-visible{outline:2px solid var(--feny);outline-offset:-2px}
.kC3 .cimke{font-size:11.5px;font-weight:720;letter-spacing:.17em;text-transform:uppercase;color:var(--feny)}
.kC3 .ertek{display:block;font-size:clamp(40px,4.4vw,76px);font-weight:760;letter-spacing:-.04em;line-height:.95;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:text-shadow 1s}
.kC3 .ertek .nincs{color:var(--ink-3);font-weight:300}
.kC3 .ertek small{font-size:.3em;font-weight:620;letter-spacing:0;color:var(--ink-2);margin-left:.2em}
.kC3 .holo.on .ertek{text-shadow:0 0 30px color-mix(in srgb,var(--feny) 45%,transparent)}
.kC3 .ala{font-size:14px;color:var(--ink-2);line-height:1.45;max-width:40ch}
.kC3 .ala b{color:var(--ink);font-weight:640}
.kC3 .ala .mert{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.kC3 .ala .hiba-link{text-decoration:underline;text-underline-offset:2px}
.kC3 .tovabb{font-size:14px;font-weight:650;color:var(--feny)}
.kC3 .tartalom{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px;display:grid;gap:9px;justify-items:start;
  background:linear-gradient(180deg,transparent,rgba(2,6,14,.72) 45%)}

/* ── HUD-csík: forrás · mért idő · frissességi pötty ── */
.kC3 .hud-csik{position:absolute;top:0;left:0;right:0;z-index:2;padding:16px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;
  font:11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--feny)}
.kC3 .hud-csik span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.kC3 .hud-csik span:first-child{white-space:normal}
.kC3 .hud-csik span:last-child{color:var(--ink-3);white-space:nowrap;margin-left:auto}
.kC3 .hud-csik b{font-weight:inherit}
.kC3 .hud-csik span.fazis{color:var(--ink);font-weight:650}
.kC3 .hud-csik i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ink-3)}
.kC3 .hud-csik.friss i{background:var(--jo);box-shadow:0 0 8px rgba(47,191,90,.7)}
.kC3 .hud-csik.kesik i{background:var(--figyelem);box-shadow:0 0 8px rgba(250,178,25,.7)}
.kC3 .hud-csik.hibas i{background:var(--kritikus);box-shadow:0 0 8px rgba(208,59,59,.7)}
.kC3 .holo.on .hud-csik i{animation:led 1.2s steps(1,end) infinite}

/* ── C3 · hologramasztal: lebegő, áttetsző panelek drótvázban; hoverre kitelnek ── */
.kC3 .padlo{position:absolute;left:-30%;right:-30%;bottom:-12%;height:58%;z-index:0;transform:perspective(520px) rotateX(68deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(111,208,238,.2) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(111,208,238,.15) 1px,transparent 1px) 0 0/46px 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 15%,transparent 92%);mask-image:linear-gradient(0deg,#000 15%,transparent 92%)}
.kC3 .asztal{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);
  padding:clamp(16px,3vh,34px) clamp(28px,5vw,80px) clamp(18px,3vh,30px);min-height:0}
.kC3 .allvany{position:relative;display:flex;flex-direction:column;min-height:0;transition:opacity .8s var(--lassu)}
.kC3.van-aktiv .allvany:not(:has(.on)){opacity:.4}
.kC3 .holo{position:relative;display:block;flex:1;min-height:0;margin-bottom:clamp(36px,6.5vh,80px);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--szin) 7%,transparent);border:1px solid color-mix(in srgb,var(--feny) 35%,transparent);
  box-shadow:0 0 34px -10px color-mix(in srgb,var(--szin) 60%,transparent),inset 0 0 40px -12px color-mix(in srgb,var(--szin) 45%,transparent);
  animation:lebeg 7s ease-in-out infinite;transition:translate .9s var(--lassu),box-shadow .8s}
.kC3 .allvany:nth-child(2) .holo{animation-delay:-2.3s} .kC3 .allvany:nth-child(3) .holo{animation-delay:-4.6s}
@keyframes lebeg{50%{transform:translateY(-7px)}}
.kC3 .holo.on{translate:0 -16px;box-shadow:0 0 60px -6px color-mix(in srgb,var(--szin) 75%,transparent),inset 0 0 50px -10px color-mix(in srgb,var(--szin) 55%,transparent)}
.kC3 .drot .sc *{fill:none!important;stroke:var(--feny)!important;stroke-width:1px!important;vector-effect:non-scaling-stroke}
.kC3 .drot .sc .fenyes{display:none}
/* Wireframe: a tároló jelenetének teljes méretű háttér-téglalapjai és rácsa, valamint a föld négyszöge nem rajzolnak
   körvonalat (a nézet kitágítva a panel széleinél látszanának); éjjel a nap a drótvázban sincs jelen (nincs takaró föld). */
.kC3 .drot .sc-tarolo > rect,.kC3 .drot .sc-tarolo .m1,.kC3 .drot .sc-tarolo .m2 > path:first-child{display:none}
.kC3 .drot .sc.ejjel .nap-korong{display:none}
/* A tároló színes rétege a jelenet aljának színével kiegészített: a kitágított nézet a jelenet 560 egységes hátterén túl is ér */
.kC3 #tarolo-tomor{background:#0b0915}
.kC3 .drot{opacity:.7;filter:drop-shadow(0 0 3px var(--feny));transition:opacity .9s}
.kC3 .tomor{opacity:0;transition:opacity 1.2s var(--lassu)}
.kC3 .holo.on .tomor{opacity:.94}
.kC3 .holo.on .drot{opacity:.18}
/* hiba: a panel drótvázban marad, akkor is, ha aktív */
.kC3 .holo.hiba.on .tomor{opacity:0}
.kC3 .holo.hiba.on .drot{opacity:.7}
.kC3 .holo-fedo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--feny) 9%,transparent) 0 1px,transparent 1px 4px),linear-gradient(180deg,color-mix(in srgb,var(--szin) 14%,transparent),transparent 40%)}
.kC3 .sopro{position:absolute;left:0;right:0;top:-30%;height:30%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--feny) 26%,transparent),transparent)}
.kC3 .holo.on .sopro{animation:sopro 1.6s var(--lassu)}
@keyframes sopro{to{top:110%}}
.kC3 .vetito{position:absolute;left:50%;bottom:0;width:62%;height:18px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--feny) 80%,transparent),transparent);opacity:.5;transition:opacity .8s}
.kC3 .nyalab{position:absolute;left:12%;right:12%;bottom:9px;height:clamp(36px,6.5vh,80px);clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);
  background:linear-gradient(0deg,color-mix(in srgb,var(--feny) 40%,transparent),transparent);opacity:.3;transition:opacity .8s}
.kC3 .allvany:has(.on) .nyalab{opacity:.95} .kC3 .allvany:has(.on) .vetito{opacity:1}

/* ── alacsony ablak (pl. 1366×657): sűrűbb szöveg, hogy az akkumulátor a szöveg fölött elférjen ── */
@media(max-height:700px) and (min-width:761px){
  .kC3 .ertek{font-size:clamp(34px,3.6vw,52px)}
  .kC3 .tartalom{padding:16px 20px;gap:6px}
  .kC3 .ala{font-size:13px}
}

/* ── telefon: a panelek egymás alatt (~44 vh), padlórács nélkül; a nyelvváltó a sorban, jobbra ── */
@media(max-width:760px){
  .kC3 .fej{display:flex;flex-direction:column;align-items:stretch}      /* az alap.css .fej-e flex-end: a logó és a rövid mondat ne csússzon jobbra */
  .kC3 .nyelvvalto{position:static;order:-1;align-self:flex-end;margin:-6px -8px 10px 0}
  .kC3 .logo{max-width:none}
  .kC3 .padlo{display:none}
  .kC3 .asztal{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px var(--gutter) 28px}
  .kC3 .holo{flex:none;height:44vh;height:44svh;min-height:300px;margin-bottom:46px}
  .kC3 .allvany.tarolo .holo{height:max(44vh,490px);height:max(44svh,490px)}      /* a szöveg mellett az akkumulátor is elférjen */
  .kC3 .hud-csik{padding:14px 16px;letter-spacing:.08em}
  .kC3 .nyalab{height:46px}
  .kC3 .tartalom{padding:18px}
}

/* ── csökkentett mozgás: nincs lebegés, pásztázás és felpörgés; a jelenet azonnal kitelik ── */
@media (prefers-reduced-motion:reduce){
  .kC3 .holo{animation:none;transition:none}
  .kC3 .holo.on .sopro{animation:none}
  .kC3 .holo.on .hud-csik i{animation:none}
  .kC3 .drot,.kC3 .tomor,.kC3 .allvany,.kC3 .ertek,.kC3 .vetito,.kC3 .nyalab{transition:none}
}

/* ── lábléc: az alap.css stílusa, a hologram alatt vékony elválasztóval ── */
footer{border-top:1px solid var(--line)}
footer h2.cimke{margin:0 0 8px}
footer .jegyzet{margin-bottom:10px}