/*
Theme Name: Irodai Automatizáció — Dark
Theme URI: https://irodaiautomatizacio.hu
Description: Egyedi hírportál téma az irodaiautomatizacio.hu számára — DataSperr-harmonizált sötét arculat, KKV ügyvezetőknek szóló irodai automatizációs tartalmak. (v4)
Version: 4.6.4
Author: DataSperr
Author URI: https://datasperr.hu
License: Proprietary
Text Domain: irodai-auto
*/

/* ═════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — v4 dark (DS-ikerpár)
   Ezek a custom property-k vezérlik a teljes arculatot. Világos módhoz
   csak ezeket kell átírni, a komponens CSS ezekre épül.
═════════════════════════════════════════════════════════════════════════ */
:root {
  /* Alap háttér- és felületrétegek */
  --color-bg:            #0f172a;                 /* slate-900 — fő háttér */
  --color-bg-deep:       #020617;                 /* slate-950 — alternáló szekciók, footer */
  --color-surface:       rgba(255,255,255,0.05);  /* glass kártya háttér */
  --color-surface-solid: #1e293b;                 /* slate-800 — szolid kártya (cikk törzs) */
  --color-surface-hover: rgba(255,255,255,0.08);

  /* Szegély */
  --color-border:        rgba(255,255,255,0.10);
  --color-border-hover:  rgba(37,99,235,0.40);
  --color-border-active: rgba(34,211,238,0.50);

  /* Szövegszintek */
  --color-text-primary:   #ffffff;
  --color-text-body:      rgba(255,255,255,0.85); /* cikk törzsszöveg — magas kontraszt */
  --color-text-secondary: rgba(255,255,255,0.70);
  --color-text-muted:     rgba(255,255,255,0.40);
  --color-text-subtle:    rgba(255,255,255,0.30);

  /* Brand */
  --color-primary:         #2563eb; /* blue-600 */
  --color-primary-hover:   #3b82f6; /* blue-500 */
  --color-accent:          #22d3ee; /* cyan-400 */
  --color-accent-hover:    #67e8f9; /* cyan-300 */
  --color-emerald:         #10b981;
  --color-amber:           #f59e0b;
  --color-violet:          #8b5cf6;

  /* Brand gradient (datasperr.hu-val egyezően) */
  --gradient-brand:    linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
  --gradient-brand-h:  linear-gradient(90deg,  #2563eb 0%, #22d3ee 100%);
  --gradient-glow:     radial-gradient(ellipse at 50% 30%, rgba(37,99,235,0.30) 0%, transparent 60%);

  /* Árnyékok + glow */
  --shadow-sm:   0 1px  3px 0 rgb(0 0 0 / .30), 0 1px 2px -1px rgb(0 0 0 / .30);
  --shadow-md:   0 4px  6px -1px rgb(0 0 0 / .35), 0 2px 4px -2px rgb(0 0 0 / .35);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .40), 0 4px 6px -4px rgb(0 0 0 / .40);
  --shadow-glow: 0 0 30px rgba(37,99,235,0.15);
  --shadow-glow-strong: 0 0 40px rgba(37,99,235,0.35);

  /* Tipográfia */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --container-max:      1280px;
  --container-pad:      1.5rem;
  --article-max:         680px;   /* cikk törzs olvashatósági max-width */

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
}

/* ─────────────────────────────────────────────
   KATEGÓRIA GRADIENT PALETTA
   A v3-ban már kidolgozott 14 kategóriaszín,
   most gradient pillként ─ watermark palettával egyezően.
───────────────────────────────────────────── */
.cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-heading);
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cat-from, #2563eb), var(--cat-to, #22d3ee));
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cat-pill--konyveles,
.cat-pill--nav-adatszolgaltatas,
.cat-pill--szamlakezeles-penzugy,
.cat-pill--bank-egyeztetes   { --cat-from:#16a34a; --cat-to:#22c55e; }
.cat-pill--riport-elemzes    { --cat-from:#d97706; --cat-to:#f59e0b; }
.cat-pill--ai-automatizacio,
.cat-pill--projekt-menedzsment { --cat-from:#7c3aed; --cat-to:#a855f7; }
.cat-pill--altalanos-automatizalas,
.cat-pill--dokumentumkezeles { --cat-from:#0d9488; --cat-to:#14b8a6; }
.cat-pill--hr-berszamfejtes  { --cat-from:#ca8a04; --cat-to:#eab308; }
.cat-pill--logisztika-raktarozas { --cat-from:#ea580c; --cat-to:#f97316; }
.cat-pill--crm-ugyfelkezeles { --cat-from:#2563eb; --cat-to:#3b82f6; }
.cat-pill--it-biztonsag      { --cat-from:#dc2626; --cat-to:#ef4444; }
.cat-pill--e-kereskedelem    { --cat-from:#059669; --cat-to:#10b981; }
.cat-pill--kiemelt           { --cat-from:#10b981; --cat-to:#22d3ee; }

/* ═════════════════════════════════════════════════════════════════════════
   RESET & BASE
═════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-bg);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-accent-hover); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; background: transparent; border: 0; color: inherit; }

/* Egyedi scrollbar (a datasperr.hu-val összhangban) */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb   { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Kijelölés */
::selection { background: rgba(37,99,235,0.45); color: #fff; }

/* ═════════════════════════════════════════════════════════════════════════
   TIPOGRÁFIA
═════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem,  4vw + 1rem, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1rem; }
strong { font-weight: 700; color: var(--color-text-primary); }
small { font-size: 0.875rem; color: var(--color-text-muted); }
code, pre { font-family: var(--font-mono); }

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ═════════════════════════════════════════════════════════════════════════
   LAYOUT
═════════════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 3rem;
}
@media (min-width: 1024px) {
  .content-grid { grid-template-columns: 1fr 320px; gap: 3.5rem; }
}

main { min-width: 0; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.section-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.875rem;
  transition: color .2s ease;
}
.section-link:hover { color: var(--color-accent-hover); }

/* ═════════════════════════════════════════════════════════════════════════
   NEURÁLIS HÁLÓ HÁTTÉR (datasperr.hu-ból átemelt)
═════════════════════════════════════════════════════════════════════════ */
.neural-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.neural-bg__radial {
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
}
.neural-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.12) 1px, transparent 1px);
  background-size: 70px 70px;
  animation: gridDrift 25s linear infinite;
  opacity: 0.9;
}
@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(70px, 70px); }
}

.neural-bg__orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  animation: orbFloat 11s ease-in-out infinite;
}
.neural-bg__orb--1 {
  top: 15%; left: 10%;
  width: 400px; height: 400px;
  background: rgba(37,99,235,0.14);
}
.neural-bg__orb--2 {
  top: 50%; right: 8%;
  width: 350px; height: 350px;
  background: rgba(6,182,212,0.12);
  animation-delay: 3s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  25%      { transform: translate(40px,-25px) scale(1.08); }
  50%      { transform: translate(-15px,30px) scale(0.92); }
  75%      { transform: translate(-35px,-20px) scale(1.04); }
}

.neural-bg__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.25; }

.nnode   { animation: nnodeBreathe 4s ease-in-out infinite; }
.nnode-1 { animation: nnodeBreathe 5s ease-in-out 1.2s infinite; }
.nnode-2 { animation: nnodeBreathe 6s ease-in-out 2.5s infinite; }
@keyframes nnodeBreathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}
@keyframes tileShimmer {
  0%, 68%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
  76%       { opacity: 0.75; }
  100%      { transform: translateX(330%) skewX(-12deg); opacity: 0; }
}

.synapse { filter: blur(1px); }

.neural-bg__fade-top,
.neural-bg__fade-bot {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
}
.neural-bg__fade-top { top: 0;    background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%); }
.neural-bg__fade-bot { bottom: 0; background: linear-gradient(to top,    var(--color-bg) 0%, transparent 100%); }

/* Reduced motion / mobil statikus fallback */
@media (prefers-reduced-motion: reduce) {
  .neural-bg__grid,
  .neural-bg__orb,
  .article-learning-box::before,
  .article-lexikon-box::before,
  .author-hero::before,
  .category-cover__grid::after,
  .nnode, .nnode-1, .nnode-2,
  .synapse circle { animation: none !important; }
}
@media (max-width: 768px) {
  .neural-bg__grid,
  .neural-bg__orb { animation: none !important; }
  .synapse        { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   HEADER / NAVIGÁCIÓ
═════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15,23,42,0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background: rgba(15,23,42,0.92);
  box-shadow: 0 4px 20px rgba(0,0,0,0.40);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 64px;
}

/* Logó */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-text-primary) !important;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-logo__mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-brand);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.03em;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}
.site-logo__mark svg { width: 22px; height: 22px; }
.site-logo__word { display: inline-flex; gap: 2px; }
.site-logo__word span { color: var(--color-accent); font-weight: 500; opacity: 0.8; }

/* Nav lista */
.site-nav { flex: 1; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  justify-content: center;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 64px;
  padding: 0 0.25rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color .2s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-text-primary);
}
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  background: var(--gradient-brand-h);
  border-radius: 2px;
}

