/*
 * KULTÚRAGAZDASÁGTAN — VIZUÁLIS RENDSZER
 * Paletták: Cyber · Graphite
 */

/* ── Space Grotesk (self-hosted, variable font, latin + latin-ext) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Sans:wght@400;500;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   KULTÚRAGAZDASÁGTAN — VIZUÁLIS RENDSZER v7.0
   Paletták: Cyber (Space Grotesk) · Graphite (Brutalist)
   Módok: Dark & Light
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. PALETTA: CYBER (Deep Neon) ─── */
:root[data-palette="cyber"] {
    --bg-base: #060d1f;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --card-bg: rgba(15, 23, 42, 0.95);
    --card-border: rgba(255, 255, 255, 0.50);
    --card-border-hover: rgba(8, 145, 178, 0.95);

    --accent-cyan:  #0891b2;
    --accent-rose:  #e11d48;
    --accent-amber: #d97706;
    --accent-green: #16a34a;

    --grad-primary: linear-gradient(135deg, #0891b2, #06b6d4);
    --grad-wine:    linear-gradient(135deg, #e11d48, #f43f5e);
    --grad-copper:  linear-gradient(135deg, #d97706, #f59e0b);
    --grad-sage:    linear-gradient(135deg, #16a34a, #22c55e);
    --grad-mixed:   linear-gradient(135deg, #0891b2 0%, #e11d48 50%, #16a34a 100%);

    --bar-bg: rgba(255, 255, 255, 0.1);
    --grid-opacity: 0.05;
    --noise-opacity: 0.02;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --heading-transform: uppercase;
    --heading-spacing: -0.02em;
}

:root[data-theme="light"][data-palette="cyber"] {
    --bg-base: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #475569;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: #cbd5e1;
    --card-border-hover: #0e7490;

    --accent-cyan:  #0e7490;
    --accent-rose:  #be123c;
    --accent-amber: #b45309;
    --accent-green: #15803d;

    --grad-primary: linear-gradient(135deg, #0e7490, #0891b2);
    --grad-wine:    linear-gradient(135deg, #be123c, #e11d48);
    --grad-copper:  linear-gradient(135deg, #b45309, #d97706);
    --grad-sage:    linear-gradient(135deg, #15803d, #16a34a);
    --grad-mixed:   linear-gradient(135deg, #0e7490 0%, #be123c 50%, #15803d 100%);

    --bar-bg: rgba(0, 0, 0, 0.1);
    --grid-opacity: 0.05;
    --noise-opacity: 0.01;
}

:root[data-palette="cyber"] .glass-card,
:root[data-palette="cyber"] .rounded-3xl,
:root[data-palette="cyber"] .rounded-2xl,
:root[data-palette="cyber"] .rounded-xl {
    border-radius: 0.45rem !important;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
:root[data-theme="light"][data-palette="cyber"] .glass-card,
:root[data-theme="light"][data-palette="cyber"] .rounded-3xl,
:root[data-theme="light"][data-palette="cyber"] .rounded-2xl,
:root[data-theme="light"][data-palette="cyber"] .rounded-xl {
    border-radius: 0.45rem !important;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
/* ─── ESCAPE: .no-clip — letiltja a cyber clip-path-ot bármely elemen ─── */
:root[data-palette="cyber"] .no-clip,
:root[data-palette="cyber"] .no-clip * {
    clip-path: none !important;
    border-radius: inherit;
}
:root[data-palette="cyber"] .no-clip.rounded-3xl,
:root[data-palette="cyber"] .no-clip.rounded-2xl,
:root[data-palette="cyber"] .no-clip.rounded-xl,
:root[data-palette="cyber"] .no-clip.rounded-lg {
    border-radius: var(--r, 1rem) !important;
}
/* ─── 2. PALETTA: GRAPHITE (Brutalist, visszafogott) ─── */
:root[data-palette="graphite"] {
    --bg-base: #0b0b0c;
    --text-main: #f2f2f2;
    --text-muted: #b3b3b7;
    --card-bg: #111214;
    --card-border: rgba(242, 242, 242, 0.42);
    --card-border-hover: rgba(242, 242, 242, 0.82);

    --accent-cyan:  #ff3b30;
    --accent-rose:  #ff7a59;
    --accent-amber: #f4d03f;
    --accent-green: #b8ff3d;

    --grad-primary: linear-gradient(135deg, #ff3b30, #ff6b5a);
    --grad-wine:    linear-gradient(135deg, #ff7a59, #ffab91);
    --grad-copper:  linear-gradient(135deg, #f4d03f, #f7dc6f);
    --grad-sage:    linear-gradient(135deg, #b8ff3d, #d8ff8a);
    --grad-mixed:   linear-gradient(135deg, #ff3b30 0%, #ff7a59 50%, #b8ff3d 100%);

    --bar-bg: rgba(255, 255, 255, 0.07);
    --grid-opacity: 0.065;
    --noise-opacity: 0.018;

    --font-heading: 'Archivo Black', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --heading-transform: uppercase;
    --heading-spacing: 0.01em;
}

:root[data-theme="light"][data-palette="graphite"] {
    --bg-base: #f6f6f7;
    --text-main: #111215;
    --text-muted: #4f5560;
    --card-bg: #ffffff;
    --card-border: rgba(17, 18, 21, 0.32);
    --card-border-hover: rgba(17, 18, 21, 0.62);

    --accent-cyan:  #c81d11;
    --accent-rose:  #d9480f;
    --accent-amber: #9a6a00;
    --accent-green: #3f7d00;

    --grad-primary: linear-gradient(135deg, #c81d11, #e03131);
    --grad-wine:    linear-gradient(135deg, #d9480f, #e8590c);
    --grad-copper:  linear-gradient(135deg, #9a6a00, #c78a00);
    --grad-sage:    linear-gradient(135deg, #3f7d00, #5c940d);
    --grad-mixed:   linear-gradient(135deg, #c81d11 0%, #d9480f 50%, #3f7d00 100%);

    --bar-bg: rgba(17, 18, 21, 0.08);
    --grid-opacity: 0.06;
    --noise-opacity: 0.01;
}

/* ═══════════════════════════════════════════════════════════════
   ALAPRENDSZER (Mindhárom palettára érvényes)
   ═══════════════════════════════════════════════════════════════ */
body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow: hidden; height: 100vh; width: 100vw;
    transition: background-color 0.4s ease, color 0.4s ease;
}[data-theme="dark"] .dark\:hidden { display: none !important; }
[data-theme="dark"] .dark\:block { display: inline-block !important; }
[data-theme="light"] .dark\:hidden { display: inline-block !important; }
[data-theme="light"] .dark\:block { display: none !important; }

/* --- DINAMIKUS TIPOGRÁFIA --- */
h1, h2, h3, h4, .font-heading {
    font-family: var(--font-heading);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-spacing);
    color: var(--text-main);
    transition: color 0.3s;
}

h2 {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* ─── ESCAPE: .h2-plain — letiltja a gradient-text hatást ─── */
h2.h2-plain {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    color: var(--text-main) !important;
}

.slide > .reveal.text-center h1,
.slide > div.reveal.text-center h1 {
    background: var(--grad-mixed);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientSweep 9s ease-in-out infinite;
}

@keyframes gradientSweep {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

h3, h4 {
    -webkit-text-fill-color: unset;
    background: none;
}

/* --- TAILWIND OVERRIDES --- */
.text-main { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; }
.text-accent-cyan  { color: var(--accent-cyan) !important; -webkit-text-fill-color: var(--accent-cyan) !important; }
.text-accent-rose  { color: var(--accent-rose) !important; -webkit-text-fill-color: var(--accent-rose) !important; }
.text-accent-amber { color: var(--accent-amber) !important; -webkit-text-fill-color: var(--accent-amber) !important; }
.text-accent-green { color: var(--accent-green) !important; -webkit-text-fill-color: var(--accent-green) !important; }

.bg-card-bg     { background-color: var(--card-bg) !important; }
.bg-accent-cyan { background-color: var(--accent-cyan) !important; }
.bg-accent-rose { background-color: var(--accent-rose) !important; }
.bg-accent-amber{ background-color: var(--accent-amber) !important; }
.bg-accent-green{ background-color: var(--accent-green) !important; }

.border-card        { border-color: var(--card-border) !important; }
.border-accent-cyan { border-color: var(--accent-cyan) !important; }
.border-accent-rose { border-color: var(--accent-rose) !important; }
.border-accent-amber{ border-color: var(--accent-amber) !important; }
.border-accent-green{ border-color: var(--accent-green) !important; }

[class*="border-l-accent-cyan"]  { border-left-color: var(--accent-cyan) !important; }
[class*="border-l-accent-rose"]  { border-left-color: var(--accent-rose) !important; }[class*="border-l-accent-amber"] { border-left-color: var(--accent-amber) !important; }[class*="border-l-accent-green"] { border-left-color: var(--accent-green) !important; }

h2[class*="border-accent-cyan"]  { border-left-color: var(--accent-cyan) !important; }
h2[class*="border-accent-rose"]  { border-left-color: var(--accent-rose) !important; }
h2[class*="border-accent-amber"] { border-left-color: var(--accent-amber) !important; }
h2[class*="border-accent-green"] { border-left-color: var(--accent-green) !important; }

/* --- ANIMÁLT HÁTTÉR-TEXTÚRA (noise + breathing aurora) --- */
.grid-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 45% at 30% 40%, color-mix(in srgb, var(--accent-cyan) 9%, transparent), transparent 60%),
        radial-gradient(ellipse 50% 55% at 75% 60%, color-mix(in srgb, var(--accent-rose) 7%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 40% at 50% 80%, color-mix(in srgb, var(--accent-green) 5.5%, transparent), transparent 50%);
    opacity: 1;
    pointer-events: none;
    animation: bgBreath 16s ease-in-out infinite;
    transition: opacity 0.4s;
}

@keyframes bgBreath {
    0%, 100% { opacity: 0.75; transform: scale(1)      translate(0, 0); }
    33%      { opacity: 1;    transform: scale(1.06)   translate(4vw, -3vh); }
    66%      { opacity: 0.85; transform: scale(0.96)   translate(-3.5vw, 2.5vh); }
}

@media (prefers-reduced-motion: reduce) {
    .grid-bg { animation: none; opacity: 0.85; }
}

@keyframes auroraFloat {
    0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
    25%  { transform: translate(-48%, -53%) scale(1.08) rotate(3deg); }
    50%  { transform: translate(-52%, -47%) scale(1.04) rotate(-2deg); }
    75%  { transform: translate(-47%, -51%) scale(1.06) rotate(4deg); }
    100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
}

.ambient-light {
    position: fixed; top: 50%; left: 50%;
    width: 100vw; height: 100vh; z-index: -2;
    background: radial-gradient(ellipse 80% 60% at center, var(--accent-cyan), transparent 70%);
    opacity: 0.08; pointer-events: none;
    transition: background 1.5s ease;
    animation: auroraFloat 20s ease-in-out infinite;
}

.ambient-light-2 {
    position: fixed; top: 70%; left: 72%;
    transform: translate(-50%, -50%);
    width: 70vw; height: 70vh; z-index: -2;
    border-radius: 50%;
    background: radial-gradient(ellipse 70% 50% at center, var(--accent-rose), transparent 70%);
    opacity: 0.05; pointer-events: none;
    transition: background 1.5s ease;
    animation: auroraFloat 28s ease-in-out 7s infinite reverse;
}

body::after {
    content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 200px 200px; mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════
   ÚJ SLIDE RENDSZER — AUTO-CENTER SKÁLÁZÁS
   ═══════════════════════════════════════════════════════════════ */
.slides-container {
    height: 100vh; width: 100vw;
    overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth;
}

.slide {
    height: 100vh; width: 100vw; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5vh 3.5vw; box-sizing: border-box; position: relative;
}
.slide .reveal, .slide > div { width: 100%; }

.slide.slide-tall {
    height: 100vh;
    justify-content: center; /* Visszaraktuk flex-start-ról centerre */
    overflow: hidden;
    padding: 30px 3.5vw;     /* Egyenletes kis padding alul-felül, hogy ha zsugorodik, a közepén maradjon */
}

.slide.slide-tall .reveal, .slide.slide-tall > div { max-width: 100%; }

.slide.slide-tall.slide-fit > * {
    transform: scale(var(--slide-fit-scale, 1));
    transform-origin: center center; /* Középről megy össze, egyenletesen */
    width: 100%;
}

/* Egyes diák opt-outolhatnak a kényszerített scale-fitből */
.slide.slide-tall.slide-no-fit {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 24px 3.5vw 72px;
}
.slide.slide-tall.slide-no-fit > * {
    transform: none !important;
    width: 100%;
}


/* --- KÁRTYÁK --- */
.glass-card {
    background-color: var(--card-bg);
    border: 2.5px solid var(--card-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 8px 32px -8px rgba(0,0,0,0.28),
        0 2px 8px -2px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 1px 0 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    border-radius: 1.5rem; color: var(--text-main);
    transition: transform 0.2s ease-out, border-color 0.4s ease, box-shadow 0.4s ease;
}
.glass-card:hover {
    border-color: var(--card-border-hover);
    box-shadow: 0 20px 56px -8px rgba(0,0,0,0.32), 0 0 0 1px var(--card-border-hover), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-4px);
}
.glass-card[class*="border-t-accent-cyan"]:hover  { box-shadow: 0 16px 48px -8px rgba(0,0,0,0.2), 0 0 0 1px var(--card-border-hover), 0 -3px 12px -4px color-mix(in srgb, var(--accent-cyan) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
.glass-card[class*="border-t-accent-rose"]:hover   { box-shadow: 0 16px 48px -8px rgba(0,0,0,0.2), 0 0 0 1px var(--card-border-hover), 0 -3px 12px -4px color-mix(in srgb, var(--accent-rose) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
.glass-card[class*="border-t-accent-amber"]:hover  { box-shadow: 0 16px 48px -8px rgba(0,0,0,0.2), 0 0 0 1px var(--card-border-hover), 0 -3px 12px -4px color-mix(in srgb, var(--accent-amber) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
.glass-card[class*="border-t-accent-green"]:hover  { box-shadow: 0 16px 48px -8px rgba(0,0,0,0.2), 0 0 0 1px var(--card-border-hover), 0 -3px 12px -4px color-mix(in srgb, var(--accent-green) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }

.glass-card[class*="border-t-accent-cyan"]  { border-image: var(--grad-primary) 1; border-image-slice: 1; border-top-style: solid; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15), 0 -2px 24px -4px color-mix(in srgb, var(--accent-cyan) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.08), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.12); }
.glass-card[class*="border-t-accent-rose"]  { border-image: var(--grad-wine) 1; border-image-slice: 1; border-top-style: solid; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15), 0 -2px 24px -4px color-mix(in srgb, var(--accent-rose) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.08), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.12); }
.glass-card[class*="border-t-accent-amber"] { border-image: var(--grad-copper) 1; border-image-slice: 1; border-top-style: solid; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15), 0 -2px 24px -4px color-mix(in srgb, var(--accent-amber) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.08), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.12); }
.glass-card[class*="border-t-accent-green"] { border-image: var(--grad-sage) 1; border-image-slice: 1; border-top-style: solid; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15), 0 -2px 24px -4px color-mix(in srgb, var(--accent-green) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.08), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════════════════════
   VIZUÁLIS VARIÁCIÓS SEGÉDOSZTÁLYOK
   Kártyaszínek · Teli kártya · Ghost · Glow · Szövegszín · Stat · Ikon · Stripe
   ═══════════════════════════════════════════════════════════════ */

/* ─── KÁRTYASZÍN-VARIÁNSOK (keret + halvány bg + glow) ─── */
.card-cyan  { border-color: color-mix(in srgb, var(--accent-cyan)  50%, transparent) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--accent-cyan)  18%, transparent), inset 0 1px 0 rgba(255,255,255,0.06) !important; background: color-mix(in srgb, var(--accent-cyan)  6%, var(--card-bg)) !important; }
.card-amber { border-color: color-mix(in srgb, var(--accent-amber) 50%, transparent) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--accent-amber) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.06) !important; background: color-mix(in srgb, var(--accent-amber) 6%, var(--card-bg)) !important; }
.card-rose  { border-color: color-mix(in srgb, var(--accent-rose)  50%, transparent) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--accent-rose)  18%, transparent), inset 0 1px 0 rgba(255,255,255,0.06) !important; background: color-mix(in srgb, var(--accent-rose)  6%, var(--card-bg)) !important; }
.card-green { border-color: color-mix(in srgb, var(--accent-green) 50%, transparent) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--accent-green) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.06) !important; background: color-mix(in srgb, var(--accent-green) 6%, var(--card-bg)) !important; }
.card-cyan:hover  { border-color: var(--accent-cyan)  !important; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-cyan)  24%, transparent) !important; }
.card-amber:hover { border-color: var(--accent-amber) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-amber) 24%, transparent) !important; }
.card-rose:hover  { border-color: var(--accent-rose)  !important; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-rose)  24%, transparent) !important; }
.card-green:hover { border-color: var(--accent-green) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-green) 24%, transparent) !important; }

/* ─── TELI HÁTTÉR KÁRTYA (card-filled + color) ─── */
/* Használat: <div class="card-filled card-cyan rounded-2xl"> */
.card-filled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; }
.card-filled, .card-filled * { -webkit-text-fill-color: #0D0B08 !important; color: #0D0B08 !important; }
.card-filled h2, .card-filled h3, .card-filled h4 { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; }
.card-filled.card-cyan  { background: var(--accent-cyan)  !important; border-color: var(--accent-cyan)  !important; }
.card-filled.card-amber { background: var(--accent-amber) !important; border-color: var(--accent-amber) !important; }
.card-filled.card-rose  { background: var(--accent-rose)  !important; border-color: var(--accent-rose)  !important; }
.card-filled.card-green { background: var(--accent-green) !important; border-color: var(--accent-green) !important; }

/* ─── GHOST KÁRTYA (csak keret, nincs bg) ─── */
/* Jól néz ki szomszédos card-filled mellé helyezve */
.card-ghost { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-style: dashed !important; }

/* ─── GLOW (önálló segédosztály, kombinálható bármivel) ─── */
.glow-cyan  { box-shadow: 0 0 40px color-mix(in srgb, var(--accent-cyan)  35%, transparent) !important; }
.glow-amber { box-shadow: 0 0 40px color-mix(in srgb, var(--accent-amber) 35%, transparent) !important; }
.glow-rose  { box-shadow: 0 0 40px color-mix(in srgb, var(--accent-rose)  35%, transparent) !important; }
.glow-green { box-shadow: 0 0 40px color-mix(in srgb, var(--accent-green) 35%, transparent) !important; }

/* ─── STAT SZÁM — nagy adatvizualizációs szám ─── */
/* Használat: <p class="stat-number text-accent-cyan">2.4×</p> */
.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vh, 5.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}

/* ─── IKON KONTÉNER VARIÁNSOK ─── */
/* Használat: <div class="icon-box icon-box-cyan"><i data-lucide="..."></i></div> */
.icon-box { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; padding: 0.5rem; flex-shrink: 0; }
.icon-box-cyan  { background: color-mix(in srgb, var(--accent-cyan)  18%, transparent); color: var(--accent-cyan);  -webkit-text-fill-color: var(--accent-cyan);  }
.icon-box-amber { background: color-mix(in srgb, var(--accent-amber) 18%, transparent); color: var(--accent-amber); -webkit-text-fill-color: var(--accent-amber); }
.icon-box-rose  { background: color-mix(in srgb, var(--accent-rose)  18%, transparent); color: var(--accent-rose);  -webkit-text-fill-color: var(--accent-rose);  }
.icon-box-green { background: color-mix(in srgb, var(--accent-green) 18%, transparent); color: var(--accent-green); -webkit-text-fill-color: var(--accent-green); }

/* ─── VÍZSZINTES ACCENT STRIPE (pl. kártyán belüli elválasztó vagy fejléc vonal) ─── */
/* Használat: <div class="stripe-cyan my-3"></div> */
.stripe-cyan  { height: 3px; border-radius: 99px; background: var(--grad-primary); }
.stripe-amber { height: 3px; border-radius: 99px; background: var(--grad-copper);  }
.stripe-rose  { height: 3px; border-radius: 99px; background: var(--grad-wine);    }
.stripe-green { height: 3px; border-radius: 99px; background: var(--grad-sage);    }


/* --- DIAGRAMOK --- */
.chart-bar-container {
    width: 100%; height: 2rem; background-color: var(--bar-bg);
    border-radius: 99px; overflow: hidden; margin-top: 0.35rem; border: 1px solid var(--card-border);
}
.chart-bar-fill {
    height: 100%; width: 0%; border-radius: 99px;
    transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fill-cyan  { background: var(--grad-primary); }
.fill-rose  { background: var(--grad-wine); }
.fill-amber { background: var(--grad-copper); }
.fill-green { background: var(--grad-sage); }
.slide.active .chart-bar-fill { width: var(--target-width, 100%); }

/* --- UI GOMBOK --- */
#theme-toggle, #palette-toggle, .btn-dictionary, .btn-notes, #quiz-toggle, #slide-nav-toggle, #slide-nav-close {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    border-radius: 0.6rem !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#theme-toggle, #palette-toggle, .btn-dictionary, .btn-notes, #quiz-toggle, #slide-nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem !important;
}
#theme-toggle:hover, #palette-toggle:hover, .btn-dictionary:hover, .btn-notes:hover, #quiz-toggle:hover, #slide-nav-toggle:hover, #slide-nav-close:hover {
    border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important;
}

/* Interaktív gombok (Trilemma, Vote) */
.vote-btn {
    background: var(--card-bg); border: 2px solid var(--card-border);
    border-radius: 1rem; cursor: pointer; transition: all 0.3s ease; color: var(--text-main);
}
.vote-btn:hover { border-color: var(--accent-cyan); transform: translateY(-4px); }

/* --- PANELEK --- */
#dictionary-panel, #notes-panel {
    background-color: var(--card-bg); color: var(--text-main); display: flex; flex-direction: column;
}
#dictionary-panel { border-left: 1px solid var(--card-border); }
#notes-panel { border-right: 1px solid var(--card-border); }

:root[data-theme="light"] #dictionary-panel,
:root[data-theme="light"] #notes-panel,
:root[data-theme="light"] .dictionary-header,
:root[data-theme="light"] .notes-header {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE: Összes glow és ambient effekt kikapcsolása
   ═══════════════════════════════════════════════════════════════ */

/* Script által injektált ambient fénylabdák */
[data-theme="light"] .ambient-light,
[data-theme="light"] .ambient-light-2 {
    display: none !important;
}

/* Inline blur glow blob-ok a kártyák mögött:
   <div class="absolute -inset-1 bg-accent-* blur-[50px] animate-pulse ..."> */
[data-theme="light"] [class*="bg-accent-"][class*="blur-["] {
    display: none !important;
}

/* Kártyák: glow box-shadow → egyszerű drop-shadow */
[data-theme="light"] .glass-card,
[data-theme="light"] .glass-card[class*="border-t-accent-cyan"],
[data-theme="light"] .glass-card[class*="border-t-accent-rose"],
[data-theme="light"] .glass-card[class*="border-t-accent-amber"],
[data-theme="light"] .glass-card[class*="border-t-accent-green"] {
    border-width: 6px !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.10),
        0 4px 20px rgba(0, 0, 0, 0.13) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .glass-card[class*="border-t-accent-cyan"]:hover,
[data-theme="light"] .glass-card[class*="border-t-accent-rose"]:hover,
[data-theme="light"] .glass-card[class*="border-t-accent-amber"]:hover,
[data-theme="light"] .glass-card[class*="border-t-accent-green"]:hover,
[data-theme="light"] .hover-glow-cyan:hover,
[data-theme="light"] .hover-glow-rose:hover,
[data-theme="light"] .hover-glow-amber:hover,
[data-theme="light"] .hover-glow-green:hover {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.16) !important;
}

/* Inline Tailwind arbitrary shadow-[...] osztályok */
[data-theme="light"] [class*="shadow-["] {
    box-shadow: none !important;
}

/* Progress bar glow */
[data-theme="light"] .progress-bar {
    box-shadow: none !important;
}

/* Összes drop-shadow filter */
[data-theme="light"] [class*="drop-shadow"] {
    filter: none !important;
}

/* ─── ICON INVERSION light módban ───────────────────────────────
   Dark: átlátszó accent háttér + színes ikon stroke
   Light: tömör accent háttér + fehér ikon (markáns, olvasható)  */
[data-theme="light"] .glass-card [class*="bg-accent-cyan"][class*="text-"],
[data-theme="light"] .glass-card [class*="bg-cyan-500\/"][class*="text-"] {
    background-color: var(--accent-cyan) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    border-color: transparent !important;
}
[data-theme="light"] .glass-card [class*="bg-accent-rose"][class*="text-"],
[data-theme="light"] .glass-card [class*="bg-rose-500\/"][class*="text-"] {
    background-color: var(--accent-rose) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    border-color: transparent !important;
}
[data-theme="light"] .glass-card [class*="bg-accent-amber"][class*="text-"],
[data-theme="light"] .glass-card [class*="bg-amber-500\/"][class*="text-"] {
    background-color: var(--accent-amber) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    border-color: transparent !important;
}
[data-theme="light"] .glass-card [class*="bg-accent-green"][class*="text-"],
[data-theme="light"] .glass-card [class*="bg-green-500\/"][class*="text-"] {
    background-color: var(--accent-green) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    border-color: transparent !important;
}

/* --- LIGHT MODE: Dia-HTML hardkódolt sötét/fehér osztályok felülírása ---
   A slideshow HTML-ben hardkódolt text-white / bg-black/* / border-white/*
   osztályok láthatatlanok vagy zavaróak lennének a világos háttéren. */

/* Gradient clip-text (text-transparent bg-clip-text from-white/from-accent-*)
   Light módban láthatatlan lenne → tömör sötét szöveg */
[data-theme="light"] [class*="text-transparent"][class*="bg-clip-text"] {
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* text-white és opacity-változatai → sötét szöveg */
[data-theme="light"] [class*="text-white"] {
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
}
/* Kisebb opacitású változatok (~40–60%) muted tónust kapnak */
[data-theme="light"] [class*="text-white\/4"],
[data-theme="light"] [class*="text-white\/5"],
[data-theme="light"] [class*="text-white\/6"] {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
}

/* bg-black/* sötét kártya-háttér → halvány semleges háttér */
[data-theme="light"] [class*="bg-black\/"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* border-white/* láthatatlan fehér keret → halvány sötét keret */
[data-theme="light"] [class*="border-white\/"] {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

.dictionary-header, .notes-header {
    flex-shrink: 0; padding: 2rem 2rem 1rem 2rem; background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center; z-index: 20;
}
#dictionary-content, #notes-content { flex-grow: 1; overflow-y: auto; padding: 1rem 2rem 5rem 2rem; }
#notes-content p { font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); }
#notes-content b { color: var(--text-main); }

.audio-player-wrap { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; padding: 1rem 1.5rem; }
.audio-player-wrap audio { width: 100%; height: 40px; border-radius: 0.5rem; }
.audio-player-wrap audio::-webkit-media-controls-panel { background: var(--card-bg); }

/* --- GRAPHITE: Brutalist komponens override-ok --- */
:root[data-palette="graphite"] .glass-card,
:root[data-palette="graphite"] .rounded-3xl,
:root[data-palette="graphite"] .rounded-2xl,
:root[data-palette="graphite"] .rounded-xl {
    border-radius: 0.35rem !important;
}
:root[data-palette="graphite"] .glass-card {
    border-width: 2px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
:root[data-palette="graphite"] .glass-card:hover { transform: translateY(-2px); box-shadow: none; }
:root[data-palette="graphite"] #slide-nav,
:root[data-palette="graphite"] #dictionary-panel,
:root[data-palette="graphite"] #notes-panel,
:root[data-palette="graphite"] .quiz-modal-inner { border-radius: 0.35rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-palette="graphite"] .tri-btn,
:root[data-palette="graphite"] .vote-btn,
:root[data-palette="graphite"] #theme-toggle,
:root[data-palette="graphite"] #palette-toggle,
:root[data-palette="graphite"] .btn-dictionary,
:root[data-palette="graphite"] .btn-notes,
:root[data-palette="graphite"] #quiz-toggle,
:root[data-palette="graphite"] #slide-nav-toggle,
:root[data-palette="graphite"] #slide-nav-close {
    border-radius: 0.25rem !important; border-width: 2px !important; backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* --- ANIMÁCIÓK --- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
    transition:
        opacity   0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter    0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide.active .reveal { opacity: 1; transform: translateY(0); filter: blur(0); }

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
.slide.active .glass-card {
    animation: cardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--card-entrance-delay, 0.05s);
}

.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; }
.progress-bar {
    height: 100%; width: 0%;
    background: var(--grad-mixed);
    background-size: 200% 100%;
    animation: gradientSweep 4s linear infinite;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--accent-cyan) 70%, transparent),
        0 0 3px  color-mix(in srgb, var(--accent-cyan) 90%, transparent);
    transition: width 0.5s;
}

/* --- DIA-NAVIGÁTOR (Menü) --- */
#slide-nav {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 80;
    background: var(--card-bg); border: 1px solid var(--card-border);
    backdrop-filter: blur(16px); border-radius: 1rem; padding: 0.5rem;
    max-height: 70vh; overflow-y: auto; width: 220px;
    transform: translateX(calc(100% + 2rem)); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#slide-nav.open { transform: translateX(0); }
#slide-nav .slide-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; padding: 0.25rem 0.5rem 0.5rem; border-bottom: 1px solid var(--card-border); margin-bottom: 0.25rem;
}
#slide-nav .slide-nav-title { color: var(--text-main); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
#slide-nav-close {
    border: 1px solid var(--card-border); background: var(--card-bg);
    color: var(--text-muted); width: 2rem; height: 2rem; line-height: 1; cursor: pointer;
}
#slide-nav-close:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
#slide-nav .nav-item {
    display: block; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
#slide-nav .nav-item:hover { background: var(--bar-bg); color: var(--text-main); }
#slide-nav .nav-item.active { background: var(--bar-bg); color: var(--accent-cyan); font-weight: 600; }
#slide-nav .nav-item.section-item { font-weight: 700; color: var(--text-main); font-size: 0.85rem; margin-top: 0.5rem; }

#slide-nav-toggle { color: var(--text-main) !important; appearance: none; -webkit-appearance: none; outline: none !important; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 1px var(--card-border), 0 8px 24px rgba(0,0,0,0.25); }
#slide-nav-toggle:focus, #slide-nav-toggle:focus-visible { outline: none !important; box-shadow: 0 0 0 1px var(--accent-cyan), 0 0 0 3px rgba(34, 211, 238, 0.18), 0 8px 24px rgba(0,0,0,0.25); }
#slide-nav-toggle:hover { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; }

.slide-nav-overlay {
    position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.slide-nav-overlay.open { opacity: 1; pointer-events: auto; }
#slide-nav-toggle.is-hidden { opacity: 0; transform: scale(0.9); pointer-events: none; }

/* --- RESZPONZÍV (Mobil és Tablet) --- */
@media (max-width: 768px) {
    .slides-container { scroll-snap-type: y proximity; }
    .slide { min-height: 100vh; height: auto; scroll-snap-align: start; padding: 5vh 5vw 8vh; }
    .slide.slide-tall { height: auto; overflow-y: visible; padding-top: 5vh; padding-bottom: 8vh; }
    h1, .slide h1 { font-size: 2.2rem !important; line-height: 1.05 !important; }
    h2, .slide h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
    h3, .slide h3 { font-size: 1.2rem !important; }
    .slide > .reveal.text-center h1, .slide > div.reveal.text-center h1 { font-size: 2.8rem !important; line-height: 0.95 !important; }
    .slide .reveal, .slide > div { max-width: 100% !important; }
    .grid { grid-template-columns: 1fr !important; }
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns: 1fr !important; }
    .glass-card { padding: 1.2rem !important; }
    .glass-card p, .glass-card span { font-size: 0.95rem !important; }
    .text-3xl { font-size: 1.35rem !important; } .text-2xl { font-size: 1.15rem !important; } .text-xl { font-size: 1.05rem !important; }
    .text-lg { font-size: 0.95rem !important; } .text-base { font-size: 0.9rem !important; }
    [class*="text-[4"],[class*="text-[5"],[class*="text-[6"], [class*="text-[7"] { font-size: 2.5rem !important; line-height: 1 !important; }[class*="md:text-[5"],[class*="md:text-[6"],[class*="md:text-[7"] { font-size: 2.5rem !important; }
    .gap-10, .gap-8 { gap: 1rem !important; } .gap-6 { gap: 0.75rem !important; }
    .p-8 { padding: 1.2rem !important; } .p-6, .p-5 { padding: 1rem !important; }
    .mb-10, .mb-8 { margin-bottom: 1rem !important; } .mb-6 { margin-bottom: 0.75rem !important; }
    .progress-container { height: 3px; }[class*="border-l-[16px]"] { border-left-width: 8px !important; }[class*="border-l-[8px]"] { border-left-width: 4px !important; }
    [class*="border-t-[6px]"] { border-top-width: 3px !important; }[class*="border-t-[8px]"] { border-top-width: 4px !important; }

    #theme-toggle, #palette-toggle, .btn-dictionary, .btn-notes, #quiz-toggle, #slide-nav-toggle { width: 2.6rem; height: 2.6rem; padding: 0.5rem !important; transform: scale(0.95); }
    #palette-toggle { top: 0.75rem; right: 3.5rem; }
    #theme-toggle { top: 0.75rem; right: 0.75rem; }
    .btn-dictionary { top: 3.5rem; right: 0.75rem; }
    .btn-notes { top: 3.5rem; left: 0.75rem; }
    #dictionary-panel, #notes-panel { width: 100%; }
    .fixed.bottom-8.right-8 { display: none; }
    .grid-bg { opacity: 0.5; } .ambient-light { opacity: 0.02; }
    .audio-player-wrap { max-width: 100%; }
    #slide-nav { bottom: 0; right: 0; left: 0; border-radius: 0.9rem 0.9rem 0 0; width: 100%; max-height: 78vh; transform: translateY(110%); }
    #slide-nav.open { transform: translateY(0); }
    #slide-nav .slide-nav-header { position: sticky; top: 0; background: var(--card-bg); padding: 0.65rem 0.9rem; }
    #slide-nav .slide-nav-title { font-size: 0.68rem; letter-spacing: 0.12em; }
    #slide-nav-close { width: 2rem; height: 2rem; border-radius: 0.6rem !important; background: var(--card-bg) !important; }
}

/* --- LAPTOP / RÖVID KÉPERNYŐ VÉDELEM (pl. 1366x768 vagy méretezett 1080p, F11 nélkül) --- */
@media (min-width: 769px) and (max-height: 800px) {
    .slide { padding: 2vh 4vw; }
    h1, .slide h1, [class*="text-[5"], [class*="text-[6"], [class*="text-[7"], [class*="text-[8"] { 
        font-size: clamp(2.5rem, 5vw, 4.2rem) !important; 
        line-height: 1.05 !important;
    }
    h2, .slide h2 { font-size: clamp(1.8rem, 4vw, 2.5rem) !important; }
    .text-5xl, .text-6xl { font-size: 2.2rem !important; }
    .text-3xl, .text-4xl { font-size: 1.5rem !important; }
    .mb-12, .mb-10, .mb-8 { margin-bottom: 1rem !important; }
    .mt-16, .mt-12 { margin-top: 1.5rem !important; }
    .gap-10, .gap-8 { gap: 1rem !important; }
    .p-12, .p-10, .p-8 { padding: 1.5rem !important; }
    .glass-card p, .glass-card li { font-size: 1rem !important; line-height: 1.4 !important; }
    [class*="h-[420px]"], [class*="h-[400px]"] { height: 320px !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .slide { padding: 3vh 4vw; }
    h1, .slide h1 { font-size: clamp(2rem, 5vw, 4rem) !important; }[class*="text-[5"],[class*="text-[6"], [class*="text-[7"] { font-size: clamp(3rem, 6vw, 5rem) !important; }
}

@media (min-width: 1280px) { .slide { padding: 2vh 4vw; } }
@media (min-width: 2560px) { .slide { padding: 3vh 8vw; } }
@media (hover: none) { .glass-card { transform: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   GSAP ÁTVESZI — CSS animációk kikapcsolása ha gsap-loaded aktív
   ═══════════════════════════════════════════════════════════════ */
body.gsap-loaded .lecture-card,
body.gsap-loaded .format-card {
    animation: none !important;
}
body.gsap-loaded .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}
body.gsap-loaded .slide.active .glass-card {
    animation: none !important;
}

/* --- DIA-ÁTMENET: inaktív diák háttérbe húzódnak --- */
/* transform szándékosan nincs: nem ütközik a slide-fit scale mechanizmussal */
.slide:not(.active) .glass-card {
    opacity: 0.4;
    filter: blur(1.5px) saturate(0.65);
    transition: opacity 0.6s ease, filter 0.6s ease;
}
.slide.active .glass-card {
    opacity: 1;
    filter: none;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — Cross-document oldalváltás
   Chrome 111+, Edge 111+, Safari 18+ — többi böngészőn nincs hatás
   ═══════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-8px); } }

::view-transition-old(root) {
    animation: 200ms ease-in both vt-out;
}
::view-transition-new(root) {
    animation: 380ms cubic-bezier(0.16, 1, 0.3, 1) both vt-in;
}

/* --- NYOMTATÁS (Diák jegyzeteihez) --- */
@media print {
    body { overflow: visible; height: auto; background: white; color: black; }
    body::after { display: none; }
    .grid-bg, .ambient-light, #particles { display: none !important; }
    .progress-container, #theme-toggle, #palette-toggle, #slide-nav, #slide-nav-toggle, #slide-nav-overlay, .btn-dictionary, .btn-notes, .fixed.bottom-8.right-8, #dictionary-panel, #dictionary-overlay, #notes-panel, #notes-overlay { display: none !important; }
    .slides-container { height: auto; overflow: visible; scroll-snap-type: none; }
    .slide { height: auto; min-height: 0; scroll-snap-align: unset; page-break-inside: avoid; page-break-after: always; padding: 2rem; }
    .glass-card { border: 1px solid #ccc; background: #fafafa; backdrop-filter: none; box-shadow: none; }
    h1, h2, h3, h4, p, span, b, i { -webkit-text-fill-color: currentColor !important; background: none !important; color: black !important; }
    .text-main, .text-muted { color: #333 !important; -webkit-text-fill-color: #333 !important; }
    .text-accent-cyan, .text-accent-rose, .text-accent-amber, .text-accent-green { color: #555 !important; -webkit-text-fill-color: #555 !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- EGYÉB SEGÉDEK ÉS EFFEKTEK --- */
.typewriter { font-family: var(--font-heading); font-style: italic; border-right: 2px solid transparent; }
@keyframes blink-cursor { 0%, 100% { border-color: var(--accent-cyan); } 50% { border-color: transparent; } }
.typewriter[style*="border-right: 2px solid"] { animation: blink-cursor 0.7s step-end infinite; }
[data-count-to] { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.5em; }
a, .group-hover\:text-accent-cyan:hover { color: var(--accent-cyan); transition: color 0.2s; }
::selection { background: color-mix(in srgb, var(--accent-cyan) 25%, transparent); color: inherit; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-cyan) 55%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

/* --- TAILWIND JIT POLYFILLS (Egyedi színek opacity módosítói) --- */
.bg-card-bg\/30 { background-color: color-mix(in srgb, var(--card-bg) 30%, transparent) !important; }
.bg-card-bg\/50 { background-color: color-mix(in srgb, var(--card-bg) 50%, transparent) !important; }
.bg-card-bg\/80 { background-color: color-mix(in srgb, var(--card-bg) 80%, transparent) !important; }
.bg-card-bg\/90 { background-color: color-mix(in srgb, var(--card-bg) 90%, transparent) !important; }

.border-accent-cyan\/30 { border-color: color-mix(in srgb, var(--accent-cyan) 30%, transparent) !important; }
.border-accent-cyan\/40 { border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent) !important; }
.border-accent-cyan\/50 { border-color: color-mix(in srgb, var(--accent-cyan) 50%, transparent) !important; }
.hover\:border-accent-cyan\/50:hover { border-color: color-mix(in srgb, var(--accent-cyan) 50%, transparent) !important; }

.border-accent-rose\/30 { border-color: color-mix(in srgb, var(--accent-rose) 30%, transparent) !important; }
.border-accent-rose\/40 { border-color: color-mix(in srgb, var(--accent-rose) 40%, transparent) !important; }
.border-accent-rose\/50 { border-color: color-mix(in srgb, var(--accent-rose) 50%, transparent) !important; }
.hover\:border-accent-rose\/50:hover { border-color: color-mix(in srgb, var(--accent-rose) 50%, transparent) !important; }

.border-accent-amber\/30 { border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent) !important; }
.border-accent-amber\/40 { border-color: color-mix(in srgb, var(--accent-amber) 40%, transparent) !important; }
.border-accent-amber\/50 { border-color: color-mix(in srgb, var(--accent-amber) 50%, transparent) !important; }

.border-accent-green\/30 { border-color: color-mix(in srgb, var(--accent-green) 30%, transparent) !important; }
.border-accent-green\/40 { border-color: color-mix(in srgb, var(--accent-green) 40%, transparent) !important; }
.border-accent-green\/50 { border-color: color-mix(in srgb, var(--accent-green) 50%, transparent) !important; }

/* Light módban a kártyák border opacity-ja 100%-ra nő */
:root[data-theme="light"] .border-accent-cyan\/30,
:root[data-theme="light"] .border-accent-cyan\/40,
:root[data-theme="light"] .border-accent-cyan\/50 { border-color: var(--accent-cyan) !important; }
:root[data-theme="light"] .border-accent-rose\/30,
:root[data-theme="light"] .border-accent-rose\/40,
:root[data-theme="light"] .border-accent-rose\/50 { border-color: var(--accent-rose) !important; }
:root[data-theme="light"] .border-accent-amber\/30,
:root[data-theme="light"] .border-accent-amber\/40,
:root[data-theme="light"] .border-accent-amber\/50 { border-color: var(--accent-amber) !important; }
:root[data-theme="light"] .border-accent-green\/30,
:root[data-theme="light"] .border-accent-green\/40,
:root[data-theme="light"] .border-accent-green\/50 { border-color: var(--accent-green) !important; }

.bg-cyan-500\/5 { background-color: color-mix(in srgb, var(--accent-cyan) 5%, transparent) !important; }
.bg-cyan-500\/10 { background-color: color-mix(in srgb, var(--accent-cyan) 10%, transparent) !important; }
.bg-cyan-500\/20 { background-color: color-mix(in srgb, var(--accent-cyan) 20%, transparent) !important; }

.bg-rose-500\/5 { background-color: color-mix(in srgb, var(--accent-rose) 5%, transparent) !important; }
.bg-rose-500\/10 { background-color: color-mix(in srgb, var(--accent-rose) 10%, transparent) !important; }
.bg-rose-500\/20 { background-color: color-mix(in srgb, var(--accent-rose) 20%, transparent) !important; }
.group:hover .group-hover\:bg-rose-500\/10 { background-color: color-mix(in srgb, var(--accent-rose) 10%, transparent) !important; }

.bg-amber-500\/5 { background-color: color-mix(in srgb, var(--accent-amber) 5%, transparent) !important; }
.bg-amber-500\/10 { background-color: color-mix(in srgb, var(--accent-amber) 10%, transparent) !important; }
.bg-amber-500\/20 { background-color: color-mix(in srgb, var(--accent-amber) 20%, transparent) !important; }
.group:hover .group-hover\:bg-amber-500\/10 { background-color: color-mix(in srgb, var(--accent-amber) 10%, transparent) !important; }

.bg-green-500\/20 { background-color: color-mix(in srgb, var(--accent-green) 20%, transparent) !important; }

/* --- Interaktív Glow Effektek --- */
.hover-glow-cyan:hover { box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent-cyan) 8%, transparent), 0 0 30px color-mix(in srgb, var(--accent-cyan) 18%, transparent) !important; border-color: var(--accent-cyan) !important; transform: translateY(-4px); }
.hover-glow-rose:hover { box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent-rose) 8%, transparent), 0 0 30px color-mix(in srgb, var(--accent-rose) 18%, transparent) !important; border-color: var(--accent-rose) !important; transform: translateY(-4px); }
.hover-glow-amber:hover { box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent-amber) 8%, transparent), 0 0 30px color-mix(in srgb, var(--accent-amber) 18%, transparent) !important; border-color: var(--accent-amber) !important; transform: translateY(-4px); }
.hover-glow-green:hover { box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent-green) 8%, transparent), 0 0 30px color-mix(in srgb, var(--accent-green) 18%, transparent) !important; border-color: var(--accent-green) !important; transform: translateY(-4px); }

