/* ════════════════════════════════════════════════════════════════
   KIKER landing 2026 — ESIR vizuális réteg (Cowork Claude preview)
   Override-stylesheet: LEGUTOLSÓNAK töltődik be a site-*.css után.
   Csak vizuális réteg — semmilyen form/HTML-struktúra/handler nem változik.
   Tokenek a meglévő --bg/--panel/--line/--brand-* változókra mappelve,
   így a meglévő body.light-mode toggle (kiker-theme localStorage) változatlanul működik.
   ════════════════════════════════════════════════════════════════ */

/* ───────── DESIGN TOKENEK ───────── */
:root {
  /* DARK (alapértelmezett) */
  --bg: #0a0a0a;
  --panel: #171717;
  --soft: #1f1f1f;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #fafafa;
  --muted: #a3a3a3;
  --tertiary: #737373;
  /* KIKER red — az EGYETLEN akcens (a narancs/meleg tónust is erre vezetjük) */
  --brand-red: #dc2626;
  --brand-orange: #dc2626;
  --brand-warm: #dc2626;
  --accent-dim: rgba(220, 38, 38, 0.08);
  --shadow: none;
  --kk-mono: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
}

body.light-mode {
  --bg: #ffffff;
  --panel: #ffffff;
  --soft: #fafafa;
  --line: rgba(0, 0, 0, 0.10);
  --line-strong: rgba(0, 0, 0, 0.15);
  --text: #0a0a0a;
  --muted: #525252;
  --tertiary: #737373;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ───────── ALAP FELÜLET — lapos, gradiens nélkül ───────── */
body {
  background: var(--bg) !important;
}
body.light-mode {
  background: var(--bg) !important;
}

/* ───────── SZÖGLETES GEOMETRIA (0–6px) ───────── */
.hero-card,
.seo-teaser-card,
.panel,
.form-card,
.mini,
.stat,
.card,
.ref-card,
.ref-image,
.btn,
.tag,
.quick-link,
.callback-box,
.success-box,
.inline-note,
.post-submit-note,
.contact-row,
.submit-modal-card,
.captcha-code,
.captcha-refresh,
.captcha-wrap,
.technical-tasks-wrap,
.task-row,
.remove-task-btn,
.wiz-svc-btn,
.wiz-callback-btn,
.wiz-nav-next,
.wiz-nav-back,
.btn-add-task,
input,
select,
textarea {
  border-radius: 4px !important;
}

/* Pill → teljesen szögletes */
.eyebrow {
  border-radius: 0 !important;
}

/* Kör ikonkeretek visszafogott szögletre */
.card-number,
.theme-toggle {
  border-radius: 4px !important;
}

/* ───────── HAIRLINE KERETEK ───────── */
.hero-card,
.seo-teaser-card,
.panel,
.form-card,
.mini,
.stat,
.card,
.ref-card,
.contact-row {
  border: 1px solid var(--line);
}

/* ───────── EYEBROW — mono, piros, „—" prefix (ESIR jelleg) ───────── */
.eyebrow {
  font-family: var(--kk-mono);
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--brand-red) !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "— ";
}

/* ───────── GOMBOK — tömör piros, lapos ───────── */
.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--brand-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-color: var(--brand-red) !important;
}
.btn-primary:hover {
  background: #b91c1c !important;
  transform: none !important;
}
.btn-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
.btn-secondary:hover {
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
  transform: none !important;
}

/* ───────── NAV / LINK AKCENSEK — piros ───────── */
.top-nav a:hover,
body.light-mode .top-nav a:hover { color: var(--brand-red); }
.brand-mark { color: var(--brand-red) !important; }

/* ───────── TAG / CHIP — mono, hairline ───────── */
.tag {
  font-family: var(--kk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid var(--line);
}

/* ───────── STAT KÁRTYÁK — hairline rács ───────── */
.stat strong { color: var(--text); }

/* ───────── MŰKÖDÉSI TERÜLET — 5-oszlopos rács ───────── */
.area-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.area-list li {
  margin: 0;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--soft);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
}
.area-list li::before { content: none !important; }

@media (max-width: 900px) {
  .area-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .area-list { grid-template-columns: 1fr; }
}

/* ───────── DEKORATÍV GLOW-OK LEKAPCSOLÁSA (ESIR lapos jelleg) ───────── */
.hero-card::after,
.hero-card::before,
.seo-teaser-card::before,
.seo-teaser-card::after,
body.light-mode .hero-card::after {
  display: none !important;
}

/* ───────── INPUT FÓKUSZ — piros gyűrű ───────── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 2px var(--accent-dim);
}