/* Kategóriák dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 0.5rem;
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* Akciók (jobb oldal) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-search {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background .15s ease, color .15s ease;
}
.btn-search:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.125rem;
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-subscribe:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-strong);
  color: #fff !important;
}

/* Mobil menü toggle */
.mobile-menu-toggle {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}
@media (max-width: 900px) {
  .mobile-menu-toggle { display: grid; }
  .site-nav {
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.98);
    backdrop-filter: blur(16px);
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 99;
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; gap: 0.25rem; align-items: stretch; }
  .nav-link { height: auto; padding: 0.75rem 1rem; }
  .nav-link.active::after { display: none; }
  .nav-dropdown {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    margin-top: 0.25rem;
    background: transparent;
    border: 0;
    padding: 0 0 0 1rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   KERESÉS OVERLAY
═════════════════════════════════════════════════════════════════════════ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(15,23,42,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.search-overlay.is-open { display: flex; }
.search-box {
  width: min(680px, 92vw);
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(12px);
}
.search-box input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color .15s ease;
}
.search-box input:focus { border-color: var(--color-border-active); }
.search-box input::placeholder { color: var(--color-text-muted); }

/* ═════════════════════════════════════════════════════════════════════════
   HERO CIKK (főoldal)
═════════════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  padding: 3rem 0 4rem;
  /* overflow:hidden eltávolítva (4.4.2): a topic-bubble tooltip-jei lóghattak
     a stats-bar mögé. A neural-bg-nek saját overflow:hidden-je van (line 229),
     így a synapse-impulzusok továbbra is a hero-section bounds-aiban maradnak.
     z-index: 1 — biztosítja, hogy a kilógó tooltip a stats-bar FELETT
     renderelődik (default document-order esetén a sibling stats-bar
     felülpaint-elné). */
  overflow: visible;
  z-index: 1;
}
.hero-article {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: 2.5rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.hero-article:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow);
}
@media (max-width: 900px) {
  .hero-article { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; }
}
.hero-article__thumb {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-deep);
}
.hero-article__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hero-article__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.hero-article__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--color-text-primary);
}
.hero-article__title a { color: inherit; transition: color .2s ease; }
.hero-article__title a:hover { color: var(--color-accent); }
.hero-article__excerpt {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 0.875rem;
  width: max-content;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-read-more:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-strong);
  color: #fff !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   CIKK KÁRTYA RÁCS
═════════════════════════════════════════════════════════════════════════ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.article-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.article-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-deep);
  overflow: hidden;
  position: relative;
}
.article-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.article-card:hover .article-card__thumb img { transform: scale(1.04); }

.article-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.article-card__title {
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.article-card__title a { color: inherit; transition: color .2s ease; }
.article-card__title a:hover { color: var(--color-accent); }

.article-card__excerpt {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
  flex: 1;
}

/* Meta sor (kat + dátum + olvasás) */
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
}
.article-meta__sep { opacity: 0.4; }
.article-meta time { font-variant-numeric: tabular-nums; }

/* Thumb placeholder (nincs featured image) */
.thumb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, rgba(37,99,235,0.20), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(34,211,238,0.15), transparent 60%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  position: relative;
}
.thumb-placeholder::before {
  content: "ia";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 5rem);
  letter-spacing: -0.04em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.35;
}
.thumb-placeholder--hero { aspect-ratio: 16 / 9; }

.category-cover {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--cat-from, #2563eb) 38%, transparent), transparent 42%),
    radial-gradient(circle at 78% 75%, color-mix(in srgb, var(--cat-to, #22d3ee) 28%, transparent), transparent 45%),
    linear-gradient(135deg, #111827 0%, #0b1220 100%);
}
.category-cover__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cat-from, #2563eb) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cat-from, #2563eb) 18%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.85;
}
.category-cover__grid::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.13), transparent);
  transform: skewX(-12deg);
  animation: tileShimmer 16s ease-in-out infinite;
}
.category-cover__icon {
  position: relative;
  width: clamp(56px, 18%, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--cat-from, #2563eb);
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--cat-from, #2563eb) 45%, transparent));
  z-index: 1;
}
.category-cover__icon svg {
  width: 100%;
  height: 100%;
}
.category-cover__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
}
.category-cover--hero .category-cover__icon {
  width: clamp(92px, 16vw, 156px);
}
.category-cover--hero .category-cover__label {
  bottom: 1.25rem;
  font-size: clamp(0.9rem, 2vw, 1.25rem);
}

/* ═════════════════════════════════════════════════════════════════════════
   MORZSA NAVIGÁCIÓ
═════════════════════════════════════════════════════════════════════════ */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.breadcrumbs a { color: var(--color-text-secondary); transition: color .15s ease; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { opacity: 0.4; }

/* ═════════════════════════════════════════════════════════════════════════
   SINGLE CIKK
═════════════════════════════════════════════════════════════════════════ */
.single-article { padding: 2rem 0 4rem; }
.single-article__header {
  max-width: var(--article-max);
  margin: 1rem auto 1.5rem;
  text-align: left;
}
.single-article__meta-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.single-article__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}
.single-article__lead {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.single-article__featured {
  max-width: var(--container-max);
  margin: 0 auto 2.5rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-deep);
}
.single-article__featured img { width: 100%; height: 100%; object-fit: cover; }

/* Cikk törzs — szolid slate-800 a jobb olvashatóságért */
.article-body {
  max-width: var(--article-max);
  margin-inline: auto;
  padding: 2rem 2rem 2.5rem;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article-body > * + * { margin-top: 1.25rem; }
.article-body h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.625rem;
  color: var(--color-text-primary);
}
.article-body h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--color-text-primary);
}
.article-body p { color: var(--color-text-body); }
.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(34,211,238,0.4);
  transition: text-decoration-color .15s ease;
}
.article-body a:hover { text-decoration-color: var(--color-accent); }

.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.375rem; color: var(--color-text-body); }
.article-body li::marker { color: var(--color-accent); }

.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.25rem 0 0.25rem 1.125rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

.article-body code {
  background: var(--color-bg-deep);
  color: var(--color-accent);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  border: 1px solid var(--color-border);
}
.article-body pre {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.article-body pre code { background: transparent; border: 0; padding: 0; color: var(--color-text-body); }
.article-body img { border-radius: var(--radius-md); margin: 1.5rem 0; }

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.article-body th, .article-body td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  text-align: left;
}
.article-body th { background: rgba(255,255,255,0.04); color: var(--color-text-primary); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════════
   DATASPERR CTA BLOKK (cikk alján)
═════════════════════════════════════════════════════════════════════════ */
.cta-block {
  max-width: var(--article-max);
  margin: 2rem auto;
  padding: 1.75rem;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.20) 0%, rgba(34,211,238,0.10) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  top: -50%; left: 50%;
  width: 400px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(37,99,235,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.cta-block > * { position: relative; }
.cta-block__eyebrow {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.cta-block__title { color: var(--color-text-primary); font-size: 1.375rem; margin-bottom: 0.625rem; }
.cta-block__text  { color: var(--color-text-secondary); margin-bottom: 1.25rem; font-size: 0.9375rem; line-height: 1.55; }
.cta-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-block__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); }

/* Tag lista */
.tag-list {
  max-width: var(--article-max);
  margin: 2rem auto 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-list__item {
  display: inline-flex;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tag-list__item:hover {
  border-color: var(--color-border-active);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

/* Kapcsolódó cikkek */
.related-posts { max-width: var(--container-max); margin: 3rem auto 0; }
.related-posts__title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

/* ═════════════════════════════════════════════════════════════════════════
   SIDEBAR WIDGET
═════════════════════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.sidebar-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(6px);
  padding: 1.25rem;
}
.sidebar-widget__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-widget ul li {
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.sidebar-widget ul li a { color: var(--color-text-secondary); transition: color .15s ease; }
.sidebar-widget ul li a:hover { color: var(--color-accent); }
.sidebar-widget__count { color: var(--color-text-muted); font-size: 0.75rem; font-family: var(--font-mono); }

/* Kiemelt DataSperr CTA widget */
.sidebar-widget--ds {
  background:
    linear-gradient(135deg, rgba(37,99,235,0.30) 0%, rgba(34,211,238,0.12) 100%),
    var(--color-surface);
  border-color: rgba(37,99,235,0.45);
}
.sidebar-widget--ds .sidebar-widget__title { color: #fff; border-bottom-color: rgba(255,255,255,0.20); }

/* Newsletter widget */
.newsletter-form input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  outline: none;
}
.newsletter-form input::placeholder { color: var(--color-text-muted); }
.newsletter-form input:focus { border-color: var(--color-border-active); }
.newsletter-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem;
  align-items: start;
  margin: .25rem 0 .6rem;
}
.newsletter-consent input {
  width: auto;
  margin: .25rem 0 0;
}
.newsletter-consent span {
  color: var(--color-text-muted);
  font-size: .72rem;
  line-height: 1.35;
}
.newsletter-form button {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glow);
}

.ia-signup-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: 3.5rem var(--container-pad) 5rem;
}
.ia-signup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(6px);
}
.ia-signup-form label {
  display: grid;
  gap: .35rem;
}
.ia-signup-form label span:first-child {
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 800;
}
.ia-signup-form input,
.ia-signup-form select,
.ia-signup-form textarea {
  width: 100%;
  padding: .75rem .85rem;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font: inherit;
  outline: none;
}
.ia-signup-form input:focus,
.ia-signup-form select:focus,
.ia-signup-form textarea:focus {
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 3px rgba(34,211,238,.08);
}
.ia-signup-full { grid-column: 1 / -1; }
.ia-signup-consent {
  grid-template-columns: auto 1fr !important;
  gap: .65rem !important;
  align-items: start;
}
.ia-signup-consent input {
  width: auto;
  margin-top: .25rem;
}
.ia-signup-consent span {
  color: var(--color-text-secondary);
  font-size: .84rem;
  line-height: 1.5;
}
.ia-signup-consent a { color: var(--color-accent); font-weight: 800; }
.form-message {
  grid-column: 1 / -1;
  border-radius: var(--radius-md);
  padding: .8rem .95rem;
  margin: 0;
  font-weight: 800;
}
.form-message--success {
  color: #86efac;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.28);
}
.form-message--error {
  color: #fecaca;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.28);
}