/* --- Tab Animáció --- */
@keyframes tabSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.tab-animate { animation: tabSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* --- Global icon system --- */
h2 i[data-lucide],
h3 i[data-lucide],
.inline-flex i[data-lucide],
.glass-card h3 i[data-lucide],
.glass-card span i[data-lucide] {
    width: 2.25rem; height: 2.25rem; stroke-width: 2.55; filter: drop-shadow(0 0 10px rgba(255,255,255,0.14));
}

/* ═══════════════════════════════════════════════════════════════
   LANDING OLDAL ANIMÁCIÓK
   ═══════════════════════════════════════════════════════════════ */

/* --- Staggered reveal a kártyákhoz --- */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardRevealDimmed {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 0.4; transform: translateY(0); }
}

.lecture-card {
    animation: cardReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.04s;
}
.lecture-card.upcoming {
    animation-name: cardRevealDimmed;
}
.landing-grid .card-wrap:nth-child(1)  > .lecture-card { animation-delay: 0.06s; }
.landing-grid .card-wrap:nth-child(2)  > .lecture-card { animation-delay: 0.13s; }
.landing-grid .card-wrap:nth-child(3)  > .lecture-card { animation-delay: 0.20s; }
.landing-grid .card-wrap:nth-child(4)  > .lecture-card { animation-delay: 0.27s; }
.landing-grid .card-wrap:nth-child(5)  > .lecture-card { animation-delay: 0.34s; }
.landing-grid .card-wrap:nth-child(6)  > .lecture-card { animation-delay: 0.41s; }
.landing-grid .card-wrap:nth-child(7)  > .lecture-card { animation-delay: 0.48s; }
.landing-grid .card-wrap:nth-child(8)  > .lecture-card { animation-delay: 0.55s; }
.landing-grid .card-wrap:nth-child(9)  > .lecture-card { animation-delay: 0.62s; }
.landing-grid .card-wrap:nth-child(10) > .lecture-card { animation-delay: 0.69s; }
.landing-grid .card-wrap:nth-child(11) > .lecture-card { animation-delay: 0.76s; }

