/* Sci‑Fi UI — Cyberpunk theme (mock-accurate)
   Csak a CYBERPUNK témát érinti.
   - Sárga, „gritty + glitch” főcím
   - Cián alcím
   - Magenta keretek + finom cián belső fény
   - Szögletesebb neon „pill” gombok
   - Erősebb CRT/scanline zajréteg
*/

/* Alapszínek és fedvények (csak cyber) */
.theme-cyber {
  --scanlines: .44;     /* erősebb vonalak */
  --vignette:  .40;
  --noise:     .12;

  --bg: #0a0013;
  --fg: #ffd9ff;
  --muted: #f0caff;

  --accent:   #ffd400;  /* sárga (headline) */
  --accent-2: #ff00a8;  /* magenta (keretek) */
  --accent-3: #00eaff;  /* cián (alcím, fókusz) */

  --panel: #14001f;     /* belső felület sötét lila */
  --panel-line: #ff00a8;
}

body.theme-cyber { background-color: var(--bg); }

/* HERO — sárga „gritty + glitch” cím */
.theme-cyber .title {
  /* Kapcsoljuk ki a gradient/hologram hátteret, legyen tömör sárga */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  color: var(--accent) !important;
  letter-spacing: 2.4px;
  -webkit-text-stroke: 1px rgba(22,0,24,.62);
  text-shadow:
    0 1px 0 rgba(10,0,16,.55),
    0 0 2px #ffb300,
    0 0 8px #ffb300,
    0 0 18px rgba(255,0,168,.68),
    0 0 36px rgba(0,234,255,.40);
  position: relative;
  isolation: isolate;
}

/* Vékony scanline „sheen” a címen */
.theme-cyber .title::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .35;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 2px,
      transparent 4px
    );
  filter: blur(.4px);
}

/* Vízszintes glitch-sávok, RGB „shards” */
.theme-cyber .title::after {
  content: attr(data-glitch);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  color: var(--accent-3);
  opacity: .40;
  clip-path: polygon(0 8%,100% 6%,100% 22%,0 24%);
  transform: translate(.02em,-.01em);
  animation: cyber-glitch 3.6s steps(2,end) infinite;
}
@keyframes cyber-glitch {
  0%,100%{clip-path:polygon(0 8%,100% 6%,100% 22%,0 24%);transform:translate(.01em,0)}
  18%    {clip-path:polygon(0 28%,100% 26%,100% 40%,0 42%);transform:translate(-.02em,.01em)}
  36%    {clip-path:polygon(0 58%,100% 56%,100% 70%,0 72%);transform:translate(.03em,-.01em)}
  54%    {clip-path:polygon(0 78%,100% 76%,100% 88%,0 90%);transform:translate(-.015em,.005em)}
  72%    {clip-path:polygon(0 18%,100% 16%,100% 30%,0 32%);transform:translate(.02em,-.01em)}
}

/* Alcím — cián, szorosabb betűköz, finom árnyék */
.theme-cyber .subtitle {
  color: var(--accent-3);
  letter-spacing: 1.1px;
  text-shadow: 0 1px 0 rgba(0,20,28,.6);
}

/* Külső héj és panelek/kártyák — magenta keret + cián belső fény */
.theme-cyber .shell {
  box-shadow:
    inset 0 0 0 6px rgba(255,0,168,.12),
    0 0 64px rgba(255,0,168,.22);
}

.theme-cyber .panel,
.theme-cyber .card {
  border: 2px solid var(--accent-2);
  border-radius: 18px;
  background: color-mix(in oklab, var(--panel) 92%, black);
  box-shadow:
    inset 0 0 0 1px rgba(0,234,255,.15),
    0 0 12px rgba(255,0,168,.32),
    0 0 28px rgba(0,234,255,.16);
}

/* Panelcím — kicsinyített „headline” karakter */
.theme-cyber .panel-title {
  color: var(--accent);
  -webkit-text-stroke: .6px rgba(22,0,24,.55);
  text-shadow: 0 1px 0 rgba(10,0,16,.45), 0 0 6px #ffb300;
}

/* Kártya szövegek */
.theme-cyber .card h3   { color: var(--accent);   letter-spacing: 1px; }
.theme-cyber .card .meta{ color: var(--accent-3); letter-spacing: .6px; }

/* „Pill” gombok — szögletesebb, magenta keret, sárga/cián variánsok */
.theme-cyber .pill {
  --pill-bd: var(--accent-2);
  --pill-fg: #ffe7a8;                       /* sárgás felirat, mint a mockon */
  border: 2px solid var(--pill-bd);
  border-radius: 12px;
  color: var(--pill-fg);
  background: linear-gradient(180deg, rgba(255,0,168,.08), rgba(255,0,168,.02));
  box-shadow:
    inset 0 0 0 1px rgba(0,234,255,.26),
    0 0 10px rgba(255,0,168,.30);
  letter-spacing: 1.2px;
}
.theme-cyber .pill.alt    { --pill-fg: var(--accent); }
.theme-cyber .pill.accent { --pill-fg: var(--accent-3); --pill-bd: var(--accent-3); }

/* Téma kapcsolók — cián keret; aktív magenta kiemeléssel */
.theme-cyber .theme-switch .pill { --pill-bd: var(--accent-3); --pill-fg: var(--accent-3); }
.theme-cyber .theme-switch button[aria-pressed="true"] {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

/* Footer — cián copyright, sárga vissza a tetejére */
.theme-cyber .footer       { color: var(--accent-3); }
.theme-cyber .back-to-top  { color: var(--accent); border-bottom-color: var(--accent); }

/* Teljes képernyős CRT szemcsézettség / flicker (csak cyber) */
body.theme-cyber::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      transparent 2px,
      transparent 4px),
    linear-gradient(0deg, rgba(255,0,168,.03), rgba(0,234,255,.03));
  animation: crt-flicker 4s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes crt-flicker {
  0%,100% { opacity: .18; filter: saturate(1) }
  50%     { opacity: .30; filter: saturate(1.15) }
}

/* Kis kijelzőkön kicsit kevesebb glow a címen */
@media (max-width: 560px) {
  .theme-cyber .title {
    text-shadow:
      0 1px 0 rgba(10,0,16,.55),
      0 0 2px #ffb300,
      0 0 10px rgba(255,0,168,.60);
  }
}