@media (max-width: 760px) {
  .ia-signup-layout,
  .ia-signup-form {
    grid-template-columns: 1fr;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   LEXIKON
═════════════════════════════════════════════════════════════════════════ */
.lexikon-hero { position: relative; padding: 3rem 0 2rem; text-align: center; }
.lexikon-hero h1 { margin-bottom: 0.5rem; }
.lexikon-hero p  { color: var(--color-text-secondary); max-width: 560px; margin: 0 auto 1.5rem; }

.lexikon-search { max-width: 520px; margin: 0 auto 1.5rem; }
.lexikon-search input {
  width: 100%;
  padding: 0.875rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: 1rem;
  backdrop-filter: blur(6px);
  outline: none;
  transition: border-color .15s ease;
}
.lexikon-search input:focus { border-color: var(--color-border-active); }

.lexikon-abc-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 2rem;
}
.lexikon-abc-filter button {
  min-width: 36px; height: 36px;
  padding: 0 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all .15s ease;
}
.lexikon-abc-filter button:hover { border-color: var(--color-border-active); color: var(--color-text-primary); }
.lexikon-abc-filter button.is-active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.lexikon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.lexikon-card {
  padding: 1rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lexikon-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}
.lexikon-card__term { color: var(--color-text-primary); font-weight: 700; font-family: var(--font-heading); font-size: 1.0625rem; }
.lexikon-card__cat  { color: var(--color-text-muted); font-size: 0.75rem; margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lexikon-card__excerpt { color: var(--color-text-secondary); font-size: 0.875rem; margin-top: 0.5rem; line-height: 1.5; }

.lexikon-letter-group { margin-bottom: 2rem; }
.lexikon-letter-heading {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
}

/* ═════════════════════════════════════════════════════════════════════════
   MEGOLDÁSOK (iparági rács)
═════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   /megoldasok hero — gradient h1 + neural-bg, AI Pulzus design-nyelv
   ───────────────────────────────────────────────────────────────────── */
.megoldasok-hero {
  position: relative;
  padding: 4.5rem 0 3rem;
  text-align: center;
  overflow: visible;
}
.megoldasok-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 0.75rem;
}
.megoldasok-hero__lead {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}
.megoldasok-hero__lead strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   GRID — auto-fit responsive 4-3-2-1
   ───────────────────────────────────────────────────────────────────── */
.megoldasok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding-top: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────
   .megoldas-card — frosted glass tile (AI Pulzus / topic-bubble nyelv)
   • 8-paletta nth-child cycle (`--cat-from`/`--cat-to` automatikusan)
   • ::before halo pulzus a topic-bubble mintájára
   • hover: scale 1.04 + halo intensifies + glow
   ───────────────────────────────────────────────────────────────────── */
.megoldas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.75rem;
  background: rgba(22, 24, 32, 0.62);
  border: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 28%, transparent);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  isolation: isolate;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  text-decoration: none;
  color: inherit;
}