.format-card {
    animation: cardReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.format-card:nth-child(1) { animation-delay: 0.10s; }
.format-card:nth-child(2) { animation-delay: 0.20s; }

/* --- ANIMÁLT GRADIENS CÍM --- */
@keyframes gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
.hero-title-animated {
    background: linear-gradient(135deg,
        var(--accent-cyan) 0%,
        var(--text-main)   35%,
        var(--accent-rose) 65%,
        var(--accent-cyan) 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s ease infinite;
}

/* --- LIGHT MODE: Landing page glow-ok kikapcsolása --- */
[data-theme="light"] .lecture-card:hover .num,
[data-theme="light"] .format-card:hover .num {
    text-shadow: none !important;
}
[data-theme="light"] .format-card .icon-wrap svg {
    filter: none !important;
}
[data-theme="light"] .lecture-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* --- KÁRTYA WRAPPER + PDF LETÖLTÉS GOMB --- */
.card-wrap {
    position: relative;
}
.card-wrap > .lecture-card {
    height: 100%;
}
.pdf-pill {
    position: absolute;
    top: 10px; right: 10px;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
    background: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
    cursor: pointer;
    white-space: nowrap;
}
.card-wrap:hover .pdf-pill {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: none) {
    /* Érintőkijelzőn mindig látható, de halványabb */
    .pdf-pill { opacity: 0.65; transform: none; }
}

/* --- PDF LETÖLTÉS GOMB — óra hero dián, felső közép --- */
.pdf-hero-btn {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent);
    background: color-mix(in srgb, var(--card-bg) 75%, transparent);
    color: var(--accent-cyan);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease 1.2s, background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}
.slide.active .pdf-hero-btn {
    opacity: 0.65;
    pointer-events: auto;
}
.pdf-hero-btn:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-cyan) 50%, transparent);
}
@media print { .pdf-hero-btn { display: none; } }

/* --- DIA SZÁMLÁLÓ (aktuális / összesen) --- */
#slide-xy {
    position: fixed;
    bottom: 24px; left: 24px;
    font-size: 11px;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-muted);
    letter-spacing: 0.12em;
    z-index: 40;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.25s ease;
}
@media print { #slide-xy { display: none; } }

/* --- Shimmer gradient elválasztóvonalhoz --- */
@keyframes shimmerDivider {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}
.gradient-divider {
    background: linear-gradient(
        90deg,
        var(--accent-rose),
        var(--accent-cyan),
        var(--accent-green),
        var(--accent-cyan),
        var(--accent-rose)
    );
    background-size: 300% 100%;
    animation: shimmerDivider 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   AKADÁLYMENTESSÉG — mozgáscsökkentés
   Mozgásérzékeny felhasználók számára minden animáció és
   átmenet ki van kapcsolva, ha az OS szinten be van állítva.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .gradient-divider {
        animation: none;
        background-position: 0% center;
    }
}