/* Halo a kártya alatt — halk pulse */
.megoldas-card::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(
    ellipse 60% 70% at 50% 0%,
    color-mix(in srgb, var(--cat-from, #2563eb) 55%, transparent) 0%,
    transparent 60%
  );
  filter: blur(36px);
  opacity: 0.30;
  z-index: -1;
  pointer-events: none;
  animation: megoldas-card-halo 4.4s ease-in-out infinite;
}

/* nth-child gradient cycle a kiemelt iparági kártyákhoz */
.megoldas-card:nth-child(8n+1) { --cat-from:#2563eb; --cat-to:#22d3ee; }   /* kék-cyan */
.megoldas-card:nth-child(8n+2) { --cat-from:#7c3aed; --cat-to:#a855f7; }   /* violet */
.megoldas-card:nth-child(8n+3) { --cat-from:#16a34a; --cat-to:#22c55e; }   /* zöld */
.megoldas-card:nth-child(8n+4) { --cat-from:#ea580c; --cat-to:#f97316; }   /* narancs */
.megoldas-card:nth-child(8n+5) { --cat-from:#0d9488; --cat-to:#14b8a6; }   /* teal */
.megoldas-card:nth-child(8n+6) { --cat-from:#dc2626; --cat-to:#ef4444; }   /* piros */
.megoldas-card:nth-child(8n+7) { --cat-from:#ca8a04; --cat-to:#eab308; }   /* sárga */
.megoldas-card:nth-child(8n+8) { --cat-from:#d97706; --cat-to:#f59e0b; }   /* arany */

/* Halo animáció-fáziseltolás stagger — minden kártyára kicsit más */
.megoldas-card:nth-child(8n+1)::before { animation-delay: -0.4s; }
.megoldas-card:nth-child(8n+2)::before { animation-delay: -1.0s; }
.megoldas-card:nth-child(8n+3)::before { animation-delay: -1.6s; }
.megoldas-card:nth-child(8n+4)::before { animation-delay: -2.2s; }
.megoldas-card:nth-child(8n+5)::before { animation-delay: -2.8s; }
.megoldas-card:nth-child(8n+6)::before { animation-delay: -3.4s; }
.megoldas-card:nth-child(8n+7)::before { animation-delay: -0.8s; }
.megoldas-card:nth-child(8n+8)::before { animation-delay: -1.8s; }

@keyframes megoldas-card-halo {
  0%, 100% { opacity: 0.30; transform: scale(1.00); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}

.megoldas-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: color-mix(in srgb, var(--cat-from, #2563eb) 70%, transparent);
  box-shadow:
    0 18px 42px -12px color-mix(in srgb, var(--cat-from, #2563eb) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cat-from, #2563eb) 40%, transparent);
}
.megoldas-card:hover::before {
  opacity: 0.75;
  animation-play-state: paused;
}

/* Ikon-tile — frosted glass, accent gradient */
.megoldas-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-from, #2563eb) 28%, transparent),
    color-mix(in srgb, var(--cat-to, #22d3ee) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 40%, transparent);
  display: grid;
  place-items: center;
  font-size: 1.625rem;
  line-height: 1;
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--cat-from, #2563eb) 35%, transparent);
}

.megoldas-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.megoldas-card__desc {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.megoldas-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--cat-from, #2563eb) 75%, white);
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color .2s ease, transform .2s ease;
}
.megoldas-card:hover .megoldas-card__link {
  color: white;
  transform: translateX(2px);
}

/* Egész kártya kattintható — link átfedi (a > overlay) */
.megoldas-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .megoldas-card::before { animation: none; opacity: 0.4; }
  .megoldas-card:hover { transform: translateY(-2px); }
}

/* Mobile: kisebb padding, kompaktabb tile */
@media (max-width: 600px) {
  .megoldasok-grid { gap: 1rem; }
  .megoldas-card { padding: 1.25rem 1rem 1.5rem; }
  .megoldas-card__icon { width: 46px; height: 46px; font-size: 1.4rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   LAPOZÁS
═════════════════════════════════════════════════════════════════════════ */
.pagination { display: flex; justify-content: center; gap: 0.375rem; margin: 2.5rem 0; }
.pagination .page-numbers {
  min-width: 40px; height: 40px;
  padding: 0 0.875rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all .15s ease;
}
.pagination .page-numbers:hover { border-color: var(--color-border-active); color: var(--color-text-primary); }
.pagination .page-numbers.current {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

/* ═════════════════════════════════════════════════════════════════════════
   FOOTER
═════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
  color: var(--color-text-secondary);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-col h4 {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.footer-col a { display: block; padding: 0.25rem 0; color: var(--color-text-secondary); font-size: 0.875rem; transition: color .15s ease; }
.footer-col a:hover { color: var(--color-accent); }
.footer-brand { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.6; }

.footer-ds-badge {
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.footer-ds-badge strong { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.footer-bottom a { color: var(--color-text-muted); }
.footer-bottom a:hover { color: var(--color-accent); }

/* ═════════════════════════════════════════════════════════════════════════
   TAXONOMY LANDING (iparági terület)
═════════════════════════════════════════════════════════════════════════ */
.taxonomy-hero { position: relative; padding: 4rem 0 3rem; text-align: center; overflow: hidden; }
.taxonomy-hero__icon {
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  display: grid; place-items: center;
  font-size: 2rem;
  box-shadow: var(--shadow-glow);
}
.taxonomy-hero h1 { margin-bottom: 0.75rem; }
.taxonomy-hero p  { color: var(--color-text-secondary); max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.0625rem; }

/* ═════════════════════════════════════════════════════════════════════════
   404 OLDAL
═════════════════════════════════════════════════════════════════════════ */
.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 4rem 1.5rem;
  overflow: hidden;
}
.error-404__code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 16vw, 10rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-404__title { margin: 0.5rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.error-404__text  { color: var(--color-text-secondary); max-width: 480px; margin: 0 auto 1.5rem; }

/* ═════════════════════════════════════════════════════════════════════════
   FADE-IN + UTILITIES
═════════════════════════════════════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   PRINT (cikkek kinyomtatásához világos verzió)
═════════════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --color-bg: #ffffff;
    --color-text-primary: #0f172a;
    --color-text-body: #1e293b;
    --color-text-secondary: #475569;
  }
  body { background: #ffffff; color: #0f172a; }
  .site-header, .site-footer, .sidebar, .search-overlay, .cta-block, .tag-list, .related-posts, .neural-bg { display: none !important; }
  .article-body { background: transparent; border: 0; padding: 0; color: #0f172a; }
  .article-body p { color: #1e293b; }
  a { color: #1d4ed8; text-decoration: underline; }
}

/* ═════════════════════════════════════════════════════════════════════════
   .ia-* KOMPONENS CLASS-OK (n8n-generált cikkekhez, v4-től)
   A GPT prompt ezeket a class-okat generálja (inline style helyett).
   Egy helyen módosítható stílus — dark/light váltás csak CSS-ben.
═════════════════════════════════════════════════════════════════════════ */

/* "A lényeg 30 másodpercben" összefoglaló doboz */
.article-body .ia-summary-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-radius: var(--radius-md);
}
.article-body .ia-summary-box__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article-body .ia-summary-box ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-body);
}
.article-body .ia-summary-box li { color: var(--color-text-body); }
.article-body .ia-summary-box li::marker { color: var(--color-accent); }

/* Olvasási idő jelző */
.article-body .ia-reading-time {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* "Tudtad?" kiemelés */
.article-body .ia-tudtad-box {
  background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.05) 100%);
  border-left: 4px solid var(--color-amber);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-body);
  font-style: italic;
}
.article-body .ia-tudtad-box strong {
  color: var(--color-amber);
  font-style: normal;
  letter-spacing: 0.03em;
}

/* Előtte / Utána összehasonlító kártyák */
.article-body .ia-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 640px) {
  .article-body .ia-before-after { grid-template-columns: 1fr; }
}
.article-body .ia-before,
.article-body .ia-after {
  padding: 1rem 1.125rem;
  border-radius: var(--radius-md);
  border: 1px solid;
}
.article-body .ia-before {
  background: linear-gradient(135deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.05) 100%);
  border-color: rgba(239,68,68,0.30);
}
.article-body .ia-after {
  background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.05) 100%);
  border-color: rgba(16,185,129,0.30);
}
.article-body .ia-before__title,
.article-body .ia-after__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.875rem;
}
.article-body .ia-before__title { color: #f87171; }
.article-body .ia-after__title  { color: #34d399; }
.article-body .ia-before p,
.article-body .ia-after p { color: var(--color-text-body); margin: 0; }

/* "Számokban" — 3 stats kártya */
.article-body .ia-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: center;
}
@media (max-width: 640px) {
  .article-body .ia-stats { grid-template-columns: 1fr; }
}
.article-body .ia-stat {
  padding: 1.25rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, transform .15s ease;
}
.article-body .ia-stat:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
}
.article-body .ia-stat__num {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-heading);
  line-height: 1.1;
  margin: 0;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.article-body .ia-stat__label {
  color: var(--color-text-muted);
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
}

/* Kapcsolódó tippek box */
.article-body .ia-related-tips {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%);
  border: 1px solid rgba(16,185,129,0.30);
  padding: 1.25rem 1.375rem;
  margin: 1.5rem 0;
  border-radius: var(--radius-lg);
}
.article-body .ia-related-tips__title {
  margin-top: 0;
  color: #34d399;
  font-family: var(--font-heading);
  font-size: 1.125rem;
}
.article-body .ia-related-tips ul,
.article-body .ia-related-tips li { color: var(--color-text-body); }
.article-body .ia-related-tips a {
  color: var(--color-accent);
  font-weight: 600;
}

/* Szerzői aláírás */
.article-body .ia-signature {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Akcentszínes szöveges kiemelések (semantic color) */
.article-body .ia-accent     { color: var(--color-accent); }
.article-body .ia-success    { color: #34d399; }
.article-body .ia-warning    { color: var(--color-amber); }
.article-body .ia-danger     { color: #f87171; }

/* ═════════════════════════════════════════════════════════════════════════
   CIKK-BELSŐ INLINE CALLOUT FIXEK
   Az n8n-generált cikkek inline-style-lal hordoznak világos pasztel
   callout boxokat (Tailwind -50/-100 shade-ek). Sötét témán ezeket
   átalakítjuk sötét glass-variánsra — a szín-szemantikát megtartjuk.
   Hosszú távon az n8n promptot kell frissíteni; ez a CSS réteg addig
   kompatibilissé teszi a meglévő és új cikkeket.
═════════════════════════════════════════════════════════════════════════ */

/* --- Kék árnyalatok (CTA, információs boxok) --- */
.article-body [style*="background:#eff6ff"],
.article-body [style*="background: #eff6ff"],
.article-body [style*="background-color:#eff6ff"],
.article-body [style*="background:#dbeafe"],
.article-body [style*="background: #dbeafe"],
.article-body [style*="background:#e0f2fe"],
.article-body [style*="background:#bae6fd"] {
  background: linear-gradient(135deg, rgba(37,99,235,0.14) 0%, rgba(37,99,235,0.05) 100%) !important;
  border: 1px solid rgba(37,99,235,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Cyan árnyalatok --- */
.article-body [style*="background:#ecfeff"],
.article-body [style*="background: #ecfeff"],
.article-body [style*="background:#cffafe"],
.article-body [style*="background:#a5f3fc"] {
  background: linear-gradient(135deg, rgba(34,211,238,0.14) 0%, rgba(34,211,238,0.05) 100%) !important;
  border: 1px solid rgba(34,211,238,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Emerald / green (pozitív, Utána, Kapcsolódó tippek) --- */
.article-body [style*="background:#ecfdf5"],
.article-body [style*="background: #ecfdf5"],
.article-body [style*="background:#d1fae5"],
.article-body [style*="background:#f0fdf4"],
.article-body [style*="background: #f0fdf4"],
.article-body [style*="background:#dcfce7"],
.article-body [style*="background:#bbf7d0"] {
  background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.05) 100%) !important;
  border: 1px solid rgba(16,185,129,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Amber / yellow (Tudtad, figyelmeztetés) --- */
.article-body [style*="background:#fef3c7"],
.article-body [style*="background: #fef3c7"],
.article-body [style*="background:#fefce8"],
.article-body [style*="background:#fef9c3"],
.article-body [style*="background:#fffbeb"],
.article-body [style*="background:#fef08a"] {
  background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.05) 100%) !important;
  border: 1px solid rgba(245,158,11,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Red (Előtte, veszély) --- */
.article-body [style*="background:#fef2f2"],
.article-body [style*="background: #fef2f2"],
.article-body [style*="background:#fee2e2"],
.article-body [style*="background:#fecaca"] {
  background: linear-gradient(135deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.05) 100%) !important;
  border: 1px solid rgba(239,68,68,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Orange --- */
.article-body [style*="background:#fff7ed"],
.article-body [style*="background: #fff7ed"],
.article-body [style*="background:#ffedd5"],
.article-body [style*="background:#fed7aa"] {
  background: linear-gradient(135deg, rgba(234,88,12,0.14) 0%, rgba(234,88,12,0.05) 100%) !important;
  border: 1px solid rgba(234,88,12,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Violet --- */
.article-body [style*="background:#f5f3ff"],
.article-body [style*="background:#ede9fe"],
.article-body [style*="background:#ddd6fe"] {
  background: linear-gradient(135deg, rgba(139,92,246,0.14) 0%, rgba(139,92,246,0.05) 100%) !important;
  border: 1px solid rgba(139,92,246,0.30) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Semleges fehér / slate / gray (stats kártyák, tiszta box-ok) --- */
.article-body [style*="background:#ffffff"],
.article-body [style*="background: #ffffff"],
.article-body [style*="background:white"],
.article-body [style*="background: white"],
.article-body [style*="background:#fff;"],
.article-body [style*="background: #fff;"],
.article-body [style*="background:#fff"],
.article-body [style*="background:#f8fafc"],
.article-body [style*="background:#f1f5f9"],
.article-body [style*="background:#e2e8f0"],
.article-body [style*="background:#f9fafb"],
.article-body [style*="background:#f3f4f6"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(6px);
}

/* --- Szövegszín biztonsági háló: ha a callout-on belül sötét inline-color ---
       van (pl. color:#0f172a, #1e293b, #334155), világosra váltja. --- */
.article-body [style*="color:#0f172a"],
.article-body [style*="color: #0f172a"],
.article-body [style*="color:#1e293b"],
.article-body [style*="color: #1e293b"],
.article-body [style*="color:#334155"],
.article-body [style*="color:#475569"],
.article-body [style*="color:#64748b"],
.article-body [style*="color:#0c4a6e"],
.article-body [style*="color:#064e3b"],
.article-body [style*="color:#7f1d1d"],
.article-body [style*="color:#78350f"] {
  color: var(--color-text-body) !important;
}

/* --- Vékony border-ok (Tailwind -200 shade-ek): élénkítjük --- */
.article-body [style*="border:1px solid #bfdbfe"],
.article-body [style*="border:1px solid #e0e7ff"] {
  border-color: rgba(37,99,235,0.30) !important;
}
.article-body [style*="border:1px solid #a7f3d0"],
.article-body [style*="border:1px solid #bbf7d0"] {
  border-color: rgba(16,185,129,0.30) !important;
}
.article-body [style*="border:1px solid #fde68a"],
.article-body [style*="border:1px solid #fcd34d"] {
  border-color: rgba(245,158,11,0.30) !important;
}
.article-body [style*="border:1px solid #fecaca"] {
  border-color: rgba(239,68,68,0.30) !important;
}
.article-body [style*="border:1px solid #e2e8f0"],
.article-body [style*="border:1px solid #e5e7eb"] {
  border-color: var(--color-border) !important;
}

/* Stats kártyák (75%/80%/95% típusú) — nagy számoknak élénk gradient
   szín, hogy a sötét kártyán is kiemelkedjenek */
.article-body [style*="color:#2563eb"],
.article-body [style*="color: #2563eb"],
.article-body [style*="color:#1d4ed8"] {
  color: var(--color-accent) !important;
}
.article-body [style*="color:#10b981"],
.article-body [style*="color:#059669"] {
  color: #34d399 !important;
}
.article-body [style*="color:#ef4444"],
.article-body [style*="color:#dc2626"] {
  color: #f87171 !important;
}
.article-body [style*="color:#f59e0b"],
.article-body [style*="color:#d97706"] {
  color: #fbbf24 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   V3 CLASS-NÉV ALIASOK (backward kompatibilitás a meglévő PHP template-ekkel)
   A v3 template-ek class-jai → v4 komponensek.
═════════════════════════════════════════════════════════════════════════ */

/* breadcrumb (v3) → breadcrumbs (v4) */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 1.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-secondary); transition: color .15s ease; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .separator { opacity: 0.4; }

/* article-header (v3) → single-article__header (v4) */
.article-header {
  max-width: var(--article-max);
  margin: 1rem auto 1.5rem;
}
.article-header__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.article-header__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}
.article-header__lead {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.article-date,
.article-readtime {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* article-featured-image (v3) → single-article__featured (v4) */
.article-featured-image {
  max-width: var(--container-max);
  margin: 0 auto 2.5rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-deep);
}
.article-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-featured-image figcaption {
  padding: 0.75rem 1rem;
  background: var(--color-bg-deep);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* article-tags (v3) + .tag → tag-list (v4) + .tag-list__item */
.article-tags {
  max-width: var(--article-max);
  margin: 2rem auto 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.article-tags__label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}
.article-tags .tag {
  display: inline-flex;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all .15s ease;
}
.article-tags .tag:hover {
  border-color: var(--color-border-active);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.related-articles { max-width: var(--container-max); margin: 3rem auto 0; }
.related-articles .section-title { font-size: 1.25rem; }

.article-learning-box,
.article-lexikon-box {
  max-width: var(--article-max);
  margin: 2rem auto 0;
  padding: 1.5rem;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.16) 0%, rgba(34,211,238,0.07) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.article-learning-box::before,
.article-lexikon-box::before,
.author-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-12deg);
  animation: tileShimmer 18s ease-in-out infinite;
  pointer-events: none;
}
.article-learning-box > *,
.article-lexikon-box > *,
.author-hero > * { position: relative; }
.article-learning-box__eyebrow,
.article-lexikon-box__eyebrow,
.author-hero__eyebrow {
  margin-bottom: 0.5rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.article-learning-box__title,
.article-lexikon-box__title {
  margin-bottom: 0.85rem;
  color: var(--color-text-primary);
  font-size: 1.25rem;
}
.article-learning-box ul {
  margin: 0;
  padding-left: 1.25rem;
}
.article-learning-box li {
  color: var(--color-text-body);
  margin-bottom: 0.45rem;
}
.article-learning-box li::marker { color: var(--color-accent); }
.article-learning-box__meta { margin-top: 1rem; }
.article-lexikon-box {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 1.2fr;
  gap: 1rem;
  align-items: start;
}
.article-lexikon-box__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.article-lexikon-box__links a {
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(34,211,238,0.24);
  border-radius: 999px;
  background: rgba(34,211,238,0.08);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.article-lexikon-box__links a:hover {
  border-color: var(--color-border-active);
  color: var(--color-accent);
}

.author-hero {
  max-width: var(--container-max);
  margin: 1rem auto 2rem;
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(34,211,238,0.08) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.author-hero__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(34,211,238,0.35);
  box-shadow: var(--shadow-glow);
}
.author-hero__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-hero__title {
  margin-bottom: 0.75rem;
  color: var(--color-text-primary);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.author-hero__lead {
  max-width: 680px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* iparagi-hero (v3) → taxonomy-hero (v4) */
.iparagi-hero {
  position: relative;
  padding: 3rem 1.5rem 2.5rem;
  margin: 1rem auto 2rem;
  max-width: var(--container-max);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(34,211,238,0.08) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.iparagi-hero__icon {
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  display: grid; place-items: center;
  font-size: 2rem;
  box-shadow: var(--shadow-glow);
}
.iparagi-hero__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.75rem; color: var(--color-text-primary); }
.iparagi-hero__lead  { color: var(--color-text-secondary); max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.0625rem; line-height: 1.7; }

/* iparagi-cta-btn (v3) → btn-subscribe (v4) stílus */
.iparagi-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.iparagi-cta-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); color: #fff !important; }

/* text-muted, text-small — általános utility */
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.875rem; }

/* datasperr-cta-block — a functions.php iroda_auto_render_cta_block kimenete */
.datasperr-cta-block {
  max-width: var(--article-max);
  margin: 2rem auto;
  padding: 1.75rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.20) 0%, rgba(34,211,238,0.10) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.datasperr-cta-block::before {
  content: "";
  position: absolute;
  top: -50%; left: 50%;
  width: 400px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.datasperr-cta-block > * { position: relative; }
.datasperr-cta-block__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(34,211,238,0.35));
}
.datasperr-cta-block__eyebrow {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 4px 10px;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.35);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

/* Kategória-specifikus akcentvonal a CTA blokkon */
.datasperr-cta-block--szamlakezeles-penzugy,
.datasperr-cta-block--nav-adatszolgaltatas,
.datasperr-cta-block--bank-parositas        { border-left: 4px solid #22c55e; }
.datasperr-cta-block--folyamat-automatizalas { border-left: 4px solid #a855f7; }
.datasperr-cta-block--hr-onboarding         { border-left: 4px solid #eab308; }
.datasperr-cta-block--crm-ertekesites       { border-left: 4px solid #3b82f6; }
.datasperr-cta-block--ugyfelszolgalat-ticketing { border-left: 4px solid #22d3ee; }
.datasperr-cta-block--projekt-feladat       { border-left: 4px solid #14b8a6; }
.datasperr-cta-block--naptar-idopont        { border-left: 4px solid #a78bfa; }
.datasperr-cta-block--riport-bi             { border-left: 4px solid #f59e0b; }
.datasperr-cta-block--biztonsag-megfeleloseg { border-left: 4px solid #ef4444; }
.datasperr-cta-block--technologiai-stack    { border-left: 4px solid #6366f1; }
.datasperr-cta-block--iparagi-megoldasok    { border-left: 4px solid #f97316; }
.datasperr-cta-block__text {
  color: var(--color-text-body);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.datasperr-cta-block__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 1.25rem;
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.datasperr-cta-block__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-strong);
  color: #fff !important;
}

/* cat-badge — gradient pill, kategória-specifikus színnel
   A --cat-from / --cat-to változók minden slug-variánsnál felül vannak írva. */
.cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: #ffffff !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cat-from, #2563eb), var(--cat-to, #22d3ee));
  box-shadow: 0 2px 8px rgba(0,0,0,0.30);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
  line-height: 1.3;
  text-decoration: none !important;
}
.cat-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  color: #fff !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   CATEGORY BADGE PALETTE — minden kategória EGYEDI gradient (D-IRODA-34)
   --------------------------------------------------------------------------
   Topic-clusterű szín-allokáció: rokon kategóriák azonos hue-családon belül
   variálnak shade-ben (700/600/500/400/300/800), így a kapcsolat látszik DE
   minden slug egyedi színpárt kap. 58 unikus gradient.
═════════════════════════════════════════════════════════════════════════ */
/* Process automation / workflow (violet/purple/fuchsia) */
.cat-badge--folyamat-automatizalas       { --cat-from:#7c3aed; --cat-to:#8b5cf6; }
.cat-badge--email-iktatas                { --cat-from:#8b5cf6; --cat-to:#a78bfa; }
.cat-badge--dokumentum-workflow          { --cat-from:#9333ea; --cat-to:#a855f7; }
.cat-badge--urlap-lead                   { --cat-from:#a855f7; --cat-to:#c084fc; }
.cat-badge--jovahagyasi-kor              { --cat-from:#c026d3; --cat-to:#d946ef; }
.cat-badge--ertesites-sla                { --cat-from:#7e22ce; --cat-to:#9333ea; }

/* Finance / accounting (green/emerald) */
.cat-badge--szamlakezeles-penzugy        { --cat-from:#16a34a; --cat-to:#22c55e; }
.cat-badge--szamla-ocr                   { --cat-from:#22c55e; --cat-to:#4ade80; }
.cat-badge--bank-parositas               { --cat-from:#15803d; --cat-to:#16a34a; }
.cat-badge--konyveles-elokeszites        { --cat-from:#059669; --cat-to:#10b981; }
.cat-badge--nav-adatszolgaltatas         { --cat-from:#047857; --cat-to:#059669; }

/* CRM / Sales (blue) */
.cat-badge--crm-ertekesites              { --cat-from:#2563eb; --cat-to:#3b82f6; }
.cat-badge--crm-ugyfelkezeles            { --cat-from:#3b82f6; --cat-to:#60a5fa; }
.cat-badge--lead-scoring                 { --cat-from:#1d4ed8; --cat-to:#2563eb; }
.cat-badge--ajanlat-generalas            { --cat-from:#60a5fa; --cat-to:#93c5fd; }
.cat-badge--utokovetes-playbook          { --cat-from:#1e40af; --cat-to:#1d4ed8; }

/* Customer Service (cyan/sky) */
.cat-badge--ugyfelszolgalat-ticketing    { --cat-from:#0891b2; --cat-to:#06b6d4; }
.cat-badge--bejovo-csatornak             { --cat-from:#0e7490; --cat-to:#0891b2; }
.cat-badge--sla-eszkalacio               { --cat-from:#06b6d4; --cat-to:#22d3ee; }
.cat-badge--tudasbazis-rag               { --cat-from:#0284c7; --cat-to:#0ea5e9; }

/* HR / People (yellow/amber) */
.cat-badge--hr-onboarding                { --cat-from:#ca8a04; --cat-to:#eab308; }
.cat-badge--hr-berszamfejtes             { --cat-from:#a16207; --cat-to:#ca8a04; }
.cat-badge--toborzas-cv-parse            { --cat-from:#eab308; --cat-to:#facc15; }
.cat-badge--beleptetes-checklistek       { --cat-from:#d97706; --cat-to:#f59e0b; }
.cat-badge--tavollet-jovahagyas          { --cat-from:#b45309; --cat-to:#d97706; }

/* Project & Task (teal/lime) */
.cat-badge--projekt-feladat              { --cat-from:#0d9488; --cat-to:#14b8a6; }
.cat-badge--projekt-menedzsment          { --cat-from:#0f766e; --cat-to:#0d9488; }
.cat-badge--board-szabalyok              { --cat-from:#14b8a6; --cat-to:#2dd4bf; }
.cat-badge--riport-kpi                   { --cat-from:#65a30d; --cat-to:#84cc16; }

/* Calendar / Booking (violet/indigo/fuchsia) */
.cat-badge--naptar-idopont               { --cat-from:#6d28d9; --cat-to:#7c3aed; }
.cat-badge--foglalasi-logika             { --cat-from:#a21caf; --cat-to:#c026d3; }
.cat-badge--integraciok-naptar          { --cat-from:#4f46e5; --cat-to:#6366f1; }

/* Web Monitoring / Scraping (cyan/sky dark) */
.cat-badge--web-adatfigyeles             { --cat-from:#155e75; --cat-to:#0e7490; }
.cat-badge--playwright-utemezes          { --cat-from:#075985; --cat-to:#0369a1; }
.cat-badge--ertesites-backlog            { --cat-from:#0369a1; --cat-to:#0284c7; }

/* Reporting / BI (amber) */
.cat-badge--riport-bi                    { --cat-from:#f59e0b; --cat-to:#fbbf24; }
.cat-badge--vezetoimutatok               { --cat-from:#92400e; --cat-to:#b45309; }
.cat-badge--adatminoseg-validacio        { --cat-from:#fbbf24; --cat-to:#fcd34d; }

/* Security / Compliance (red/rose) */
.cat-badge--biztonsag-megfeleloseg       { --cat-from:#dc2626; --cat-to:#ef4444; }
.cat-badge--gdpr-dpia                    { --cat-from:#b91c1c; --cat-to:#dc2626; }
.cat-badge--rbac-keycloak                { --cat-from:#ef4444; --cat-to:#f87171; }
.cat-badge--backup-dr                    { --cat-from:#991b1b; --cat-to:#b91c1c; }
.cat-badge--it-biztonsag                 { --cat-from:#e11d48; --cat-to:#f43f5e; }

/* Tech Stack (indigo) */
.cat-badge--technologiai-stack           { --cat-from:#4338ca; --cat-to:#4f46e5; }
.cat-badge--n8n-agent                    { --cat-from:#6366f1; --cat-to:#818cf8; }
.cat-badge--adatbazis-vektortar          { --cat-from:#3730a3; --cat-to:#4338ca; }
.cat-badge--dokumentumtar-onlyoffice     { --cat-from:#818cf8; --cat-to:#a5b4fc; }

/* Industrial Solutions (orange/pink/rose) */
.cat-badge--iparagi-megoldasok           { --cat-from:#ea580c; --cat-to:#f97316; }
.cat-badge--ugyvedi-iroda                { --cat-from:#c2410c; --cat-to:#ea580c; }
.cat-badge--konyveloiroda                { --cat-from:#f97316; --cat-to:#fb923c; }
.cat-badge--mernoki-iroda                { --cat-from:#9a3412; --cat-to:#c2410c; }
.cat-badge--ingatlan-epitoipar           { --cat-from:#fb923c; --cat-to:#fdba74; }
.cat-badge--egeszsegugy                  { --cat-from:#f43f5e; --cat-to:#fb7185; }
.cat-badge--oktatas                      { --cat-from:#db2777; --cat-to:#ec4899; }
.cat-badge--e-kereskedelem               { --cat-from:#be185d; --cat-to:#db2777; }
.cat-badge--nonprofit                    { --cat-from:#ec4899; --cat-to:#f472b6; }

/* Logistics (lime) */
.cat-badge--logisztika-raktarozas        { --cat-from:#84cc16; --cat-to:#a3e635; }

/* Special: Featured (brand emerald-cyan) */
.cat-badge--kiemelt                      { --cat-from:#10b981; --cat-to:#22d3ee; }

/* ═════════════════════════════════════════════════════════════════════════
   STATS BAR — piacvezető tekintély jel (hero alatt)
═════════════════════════════════════════════════════════════════════════ */
.stats-bar {
  padding: 0 0 2rem;
  position: relative;
}
.stats-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}
.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  text-align: center;
}
.stats-bar__num {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stats-bar__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.3;
}
.stats-bar__sep {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}
@media (max-width: 700px) {
  .stats-bar__sep { display: none; }
  .stats-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem 1rem;
  }
}
@media (max-width: 700px) {
  .article-lexikon-box {
    grid-template-columns: 1fr;
  }
  .article-learning-box,
  .article-lexikon-box,
  .author-hero {
    padding: 1.25rem;
  }
}

/* Népszerű cikkek sidebar widget — cím + dátum két sorban */
.popular-posts {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.popular-posts li {
  display: flex !important;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 !important;
  justify-content: flex-start !important;
}
.popular-posts__link {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-text-primary) !important;
  line-height: 1.35;
  transition: color .15s ease;
}
.popular-posts__link:hover { color: var(--color-accent) !important; }
.popular-posts__date {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Thumb placeholder — markánsabb, élesebb kontraszt */
.thumb-placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(37,99,235,0.28), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(34,211,238,0.22), transparent 55%),
    linear-gradient(135deg, #1e293b 0%, #0b1220 100%);
}
.thumb-placeholder::before {
  opacity: 0.45;
  letter-spacing: -0.05em;
  text-shadow: 0 4px 20px rgba(34,211,238,0.20);
}

/* Lexikon kártya kategória pill (sötét, diszkrét) */
.lexikon-card__cat-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  margin: 0.25rem 0 0.375rem;
  border-radius: 999px;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.30);
  color: var(--color-accent);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* CTA box (v3) → cta-block (v4) — PHP render_cta_block HTML-hez */
.cta-box,
.article-cta {
  max-width: var(--article-max);
  margin: 2rem auto;
  padding: 1.75rem;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.20) 0%, rgba(34,211,238,0.10) 100%),
    var(--color-surface);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-box h3,
.article-cta h3 { color: var(--color-text-primary); margin-bottom: 0.625rem; font-size: 1.375rem; }
.cta-box p,
.article-cta p { color: var(--color-text-secondary); margin-bottom: 1.25rem; font-size: 0.9375rem; }
.cta-box a,
.article-cta a.btn,
.cta-box .btn,
.article-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.cta-box a:hover,
.article-cta a:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .header-inner { gap: 1rem; }
  .btn-subscribe { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
  .article-body { padding: 1.5rem 1.25rem 2rem; border-radius: var(--radius-lg); }
  .cta-block { padding: 1.25rem; }
  .single-article__title { font-size: 1.625rem; }
  .hero-section { padding: 1.5rem 0 2rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   COVER HERO PULSE — statikus WebP + CSS-driven halo lélegzés (4.2.0)
   --------------------------------------------------------------------------
   A halo NEM ég bele a cover-WebP-be — egyetlen CSS radial-gradient adja,
   60+ fps GPU-renderelt, NULLA banding. A halo színe a `--cat-from`
   változóból jön (a figure-re a primary kategória `cat-pill--{slug}`
   osztálya kerül a single.php-ban). A meglévő .cat-pill--* szabályok
   automatikusan beállítják a `--cat-from`-ot.
═════════════════════════════════════════════════════════════════════════ */

.article-featured-image--pulse {
  position: relative;
  isolation: isolate;
}

/* HALO — radial-gradient az ikon zónájában, 4 sec scale + opacity pulzus */
.article-featured-image--pulse::before {
  content: '';
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(
    ellipse 50% 70% at 38% 50%,
    var(--cat-from, #2563eb) 0%,
    transparent 65%
  );
  filter: blur(40px);
  opacity: 0.55;
  transform: scale(1);
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  animation: ia-cover-halo-pulse 4s ease-in-out infinite;
}

/* IKON — finom „lélegzés" 2.5%-os scale, 2 sec phase shift a halo-hoz képest */
.article-featured-image--pulse img {
  display: block;
  transform-origin: 38% 50%;
  animation: ia-cover-icon-breathe 4s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes ia-cover-halo-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1.00); }
  50%      { opacity: 1.00; transform: scale(1.08); }
}

@keyframes ia-cover-icon-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.025); }
}

/* Reduced motion — animáció ki, halo statikus 70% opacitással */
@media (prefers-reduced-motion: reduce) {
  .article-featured-image--pulse::before {
    animation: none;
    opacity: 0.7;
  }
  .article-featured-image--pulse img {
    animation: none;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   VISION SHIMMER — körbefutó ezüst fénycsík a kártyák szélén
   --------------------------------------------------------------------------
   Forrás: DataSperrViSION (`tokens/motion.css` + Desktop globals.css).
   Technika: @property regisztrált <angle> + conic-gradient(from var(--shimmer-pos))
             + CSS mask + padding "border-only" trick.
   Random stagger: :nth-child(7n+k) → minden kártya külön ütemmel mozog.
   "Luxus a lassúságban" — base 36s, random 16-50s.
═════════════════════════════════════════════════════════════════════════ */

@property --shimmer-pos {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ia-shimmer-sweep {
  to { --shimmer-pos: 360deg; }
}

/* ── Cél-kártyák: cikk kártyák, lexikon kártyák, sidebar widgetek, CTA blokk ── */
.article-card,
.lexikon-card,
.sidebar-widget,
.cta-block,
.cta-box {
  position: relative;
  isolation: isolate;
}

.article-card::before,
.lexikon-card::before,
.sidebar-widget::before,
.cta-block::before,
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;  /* ezt a vastagságot mutatja a fény-csík */

  background: conic-gradient(
    from var(--shimmer-pos),
    transparent 0deg,
    transparent 312deg,
    rgba(203, 213, 225, 0.45) 332deg,
    rgba(241, 245, 249, 0.92) 352deg,
    rgba(203, 213, 225, 0.45) 358deg,
    transparent 360deg
  );

  /* Padding-trick: kivágja a középső területet, csak a 1 px-es "border" marad */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  animation: ia-shimmer-sweep 36s linear infinite;
  z-index: 1;  /* a kártya háttér felett, de a tartalom alatt */
  opacity: 0.85;
}

/* Random stagger — minden kártya saját fázissal és sebességgel ───────────── */
.article-card:nth-child(7n+1)::before,
.lexikon-card:nth-child(7n+1)::before { animation-delay: -2.6s;  animation-duration: 34s; }
.article-card:nth-child(7n+2)::before,
.lexikon-card:nth-child(7n+2)::before { animation-delay: -11.4s; animation-duration: 44s; }
.article-card:nth-child(7n+3)::before,
.lexikon-card:nth-child(7n+3)::before { animation-delay: -18.2s; animation-duration: 38s; }
.article-card:nth-child(7n+4)::before,
.lexikon-card:nth-child(7n+4)::before { animation-delay: -24.8s; animation-duration: 48s; }
.article-card:nth-child(7n+5)::before,
.lexikon-card:nth-child(7n+5)::before { animation-delay:  -6.4s; animation-duration: 40s; }
.article-card:nth-child(7n+6)::before,
.lexikon-card:nth-child(7n+6)::before { animation-delay: -15.6s; animation-duration: 32s; }
.article-card:nth-child(7n+7)::before,
.lexikon-card:nth-child(7n+7)::before { animation-delay: -29.8s; animation-duration: 50s; }

.sidebar-widget:nth-of-type(3n+1)::before { animation-delay:  -8.0s; animation-duration: 42s; }
.sidebar-widget:nth-of-type(3n+2)::before { animation-delay: -22.0s; animation-duration: 36s; }
.sidebar-widget:nth-of-type(3n+3)::before { animation-delay: -14.0s; animation-duration: 46s; }

/* Hover: a shimmer kicsit erősebb + gyorsabb ─────────────────────────────── */
.article-card:hover::before,
.lexikon-card:hover::before {
  opacity: 1;
  animation-duration: 12s;
}

/* Reduced motion — a shimmer kikapcsolva ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .article-card::before,
  .lexikon-card::before,
  .sidebar-widget::before,
  .cta-block::before,
  .cta-box::before {
    animation: none;
    opacity: 0;
  }
}

/* Régi böngésző fallback — ha @property nem támogatott, a shimmer
   nem interpolál simán, ezért inkább kikapcsoljuk teljesen. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .article-card::before,
  .lexikon-card::before,
  .sidebar-widget::before,
  .cta-block::before,
  .cta-box::before {
    display: none;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   AI PULZUS — Living Topic Dashboard hero (D-IRODA-37, v4.4.0)
   --------------------------------------------------------------------------
   8-10 kategória-buborék lebeg a hero-vásznon, mindegyik a meglévő
   `.cat-pill--{slug}` szabály --cat-from/--cat-to változóit használja
   (D-IRODA-34 unique paletta). Hover: scale 1.15× + tooltip preview a
   kategória legfrissebb cikkével. Click: kategória archive.
   GPU-renderelt transform/opacity/filter animációk, 60+ fps.
═════════════════════════════════════════════════════════════════════════ */

.topic-dashboard {
  position: relative;
  padding: 1rem 0 2rem;
}

.topic-dashboard__highlight {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0 0 2.5rem;
  letter-spacing: 0.01em;
}
.topic-dashboard__highlight a {
  background: var(--gradient-brand, linear-gradient(135deg, #2563eb, #22d3ee));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease;
}
.topic-dashboard__highlight a:hover {
  filter: brightness(1.2);
}

.topic-dashboard__bubbles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  justify-items: center;
  align-items: center;
}
@media (max-width: 900px) {
  .topic-dashboard__bubbles { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; }
}
@media (max-width: 600px) {
  .topic-dashboard__bubbles { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
}

.hero-headlines {
  margin-top: 2.5rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.58)),
    rgba(15, 23, 42, 0.62);
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.38);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.hero-headlines__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.hero-headlines__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-headlines__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.25;
  text-align: right;
}
.hero-headlines__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.hero-headline {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.68);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.hero-headline:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.34);
  background: rgba(15, 23, 42, 0.86);
}
.hero-headline__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}
.hero-headline__cat {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--cat-from, #2563eb), var(--cat-to, #22d3ee));
}
.hero-headline__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  line-height: 1.34;
}
.hero-headline__title a {
  color: inherit;
  text-decoration: none;
}
.hero-headline__title a:hover {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .hero-headlines__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hero-headlines { margin-top: 1.5rem; padding: 0.85rem; }
  .hero-headlines__header {
    display: block;
  }
  .hero-headlines__title {
    margin-top: 0.25rem;
    text-align: left;
  }
  .hero-headlines__list { grid-template-columns: 1fr; }
}

.topic-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  /* ViSION-tile look: uniform frosted glass + akcent indikátor a border-en/ikonon/számon */
  background: rgba(22, 24, 32, 0.62);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 50%, rgba(255,255,255,0.10));
  color: var(--color-text-primary);
  text-decoration: none !important;
  isolation: isolate;
  animation: bubble-drift 26s ease-in-out infinite, bubble-pulse 3.6s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  cursor: pointer;
  will-change: transform;
}

/* nth-child stagger: minden bubble külön drift fázis + sebesség (24-32s drift, 3.2-4.2s pulse) */
.topic-bubble:nth-child(8n+1) { animation-delay:  -2s, -0.8s; animation-duration: 24s, 3.4s; }
.topic-bubble:nth-child(8n+2) { animation-delay:  -7s, -2.2s; animation-duration: 28s, 3.8s; }
.topic-bubble:nth-child(8n+3) { animation-delay: -13s, -0.4s; animation-duration: 26s, 3.2s; }
.topic-bubble:nth-child(8n+4) { animation-delay: -19s, -2.6s; animation-duration: 30s, 3.6s; }
.topic-bubble:nth-child(8n+5) { animation-delay:  -4s, -1.5s; animation-duration: 27s, 4.0s; }
.topic-bubble:nth-child(8n+6) { animation-delay: -10s, -1.9s; animation-duration: 25s, 3.0s; }
.topic-bubble:nth-child(8n+7) { animation-delay: -16s, -0.7s; animation-duration: 32s, 4.2s; }
.topic-bubble:nth-child(8n+8) { animation-delay: -22s, -2.4s; animation-duration: 26s, 3.4s; }

.topic-bubble__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--cat-from, #2563eb);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cat-from, #2563eb) 30%, transparent));
}
.topic-bubble__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.topic-bubble__name {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.18;
  color: var(--color-text-primary);
  /* hyphen-aware wrapping: break at hyphens vagy bárhol ha kell */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  padding: 0 2px;
}

/* Cikk-számláló: ViSION-tile metric format — nagy szám + kicsi UPPERCASE label */
.topic-bubble__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.topic-bubble__count-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cat-from, #2563eb);
  font-family: var(--font-mono, monospace);
  line-height: 1;
}
.topic-bubble__count-label {
  font-size: 0.5625rem;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Hover: bubble scale + glow + tooltip megjelenik */
.topic-bubble:hover,
.topic-bubble:focus-visible {
  transform: scale(1.12);
  background: rgba(22, 24, 32, 0.78);
  box-shadow:
    0 0 0 1px var(--cat-from, #2563eb),
    0 12px 40px color-mix(in srgb, var(--cat-from, #2563eb) 45%, transparent);
  border-color: var(--cat-from, #2563eb);
  z-index: 10;
  animation-play-state: paused;
}
.topic-bubble:focus-visible {
  outline: 2px solid var(--cat-from, #2563eb);
  outline-offset: 4px;
}

/* Tooltip: legfrissebb cikk preview */
.topic-bubble__preview {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 240px;
  padding: 0.7rem 0.95rem;
  background: var(--color-bg-deep, #020617);
  border: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 50%, transparent);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 20;
  text-align: left;
  white-space: normal;
}
.topic-bubble__preview::before {
  /* Tooltip-nyíl */
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--color-bg-deep, #020617);
  border-left: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 50%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--cat-from, #2563eb) 50%, transparent);
}
.topic-bubble:hover .topic-bubble__preview,
.topic-bubble:focus-visible .topic-bubble__preview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.topic-bubble__preview-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted, rgba(255,255,255,0.40));
  margin-bottom: 0.3rem;
}
.topic-bubble__preview-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
  line-height: 1.35;
}

/* Drift keyframe: nagyobb amplitúdó + finom rotáció — élőbb, "lebegőbb" érzet */
@keyframes bubble-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(20px, -14px) rotate(2deg); }
  40%  { transform: translate(-12px, 18px) rotate(-1.5deg); }
  60%  { transform: translate(16px, 20px) rotate(2.5deg); }
  80%  { transform: translate(-18px, -10px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Stronger pulse: erőteljesebb glow-tartomány + scale-pulzus */
@keyframes bubble-pulse {
  0%, 100% {
    box-shadow: 0 0 8px color-mix(in srgb, var(--cat-from, #2563eb) 12%, transparent);
    opacity: 0.94;
  }
  50% {
    box-shadow: 0 0 40px color-mix(in srgb, var(--cat-from, #2563eb) 38%, transparent);
    opacity: 1.0;
  }
}

/* Mobile (≤600px): drift kikapcsolva, csak pulse */
@media (max-width: 600px) {
  .topic-bubble {
    width: 100%;
    max-width: 130px;
    height: auto;
    aspect-ratio: 1;
    animation: bubble-pulse 4s ease-in-out infinite;
  }
}

/* Reduced motion: minden animáció kikapcsolva */
@media (prefers-reduced-motion: reduce) {
  .topic-bubble {
    animation: none;
  }
  .topic-bubble:hover {
    transform: scale(1.05);
  }
  .topic-bubble__preview {
    transition: opacity .1s linear;
  }
}

/* @supports fallback: ha color-mix() nem támogatott (régi böngésző),
   szolid sötét bg + accent border, animáció kevésbé intenzív */
@supports not (color: color-mix(in srgb, red, blue)) {
  .topic-bubble {
    background: rgba(22, 24, 32, 0.85);
    border-color: var(--cat-from, #2563eb);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.20);
  }
  .topic-bubble__count-num {
    color: #ffffff;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   AUTO-BELINKER — lexikon + cikk hivatkozások cikk-szövegben (D-IRODA-38)
   --------------------------------------------------------------------------
   A `the_content` filter max 3 belső linket szúr be:
     - .ia-internal-link--lexikon → /lexikon/{slug}/   (dotted underline)
     - .ia-internal-link--post    → /{cikk-slug}/      (solid underline)
═════════════════════════════════════════════════════════════════════════ */

.article-body .ia-internal-link {
  color: var(--color-primary, #60a5fa);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 60%, transparent);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  white-space: nowrap;
}

.article-body .ia-internal-link--lexikon {
  border-bottom-style: dotted;
  cursor: help;
}
.article-body .ia-internal-link--post {
  border-bottom-style: solid;
  border-bottom-color: color-mix(in srgb, currentColor 35%, transparent);
}

.article-body .ia-internal-link:hover {
  color: var(--color-accent, #22d3ee);
  border-bottom-color: currentColor;
  background: color-mix(in srgb, var(--color-accent, #22d3ee) 12%, transparent);
}

/* Subtle ikon: lexikon-hez könyv-pictogram, csak prefixként */
.article-body .ia-internal-link--lexikon::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 4v16h16V4z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 4v16h16V4z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>") center/contain no-repeat;
  vertical-align: -0.05em;
  opacity: 0.65;
}