/* Design tokens & base styles
Visual direction: a magyar külképviseleti aloldalak arculata – Flowbite/Tailwind
blue (#1c64f2) on neutral grays, Poppins sans, Cormorant Garamond reserved
for the wordmark only. Footer keeps the Hungarian-gov band (skyline +
Magyarország Kormánya wordmark) so origin stays unambiguous.
A pontos arculati referencia a CLAUDE.md „Dizájn" fejezetében – ez a fájl
kiszolgálódik, ezért itt nincs ügyfél-hivatkozás. */
:root {
/* Body + display: Poppins (a külképviseleti arculat betűje).
Serif (Cormorant Garamond): wordmark, SectionHead szekciócímek, nagy numerálék.
Lásd .claude/project-notes.md „1. Tipográfia" – eldöntve 2026-08-06. */
--font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: "Cormorant Garamond", ui-serif, "Georgia", "Times New Roman", serif;
--font-wordmark: var(--font-serif);
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* PALETTE: blue (default) – Flowbite blue on Tailwind grays */
--c-bg: #f9fafb;
--c-surface: #ffffff;
--c-surface-alt: #fafbfb;
--c-surface-deep: #f3f4f6;
--c-border: #e5e7eb;
--c-border-strong:#d1d5db;
--c-text: #111827;
--c-text-soft: #4b5563;
--c-text-mute: #6b7280;
--c-heading: #18284d; /* blue dark – szerif szekciócímek */
--c-primary: #375088; /* muted slate-blue */
--c-primary-hov: #2a3d6a;
--c-primary-soft: #e6eaf2;
--c-primary-ink: #ffffff;
--c-accent: #0099cc; /* cyan section-label accent */
--c-tricolor-red: #c8102e; /* sparing use only */
--c-tricolor-grn: #436f4d;
--c-success: #1f7a3a;
--c-success-soft: #e3f3e8;
--c-warning: #a86a00;
--c-warning-soft: #fdf1d8;
--c-danger: #b3261e;
--c-danger-soft: #fbe6e4;
--c-focus: #ffbf47;
--c-bar: #f3f4f6; /* top utility bar – subtle */
--c-band: #375088; /* footer band */
/* Spacing scale (4px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
--s-9: 56px; --s-10: 72px; --s-11: 96px;
/* Radii – small, official */
--r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
/* EGYETLEN sugár minden interaktív vezérlőnek: gomb, beviteli mező, választó,
csip. Kör csak azé, ami tényleg kör (avatar, státuszpont, kapcsoló-bütyök).
Ne vezessünk be külön „pill" és „szögletes" gombot – 2026-08-07-i döntés. */
--r-ctl: 6px;
--ctl-pad-sm: 7px 12px;
--ctl-pad: 10px 16px;
--ctl-pad-lg: 13px 22px;
/* Shadows */
--sh-1: 0 1px 0 rgba(17, 32, 58, 0.04), 0 1px 2px rgba(17, 32, 58, 0.04);
--sh-2: 0 1px 0 rgba(17, 32, 58, 0.04), 0 4px 16px rgba(17, 32, 58, 0.06);
--sh-3: 0 12px 40px rgba(17, 32, 58, 0.12);
/* Card lift – borderless card containers use this instead of a 1px border.
sh-mid is the default; sh-mid-hover is the slight lift on hover. */
--sh-mid: 0 4px 6px rgba(149, 157, 165, 0.18);
--sh-mid-hover: 0 7px 12px rgba(149, 157, 165, 0.26);
/* Hover-emelés. A `--shadow-sm` korábban HASZNÁLVA volt, de sehol nem
definiálva – három kártya hover-árnyéka némán elveszett. */
--shadow-sm: 0 2px 4px rgba(17, 32, 58, .07), 0 6px 16px rgba(17, 32, 58, .09);
--sh-lift: 0 2px 4px rgba(17, 32, 58, .06), 0 8px 20px rgba(24, 40, 77, .13);
--sh-lift-navy: 0 2px 6px rgba(24, 40, 77, .30), 0 10px 24px rgba(24, 40, 77, .28);
--sh-lift-dark: 0 3px 8px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .26);
/* Egy görbe és egy időzítés minden vezérlő-mozgáshoz. */
--t-ctl: .18s;
--ease-ctl: cubic-bezier(.2, .7, .3, 1);
/* Layout */
--container: 1240px;
--header-h: 88px;
--bar-h: 36px;
}
/* PALETTE: navy + gold (rangos) */
[data-palette="navy"] {
--c-bg: #f1f3f7;
--c-surface: #ffffff;
--c-surface-alt: #f7f8fb;
--c-surface-deep: #e7eaf2;
--c-border: #d3d8e4;
--c-border-strong:#a5adc1;
--c-text: #0a1733;
--c-text-soft: #3a4664;
--c-text-mute: #6a7491;
--c-primary: #0a2540;
--c-primary-hov: #061a30;
--c-primary-soft: #e1e7f0;
--c-primary-ink: #ffffff;
--c-accent: #a07a1f;
--c-bar: #061a30;
--c-band: #0a2540;
}
/* PALETTE: burgundy */
[data-palette="burgundy"] {
--c-bg: #f6f3f3;
--c-surface: #ffffff;
--c-surface-alt: #fbf8f8;
--c-surface-deep: #ece6e6;
--c-border: #ddd2d2;
--c-border-strong:#b8a7a7;
--c-text: #2a1518;
--c-text-soft: #5b4145;
--c-text-mute: #816a6e;
--c-primary: #7a1f2b;
--c-primary-hov: #5e1521;
--c-primary-soft: #f2e3e6;
--c-primary-ink: #ffffff;
--c-accent: #7a1f2b;
--c-bar: #2a1518;
--c-band: #7a1f2b;
}
/* DARK mode – applied on body[data-dark="true"] */
[data-dark="true"] {
--c-bg: #0c1424;
--c-surface: #131c30;
--c-surface-alt: #182238;
--c-surface-deep: #0a1120;
--c-border: #243152;
--c-border-strong:#3a4a73;
--c-text: #e6ebf5;
--c-text-soft: #aab4cc;
--c-text-mute: #7e89a3;
--c-heading: #e6ebf5;
--c-primary: #5b8def;
--c-primary-hov: #7aa3ff;
--c-primary-soft: #1a2849;
--c-primary-ink: #0a1120;
--c-bar: #060b18;
--c-band: #0a1120;
--c-success-soft: #133324;
--c-warning-soft: #36280a;
--c-danger-soft: #3a1715;
--sh-1: 0 1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.3);
--sh-2: 0 1px 0 rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
--sh-3: 0 12px 40px rgba(0,0,0,.5);
}
[data-dark="true"][data-palette="burgundy"] {
--c-primary: #d96474; --c-primary-hov: #ea8493; --c-primary-soft: #3a1d22;
}
[data-dark="true"][data-palette="navy"] {
--c-primary: #87a8f0; --c-accent: #d4b365; --c-primary-soft: #19233d;
}
/* RESET */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.btn { white-space: nowrap; }
a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-hov); }
/* A fenti globális `a:hover` (0-1-1) erősebb, mint egy sötét sávon fehérre
állított link saját `color`-ja (0-1-0) – így hoverre navy szöveg került navy
háttérre, azaz eltűnt. A sötét felületek linkjei maradjanak fehérek.
FONTOS: minden új sötét (navy/burgundy) sávot ide is fel kell venni. */
.hero a:hover, .info-panel a:hover, .site-footer a:hover,
.admin-fab:hover, .hub-leaflet a:hover { color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--c-focus);
outline-offset: 2px;
border-radius: 2px;
}
h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; line-height: 1.15; }
/* Containers */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-7); }
@media (max-width: 800px){ .container { padding: 0 var(--s-4); } }
/* ================ TOP UTILITY BAR ================ */
.utility-bar {
background: var(--c-bar);
color: var(--c-text-mute);
font-size: 12px;
height: 30px;
border-bottom: 1px solid var(--c-border);
}
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.utility-bar .ub-left { display: flex; align-items: center; gap: var(--s-4); white-space: nowrap; }
.utility-bar .ub-right { display: flex; align-items: center; gap: var(--s-4); white-space: nowrap; }
.utility-bar .ub-right > span, .utility-bar .ub-left > span, .utility-bar .ub-right > a, .utility-bar .ub-left > a { white-space: nowrap; }
.utility-bar a { color: inherit; text-decoration: none; }
.utility-bar a:hover { color: var(--c-primary); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch button {
background: transparent; color: var(--c-text-mute); border: 0; padding: 2px 6px; font-size: 12px;
border-radius: 3px;
}
.lang-switch button:hover { color: var(--c-text); }
.lang-switch button.on { color: var(--c-primary); font-weight: 600; }
.lang-switch span { color: var(--c-border-strong); }
/* ================ HEADER ================ */
.site-header {
background: #fff;
color: var(--c-text);
border-bottom: 1px solid var(--c-border);
box-shadow: 0 1px 0 rgba(15, 45, 105, .04);
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between;
min-height: var(--header-h); padding-top: var(--s-4); padding-bottom: var(--s-4);
gap: var(--s-6);
}
.brand { display: flex; align-items: center; gap: var(--s-4); color: var(--c-text); text-decoration: none; }
.brand:hover { color: var(--c-text); }
.brand .crest-img {
height: 56px; width: auto; flex: none;
}
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.brand .brand-text .org { font-family: var(--font-wordmark); font-size: 14px; color: var(--c-text-soft); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.brand .brand-text .name { font-size: 20px; font-weight: 600; letter-spacing: -0.005em; color: var(--c-text); }
.brand .brand-text .sub { font-size: 13px; color: var(--c-text-soft); }
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a, .primary-nav button.navlink {
color: var(--c-text); text-decoration: none; padding: 10px 14px; border-radius: var(--r-sm);
font-weight: 500; font-size: 15px; background: transparent; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; position: relative;
}
.primary-nav a:hover, .primary-nav button.navlink:hover { background: var(--c-surface-deep); color: var(--c-primary); }
.primary-nav a.active, .primary-nav button.navlink.active {
color: var(--c-primary); font-weight: 600;
}
.primary-nav a.active::after, .primary-nav button.navlink.active::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px;
height: 2px; background: var(--c-primary); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.icon-btn {
width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md);
background: transparent; border: 1px solid var(--c-border); color: var(--c-text-soft);
position: relative;
}
.icon-btn:hover { background: var(--c-surface-deep); color: var(--c-primary); border-color: var(--c-border-strong); }
.icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-tricolor-red); box-shadow: 0 0 0 2px #fff; }
.user-chip {
display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--r-ctl);
background: var(--c-surface-deep); border: 1px solid var(--c-border); color: var(--c-text); cursor: pointer;
}
.user-chip:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.user-chip .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.user-chip { white-space: nowrap; }
.user-chip .user-name { font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--c-text); }
.user-chip .user-meta { font-size: 11px; opacity: .8; line-height: 1; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-text-soft); }
.user-chip .chev { transform: rotate(90deg); transition: transform .15s ease; }
.user-chip.open .chev { transform: rotate(270deg); }
.user-menu { position: relative; }
.user-menu-pop {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 240px;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: 6px;
z-index: 50;
animation: user-menu-in .12s ease-out;
}
@keyframes user-menu-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.user-menu-head {
padding: 8px 10px 10px;
border-bottom: 1px solid var(--c-border);
margin-bottom: 6px;
}
.user-menu-name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.user-menu-id { font-size: 11px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; margin-top: 2px; }
.user-menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent; border: 0; border-radius: var(--r-sm);
color: var(--c-text); font: inherit; text-align: left; cursor: pointer;
}
.user-menu-item:hover { background: var(--c-surface-deep); color: var(--c-primary); }
.user-menu-item svg { color: var(--c-text-soft); flex-shrink: 0; }
.user-menu-item:hover svg { color: var(--c-primary); }
.user-menu-item.danger:hover { background: color-mix(in oklab, var(--c-tricolor-red) 10%, var(--c-surface)); color: var(--c-tricolor-red); }
.user-menu-item.danger:hover svg { color: var(--c-tricolor-red); }
.user-menu-sep { height: 1px; background: var(--c-border); margin: 6px 4px; }
/* Cyan section accent – small label above a section title, with short underline.
Mirrors the Hungarian gov brand manual's "01.1." / "Bevezető" treatment. */
.eyebrow-accent {
display: inline-block;
font-size: 13px; font-weight: 500; color: var(--c-accent);
letter-spacing: 0.01em;
padding-bottom: 4px;
border-bottom: 1px solid var(--c-accent);
margin-bottom: var(--s-4);
}
/* A régi landing-hero blokk (.hero h1, .hero .container, .hero-grid, .lede,
.hero-cta, .hero-meta) a screen-landing.jsx-szel együtt elhalt, és közben
felülírta a v2 hero szabályait – a `.hero h1` (0-1-1) erősebb volt, mint a
`.hero-title` (0-1-0), ezért a sorköz makacsul 1.05 maradt. Törölve; a v2
hero saját blokkja lentebb van. */
.login-card {
background: var(--c-surface); color: var(--c-text);
border-radius: var(--r-lg); box-shadow: var(--sh-mid);
padding: var(--s-7);
}
.login-card h2 { font-size: 24px; margin-bottom: var(--s-1); }
.login-card .muted { color: var(--c-text-mute); font-size: 14px; }
/* ================ BUTTONS ================ */
/* ==========================================================================
GOMBOK – egyetlen rendszer az egész oldalon (2026-08-07)
Három szint: primary (tömör navy) · secondary (keretes) · tertiary (csupasz).
Sötét sávon a `.on-dark` fordítja meg a színeket. Szöveglinkek (`.sec-all`,
`.hero-link`) szándékosan NEM gombok, azok maradnak aláhúzott linkek.
Minden gomb ugyanazt a `--r-ctl` sugarat kapja – nincs külön „pill".
A `.more-btn`, `.map-reset`, `.pill-btn`, `.hero-btn` és az admin `.adm-btn`
ugyanezt az alapot használja, csak más a helyük.
========================================================================== */
.btn, .more-btn, .map-reset, .info-panel .pill-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.15;
padding: var(--ctl-pad); border-radius: var(--r-ctl); border: 1px solid transparent;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background var(--t-ctl) var(--ease-ctl), border-color var(--t-ctl) var(--ease-ctl),
color var(--t-ctl) var(--ease-ctl), box-shadow var(--t-ctl) var(--ease-ctl),
transform var(--t-ctl) var(--ease-ctl);
}
/* HOVER-NYELV – minden gombra ugyanaz, kivétel nélkül:
a felület egy tónussal mélyül, a keret erősödik, és a záró nyíl-tick
(`.arw`) megnyúlik. Nincs emelés (alulról érkező egérnél kiugrott a gomb),
nincs árnyék és nincs glow – az arculat letisztult, a hover se legyen több
egy határozott állapotváltásnál. Lenyomásra csak gyorsabb az átmenet. */
.btn:active, .more-btn:active, .map-reset:active, .info-panel .pill-btn:active {
transition-duration: .06s;
}
.btn:focus-visible, .more-btn:focus-visible, .map-reset:focus-visible,
.chip:focus-visible, .info-panel .pill-btn:focus-visible {
outline: 3px solid var(--c-focus); outline-offset: 1px;
}
/* 1. elsődleges */
.btn.primary { background: var(--c-primary); color: var(--c-primary-ink); }
.btn.primary:hover { background: var(--c-primary-hov); border-color: var(--c-primary-hov); }
/* 2. másodlagos – keretes; ilyen a „További …" és a „Teljes nézet" is */
.btn.secondary, .more-btn, .map-reset {
background: var(--c-surface); color: var(--c-primary); border-color: var(--c-border-strong);
}
.btn.secondary:hover, .more-btn:hover, .map-reset:hover {
background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary);
}
/* 3. harmadlagos – csupasz, csak hoverre kap felületet */
.btn.tertiary, .btn.ghost, .more-btn.ghost {
background: transparent; color: var(--c-text-soft); border-color: transparent;
}
.btn.tertiary:hover, .btn.ghost:hover, .more-btn.ghost:hover {
background: var(--c-surface-deep); color: var(--c-text); border-color: transparent;
}
/* sötét (navy) sávon megfordul. A fehér felület hoverre egy halvány kékes
tónusba vált – navy háttéren ez a legtisztább jelzés; fix hexek, mert a
gomb minden palettában (sötét módban is) fehér marad. */
.btn.on-dark, .btn.on-band, .info-panel .pill-btn, .btn.hero-btn {
background: #fff; color: var(--c-primary); border-color: #fff;
}
.btn.on-dark:hover, .btn.on-band:hover, .info-panel .pill-btn:hover, .btn.hero-btn:hover {
background: #e4eaf6; border-color: #e4eaf6; color: #1e2e56;
}
.btn.on-dark.secondary, .btn.ghost-on-band {
background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.btn.on-dark.secondary:hover, .btn.ghost-on-band:hover {
background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.85);
}
.btn.danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn.danger:hover { background: #8f1d17; border-color: #8f1d17; }
/* méretek */
.btn.sm { padding: var(--ctl-pad-sm); font-size: 13px; }
.btn.lg { padding: var(--ctl-pad-lg); font-size: 15px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
/* ================ FORMS ================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field label { font-weight: 500; font-size: 14px; color: var(--c-text); }
.field .hint { font-size: 13px; color: var(--c-text-mute); }
.field input, .field select, .field textarea {
font: inherit; font-size: 15px;
background: var(--c-surface); color: var(--c-text);
border: 1px solid var(--c-border-strong); border-radius: var(--r-ctl);
padding: 10px 12px; width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
border-color: var(--c-text); outline: 3px solid var(--c-focus); outline-offset: 0;
}
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primary); }
.divider-or { display: flex; align-items: center; gap: 12px; color: var(--c-text-mute); font-size: 13px; margin: var(--s-4) 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
/* ================ CARDS / PANELS ================ */
.panel {
background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-mid);
}
.panel-hd {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--c-border);
}
.panel-hd h3 { font-size: 16px; font-weight: 600; }
.panel-hd .more { font-size: 14px; color: var(--c-text-soft); text-decoration: none; }
.panel-hd .more:hover { color: var(--c-primary); }
.panel-bd { padding: var(--s-4) var(--s-5); }
.panel-bd.tight { padding: 0; }
/* ================ BADGES / CHIPS ================ */
/* Frost: 1px border in state color, white 70% bg + backdrop-blur so badges
stay readable on photos and colored hero panels too. */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
padding: 3px 10px; border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
color: var(--c-text-soft);
border: 1px solid var(--c-border-strong);
white-space: nowrap;
}
.badge.success { color: var(--c-success); border-color: var(--c-success); }
.badge.warning { color: var(--c-warning); border-color: var(--c-warning); }
.badge.danger { color: var(--c-danger); border-color: var(--c-danger); }
.badge.primary { color: var(--c-primary); border-color: var(--c-primary); }
.badge.lg { font-size: 13px; padding: 5px 12px; }
.badge .pulse {
width: 6px; height: 6px; border-radius: 50%; background: currentColor;
box-shadow: 0 0 0 0 currentColor; animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 50%, transparent); }
70% { box-shadow: 0 0 0 6px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ================ DASHBOARD ================ */
.page-title-bar {
background: var(--c-surface);
box-shadow: 0 4px 6px rgba(149, 157, 165, 0.14);
position: relative;
z-index: 1;
}
.page-title-bar .container { padding-top: var(--s-7); padding-bottom: var(--s-5); }
.breadcrumbs { display: flex; gap: 6px; font-size: 13px; color: var(--c-text-mute); margin-bottom: var(--s-3); }
.breadcrumbs a { color: var(--c-text-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumbs .sep { opacity: .5; }
.page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.015em; }
.page-subtitle { color: var(--c-text-soft); margin-top: 4px; font-size: 16px; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.dashboard-grid {
display: grid; grid-template-columns: 1fr 360px; gap: var(--s-6);
padding-top: var(--s-6); padding-bottom: var(--s-9);
}
@media (max-width: 1100px){ .dashboard-grid { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: var(--s-5); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 700px){ .kpi-row { grid-template-columns: 1fr; } }
.kpi {
background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-mid);
padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 6px;
}
.kpi .label { font-size: 13px; color: var(--c-text-mute); }
.kpi .value { font-size: 28px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; }
.kpi .foot { font-size: 12px; color: var(--c-text-mute); display: flex; align-items: center; gap: 6px; }
/* Status banner – Frost: full 1px border in state color + translucent bg */
.status-banner {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid var(--c-success);
border-radius: var(--r-md);
box-shadow: var(--sh-mid);
padding: var(--s-4) var(--s-5);
display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center;
}
.status-banner.warn { border-color: var(--c-warning); }
.status-banner .ico {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--c-success); color: var(--c-success);
}
.status-banner.warn .ico { border-color: var(--c-warning); color: var(--c-warning); }
.status-banner .title { font-weight: 600; font-size: 15px; }
.status-banner .meta { font-size: 13px; color: var(--c-text-mute); margin-top: 2px; }
/* Event card / list / table layouts */
.events-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 800px){ .events-cards { grid-template-columns: 1fr; } }
.event-card {
background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-mid);
padding: 0; overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow .18s ease, transform .18s ease;
}
.event-card:hover { box-shadow: var(--sh-mid-hover); }
.event-card .cover {
height: 120px; position: relative; overflow: hidden;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, rgba(0,0,0,.04) 12px 24px),
linear-gradient(135deg, var(--c-band) 0%, color-mix(in oklab, var(--c-band) 70%, #000 30%) 100%);
}
.event-card .cover .cover-img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
.event-card .cover .date-stamp {
position: absolute; top: 12px; left: 12px;
background: rgba(255,255,255,.95); color: var(--c-text);
border-radius: var(--r-sm); padding: 4px 8px 6px; min-width: 56px; text-align: center;
font-family: var(--font-display); line-height: 1;
}
.event-card .cover .date-stamp .day { font-size: 22px; font-weight: 700; display: block; }
.event-card .cover .date-stamp .mon { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-mute); margin-top: 2px; display: block; }
.event-card .cover .top-right { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.event-card .body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-card .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary); }
.event-card .title-row { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
.event-card .meta { font-size: 13px; color: var(--c-text-mute); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.event-card .meta .item { display: inline-flex; align-items: center; gap: 6px; }
.event-card .foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; background: var(--c-surface-alt); }
.event-list { display: flex; flex-direction: column; }
.event-row {
display: grid; grid-template-columns: 80px 1fr auto auto; gap: var(--s-4);
padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border);
align-items: center;
}
.event-row:first-child { border-top: 0; }
.event-row .date-block {
border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 6px 4px 8px; text-align: center; min-width: 64px;
font-family: var(--font-display); line-height: 1;
}
.event-row .date-block .d { font-size: 22px; font-weight: 700; }
.event-row .date-block .m { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-mute); margin-top: 4px; display: block; }
.event-row .title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.event-row .meta { font-size: 13px; color: var(--c-text-mute); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.event-row .meta .item { display: inline-flex; align-items: center; gap: 6px; }
/* Compact event row variant – for narrow sidebars */
.event-row.compact { grid-template-columns: 56px 1fr; padding: var(--s-3) var(--s-4); }
.event-row.compact .date-block { min-width: 48px; padding: 4px 2px 6px; }
.event-row.compact .date-block .d { font-size: 18px; }
.event-row.compact .date-block .m { font-size: 10px; margin-top: 2px; }
.event-row.compact .title { font-size: 14px; margin-bottom: 4px; }
.event-row.compact .meta { font-size: 12px; gap: 8px; }
.event-row.compact .status-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; justify-content: space-between; }
.event-row.compact .status-line .more-link { font-size: 12px; color: var(--c-primary); cursor: pointer; background: transparent; border: 0; padding: 0; }
.event-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.event-table th, .event-table td { text-align: left; padding: 12px var(--s-5); border-top: 1px solid var(--c-border); vertical-align: middle; }
.event-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-mute); background: var(--c-surface-alt); border-top: 0; }
.event-table tbody tr:hover { background: var(--c-surface-alt); }
.event-table .t-title { font-weight: 600; }
/* ================ NOTIFICATIONS / SIDEBAR LISTS ================ */
.list-item {
display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border); align-items: start;
}
.list-item:first-child { border-top: 0; }
.list-item .ico {
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--c-primary);
color: var(--c-primary);
display: grid; place-items: center;
}
.list-item .ico.warn { border-color: var(--c-warning); color: var(--c-warning); }
.list-item .ico.success { border-color: var(--c-success); color: var(--c-success); }
.list-item .title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.list-item .meta { font-size: 12px; color: var(--c-text-mute); margin-top: 2px; }
.list-item .time { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }
/* Quick links grid */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.quick { background: var(--c-surface); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start; border: 0; text-align: left; color: var(--c-text); text-decoration: none; }
.quick:hover { background: var(--c-surface-alt); }
.quick .ico {
width: 36px; height: 36px; border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--c-primary);
color: var(--c-primary);
display: grid; place-items: center; flex: none;
}
.quick .label { font-size: 14px; font-weight: 600; }
.quick .desc { font-size: 12px; color: var(--c-text-mute); margin-top: 2px; }
/* ================ FOOTER ================ */
.site-footer {
background: #18284d;
color: rgba(255,255,255,.78);
margin-top: var(--s-10);
font-size: 14px;
position: relative;
}
.site-footer .footer-skyline {
background: var(--c-bg);
padding: var(--s-7) 0 0;
line-height: 0;
}
.site-footer .footer-skyline img {
display: block;
width: 100%; height: auto;
margin: 0;
}
.site-footer .container {
padding-top: var(--s-9); padding-bottom: var(--s-7);
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--s-6);
}
.site-footer .footer-mark img {
height: auto; width: 100%; max-width: 280px;
filter: brightness(0) invert(1); /* render the line drawing white on navy */
opacity: .95;
}
.site-footer .footer-nav {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--s-3) var(--s-6);
}
.site-footer .footer-nav a {
color: #fff; text-decoration: none;
font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
padding: 4px 2px;
}
.site-footer .footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-socials { display: flex; gap: var(--s-4); }
.site-footer .footer-socials a {
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
color: rgba(255,255,255,.75);
border: 1px solid rgba(255,255,255,.20);
transition: color .15s, border-color .15s, background .15s;
}
.site-footer .footer-socials a:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.site-footer .footer-rule {
border: 0; height: 1px; width: 100%;
background: rgba(255,255,255,.15);
margin: var(--s-3) 0 0;
}
.site-footer .footer-bottom {
display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
width: 100%;
font-size: 12px; color: rgba(255,255,255,.65);
flex-wrap: wrap;
}
.site-footer .footer-bottom .copyright { white-space: nowrap; }
.site-footer .footer-bottom .version { white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-footer .footer-secondary {
display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
justify-content: center;
}
.site-footer .footer-secondary a { color: inherit; text-decoration: none; }
.site-footer .footer-secondary a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
.site-footer .footer-bottom { flex-direction: column; }
}
/* v2 nyilvános lábléc: ugyanaz a láb, a rajzi nyelv motívumaival */
.hub-site-footer { margin-top: 0; }
.hub-site-footer .container { position: relative; }
.hub-site-footer .foot-hatch { position: absolute; right: var(--s-7); top: var(--s-6);
width: 84px; height: 42px; color: #fff; opacity: .16; pointer-events: none; }
.hub-site-footer .foot-tagline { margin: calc(-1 * var(--s-4)) 0 0;
font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.hub-site-footer .coord-note { white-space: nowrap; }
@media (max-width: 800px) { .hub-site-footer .foot-hatch { display: none; } }
/* ================ EVENT DETAIL ================ */
.event-hero {
background: var(--c-surface);
border-bottom: 1px solid var(--c-border);
}
.event-hero .container { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.event-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); padding-top: var(--s-6); padding-bottom: var(--s-9); align-items: start; }
@media (max-width: 1000px){ .event-detail-grid { grid-template-columns: 1fr; } }
.event-detail-grid .panel-bd { padding: var(--s-5) var(--s-6); }
.prose { font-size: 16px; line-height: 1.65; color: var(--c-text); }
.prose p { margin: 0 0 var(--s-4); }
.prose h4 { font-size: 16px; margin: var(--s-5) 0 var(--s-2); }
.prose ul { margin: 0 0 var(--s-4) var(--s-5); padding: 0; }
.prose li { margin-bottom: 6px; }
.meta-list { display: flex; flex-direction: column; gap: var(--s-3); }
.meta-list .row { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); font-size: 14px; align-items: start; }
.meta-list .row .ico { color: var(--c-text-mute); margin-top: 1px; }
.meta-list .row .lbl { font-size: 12px; color: var(--c-text-mute); text-transform: uppercase; letter-spacing: 0.06em; display: block; }
.meta-list .row .val { color: var(--c-text); font-weight: 500; }
.attach-list { display: flex; flex-direction: column; }
.attach { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); align-items: center; color: var(--c-text); text-decoration: none; }
.attach:first-child { border-top: 0; }
.attach:hover { background: var(--c-surface-alt); }
.attach .ico {
width: 36px; height: 36px; border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--c-border-strong);
color: var(--c-text-soft);
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.attach .ico.pdf { color: var(--c-danger); border-color: var(--c-danger); }
.attach .ico.zip { color: var(--c-warning); border-color: var(--c-warning); }
.attach .ico.img { color: var(--c-primary); border-color: var(--c-primary); }
.attach .title { font-size: 14px; font-weight: 500; }
.attach .meta { font-size: 12px; color: var(--c-text-mute); margin-top: 2px; }
.contact-card { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border); }
.contact-card:first-child { border-top: 0; }
.contact-card .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-weight: 600; font-size: 16px; }
.contact-card .nm { font-weight: 600; font-size: 14px; }
.contact-card .ro { font-size: 13px; color: var(--c-text-mute); margin-bottom: 4px; }
.contact-card .li { font-size: 13px; color: var(--c-text-soft); }
.contact-card a { color: var(--c-primary); }
/* ================ PROFILE ================ */
.profile-header { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-5); align-items: center; padding-top: var(--s-6); padding-bottom: var(--s-6); }
.profile-header .avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-weight: 700; font-size: 32px; font-family: var(--font-display); border: 2px solid var(--c-border); }
.profile-header h2 { font-size: 28px; }
.profile-header .meta { color: var(--c-text-mute); margin-top: 4px; display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: 14px; }
.profile-tabs { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--c-border); }
.profile-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px; font-size: 15px; font-weight: 500; color: var(--c-text-soft); cursor: pointer; margin-bottom: -1px; }
.profile-tabs button.active { color: var(--c-text); border-bottom-color: var(--c-primary); font-weight: 600; }
.profile-tabs button:hover { color: var(--c-text); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7); padding: var(--s-5); }
.detail-grid .dt { font-size: 12px; color: var(--c-text-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.detail-grid .dd { font-size: 15px; margin-top: 2px; }
/* ================ FILTERS BAR ================ */
.filter-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) 0; }
.filter-bar .search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.filter-bar .search input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); border-radius: var(--r-ctl); font: inherit; font-size: 14px; }
.filter-bar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); pointer-events: none; }
.chip {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid var(--c-border-strong);
padding: var(--ctl-pad-sm); border-radius: var(--r-ctl);
font: inherit; font-size: 13px; font-weight: 500; color: var(--c-text-soft); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background var(--t-ctl) var(--ease-ctl), border-color var(--t-ctl) var(--ease-ctl),
color var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl);
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.chip:active { transition-duration: .06s; }
.chip.active { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.segmented { display: inline-flex; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.segmented button { background: transparent; border: 0; padding: 8px 12px; font-size: 13px; color: var(--c-text-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmented button.on { background: var(--c-primary); color: var(--c-primary-ink); }
/* ================ EVENT CALENDAR ================ */
.calendar-panel { padding: 0; overflow: hidden; }
.calendar-toolbar {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--c-border);
gap: var(--s-3);
}
.calendar-nav { display: inline-flex; gap: 6px; align-items: center; }
.calendar-nav .icon-btn.sm { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.calendar-title {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
text-align: center;
letter-spacing: -0.005em;
text-transform: capitalize;
}
.calendar-legend {
display: inline-flex; gap: 12px; align-items: center; justify-self: end;
font-size: 12px; color: var(--c-text-mute);
}
.calendar-legend .dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;
vertical-align: middle;
}
.calendar-legend .dot.reg { background: var(--c-success, #2e7d32); }
.calendar-legend .dot.wait { background: var(--c-warning, #c98a00); }
.calendar-legend .dot.open { background: var(--c-primary); }
.calendar-grid {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
background: var(--c-border);
gap: 1px;
}
.calendar-wd {
background: var(--c-surface-alt);
padding: 8px 10px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--c-text-mute);
}
.calendar-wd.weekend { color: var(--c-tricolor-red, #b40000); }
.calendar-day {
background: var(--c-surface);
min-height: 112px;
padding: 6px 6px 8px;
display: flex; flex-direction: column; gap: 4px;
position: relative;
min-width: 0;
}
.calendar-day.weekend { background: color-mix(in oklab, var(--c-surface) 96%, var(--c-text) 4%); }
.calendar-day.out { background: var(--c-surface-alt); }
.calendar-day.out .calendar-day-num { color: var(--c-text-mute); opacity: 0.55; }
.calendar-day-num {
font-family: var(--font-display);
font-size: 14px; font-weight: 600;
color: var(--c-text);
width: 24px; height: 24px;
display: grid; place-items: center;
line-height: 1;
}
.calendar-day.today .calendar-day-num {
background: var(--c-primary); color: var(--c-primary-ink);
border-radius: 50%;
}
.calendar-day-events { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.calendar-chip {
display: flex; align-items: baseline; gap: 6px;
text-align: left; width: 100%;
padding: 3px 6px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid var(--c-primary);
border-radius: 3px;
font: inherit; font-size: 11.5px; color: var(--c-text); cursor: pointer;
overflow: hidden;
}
.calendar-chip:hover { border-color: var(--c-primary-hov); }
.calendar-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-text-soft); flex-shrink: 0; }
.calendar-chip-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.calendar-chip.registered { border-color: var(--c-success); }
.calendar-chip.waitlist { background: color-mix(in oklab, var(--c-warning, #c98a00) 16%, var(--c-surface)); border-left-color: var(--c-warning, #c98a00); }
.calendar-more { font-size: 11px; color: var(--c-text-mute); padding: 0 6px; }
@media (max-width: 900px) {
.calendar-toolbar { grid-template-columns: 1fr; text-align: center; }
.calendar-nav, .calendar-legend { justify-self: center; }
.calendar-day { min-height: 78px; }
.calendar-chip-title { display: none; }
}
/* ================ DECORATIVE ELEMENTS ================ */
.placeholder-img {
background:
repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 8px, transparent 8px 16px),
var(--c-surface-deep);
border: 1px dashed var(--c-border-strong);
color: var(--c-text-mute);
font-family: var(--font-mono); font-size: 12px;
display: grid; place-items: center;
border-radius: var(--r-md);
}
/* Tooltips/microcopy small links */
.linkish { color: var(--c-primary); cursor: pointer; }
.linkish:hover { color: var(--c-primary-hov); text-decoration: underline; }
/* ================ SECTION TITLES ================ */
.section-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s-3); }
/* Accessibility: skip link */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--c-primary); padding: 12px 16px; border-radius: 4px; }
.skip:focus { left: 12px; top: 12px; z-index: 1000; }
/* ================ PRESS RELEASES ================ */
/* Filter-bar select wrappers */
.filter-bar .select-wrap { display: flex; flex-direction: column; gap: 2px; }
.filter-bar .select-wrap.search-wrap { flex: 1; min-width: 240px; max-width: 420px; }
.filter-bar .select-wrap.search-wrap .search { position: relative; }
.filter-bar .select-wrap label { font-size: 11px; color: var(--c-text-mute); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.filter-bar .select-wrap select {
font: inherit; font-size: 14px; background: var(--c-surface); color: var(--c-text);
border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md);
padding: 8px 30px 8px 12px; min-width: 160px;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
/* Section eyebrow above release groups */
.section-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--c-accent);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: var(--s-3);
padding-bottom: 4px;
border-bottom: 1px solid var(--c-accent);
}
/* Releases grid */
.releases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.releases-grid.pinned { grid-template-columns: 1fr; }
@media (max-width: 900px){ .releases-grid { grid-template-columns: 1fr; } }
/* Release card */
.release-card {
background: var(--c-surface);
border-radius: var(--r-lg);
box-shadow: var(--sh-mid);
padding: var(--s-5);
display: grid; grid-template-columns: 72px 1fr; gap: var(--s-5);
cursor: pointer;
transition: box-shadow .18s ease, transform .18s ease;
}
.release-card:hover {
box-shadow: var(--sh-mid-hover);
}
.releases-grid.pinned .release-card {
border: 1px solid var(--c-primary);
}
.release-date {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
padding: var(--s-3) var(--s-2);
background: var(--c-primary-soft); color: var(--c-primary);
border-radius: var(--r-md);
line-height: 1; height: max-content;
}
.release-date .d { font-size: 26px; font-weight: 700; }
.release-date .m { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.release-date .y { font-size: 11px; opacity: .7; margin-top: 4px; }
.release-body { min-width: 0; }
.release-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s-3); }
.topic-tag {
display: inline-flex; align-items: center;
font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
padding: 3px 10px; border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid var(--c-accent);
color: var(--c-accent);
}
.release-title {
font-family: var(--font-display);
font-size: 18px; font-weight: 600; line-height: 1.25;
margin: 0 0 var(--s-2);
letter-spacing: -0.005em; color: var(--c-text);
}
.releases-grid.pinned .release-title { font-size: 22px; }
.release-lead {
margin: 0 0 var(--s-3);
color: var(--c-text-soft); font-size: 14px; line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.release-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
margin-top: var(--s-3);
padding-top: var(--s-3); border-top: 1px solid var(--c-border);
font-size: 13px; color: var(--c-text-mute);
}
.release-foot-meta { display: inline-flex; align-items: center; gap: 6px; }
.dotsep { opacity: .5; }
/* Language pills */
.lang-pills { display: inline-flex; gap: 4px; }
.lang-pill {
font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
padding: 3px 6px; border-radius: 3px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
color: var(--c-text-mute);
border: 1px solid var(--c-border-strong);
}
.lang-pill.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* Detail layout */
.release-detail-grid {
display: grid; grid-template-columns: 1fr 340px; gap: var(--s-7);
align-items: start;
}
@media (max-width: 1000px){ .release-detail-grid { grid-template-columns: 1fr; } }
.back-link { font-size: 13px; color: var(--c-text-soft); text-decoration: none; }
.back-link:hover { color: var(--c-primary); }
.release-h1 {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; line-height: 1.18;
letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-4); color: var(--c-text);
}
.release-lede {
font-size: 19px; line-height: 1.55; color: var(--c-text);
margin: 0 0 var(--s-6);
font-weight: 400;
border-left: 3px solid var(--c-accent);
padding-left: var(--s-4);
}
.release-content p { font-size: 16px; line-height: 1.7; margin: 0 0 var(--s-4); color: var(--c-text); }
.release-content p:last-child { margin-bottom: 0; }
.release-share { display: flex; align-items: center; gap: 8px; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
/* Related list */
.related-list { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); box-shadow: var(--sh-mid); margin-top: var(--s-3); }
.related-item {
display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: var(--s-4);
padding: var(--s-3) var(--s-4); color: var(--c-text); text-decoration: none;
border-bottom: 1px solid var(--c-border);
}
.related-item:last-child { border-bottom: 0; }
.related-item:hover { background: var(--c-surface-deep); }
.related-item .d { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }
.related-item .t { font-weight: 500; }
/* Sidebar */
.release-side { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: var(--s-4); }
.press-kit-panel { border: 1px solid var(--c-primary); }
.press-kit-panel .panel-hd { border-bottom-color: color-mix(in oklab, var(--c-primary) 25%, transparent); }
.press-kit-panel .panel-hd h3 { color: var(--c-primary); }
/* Attachments list */
.attachments-list { list-style: none; padding: 0; margin: 0; }
.attachments-list li {
display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--c-border);
}
.attachments-list li:last-child { border-bottom: 0; }
.attachments-list .att-icon {
width: 32px; height: 32px; border-radius: var(--r-sm);
display: grid; place-items: center;
background: var(--c-primary-soft); color: var(--c-primary);
}
.attachments-list .att-title { font-size: 14px; font-weight: 500; color: var(--c-text); }
.attachments-list .att-sub { font-size: 12px; color: var(--c-text-mute); font-variant-numeric: tabular-nums; }
/* ==========================================================================
v2 – Külképviseleti gyűjtő főoldal (hub)
A portál design tokenjeire épül; a hub a nyilvános belépő.
========================================================================== */
.hub { background: var(--c-bg); min-height: 100vh; }
/* Fejléc */
.hub-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 20; }
.hub-header-in { display: flex; align-items: center; gap: var(--s-6); height: 72px; }
.hub-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.hub-brand .crest-img { height: 40px; width: auto; }
.hub-brand .org { font-family: var(--font-wordmark); font-size: 12px; color: var(--c-text-soft); letter-spacing: 0.14em; text-transform: uppercase; display: block; }
.hub-brand .name { font-family: var(--font-wordmark); font-size: 24px; font-weight: 600; color: var(--c-text); line-height: 1; }
.hub-nav { display: flex; gap: var(--s-5); margin-left: var(--s-5); }
.hub-nav a { font-size: 14px; font-weight: 500; color: var(--c-text-soft); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.hub-nav a:hover { color: var(--c-primary); }
.hub-nav a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.hub-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
/* A sajtószoba asztali nézetben gomb a nyelvváltó mellett, nem menüpont. */
.hub-press-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
@media (min-width: 981px) { .hub-menu-btn.solo.hub-nav-press { display: none; } }
/* ---- Fejléc-menük (legördülő archívum-navigáció) ------------------------ */
.hub-menu { position: relative; }
.hub-menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
background: none; border: 0; border-bottom: 2px solid transparent; font: inherit;
font-size: 14px; font-weight: 500; color: var(--c-text-soft); cursor: pointer; white-space: nowrap; }
.hub-menu-btn:hover { color: var(--c-primary); }
.hub-menu-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.hub-menu.open > .hub-menu-btn { color: var(--c-primary); }
.hub-menu-caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
border-top: 4px solid currentColor; opacity: .55; transition: transform .15s; }
.hub-menu.open .hub-menu-caret { transform: rotate(180deg); opacity: 1; }
.hub-dropdown { position: absolute; left: -14px; top: calc(100% + 12px); z-index: 40;
min-width: 320px; max-width: 400px; padding: 8px; opacity: 0; visibility: hidden;
transform: translateY(-4px); transition: opacity .13s, transform .13s, visibility .13s;
background: var(--c-surface); border: 1px solid var(--c-border);
box-shadow: 0 18px 44px rgba(17, 32, 58, .14); }
.hub-menu.open .hub-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* A gomb és a panel közti rést áthidalja, hogy hoverrel ne csukódjon be. */
.hub-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hub-dropdown-mark { position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; pointer-events: none;
border-left: 1px solid var(--c-primary); border-top: 1px solid var(--c-primary); opacity: .35; }
.hub-dropdown-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 11px;
background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.hub-dropdown-item + .hub-dropdown-item { border-top: 1px solid var(--c-border); }
.hub-dropdown-item:hover { background: var(--c-primary-soft); }
.hdi-no { font-family: var(--font-mono); font-size: 10px; color: var(--c-text-mute); padding-top: 3px;
font-variant-numeric: lining-nums; }
.hub-dropdown-item:hover .hdi-no { color: var(--c-primary); }
.hdi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hdi-label { font-size: 13.5px; font-weight: 500; color: var(--c-text); }
.hub-dropdown-item:hover .hdi-label { color: var(--c-primary); }
.hdi-desc { font-size: 11.5px; line-height: 1.4; color: var(--c-text-mute); }
.hub-dropdown-item .arw { margin-top: 5px; opacity: 0; transition: opacity .13s, transform .13s; }
.hub-dropdown-item:hover .arw { opacity: 1; transform: translateX(2px); }
.hub-burger { display: none; flex-direction: column; justify-content: center; gap: 4px;
width: 36px; height: 32px; padding: 0 7px; background: none; border: 1px solid var(--c-border);
border-radius: var(--r-sm); cursor: pointer; }
.hub-burger span { display: block; height: 1.5px; background: var(--c-text); transition: transform .15s, opacity .15s; }
.hub-burger.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hub-burger.on span:nth-child(2) { opacity: 0; }
.hub-burger.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* Keskeny nézeten hamburger + kinyíló panel. Vízszintes görgetés helyett, mert
abból a legördülő menü nem tud kilógni (overflow levágja). */
@media (max-width: 980px) {
.hub-header-in { gap: var(--s-4); height: auto; padding-top: 10px; padding-bottom: 10px; }
.hub-brand .name { font-size: 20px; }
.hub-burger { display: flex; }
.hub-nav { display: none; order: 3; width: 100%; margin-left: 0; flex-direction: column;
gap: 0; padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--c-border); }
.hub-nav.open { display: flex; }
.hub-menu { position: static; }
.hub-menu-btn { width: 100%; justify-content: space-between; padding: 11px 2px;
border-bottom: 1px solid var(--c-border); font-size: 15px; }
.hub-menu-btn.solo { justify-content: flex-start; }
.hub-press-btn { display: none; }
.hub-dropdown { position: static; opacity: 1; visibility: visible; transform: none;
min-width: 0; max-width: none; border: 0; box-shadow: none; padding: 0 0 var(--s-3) var(--s-4);
display: none; background: none; }
.hub-menu.open .hub-dropdown { display: block; }
.hub-dropdown::before, .hub-dropdown-mark { display: none; }
.hub-dropdown-item { padding: 9px 2px; }
.hdi-desc { display: none; }
}
/* Hero */
.hub-hero { background: linear-gradient(160deg, var(--c-band) 0%, var(--c-primary-hov) 100%); color: #fff; padding: var(--s-10) 0 var(--s-9); }
.hub-kicker { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0 0 var(--s-3); }
.hub-hero-title { font-family: var(--font-display); font-size: 46px; font-weight: 700;
line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
.hub-hero-lead { font-size: 18px; line-height: 1.5; font-weight: 300; color: rgba(255,255,255,.94); max-width: 720px; margin: 0 0 var(--s-6); }
.hub-search { position: relative; max-width: 560px; }
.hub-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); }
.hub-search input { width: 100%; padding: 14px 16px 14px 46px; border: 0; border-radius: var(--r-ctl); font: inherit; font-size: 15px; color: var(--c-text); }
.hub-regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.hub-regions .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.hub-regions .chip:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.hub-regions .chip.active { background: #fff; color: var(--c-primary); border-color: #fff; }
/* Tartalom */
.hub-body { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-8); padding: var(--s-8) var(--s-7) var(--s-9); }
.hub-section-head { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-6); }
.hub-section-head h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em;
font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--c-heading, var(--c-text)); }
.hub-section-head .muted { font-size: 13px; color: var(--c-text-mute); text-decoration: none; }
/* Képviselet-rács */
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.mission-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: border-color var(--t-ctl) var(--ease-ctl), box-shadow var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl); }
.mission-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
/* Halvány, kör alakú zászló-vízjel (flare) a kártya jobb felső sarkában */
/* Zászló-vízjel: a megrendelő 0.8-as opacitást kért, ezért a maszk lágyabb és
kisebb, hogy a telített zászló ne nyomja el a kártya szövegét. */
.mission-flag-wm { position: absolute; top: -14px; right: -14px; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; opacity: .8; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 68%); mask-image: radial-gradient(circle, #000 34%, transparent 68%); }
.mission-card > :not(.mission-flag-wm) { position: relative; z-index: 1; }
.mission-card:hover .mission-flag-wm { opacity: 1; }
.mission-region-line { font-size: 12px; color: var(--c-text-mute); }
.mission-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mission-type { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-primary); background: var(--c-primary-soft); padding: 3px 8px; border-radius: var(--r-sm); }
.mission-region { font-size: 11px; color: var(--c-text-mute); }
.mission-city { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; }
.mission-country { font-size: 14px; color: var(--c-text-soft); }
.mission-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.mission-url { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-visit { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--c-primary); }
.mission-empty { grid-column: 1 / -1; padding: var(--s-8); text-align: center; color: var(--c-text-mute); }
/* Hírfolyam */
.hub-feed { position: sticky; top: 96px; align-self: start; }
.feed-list, .info-list, .social-list, .post-list { list-style: none; margin: 0; padding: 0; }
.feed-list { display: flex; flex-direction: column; }
.feed-item { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }
.feed-item:first-child { padding-top: 0; }
.feed-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.feed-kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
.feed-kind.k-release { background: var(--c-primary-soft); color: var(--c-primary); }
.feed-kind.k-news { background: var(--c-success-soft); color: var(--c-success); }
.feed-kind.k-event { background: var(--c-warning-soft); color: var(--c-warning); }
.feed-kind.k-travel { background: #e5f5fa; color: var(--c-accent); }
.feed-kind.k-visa { background: var(--c-primary-soft); color: var(--c-primary); }
.feed-kind.k-notice { background: var(--c-surface-deep); color: var(--c-text-soft); }
.feed-date { font-size: 11.5px; color: var(--c-text-mute); }
.feed-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-text); text-decoration: none; margin-bottom: 4px; }
.feed-title:hover { color: var(--c-primary); }
.feed-src { font-size: 11.5px; color: var(--c-text-mute); font-family: var(--font-mono); }
/* Sajtóportál belépő */
.hub-press { background: var(--c-surface); border-top: 1px solid var(--c-border); }
.hub-press-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-8) var(--s-7); flex-wrap: wrap; }
.hub-press h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.hub-press p { font-size: 15px; color: var(--c-text-soft); }
/* Lábléc */
.hub-footer { background: var(--c-band); color: #fff; }
.hub-footer .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--s-7); }
.hub-footer .muted { color: rgba(255,255,255,.7); font-size: 13px; }
/* ---- v2 hub: bővített főoldal szekciók ---------------------------------- */
.hub-band { padding: var(--s-9) 0; }
.hub-band.alt { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.hub-band .container { padding-left: var(--s-7); padding-right: var(--s-7); }
.hub-section-lead { font-size: 15.5px; line-height: 1.6; color: var(--c-text-soft);
max-width: 68ch; margin: calc(-1 * var(--s-3)) 0 var(--s-6); }
.hub-section-head h2.sub { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
/* Riasztás sáv */
.hub-alert { background: var(--c-warning-soft); border-bottom: 1px solid #f0dcb4; }
.hub-alert-in { display: flex; align-items: center; gap: 10px; padding: 10px var(--s-7); color: var(--c-warning); font-size: 13.5px; }
.hub-alert-in svg { flex: none; }
.hub-alert-in b { font-weight: 600; }
.hub-alert-in span { color: #8a6300; }
/* Állampolgároknak */
.citizen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.citizen-card { display: flex; flex-direction: column; gap: 8px; padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: border-color var(--t-ctl) var(--ease-ctl), box-shadow var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl); }
.citizen-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.citizen-card.cta { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.citizen-ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; }
.citizen-card.cta .citizen-ico { background: rgba(255,255,255,.16); color: #fff; }
.citizen-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.citizen-desc { font-size: 13px; line-height: 1.45; color: var(--c-text-soft); }
.citizen-card.cta .citizen-desc { color: rgba(255,255,255,.9); }
/* Térkép (Leaflet + CARTO Voyager csempék) */
/* Térkép a v2 rajzi nyelvben: navy alap + hajszálvonalas rajzolat. A sötét,
címke nélküli CARTO csempéket `screen` blenddel ültetjük a navy háttérre –
a sötét felületek beleolvadnak, csak a világos vonalak látszanak. */
.hub-map { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-xl);
overflow: hidden; --reg-c: rgba(198,214,240,.5); --reg-r: 10px; }
.hub-leaflet { width: 100%; aspect-ratio: 16 / 7; background: #18284d; z-index: 1; }
.hub-leaflet .leaflet-container { font: inherit; background: #18284d; }
.hub-leaflet .leaflet-tile-pane { mix-blend-mode: screen; opacity: .62;
filter: grayscale(1) brightness(1.5) contrast(1.05); }
.hub-leaflet .leaflet-popup-content, .hub-leaflet .leaflet-tooltip { font-size: 12px; }
.hub-leaflet .leaflet-tooltip { background: #0f1c3a; color: #e6ecfa; border: 1px solid rgba(198,214,240,.28);
border-radius: 6px; box-shadow: none; font-weight: 500; letter-spacing: .01em;
width: max-content; max-width: 240px; white-space: normal; line-height: 1.45; }
.hub-leaflet .leaflet-tooltip-top::before { border-top-color: rgba(198,214,240,.28); }
.hub-leaflet .leaflet-control-attribution { background: rgba(15,28,58,.72); color: rgba(198,214,240,.6); }
.hub-leaflet .leaflet-control-attribution a { color: rgba(198,214,240,.85); }
.hub-leaflet .leaflet-control-zoom a { background: #0f1c3a; color: #e6ecfa;
border-color: rgba(198,214,240,.2); }
.hub-leaflet .leaflet-control-zoom a:hover { background: #1b2d57; color: #fff; }
/* pont-csoport kis nagyításon: gyűrű + darabszám */
.hub-leaflet .map-cluster { display: grid; place-items: center; cursor: pointer; }
.hub-leaflet .map-cluster span { display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid rgba(198,214,240,.65); background: rgba(15,28,58,.78);
color: #e6ecfa; font-size: 11px; font-weight: 600; letter-spacing: .02em;
font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.hub-leaflet .map-cluster:hover span { border-color: #fff; background: rgba(38,60,110,.9); }
/* rajzi réteg a térkép fölött: sarok-regisztrációs jelek + koordináta-annotáció */
.hub-map .map-note { position: absolute; right: 14px; bottom: 26px; z-index: 500;
pointer-events: none; }
/* Kétoszlopos szekció (konzuli info + hírek, közösségi) */
.hub-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
@media (max-width: 900px) { .hub-two { grid-template-columns: 1fr; gap: var(--s-7); } }
/* Konzuli info lista */
.info-list { display: flex; flex-direction: column; }
.info-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.info-item:first-child { padding-top: 0; }
.info-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-accent); background: #e5f5fa; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.info-title { font-size: 14.5px; font-weight: 500; color: var(--c-text); text-decoration: none; }
.info-title:hover { color: var(--c-primary); }
.info-date { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }
/* Kulturális intézetek + CTA */
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.culture-card { display: flex; flex-direction: column; background: var(--c-bg);
border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.culture-card:hover { border-color: var(--c-primary);
box-shadow: 0 10px 26px rgba(15,45,105,.13); }
.culture-img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
background: var(--c-surface); }
.culture-img img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .4s ease; }
.culture-card:hover .culture-img img { transform: scale(1.04); }
/* ::before, mert az ::after-t a .reg-marks sarokjelei foglalják */
.culture-img::before { content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(15,45,105,0) 45%, rgba(15,45,105,.42) 100%); }
.culture-body { display: flex; flex-direction: column; gap: 5px; padding: 14px var(--s-5) 16px; }
.culture-city { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.culture-teaser { font-size: 13.5px; line-height: 1.45; color: var(--c-text-soft); }
.culture-url { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
font-family: var(--font-mono); font-size: 11.5px; color: var(--c-text-mute); }
@media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .culture-grid { grid-template-columns: 1fr; } }
.culture-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-5); padding: var(--s-6); border-radius: var(--r-xl); background: linear-gradient(135deg, #7a1f3d 0%, #5a1730 100%); color: #fff; text-decoration: none; flex-wrap: wrap; }
.culture-cta b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 3px; }
/* Csak a leíró sorra vonatkozzon – enélkül a gomb betűméretét is elviszi. */
.culture-cta > div span { color: rgba(255,255,255,.85); font-size: 13px; }
.culture-cta .btn.primary { background: #fff; color: #5a1730; border: 0; }
/* A CTA egy , ne kéküljön a szöveg/gomb hoverkor (globális a:hover ellen) */
.culture-cta:hover, .culture-cta:hover b, .culture-cta:hover > div span { color: #fff; }
.culture-cta:hover .btn.primary { color: #5a1730; background: #f4e9ed; }
/* Közösségi média */
.social-search { position: relative; margin-bottom: var(--s-4); }
.social-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); }
.social-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--c-border-strong); border-radius: var(--r-ctl); font: inherit; font-size: 14px; }
.social-list { display: flex; flex-direction: column; }
.social-acc { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.social-acc:first-child { padding-top: 0; }
.social-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.social-ic.sm { width: 26px; height: 26px; font-size: 10.5px; border-radius: 6px; }
.social-ic.p-fb { background: #1877f2; }
.social-ic.p-ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.social-ic.p-x { background: #111827; }
.social-ic.p-yt { background: #ff0000; }
.social-ic.p-in { background: #0a66c2; }
/* platform-szűrő csipek */
.plat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-5); }
.plat-filter button { display: inline-flex; align-items: center; gap: 6px;
padding: var(--ctl-pad-sm); border-radius: var(--r-ctl); cursor: pointer;
border: 1px solid var(--c-border-strong); background: var(--c-surface);
font: inherit; font-size: 12.5px; font-weight: 500; color: var(--c-text-soft);
transition: border-color .15s, color .15s, background .15s; }
.plat-filter button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.plat-filter button.on { background: var(--c-primary); border-color: var(--c-primary);
color: var(--c-primary-ink); }
/* képviseletenként csoportosított fióklista */
.social-groups { display: flex; flex-direction: column; }
.social-group + .social-group { margin-top: var(--s-2); }
.sg-hd { margin-top: var(--s-5); }
.social-group:first-child .sg-hd { margin-top: 0; }
.sg-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.sg-n { flex: none; font-size: 10px; letter-spacing: .12em; color: var(--c-text-mute); }
/* kártya-sorszám: szerif numerálé a kártya jobb felső sarkában */
.card-no { position: absolute; right: 13px; top: 11px; z-index: 2; pointer-events: none;
font-family: var(--font-serif); font-size: 13px; font-weight: 600; letter-spacing: .06em;
color: var(--c-text-mute); font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1; }
.card-no.on-img { right: auto; left: 0; top: 0; padding: 2px 8px; color: var(--c-primary);
background: rgba(255,255,255,.94); border-bottom-right-radius: 8px; }
/* átlós vonalkázás a kártyák jobb felső sarkában */
.card-hatch { position: absolute; right: 0; top: 0; width: 96px; height: 52px;
color: currentColor; opacity: .14; pointer-events: none; }
/* Állampolgároknak: sorszám + hoverre kifutó nyíl */
.citizen-card { position: relative; overflow: hidden; }
.citizen-card.cta .card-no { color: rgba(255,255,255,.7); }
.citizen-card .card-arw { margin-top: 10px; color: var(--c-primary); }
.citizen-card.cta .card-arw { color: #fff; }
.citizen-card:hover .card-arw { width: 30px; }
/* Konzuli kártyák: sorszám + hoverre erősödő bal él */
.consular-card { position: relative; }
.consular-card .card-no { top: 14px; }
/* Kulturális kártyák: regisztrációs sarokjelek a fotón */
.culture-img.reg-marks { --reg-c: rgba(255,255,255,.75); --reg-r: 6px; }
.culture-cta { position: relative; overflow: hidden; --bracket-c: rgba(255,255,255,.4); }
/* „továbbiak" kapcsoló – hosszú listák lezárása */
.more-btn { align-self: flex-start; margin-top: var(--s-5); }
.more-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* Lebegő belépő a szerkesztői felületre – csak a demóban */
/* Demó gyors elérés – lebegő, hoverre kinyíló dobozka jobb lent.
Csak a demóhoz: élesben sem ez, sem a `?press` / `?portal` útvonal nem lenne. */
/* A doboz magassága CSAK a gomb – a panel abszolút, kifolyik fölé. Amíg a
panel a flow-ban volt, a rejtett (de helyet foglaló) sávja is a hover-zóna
része volt, így a gomb FÖLÖTT mozgatva is kinyílt. */
.demo-fab { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 900;
width: min(360px, calc(100vw - 2 * var(--s-5))); }
.demo-fab-btn {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 11px 14px 11px 11px; border-radius: var(--r-ctl);
background: #18284d; color: #e6ecfa; cursor: pointer;
border: 1px solid rgba(198,214,240,.28);
box-shadow: 0 10px 30px rgba(15,28,58,.34);
font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25;
transition: background var(--t-ctl) var(--ease-ctl), border-color var(--t-ctl) var(--ease-ctl),
box-shadow var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl);
}
.demo-fab-btn .af-txt { flex: 1; text-align: left; }
.demo-fab:hover .demo-fab-btn, .demo-fab.open .demo-fab-btn {
background: #20305c; border-color: rgba(198,214,240,.62); color: #fff;
box-shadow: 0 16px 40px rgba(15,28,58,.44);
}
.demo-fab-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.demo-fab .af-ico { flex: none; display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,.1); border: 1px solid rgba(198,214,240,.24); }
.demo-fab .af-tag { flex: none; padding: 3px 8px; border-radius: var(--r-ctl);
background: rgba(255,255,255,.12); border: 1px solid rgba(198,214,240,.2);
font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(230,236,250,.86); }
.demo-fab-caret { flex: none; width: 0; height: 0;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .6;
transition: transform var(--t-ctl) var(--ease-ctl); }
.demo-fab.open .demo-fab-caret { transform: rotate(180deg); opacity: 1; }
/* A panel a gomb FÖLÖTT nyílik – lent nincs hely. A rejtett állapot sem
`display: none`, mert akkor a hover-átmenet nem tudna lefutni. */
.demo-fab-panel {
position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); overflow: hidden;
background: #18284d; border: 1px solid rgba(198,214,240,.28); border-radius: var(--r-ctl);
box-shadow: 0 18px 44px rgba(15,28,58,.44);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl),
visibility var(--t-ctl);
}
.demo-fab.open .demo-fab-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Áthidalja a panel és a gomb közti 8px rést, hogy az egér átvezetésekor ne
csukódjon be – de csak nyitva, különben újra a gomb fölött is nyitna. */
.demo-fab.open::before { content: ""; position: absolute; left: 0; right: 0;
bottom: 100%; height: 8px; }
.demo-fab-hd { padding: 11px 14px 9px; border-bottom: 1px solid rgba(198,214,240,.18); }
.demo-fab-hd-t { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: #fff; }
.demo-fab-hd-s { display: block; margin-top: 2px; font-size: 11px; color: rgba(230,236,250,.6); }
.demo-fab-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 14px;
color: #e6ecfa; text-decoration: none;
border-bottom: 1px solid rgba(198,214,240,.12);
transition: background var(--t-ctl) var(--ease-ctl); }
.demo-fab-item:last-child { border-bottom: 0; }
.demo-fab-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.demo-fab-item > svg { flex: none; margin-top: 3px; opacity: .55; }
.demo-fab-item:hover > svg { opacity: 1; }
.dfi-no { flex: none; padding-top: 2px; font-size: 10px; color: rgba(230,236,250,.5); }
.demo-fab-item:hover .dfi-no { color: rgba(230,236,250,.9); }
.dfi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dfi-label { font-size: 13px; font-weight: 600; }
.dfi-desc { font-size: 11px; line-height: 1.4; color: rgba(230,236,250,.6); }
@media (max-width: 720px) {
.demo-fab { right: var(--s-4); bottom: var(--s-4); left: var(--s-4); width: auto; }
.demo-fab-btn { padding: 9px 12px 9px 9px; gap: 9px; }
.dfi-desc { display: none; }
}
/* „Csak a térképen látszók" – a rácsot a térkép aktuális kivágatára szűri */
.map-sync { text-align: right; }
.map-sync b { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--c-heading);
font-variant-numeric: lining-nums; margin-right: 2px; }
.map-only-note { display: block; font-size: 11px; color: var(--c-text-mute); margin-top: 1px; }
/* Művelet, nem navigáció: gomb, nyíl nélkül – a `.more-btn` pill-formájában,
hogy a rács alatti „További képviselet" gombbal egy nyelvet beszéljen. */
.map-reset { flex: none; padding: var(--ctl-pad-sm); font-size: 13px; }
.map-reset svg { opacity: .8; }
.map-reset:hover svg { opacity: 1; }
.mission-empty .map-reset { margin-top: var(--s-4); }
.more-count { margin-top: var(--s-5); font-family: var(--font-mono); font-size: 11px;
color: var(--c-text-mute); font-variant-numeric: tabular-nums; }
.social-acc:first-child { padding-top: 10px; }
.social-acc-main { display: flex; flex-direction: column; min-width: 0; }
.social-name { font-size: 14px; font-weight: 600; }
.social-handle { font-size: 12px; color: var(--c-text-mute); }
.social-view { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--c-primary); text-decoration: none; flex: none; }
.post-list { display: flex; flex-direction: column; gap: 12px; }
.post-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px var(--s-4); }
.post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.post-acc { font-size: 12.5px; font-weight: 600; }
.post-date { margin-left: auto; font-size: 11.5px; color: var(--c-text-mute); }
.post-text { font-size: 14px; line-height: 1.5; color: var(--c-text); }
/* ==========================================================================
v2 – Belső (jelszóval védett) munkafelület
========================================================================== */
.hub-internal-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-text-soft); }
.hub-internal-link:hover { color: var(--c-primary); }
/* Demó jelvény */
.int-demo-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--c-warning); background: var(--c-warning-soft); border: 1px solid #f0dcb4; padding: 2px 8px; border-radius: 999px; }
.int-demo-badge.sm { font-size: 9.5px; padding: 1px 6px; vertical-align: middle; }
/* Kapu */
.int-gate { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--c-band) 0%, var(--c-primary-hov) 100%); padding: var(--s-6); }
.int-gate-card { width: 100%; max-width: 400px; background: var(--c-surface); border-radius: var(--r-xl); padding: var(--s-8); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.int-gate-card .crest-img { height: 52px; width: auto; margin-bottom: var(--s-4); }
.int-gate-card h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: var(--s-3) 0 6px; letter-spacing: -.01em; }
.int-gate-card > p { font-size: 14px; color: var(--c-text-soft); margin-bottom: var(--s-5); }
.int-pw { position: relative; margin-bottom: var(--s-3); }
.int-pw svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); }
.int-pw input { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--c-border-strong); border-radius: var(--r-ctl); font: inherit; font-size: 15px; }
.int-gate-forgot { display: block; margin: var(--s-3) auto 0; background: none; border: 0; padding: 0;
font: inherit; font-size: 12.5px; color: var(--c-primary); cursor: pointer; }
.int-gate-forgot:hover { text-decoration: underline; }
.int-gate-demo { font-size: 12px; color: var(--c-text-mute); margin-top: var(--s-4); }
.int-gate-back { margin-top: var(--s-3); background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--c-primary); }
/* Munkafelület */
.int { min-height: 100vh; background: var(--c-bg); }
.int-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.int-header-in { max-width: 1280px; margin: 0 auto; padding: 14px var(--s-7); display: flex; align-items: center; gap: var(--s-5); }
.int-brand { display: flex; align-items: center; gap: 12px; }
.int-brand .crest-img { height: 40px; width: auto; }
.int-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; display: block; }
.int-sub { font-size: 12.5px; color: var(--c-text-mute); }
.int-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.int-body { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: var(--s-6); padding: var(--s-6) var(--s-7) var(--s-9); }
.int-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; align-self: start; }
.int-navlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md); background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--c-text-soft); text-align: left; }
.int-navlink svg { color: var(--c-text-mute); }
.int-navlink:hover { background: var(--c-surface); }
.int-navlink.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.int-navlink.on svg { color: var(--c-primary); }
.int-main { min-width: 0; }
.int-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-5); }
.int-head h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.int-head p { font-size: 14px; color: var(--c-text-soft); margin-top: 4px; max-width: 640px; }
.int-foot-note { font-size: 12.5px; color: var(--c-text-mute); margin-top: var(--s-4); }
/* Médiatár tábla */
.int-table-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow-x: auto; }
.int-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.int-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); padding: 11px 14px; background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); }
.int-table td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); font-size: 13.5px; vertical-align: top; }
.int-table tr:last-child td { border-bottom: 0; }
.int-table .c { text-align: center; }
.int-table .muted { color: var(--c-text-mute); }
.int-table .mono { font-family: var(--font-mono); font-size: 12px; }
.int-table .nowrap { white-space: nowrap; }
.asset-cell { display: flex; gap: 10px; }
.asset-type { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-sm); height: fit-content; white-space: nowrap; }
.asset-type.ty-photo { background: var(--c-primary-soft); color: var(--c-primary); }
.asset-type.ty-video { background: #f5f3ff; color: #6d28d9; }
.asset-type.ty-doc { background: var(--c-surface-deep); color: var(--c-text-soft); }
.asset-title { font-weight: 600; color: var(--c-text); }
.asset-cat, .asset-loc, .asset-dim { font-size: 11.5px; color: var(--c-text-mute); margin-top: 2px; }
.asset-note { color: var(--c-text-soft); max-width: 200px; }
/* Toggle (újrahasznosítva) */
.toggle { width: 38px; height: 22px; border-radius: 999px; border: 0; cursor: pointer; position: relative; flex: none; padding: 0; }
.toggle.on { background: var(--c-primary); } .toggle.off { background: var(--c-border-strong); }
.toggle::after { content: ""; position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.toggle.on::after { left: 19px; } .toggle.off::after { left: 3px; }
/* Események */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--s-5); }
.ev-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); }
.ev-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); }
.ev-card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ev-card-meta { font-size: 12.5px; color: var(--c-text-mute); margin-top: 3px; }
.ev-row { padding: 10px 0; border-top: 1px solid var(--c-border); }
.ev-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); display: block; margin-bottom: 7px; }
.ev-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-target { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--c-surface-deep); color: var(--c-text-mute); }
.ev-target.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.ev-row.toggles { display: flex; gap: var(--s-6); }
.ev-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-text); cursor: pointer; }
.ev-actions { display: flex; gap: 9px; margin-top: var(--s-4); flex-wrap: wrap; }
/* Hírek szerkesztő */
.news-editor { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); max-width: 720px; }
.news-title { width: 100%; font-family: var(--font-display); font-size: 18px; font-weight: 600; border: 0; border-bottom: 1px solid var(--c-border); padding: 8px 0; margin-bottom: var(--s-4); }
.news-title:focus, .news-body:focus { outline: none; border-color: var(--c-primary); }
.news-body { width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.news-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); }
/* Igazgatói anyagok */
.director-card { display: flex; align-items: center; gap: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); max-width: 640px; }
.director-av { width: 52px; height: 52px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-weight: 700; flex: none; }
.director-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.director-role { font-size: 13px; color: var(--c-text-soft); }
.director-file { font-size: 12px; color: var(--c-text-mute); margin-top: 5px; }
.director-card .btn { margin-left: auto; }
/* ---- v2 belső: médiatár rács + részletnézet -------------------------------- */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.media-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: border-color var(--t-ctl) var(--ease-ctl), box-shadow var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl); }
.media-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.media-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-deep); display: grid; place-items: center; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb.ty-doc { background: linear-gradient(135deg, #eef1f7, #e2e8f2); }
.media-doc-ico { color: var(--c-primary); opacity: .55; }
.media-doc-ico.lg { opacity: .5; }
.media-typebadge { position: absolute; top: 9px; left: 9px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(17,24,39,.72); color: #fff; padding: 3px 7px; border-radius: var(--r-sm); }
.media-flag { position: absolute; top: 9px; right: 9px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-sm); }
.media-flag.on { background: var(--c-success-soft); color: var(--c-success); }
.media-flag.off { background: var(--c-warning-soft); color: var(--c-warning); }
.media-play { position: absolute; bottom: 9px; right: 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; background: rgba(17,24,39,.78); color: #fff; padding: 3px 8px; border-radius: var(--r-sm); }
.media-play.lg { font-size: 13px; padding: 5px 11px; }
.media-card-bd { padding: 12px 14px 14px; }
.media-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; }
.media-card-sub { font-size: 12.5px; color: var(--c-text-mute); margin-top: 3px; }
.media-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 12px; color: var(--c-text-soft); }
/* Vissza gomb */
.int-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-primary); margin-bottom: var(--s-4); }
/* Részletnézet */
.media-detail { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-6); align-items: start; }
.media-preview { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface-deep); display: grid; place-items: center; min-height: 320px; }
.media-preview img { width: 100%; height: auto; display: block; }
.media-preview.ty-doc { min-height: 360px; background: linear-gradient(135deg, #eef1f7, #e2e8f2); }
.media-note-box { margin-top: var(--s-4); padding: 14px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--r-md); font-size: 14px; line-height: 1.5; color: var(--c-text-soft); }
.media-note-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: 4px; }
.media-detail-side { display: flex; flex-direction: column; gap: var(--s-4); }
.media-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); }
.media-panel h3 { font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: var(--s-3); }
.media-hint { font-size: 12px; color: var(--c-text-mute); margin-bottom: 10px; }
.meta-dl { display: flex; flex-direction: column; gap: 9px; }
.meta-dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.meta-dl dt { font-size: 12.5px; color: var(--c-text-mute); }
.meta-dl dd { font-size: 13.5px; color: var(--c-text); }
.filename-row { display: flex; align-items: center; gap: 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 9px 11px; }
.filename-row code { font-family: var(--font-mono); font-size: 11.5px; color: var(--c-text); word-break: break-all; flex: 1; }
.var-table { width: 100%; border-collapse: collapse; }
.var-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); padding: 0 8px 8px; }
.var-table td { padding: 8px; border-top: 1px solid var(--c-border); font-size: 13px; }
.var-table td.c { text-align: center; }
.var-dl { background: none; border: 1px solid var(--c-border); border-radius: var(--r-sm); width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--c-primary); }
.var-dl:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
/* ============================================================
Sajtószoba (/sajto) – a főoldal nyilvános sajtó-szekciója
============================================================ */
.pr-hero {
position: relative; overflow: hidden;
background: linear-gradient(160deg, var(--c-band) 0%, var(--c-primary-hov) 100%);
color: #fff; padding: var(--s-9) 0 var(--s-8);
}
.pr-hero .container { position: relative; padding-left: var(--s-7); padding-right: var(--s-7); }
.pr-hero .hub-hero-title { font-size: 46px; margin-bottom: var(--s-4); }
.pr-hero .hub-hero-lead { margin-bottom: var(--s-6); }
.pr-hero-hatch { position: absolute; right: 0; top: 0; width: 220px; height: 120px;
color: #fff; opacity: .1; pointer-events: none; }
.pr-hero-note { display: block; margin-top: var(--s-5); }
.pr-hero .pr-open.bracket { --bracket-c: rgba(255,255,255,.4); }
.pr-open {
display: flex; gap: 14px; align-items: flex-start; max-width: 720px;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
border-radius: var(--r-lg); padding: 16px 18px;
}
.pr-open-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; }
.pr-open b { display: block; font-size: 15px; margin-bottom: 2px; }
.pr-open span { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
/* --- Közelgő sajtóesemények --- */
.pr-events { display: flex; flex-direction: column; gap: var(--s-3); }
.pr-event {
display: flex; align-items: center; gap: var(--s-5);
background: var(--c-bg); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: 16px 20px;
}
.pr-event-date {
flex: none; width: 58px; text-align: center; line-height: 1;
border-right: 1px solid var(--c-border); padding-right: var(--s-4);
}
.pr-event-date .d { display: block; font-size: 26px; font-weight: 700; color: var(--c-primary); }
.pr-event-date .m { display: block; font-size: 11px; text-transform: uppercase;
letter-spacing: .08em; color: var(--c-text-mute); margin-top: 3px; }
.pr-event-body { flex: 1; min-width: 0; }
.pr-event-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--c-accent); }
.pr-event-body h3 { font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.pr-event-meta { display: flex; gap: var(--s-4); flex-wrap: wrap;
font-size: 13px; color: var(--c-text-mute); }
.pr-event-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pr-event-cta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pr-event-note { display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; color: var(--c-text-mute); }
@media (max-width: 760px) {
.pr-event { flex-wrap: wrap; }
.pr-event-cta { width: 100%; align-items: stretch; }
}
/* --- Közlemény-szűrők --- */
.pr-filters { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.hub-search.sm { width: 320px; max-width: 100%; flex: none; }
.hub-search.sm input { padding: 10px 14px 10px 40px; font-size: 14px;
border: 1px solid var(--c-border); background: var(--c-bg); }
.hub-search.sm svg { left: 13px; }
.pr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* --- Sajtócsomagok --- */
.pr-freebadge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
color: var(--c-success); }
.pr-kits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (max-width: 900px) { .pr-kits { grid-template-columns: 1fr; } }
.pr-kit { display: flex; align-items: center; gap: var(--s-4);
background: var(--c-bg); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: 14px 18px; }
.pr-kit-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px;
border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-primary); }
.pr-kit { position: relative; --bracket-c: var(--c-border-strong); }
.pr-kit.bracket::before { width: 26px; height: 26px; }
.pr-kit-no { position: absolute; right: 12px; top: 9px; font-family: var(--font-serif);
font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--c-text-mute);
font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.pr-kit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-kit-title { font-size: 14.5px; font-weight: 600; }
.pr-kit-sub { font-size: 12.5px; color: var(--c-text-mute); }
/* --- Közlemény nyilvános részletes nézete --- */
.pr-item { padding: var(--s-7) var(--s-7) var(--s-9); }
.pr-free { display: flex; gap: 10px; align-items: flex-start;
background: var(--c-primary-soft); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: var(--s-4);
font-size: 13px; line-height: 1.5; color: var(--c-text-soft); }
.pr-free svg { flex: none; color: var(--c-primary); margin-top: 1px; }
/* --- Szerkesztői felület: tartalom- és képviselettáblák --- */
.cms-table { width: 100%; border-collapse: collapse; background: var(--c-bg);
border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.cms-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: var(--c-text-mute); padding: 12px 16px;
background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.cms-table td { padding: 13px 16px; border-top: 1px solid var(--c-border);
font-size: 13.5px; vertical-align: middle; }
.cms-table tbody tr:hover { background: var(--c-surface); }
.cms-title { font-weight: 600; max-width: 380px; }
.cms-date { color: var(--c-text-mute); font-size: 12.5px; white-space: nowrap; }
.cms-link { display: inline-flex; align-items: center; gap: 5px;
color: var(--c-primary); text-decoration: none; font-size: 13px; }
.cms-link:hover { text-decoration: underline; }
.cms-type { display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
font-size: 11.5px; font-weight: 600; background: var(--c-primary-soft); color: var(--c-primary); }
.cms-type.ty-alert { background: rgba(200,60,60,.12); color: var(--c-danger); }
.cms-type.ty-page { background: var(--c-surface); color: var(--c-text-soft);
border: 1px solid var(--c-border); }
.int-pubstate { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) { .cms-table { display: block; overflow-x: auto; } }
/* A ragadós fejléc ne takarja el a horgonyra ugró szekciók címét */
.hub-band[id], #news, #consular, #missions, #culture, #press { scroll-margin-top: 92px; }
/* ============================================================
Főoldal: vezető hírblokk (a tartalom nyitja az oldalt)
============================================================ */
.hub-lead { padding: var(--s-8) 0 var(--s-9); }
.hub-lead .container { padding-left: var(--s-7); padding-right: var(--s-7); }
.lead-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 1000px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-hero { display: block; text-decoration: none; color: inherit;
border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden;
background: var(--c-bg); transition: border-color .15s, box-shadow .15s; }
.lead-hero:hover { border-color: var(--c-primary); box-shadow: 0 14px 34px rgba(15,45,105,.14); }
.lead-hero-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
background: var(--c-surface); }
/* Egységesítő navy fátyol: bármilyen stock fotó a család színébe simul, és
a sarok-regisztrációs jelek világos égbolt fölött is olvashatók maradnak.
A ::after-t a .reg-marks foglalja, ezért ez ::before. */
.lead-hero-img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(155deg, rgba(20,33,65,.34), rgba(55,80,136,.14) 55%, rgba(20,33,65,.28)); }
.lead-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease; }
.lead-hero:hover .lead-hero-img img { transform: scale(1.03); }
.lead-hero-bd { display: block; padding: var(--s-5) var(--s-6) var(--s-6); }
.lead-hero-title { display: block; font-family: var(--font-display); font-size: 30px;
font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; margin: 8px 0 10px; }
.lead-hero-lead { display: block; font-size: 15.5px; line-height: 1.55; color: var(--c-text-soft); }
.lead-meta { display: flex; align-items: center; gap: 10px; }
.lead-src { display: block; margin-top: 12px; font-family: var(--font-mono);
font-size: 11.5px; color: var(--c-text-mute); }
/* vezető cikk forrás-lábléce: rombusz + város + jobbra kifutó domain */
.lead-src.src-row { display: flex; align-items: center; gap: 10px;
margin-top: var(--s-5); padding-top: var(--s-4);
border-top: 1px solid var(--c-border); font-size: 12px; }
.src-pin { flex: none; width: 9px; height: 9px; transform: rotate(45deg);
border: 1px solid var(--c-tricolor-red); }
.lead-src.src-row b { color: var(--c-text); font-weight: 600; }
.src-dom { margin-left: auto; color: var(--c-primary); font-weight: 500; }
.lead-side { display: flex; flex-direction: column; gap: var(--s-3); }
.lead-card { display: grid; grid-template-columns: 116px 1fr; gap: var(--s-4);
text-decoration: none; color: inherit; background: var(--c-bg);
border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
transition: border-color .15s, box-shadow .15s; }
.lead-card:hover { border-color: var(--c-primary); box-shadow: 0 8px 20px rgba(15,45,105,.10); }
.lead-card-img { position: relative; display: block; overflow: hidden; background: var(--c-surface); }
.lead-card-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(155deg, rgba(20,33,65,.26), rgba(55,80,136,.10) 55%, rgba(20,33,65,.22)); }
.lead-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead-card-bd { display: block; padding: 13px var(--s-4) 13px 0; }
.lead-card-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.35;
margin: 7px 0 5px; }
.lead-card .lead-src { margin-top: 0; }
@media (max-width: 520px) { .lead-card { grid-template-columns: 92px 1fr; } }
/* Kereső a képviselet-szekcióban (világos háttéren) */
.mission-search { margin-bottom: var(--s-4); }
.mission-search input { border: 1px solid var(--c-border); background: var(--c-bg); }
.hub-regions.on-light { margin-bottom: var(--s-5); }
.hub-regions.on-light .chip { background: var(--c-bg); border-color: var(--c-border);
color: var(--c-text-soft); }
.hub-regions.on-light .chip:hover { border-color: var(--c-primary); color: var(--c-text); }
.hub-regions.on-light .chip.active { background: var(--c-primary); color: var(--c-primary-ink);
border-color: var(--c-primary); }
/* Konzuli tájékoztatók – kártyás rács a lista helyett */
.consular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 1000px) { .consular-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .consular-grid { grid-template-columns: 1fr; } }
/* A kategóriát nem bal oldali színcsík jelzi (túl geneikus), hanem a kártya
TETEJÉN futó rövid osztásjel-sor, ami hoverre végigfut a kártya szélességén –
ugyanaz a „műszer"-logika, mint a vonalzó-skálán. */
.consular-card { position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 9px; padding: 18px var(--s-5) 14px;
background: var(--c-bg); border: 1px solid var(--c-border);
border-radius: var(--r-lg); text-decoration: none; color: inherit;
--kind-c: var(--c-primary);
transition: border-color .15s, transform .15s, box-shadow .15s; }
.consular-card::before { content: ""; position: absolute; left: 0; top: 0; height: 5px; width: 34%;
background: repeating-linear-gradient(to right, var(--kind-c) 0 1px, transparent 1px 6px);
transition: width .45s cubic-bezier(.2,.7,.3,1); }
.consular-card:hover { border-color: var(--kind-c);
box-shadow: 0 10px 22px rgba(15,45,105,.10); }
.consular-card:hover::before { width: 100%; }
.consular-card.k-travel { --kind-c: var(--c-accent); }
.consular-card.k-notice { --kind-c: var(--c-text-mute); }
.consular-meta { display: flex; align-items: center; gap: 10px; }
.consular-title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.consular-go { margin-top: auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; font-weight: 600; color: var(--c-primary); }
/* Eseménykártya: a kép és a cím is a részletekre visz, nem csak a gomb */
.event-card .cover.clickable { cursor: pointer; }
.event-card .title-row.link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.event-card .title-row.link:hover { color: var(--c-primary); text-decoration: underline;
text-underline-offset: 3px; }
.event-card .cover.clickable .cover-img { transition: transform .4s ease; }
.event-card .cover.clickable:hover .cover-img { transform: scale(1.03); }
/* Fejléc-védjegy: csak a minisztérium neve, nagy betűkkel (nincs URL-sor) */
.hub-brand .crest-img { height: 46px; }
.hub-brand .name { font-size: 27px; letter-spacing: -0.005em; }
@media (max-width: 860px) { .hub-brand .name { font-size: 21px; } }
/* ============================================================
Vonalas rajzi nyelv (a B koncepcióból) – megosztott motívumok.
Minden `currentColor`-ra vagy egy felülírható CSS-változóra épül,
így ugyanaz az osztály világos és navy felületen is működik.
============================================================ */
/* 45°-os sraffozás – a „rajzoló" jelölése */
.hatch { background-image: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 5px);
opacity: .32; }
/* keretezett szekciószám, jobb alsó sarok-tickkel */
.sec-num { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
position: relative; border: 1px solid var(--c-primary); border-radius: 6px;
font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--c-primary);
font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
letter-spacing: .02em; }
.sec-num::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px;
border-right: 1px solid var(--c-primary); border-bottom: 1px solid var(--c-primary); }
/* nyitott L-alakú sarok-keret – panelek bal felső sarkánál */
.bracket { position: relative; }
.bracket::before { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 52px;
border-left: 1px solid var(--bracket-c, var(--c-border));
border-top: 1px solid var(--bracket-c, var(--c-border));
border-top-left-radius: 4px; pointer-events: none; }
/* Sarok-regisztrációs jelek – mind a négy sarokban rövid, LEKEREKÍTETT vonalpár.
Egy teljes lekerekített keretet rajzolunk, és maszkkal csak a négy sarkot
hagyjuk látszani – így a sarkok íve pontosan követi a kártya sarkait. */
.reg-marks { position: relative; }
.reg-marks::after { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2;
border: 1px solid var(--reg-c, rgba(255,255,255,.6));
border-radius: var(--reg-r, 8px);
-webkit-mask:
linear-gradient(#000 0 0) left top / 16px 16px no-repeat,
linear-gradient(#000 0 0) right top / 16px 16px no-repeat,
linear-gradient(#000 0 0) left bottom / 16px 16px no-repeat,
linear-gradient(#000 0 0) right bottom / 16px 16px no-repeat;
mask:
linear-gradient(#000 0 0) left top / 16px 16px no-repeat,
linear-gradient(#000 0 0) right top / 16px 16px no-repeat,
linear-gradient(#000 0 0) left bottom / 16px 16px no-repeat,
linear-gradient(#000 0 0) right bottom / 16px 16px no-repeat; }
/* koordináta-annotáció a navy sávok alján */
.coord-note { font-size: 9.5px; font-weight: 500; letter-spacing: .24em;
text-transform: uppercase; color: rgba(202,219,245,.72); }
/* Nyíl-tick: az oldal EGYETLEN „tovább" nyila – linkben és gombban is ez van.
A doboz szélessége fix 26px, csak a vonal és a hegye nyúlik ki benne, így a
gomb szélessége hoverre nem változik (a korábbi `width: 16→26px` a gombot
szélesítette, és az alulról érkező egér alól kimozdította). */
.arw { display: inline-block; position: relative; flex: none; width: 26px; height: 1px; }
.arw::before { content: ""; position: absolute; left: 0; right: 10px; top: 0; height: 1px;
background: currentColor; transition: right .28s var(--ease-ctl); }
.arw::after { content: ""; position: absolute; right: 10px; top: -2.5px; width: 6px; height: 6px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: rotate(45deg); transition: right .28s var(--ease-ctl); }
a:hover .arw::before, a:hover .arw::after,
button:hover .arw::before, button:hover .arw::after { right: 0; }
/* építészeti szakaszelválasztó – rombusz + kifutó osztásjelek */
.arch-rule { position: relative; height: 1px; background: var(--c-border); margin: var(--s-9) 0; }
.arch-rule::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
margin: -5px 0 0 -5px; border: 1px solid var(--c-primary); transform: rotate(45deg);
background: var(--c-bg); }
.arch-rule::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 9px;
background: repeating-linear-gradient(to right, var(--c-border) 0 1px, transparent 1px 28px);
-webkit-mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000);
mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000); }
/* hajszálvonalas lista – nincs kártya, csak elválasztó + dátum + cím */
.hair-list { list-style: none; margin: 0; padding: 0; }
.hair-list li + li { border-top: 1px solid var(--c-border); }
.hair-list a { display: flex; gap: var(--s-4); align-items: baseline; padding: 11px 0;
text-decoration: none; color: inherit; }
.hair-list a:hover .hl-title { color: var(--c-primary); }
.hair-list .hl-date { flex: none; font-family: var(--font-mono); font-size: 11px;
color: var(--c-text-mute); }
.hair-list .hl-title { font-size: 14px; font-weight: 500; line-height: 1.4; }
/* két hasáb: a felső sor kap felülvonalat, hogy a hasábok egyformán induljanak */
.hair-list.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
.hair-list.two-col li + li { border-top: 0; }
.hair-list.two-col li { border-bottom: 1px solid var(--c-border); }
@media (max-width: 900px) { .hair-list.two-col { grid-template-columns: 1fr; } }
.short-news { margin-top: var(--s-7); }
/* szekciófej: keretezett sorszám + szerif cím + kifutó vonal + meta + link */
.sec-head-l { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.sec-flexline { flex: 1; height: 1px; min-width: 16px; background: var(--c-border); }
.sec-meta { flex: none; font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
text-transform: uppercase; color: var(--c-text-mute); }
.sec-all { flex: none; display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600; color: var(--c-primary);
text-decoration: none; white-space: nowrap; }
.sec-all:hover { color: var(--c-primary-hov); }
@media (max-width: 760px) {
.hub-section-head { flex-wrap: wrap; }
.sec-flexline { display: none; }
.sec-meta { order: 3; }
}
/* oldalsáv-fejléc: felirat + kifutó vonal */
.side-hd { display: flex; align-items: center; gap: var(--s-3);
margin: var(--s-6) 0 var(--s-2); font-size: 11px; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-mute); }
.side-hd .rule { flex: 1; height: 1px; background: var(--c-border); }
/* sorszámozott hírlista bélyegképpel */
.num-list { list-style: none; margin: 0; padding: 0; }
.num-list li + li { border-top: 1px solid var(--c-border); }
.num-list a { display: grid; grid-template-columns: 60px 1fr; align-items: center;
gap: var(--s-4); padding: 11px 0; text-decoration: none; color: inherit; }
.num-list a:hover .nl-title { color: var(--c-primary); }
/* sorszám-dobozka a bélyegkép bal felső sarkán (B koncepció) */
.num-list .nl-idx { position: absolute; left: 0; top: 0; z-index: 2;
padding: 1px 6px; background: rgba(255,255,255,.94);
font-family: var(--font-serif); font-size: 13px; font-weight: 600;
color: var(--c-primary); letter-spacing: .06em;
font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
border-bottom-right-radius: 7px; }
.num-list .nl-thumb { position: relative; width: 60px; height: 46px; border-radius: 6px;
overflow: hidden; background: var(--c-surface); }
.num-list .nl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.num-list .nl-main { min-width: 0; }
.num-list .nl-title { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.num-list .nl-date { display: block; margin-top: 3px; font-family: var(--font-mono);
font-size: 10.5px; color: var(--c-text-mute); }
/* ============================================================
Hero – navy sáv, háttérben az álló glóbusszal
============================================================ */
.hero {
position: relative; overflow: hidden;
background: linear-gradient(120deg, #18284D 0%, #1e3160 46%, #375088 100%);
color: #fff;
}
/* CSAK függőleges padding (nem shorthand!) és semmi saját max-width: az oldalsó
térközt és a szélességet a .container adja. Shorthanddel a vízszintes padding
is nullázódna, és a hero kicsúszna a többi szekció rácsából. */
.hero-in { position: relative; z-index: 2;
padding-top: var(--s-9); padding-bottom: var(--s-8); }
/* Kéthasábos hero: szövegoszlop | fotókártya + panel. A kettő közti résbe
esik a glóbusz Budapest-csomópontja. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
gap: clamp(28px, 5vw, 76px); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }
/* fotókártya + navy panel párosa */
.hero-pair { position: relative; }
.hero-pair .stamp { position: absolute; top: -16px; left: -16px; width: 52px; height: 52px; z-index: 2;
border-left: 1px solid rgba(198,214,240,.55); border-top: 1px solid rgba(198,214,240,.55);
border-top-left-radius: var(--r-lg); pointer-events: none; }
/* Cikk-kártya: fotó + rajta a cím. A fotó egységesítő navy fátylat kap, hogy
bármilyen kép a család színébe simuljon, a szöveg alatt pedig sötét lejtő fut. */
.photo-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
background: #0e1830; text-decoration: none; color: inherit;
box-shadow: 0 18px 44px rgba(6,14,32,.42); }
.photo-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.photo-card:hover img { transform: scale(1.035); }
.photo-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(to top, rgba(8,15,32,.94) 0%, rgba(8,15,32,.72) 26%, rgba(8,15,32,0) 62%),
linear-gradient(155deg, rgba(20,33,65,.34), rgba(55,80,136,.16) 55%, rgba(20,33,65,.30)); }
.photo-card .pc-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
display: block; padding: var(--s-6) var(--s-6) var(--s-5); }
.photo-card .pc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.photo-card .pc-meta .pc-sep { width: 16px; height: 1px; background: rgba(255,255,255,.45); flex: none; }
.photo-card .pc-date { font-size: 11px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.8); }
.photo-card .pc-title { display: block; font-size: 22px; font-weight: 600; line-height: 1.22;
letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.photo-card:hover .pc-title { text-decoration: underline; text-underline-offset: 4px;
text-decoration-color: rgba(255,255,255,.5); }
.photo-card .pc-src { display: block; margin-top: 10px; font-family: var(--font-mono);
font-size: 11px; color: rgba(255,255,255,.6); }
@media (max-width: 620px) { .photo-card .pc-title { font-size: 18px; } }
.info-panel { position: relative; overflow: hidden; margin-top: 12px;
background: var(--c-primary-hov); border-radius: var(--r-lg);
padding: var(--s-5) var(--s-6); --bracket-c: rgba(255,255,255,.5); }
.info-panel::before { left: 14px; top: 14px; width: 42px; height: 42px; }
.info-panel .hatch { position: absolute; right: -10px; top: -10px; width: 110px; height: 110px;
color: #fff; opacity: .13; }
.info-panel .ttl { position: relative; display: flex; align-items: center; gap: var(--s-3);
margin-bottom: var(--s-3); font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: rgba(255,255,255,.72); }
.info-panel .ttl .rule { flex: 1; height: 1px; background: rgba(255,255,255,.3); }
.info-panel ul { position: relative; list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.info-panel li a { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0;
color: #fff; font-size: 13.5px; font-weight: 500; text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.22); }
.info-panel li a .idx { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); }
.info-panel li a .lbl, .hero-link .lbl { text-decoration: underline; text-underline-offset: 4px;
text-decoration-color: rgba(255,255,255,.45); transition: text-decoration-color .2s ease; }
.info-panel li a:hover .lbl, .hero-link:hover .lbl { text-decoration-color: #fff; }
.info-panel li a .arw { margin-left: auto; }
.info-panel .pill-btn { position: relative; }
/* A glóbusz-réteg kitölti a sávot; a canvas maga lóg ki a jobb alsó irányba.
Állókép: egyszer rajzolódik, és csak beúszik – nincs futásidejű költsége.
A két oldala maszkkal a sáv színébe olvad, hogy ne legyen kemény gömbperem:
csak a középső sáv marad, ahol Budapest ül. */
.hero-globe { position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: 0; transition: opacity 900ms ease;
-webkit-mask-image: linear-gradient(to right, transparent 30%, #000 47%, #000 60%, transparent 78%);
mask-image: linear-gradient(to right, transparent 30%, #000 47%, #000 60%, transparent 78%); }
.hero-globe.on { opacity: 1; }
.hero-globe canvas { display: block; }
@media (prefers-reduced-motion: reduce) {
.hero-globe { transition: none; }
}
/* A két oldal elhalványítását a .hero-globe maszkja végzi, ezért itt már csak
a szövegoszlop alatti finom sötétítés marad – különben duplán mosnánk. */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, rgba(24,40,77,.92) 0%, rgba(24,40,77,.86) 26%,
rgba(24,40,77,.58) 44%, rgba(24,40,77,.32) 58%, rgba(24,40,77,.46) 84%);
}
/* Mobilon a szöveg a teljes szélességet kitölti – ott függőleges scrim véd. */
@media (max-width: 900px) {
.hero::after {
background: linear-gradient(180deg, rgba(24,40,77,.94) 0%, rgba(24,40,77,.86) 44%,
rgba(24,40,77,.60) 76%, rgba(24,40,77,.38) 100%);
}
}
.hero-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 16px 7px 13px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.34);
font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-tricolor-red); }
/* 1.06 túl szoros volt: a „gy" leszárai beleértek a következő sor betűtestébe. */
.hero-title { margin: var(--s-5) 0 var(--s-4); line-height: 1.28; letter-spacing: -0.02em; }
.hero-title .l1, .hero-title .l2 { display: block; font-family: var(--font-display);
font-size: clamp(34px, 3.7vw, 50px); }
.hero-title .l1 { font-weight: 700; color: #fff; }
/* Tömör szín, NEM alfa: a glóbusz vonalai átütöttek a félig átlátszó szövegen. */
.hero-title .l2 { font-weight: 300; color: #B4C4E2; }
.hero-lead { max-width: 560px; font-size: 17px; line-height: 1.55; font-weight: 400;
color: #E4EAF6; margin: 0 0 var(--s-6); }
.hero-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
/* Ugyanaz a szöveglink, mint a „Gyors elérés" panel tételei – a stílust az
`.info-panel li a` szabályaival közösen kapja (lásd feljebb). */
.hero-link { display: inline-flex; align-items: center; gap: var(--s-3); color: #fff;
text-decoration: none; font-size: 15px; font-weight: 500; }
.hero-stats { display: flex; gap: var(--s-7); margin: var(--s-8) 0 0; padding: 0; flex-wrap: wrap; }
.hero-stats > div { position: relative; padding-right: var(--s-7); }
.hero-stats > div + div { border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--s-6); }
.hero-stats dt { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.hero-stats dd { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .1em;
text-transform: uppercase; color: #AEBED9; }
@media (max-width: 620px) {
.hero-stats { gap: var(--s-4); }
.hero-stats > div + div { padding-left: var(--s-4); }
.hero-stats dt { font-size: 26px; }
}
/* ==========================================================================
/admin – szerkesztői felület
A panel-anatómia a Laravel Filamentet követi (ez lesz az éles rendszer),
a rajzolat viszont a portálé: navy, végig Poppins (az adminban NINCS szerif –
a Cormorant a nyilvános oldal wordmarkjáé és szekciócímeié marad),
hajszálvonalak, mono metaadat, éles (4–6px) sarkok.
Névtér: .adm-* – nem keveredhet a .int-* / .hub-* / .pr-* szabályokkal.
========================================================================== */
.adm {
--adm-side: 268px;
--adm-line: #e3e7ef;
--adm-line-soft: #edf0f5;
--adm-ink: #18284d;
--adm-mute: #6b7280;
--adm-bg: #f4f6fa;
display: grid;
grid-template-columns: var(--adm-side) minmax(0, 1fr);
min-height: 100vh;
background: var(--adm-bg);
font-family: var(--font-display);
color: var(--c-text);
}
/* ---- oldalsáv ---------------------------------------------------------- */
.adm-side {
background: #fff;
border-right: 1px solid var(--adm-line);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.adm-side-brand {
display: flex; align-items: center; gap: 11px;
padding: 18px 18px 16px; border-bottom: 1px solid var(--adm-line);
position: sticky; top: 0; background: #fff; z-index: 2;
}
.adm-side-brand .crest-img { height: 34px; width: auto; }
.adm-side-t { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600;
letter-spacing: -.005em; color: var(--adm-ink); line-height: 1.2; }
.adm-side-s { display: inline-block; margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
color: var(--c-warning); background: var(--c-warning-soft); padding: 1px 6px; border-radius: 2px; }
.adm-side-nav { padding: 10px 10px 20px; flex: 1; }
.adm-navgroup { margin-bottom: 14px; }
.adm-navgroup-h {
display: flex; align-items: center; gap: 8px;
padding: 10px 8px 6px; font-size: 10px; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: #9aa3b4;
}
.adm-navgroup-h::after { content: ""; flex: 1; height: 1px; background: var(--adm-line-soft); }
.adm-navlink {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none;
font: inherit; font-size: 13.5px; font-weight: 500; color: #4b5563;
cursor: pointer; text-align: left; position: relative;
}
.adm-navlink > span:first-of-type { flex: 1; }
.adm-navlink svg { color: #9aa3b4; flex: none; }
.adm-navlink:hover { background: #f3f5f9; color: var(--adm-ink); }
.adm-navlink:hover svg { color: #6b7280; }
.adm-navlink.on { background: var(--c-primary-soft); color: var(--adm-ink); font-weight: 600; }
.adm-navlink.on svg { color: var(--c-primary); }
.adm-navlink.on::before {
content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
width: 2px; background: var(--c-primary);
}
.adm-navcount { font-size: 10.5px; color: #9aa3b4; background: #f3f5f9; padding: 1px 6px; border-radius: 8px; }
.adm-navlink.on .adm-navcount { background: #fff; color: var(--c-primary); }
.adm-side-foot { padding: 10px; border-top: 1px solid var(--adm-line); }
/* ---- fejléc ------------------------------------------------------------ */
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: var(--s-4);
padding: 10px var(--s-6); background: rgba(255,255,255,.92);
backdrop-filter: blur(8px); border-bottom: 1px solid var(--adm-line);
}
.adm-globalsearch { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; gap: 9px;
padding: 7px 11px; background: #f4f6fa; border: 1px solid var(--adm-line); border-radius: var(--r-md); }
.adm-globalsearch svg { color: #9aa3b4; flex: none; }
.adm-globalsearch input { flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; outline: none; }
.adm-globalsearch:focus-within { border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 3px var(--c-primary-soft); }
.adm-gs-results {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md);
box-shadow: var(--sh-3); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.adm-gs-item { width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
padding: 8px 12px; border: 0; border-bottom: 1px solid var(--adm-line-soft); background: none;
font: inherit; text-align: left; cursor: pointer; }
.adm-gs-item:hover { background: #f4f6fa; }
.adm-gs-res { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.adm-gs-title { font-size: 13px; color: var(--c-text); }
.adm-top-a { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.adm-user { position: relative; }
.adm-userbtn { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px;
border: 1px solid transparent; border-radius: var(--r-md); background: none; font: inherit; cursor: pointer; }
.adm-userbtn:hover { background: #f4f6fa; border-color: var(--adm-line); }
.adm-user-t { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.adm-user-t b { font-size: 12.5px; font-weight: 600; }
.adm-user-t i { font-size: 11px; font-style: normal; color: var(--adm-mute); }
.adm-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
background: var(--c-primary-soft); color: var(--adm-ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.adm-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
background: var(--c-danger); border: 1.5px solid #fff; }
.adm-content { padding: var(--s-6) var(--s-6) 80px; }
.adm-page { max-width: 1400px; margin: 0 auto; }
/* ---- oldalfejléc ------------------------------------------------------- */
.adm-page-hd { display: flex; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap; }
.adm-page-hd-t { min-width: 0; flex: 1; }
.adm-crumb { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 5px; }
.adm-page-hd h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--adm-ink);
line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.adm-page-hd p { font-size: 13.5px; color: var(--c-text-soft); margin: 7px 0 0; max-width: 70ch; }
.adm-page-hd-a { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.adm-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s-3);
background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--c-primary); cursor: pointer; }
.adm-back:hover { text-decoration: underline; }
/* ---- gombok ------------------------------------------------------------ */
.adm-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
border-radius: var(--r-ctl); border: 1px solid transparent; font: inherit;
font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.adm-btn:focus-visible, .adm-input:focus-visible, .adm-chip:focus-visible {
outline: 3px solid var(--c-focus); outline-offset: 1px;
}
.adm-btn { transition: background var(--t-ctl) var(--ease-ctl), border-color var(--t-ctl) var(--ease-ctl),
color var(--t-ctl) var(--ease-ctl), box-shadow var(--t-ctl) var(--ease-ctl), transform var(--t-ctl) var(--ease-ctl); }
.adm-btn:active { transition-duration: .06s; }
.adm-btn.primary { background: var(--adm-ink); color: #fff; }
.adm-btn.primary:hover { background: #0f1c3a; }
.adm-btn.secondary { background: #fff; border-color: var(--c-border-strong); color: var(--c-text); }
.adm-btn.secondary:hover { background: #f4f6fa; border-color: #b9c2d2; }
.adm-btn.ghost { background: none; border-color: transparent; color: var(--c-text-soft); }
.adm-btn.ghost:hover { background: #eef1f6; color: var(--adm-ink); }
.adm-btn.ghost.on { background: var(--c-primary-soft); color: var(--c-primary); }
.adm-btn.danger, .adm-btn.ghost.danger { color: var(--c-danger); }
.adm-btn.ghost.danger:hover { background: var(--c-danger-soft); }
.adm-btn.sm { padding: 5px 10px; font-size: 12px; }
.adm-btn:disabled { opacity: .45; cursor: default; }
.adm-icobtn { display: inline-grid; place-items: center; width: 30px; height: 30px; position: relative;
border: 0; border-radius: var(--r-ctl); background: none; color: var(--c-text-mute); cursor: pointer; }
.adm-icobtn:hover { background: #eef1f6; color: var(--adm-ink); }
.adm-icobtn.sm { width: 24px; height: 24px; }
.adm-icobtn.danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.adm-icobtn:disabled { opacity: .3; cursor: default; }
.adm-filt-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-primary);
color: #fff; font-size: 10px; font-weight: 600; display: inline-grid; place-items: center; }
/* ---- jelvények, apró jelek --------------------------------------------- */
.adm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 8px;
border-radius: 3px; font-size: 11.5px; font-weight: 500; background: #eef1f6; color: #4b5563; white-space: nowrap; }
.adm-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.adm-badge.t-success { background: var(--c-success-soft); color: var(--c-success); }
.adm-badge.t-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.adm-badge.t-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.adm-badge.t-primary { background: var(--c-primary-soft); color: var(--c-primary); }
.adm-badge.t-muted { background: #eef1f6; color: #6b7280; }
.adm-badge.t-outline { background: none; border: 1px solid var(--c-border-strong); color: var(--c-text-soft); }
.adm-tagrow { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.adm-tag { display: inline-block; padding: 2px 7px; border: 1px solid var(--adm-line);
border-radius: 3px; font-size: 11px; color: var(--c-text-soft); background: #fafbfd; }
.adm-tag.sm { font-size: 10px; padding: 1px 5px; font-family: var(--font-mono); }
.adm-tag.hq { border-color: var(--c-primary-soft); background: var(--c-primary-soft); color: var(--c-primary); }
.adm-mute { color: #9aa3b4; }
.adm-pin { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 2px; vertical-align: 1px;
background: var(--c-primary); color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.adm-topic { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.adm-topic i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.adm-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: none;
border: 1px solid rgba(0,0,0,.08); vertical-align: -2px; }
.adm-flag.lg { width: 28px; height: 20px; }
.adm-linkcell { color: var(--c-primary); }
.adm-misscell { display: inline-flex; align-items: center; gap: 7px; }
.adm-iconpill, .adm-socialpill { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); }
.adm-socialpill.p-fb { background: #e7f0fd; color: #1877f2; }
.adm-socialpill.p-ig { background: #fdeaf3; color: #c13584; }
.adm-socialpill.p-x { background: #eceef1; color: #111; }
.adm-socialpill.p-yt { background: #fdeaea; color: #ff0000; }
.adm-socialpill.p-in { background: #e7f0f8; color: #0a66c2; }
/* ---- értesítő sávok ---------------------------------------------------- */
.adm-notice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: var(--s-4);
background: #fff; border: 1px solid var(--adm-line); border-left: 3px solid var(--c-primary);
border-radius: var(--r-sm); font-size: 13px; color: var(--c-text-soft); }
.adm-notice svg { color: var(--c-primary); flex: none; }
.adm-notice.sync { border-left-color: var(--c-accent); }
.adm-notice.sync svg { color: var(--c-accent); }
.adm-notice > span:first-of-type { flex: 1; }
.adm-notice a.adm-btn { text-decoration: none; }
.adm-notice-act { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.adm-notice-act .mono { font-size: 11.5px; color: var(--adm-mute); }
/* ---- statisztika-sor --------------------------------------------------- */
.adm-statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.adm-stat { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
padding: 16px 18px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md);
font: inherit; text-align: left; cursor: default; overflow: hidden; }
.adm-stat.clickable { cursor: pointer; }
.adm-stat.clickable:hover { border-color: var(--c-primary); box-shadow: var(--sh-1); }
.adm-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-border); }
.adm-stat.t-warning::before { background: var(--c-warning); }
.adm-stat-l { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--adm-mute); }
.adm-stat-v { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1;
letter-spacing: -.02em; color: var(--adm-ink); font-variant-numeric: lining-nums tabular-nums; }
.adm-stat-s { font-size: 11.5px; color: #9aa3b4; }
.adm-stat-i { position: absolute; right: 14px; top: 14px; color: #dfe4ee; }
/* ---- vezérlőpult ------------------------------------------------------- */
.adm-dashgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.adm-dashcol { display: flex; flex-direction: column; gap: var(--s-4); }
.adm-panel { background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md); overflow: hidden; }
.adm-panel-hd { display: flex; align-items: center; gap: var(--s-3); padding: 13px 16px; border-bottom: 1px solid var(--adm-line-soft); }
.adm-panel-hd h3 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
letter-spacing: -.005em; color: var(--adm-ink); margin: 0; }
.adm-panel-hd p { font-size: 12px; color: var(--adm-mute); margin: 2px 0 0; }
.adm-panel-act { margin-left: auto; }
.adm-panel-bd { padding: 14px 16px; }
.adm-panel-bd.flush { padding: 0; }
.adm-queue { list-style: none; margin: 0; padding: 0; }
.adm-queue li { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--adm-line-soft); }
.adm-queue li:last-child { border-bottom: 0; }
.adm-queue-i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
background: var(--c-primary-soft); color: var(--c-primary); }
.adm-queue-i.t-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.adm-queue-l { flex: 1; font-size: 13.5px; }
.adm-upcoming { list-style: none; margin: 0; padding: 0; }
.adm-upcoming li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--adm-line-soft); }
.adm-upcoming li:last-child { border-bottom: 0; }
.adm-upcoming-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-daybox { width: 44px; flex: none; text-align: center; border: 1px solid var(--adm-line); border-radius: var(--r-sm); padding: 5px 0; }
.adm-daybox b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600;
line-height: 1.1; letter-spacing: -.02em; color: var(--adm-ink); font-variant-numeric: lining-nums; }
.adm-daybox i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--adm-mute); }
.adm-bars { list-style: none; margin: 0; padding: 0; }
.adm-bars li { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 13px; }
.adm-bars-l { flex: none; width: 140px; text-align: left; background: none; border: 0; padding: 0; font: inherit;
font-size: 13px; color: var(--c-text); cursor: pointer; }
.adm-bars-l:hover { color: var(--c-primary); text-decoration: underline; }
.adm-bars-track { flex: 1; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.adm-bars-track i { display: block; height: 100%; background: var(--c-primary); }
.adm-bars .mono { font-size: 11.5px; color: var(--adm-mute); min-width: 44px; text-align: right; }
.adm-activity { list-style: none; margin: 0; padding: 0; }
.adm-activity li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--adm-line-soft); }
.adm-activity li:last-child { border-bottom: 0; }
.adm-activity-s { font-size: 13px; }
.adm-activity-m { grid-column: 2; font-size: 11px; color: #9aa3b4; }
.adm-meter { display: flex; align-items: center; gap: 8px; }
.adm-meter-bar { width: 72px; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; flex: none; }
.adm-meter-bar i { display: block; height: 100%; background: var(--c-primary); }
.adm-meter-bar i.warn { background: var(--c-warning); }
.adm-meter-bar i.full { background: var(--c-danger); }
.adm-meter .mono { font-size: 11.5px; color: var(--adm-mute); }
/* ---- táblázat-kártya --------------------------------------------------- */
.adm-tablecard { background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md); overflow: hidden; }
.adm-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--adm-line); overflow-x: auto; }
.adm-tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 10px; border: 0; background: none;
font: inherit; font-size: 13px; font-weight: 500; color: var(--c-text-soft); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.adm-tab:hover { color: var(--adm-ink); }
.adm-tab.on { color: var(--adm-ink); font-weight: 600; border-bottom-color: var(--c-primary); }
.adm-tab-n { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 8px;
background: #eef1f6; color: var(--adm-mute); }
.adm-tab.on .adm-tab-n { background: var(--c-primary-soft); color: var(--c-primary); }
.adm-toolbar { display: flex; align-items: center; gap: var(--s-3); padding: 11px 14px; border-bottom: 1px solid var(--adm-line-soft); }
.adm-toolbar-sp { flex: 1; }
.adm-searchbox { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 260px;
background: #f7f9fc; border: 1px solid var(--adm-line); border-radius: var(--r-ctl); }
.adm-searchbox svg { color: #9aa3b4; flex: none; }
.adm-searchbox input { border: 0; background: none; font: inherit; font-size: 13px; outline: none; width: 100%; }
.adm-searchbox:focus-within { border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 3px var(--c-primary-soft); }
.adm-count { font-size: 11.5px; color: var(--adm-mute); }
.adm-filterbar { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap;
padding: 12px 14px; background: #f7f9fc; border-bottom: 1px solid var(--adm-line-soft); }
.adm-filter { display: flex; flex-direction: column; gap: 4px; }
.adm-filter > span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-mute); }
.adm-filter select { padding: 6px 9px; border: 1px solid var(--adm-line); border-radius: var(--r-ctl);
background: #fff; font: inherit; font-size: 13px; min-width: 170px; }
.adm-filter-ss { min-width: 220px; }
.adm-filter-ss .adm-tin-box { min-height: 32px; padding: 2px 8px; }
.adm-bulkpanel-in .adm-ss { min-width: 260px; }
.adm-bulkbar { display: flex; align-items: center; gap: var(--s-3); padding: 9px 14px;
background: var(--c-primary-soft); border-bottom: 1px solid var(--adm-line); font-size: 13px; }
.adm-bulkbar-a { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-bulkbar > .adm-icobtn { margin-left: auto; }
.adm-tablewrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th { text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase; color: var(--adm-mute);
background: #fafbfd; border-bottom: 1px solid var(--adm-line); white-space: nowrap; }
.adm-table td { padding: 11px 12px; border-bottom: 1px solid var(--adm-line-soft); font-size: 13px; vertical-align: middle; }
.adm-table tbody tr { cursor: pointer; }
.adm-table tbody tr:hover { background: #f7f9fc; }
.adm-table tbody tr.sel { background: var(--c-primary-soft); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table .a-center, .adm-table th.a-center { text-align: center; }
.adm-table .a-right, .adm-table th.a-right { text-align: right; }
.adm-table .mono { font-family: var(--font-mono); font-size: 11.5px; }
.adm-td-check { width: 42px; padding-right: 0 !important; }
.adm-td-act { width: 44px; text-align: right; }
.adm-th-sort { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0;
font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: inherit; cursor: pointer; }
.adm-th-sort:hover, .adm-th-sort.on { color: var(--adm-ink); }
.adm-th-arrow { font-size: 10px; opacity: .5; }
.adm-th-sort.on .adm-th-arrow { opacity: 1; color: var(--c-primary); }
.adm-table.mini { border: 1px solid var(--adm-line); border-radius: var(--r-sm); min-width: 660px; }
.adm-table.mini tbody tr { cursor: default; }
.adm-table.mini tbody tr.clickable { cursor: pointer; }
.adm-mini-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--adm-mute);
border: 1px dashed var(--adm-line); border-radius: var(--r-sm); }
.adm-titlecell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-titlemain { display: block; font-size: 13.5px; font-weight: 500; color: var(--c-text); }
.adm-titlesub { display: block; font-size: 11.5px; color: var(--adm-mute); margin-top: 1px;
max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-titlethumb, .adm-mediathumb { width: 44px; height: 32px; flex: none; border-radius: 3px; object-fit: cover;
background: #eef1f6; border: 1px solid var(--adm-line); }
.adm-mediathumb { position: relative; display: grid; place-items: center; overflow: hidden; color: #9aa3b4; }
.adm-mediathumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-mediaplay { position: absolute; width: 0; height: 0; border-left: 9px solid #fff;
border-top: 6px solid transparent; border-bottom: 6px solid transparent;
filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.adm-check { width: 17px; height: 17px; flex: none; display: grid; place-items: center;
border: 1.5px solid var(--c-border-strong); border-radius: 3px; background: #fff; cursor: pointer; color: #fff; padding: 0; }
.adm-check.on, .adm-check.ind { background: var(--c-primary); border-color: var(--c-primary); }
.adm-check-dash { width: 8px; height: 2px; background: #fff; border-radius: 1px; }
.adm-rowmenu { position: relative; }
.adm-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px;
background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 4px; }
.adm-menu.right { right: 0; top: calc(100% + 6px); }
.adm-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px;
border: 0; border-radius: 3px; background: none; font: inherit; font-size: 13px; color: var(--c-text);
text-align: left; cursor: pointer; }
.adm-menu-item:hover { background: #f4f6fa; }
.adm-menu-item svg { color: var(--adm-mute); }
.adm-menu-item.danger { color: var(--c-danger); }
.adm-menu-item.danger svg { color: var(--c-danger); }
.adm-menu-item.danger:hover { background: var(--c-danger-soft); }
.adm-menu-sep { height: 1px; background: var(--adm-line-soft); margin: 4px 0; }
.adm-pager { display: flex; align-items: center; gap: var(--s-4); padding: 11px 14px; border-top: 1px solid var(--adm-line);
font-size: 12.5px; color: var(--c-text-soft); flex-wrap: wrap; }
.adm-pager-per { display: flex; align-items: center; gap: 6px; }
.adm-pager-per select { padding: 4px 7px; border: 1px solid var(--adm-line); border-radius: var(--r-ctl); font: inherit; font-size: 12.5px; }
.adm-pager-nav { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.adm-pgbtn { min-width: 30px; padding: 5px 9px; border: 1px solid var(--adm-line); border-radius: var(--r-ctl);
background: #fff; font: inherit; font-size: 12.5px; color: var(--c-text-soft); cursor: pointer; }
.adm-pgbtn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.adm-pgbtn.on { background: var(--adm-ink); border-color: var(--adm-ink); color: #fff; }
.adm-pgbtn:disabled { opacity: .4; cursor: default; }
.adm-pgdots { padding: 0 3px; color: var(--adm-mute); }
.adm-empty { padding: 48px 20px; text-align: center; }
.adm-empty-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
background: #f4f6fa; color: #9aa3b4; margin-bottom: 12px; }
.adm-empty-t { font-size: 15px; font-weight: 500; color: var(--c-text); margin: 0 0 4px; }
.adm-empty-h { font-size: 13px; color: var(--adm-mute); margin: 0; }
/* ---- űrlap ------------------------------------------------------------- */
.adm-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-4); align-items: start; }
.adm-formgrid.single { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.adm-formmain, .adm-formside { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.adm-formside { position: sticky; top: 76px; }
.adm-fsection { background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md); overflow: hidden; }
.adm-fsection-hd { display: flex; align-items: flex-start; gap: var(--s-3); padding: 14px 18px; border-bottom: 1px solid var(--adm-line-soft); }
.adm-fsection.closed .adm-fsection-hd { border-bottom: 0; }
.adm-fsection-hd h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600;
letter-spacing: -.005em; color: var(--adm-ink); margin: 0; }
.adm-fsection-hd p { font-size: 12.5px; color: var(--adm-mute); margin: 3px 0 0; max-width: 66ch; }
/* A Chevron ikon alaphelyzetben JOBBRA mutat: csukva jobbra, nyitva lefelé. */
.adm-fsection-chev { margin-left: auto; color: var(--adm-mute); transition: transform .15s; transform: rotate(90deg); }
.adm-fsection.closed .adm-fsection-chev { transform: rotate(0deg); }
.adm-fsection [data-collapsible] { cursor: pointer; }
.adm-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); padding: 18px; }
.adm-formside .adm-fgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: 14px 16px; }
.adm-field { min-width: 0; }
.adm-field.span-2 { grid-column: span 2; }
.adm-formside .adm-field.span-2 { grid-column: span 1; }
.adm-field > label { display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 600;
color: var(--c-text); margin-bottom: 6px; }
.adm-field > label:empty { display: none; }
.adm-req { color: var(--c-danger); }
.adm-fhint { font-weight: 400; font-size: 11px; color: var(--adm-mute); }
.adm-help { font-size: 11.5px; color: var(--adm-mute); margin: 5px 0 0; line-height: 1.45; }
.adm-fdivider { grid-column: span 2; font-size: 11px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--adm-mute); border-top: 1px solid var(--adm-line-soft); padding-top: 14px; }
.adm-input { width: 100%; padding: 8px 11px; border: 1px solid var(--adm-line); border-radius: var(--r-ctl);
background: #fff; font: inherit; font-size: 13.5px; color: var(--c-text); outline: none; }
.adm-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.adm-input:disabled { background: #f4f6fa; color: var(--adm-mute); }
textarea.adm-input { resize: vertical; line-height: 1.55; }
select.adm-input { appearance: none; background-image:
linear-gradient(45deg, transparent 50%, #9aa3b4 50%), linear-gradient(135deg, #9aa3b4 50%, transparent 50%);
background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.adm-affix { display: flex; align-items: stretch; }
.adm-affix .adm-input { border-radius: 0; }
.adm-affix > :first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.adm-affix > :last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.adm-prefix, .adm-suffix { display: flex; align-items: center; padding: 0 10px; background: #f4f6fa;
border: 1px solid var(--adm-line); font-family: var(--font-mono); font-size: 11.5px; color: var(--adm-mute); white-space: nowrap; }
.adm-prefix { border-right: 0; }
.adm-suffix { border-left: 0; }
.adm-static { padding: 8px 0; font-size: 13.5px; color: var(--c-text-soft); font-family: var(--font-mono); }
.adm-colorrow { display: flex; gap: 8px; align-items: center; }
.adm-colorrow input[type="color"] { width: 42px; height: 36px; padding: 2px; border: 1px solid var(--adm-line);
border-radius: var(--r-ctl); background: #fff; cursor: pointer; }
.adm-toggle { width: 38px; height: 21px; flex: none; padding: 2px; border: 0; border-radius: 11px;
background: #cfd6e2; cursor: pointer; display: flex; align-items: center; transition: background .15s; }
.adm-toggle.on { background: var(--c-success); }
.adm-toggle-knob { width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
transition: transform .15s; }
.adm-toggle.on .adm-toggle-knob { transform: translateX(17px); }
.adm-toggle:disabled { opacity: .5; cursor: default; }
.adm-toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text-soft); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--adm-line);
border-radius: var(--r-ctl); background: #fff; font: inherit; font-size: 12.5px; color: var(--c-text-soft); cursor: pointer; }
.adm-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.adm-chip.on { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); font-weight: 500; }
.adm-i18n { border: 1px solid var(--adm-line); border-radius: var(--r-ctl); overflow: hidden; }
.adm-i18n-tabs { display: flex; gap: 0; background: #f7f9fc; border-bottom: 1px solid var(--adm-line); }
.adm-i18n-tab { position: relative; padding: 5px 13px; border: 0; border-right: 1px solid var(--adm-line);
background: none; font: inherit; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .06em; color: var(--adm-mute); cursor: pointer; }
.adm-i18n-tab.on { background: #fff; color: var(--adm-ink); box-shadow: inset 0 -2px 0 var(--c-primary); }
.adm-i18n-warn { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-warning); margin-left: 5px; }
.adm-i18n .adm-input, .adm-i18n .adm-rt { border: 0; border-radius: 0; }
.adm-i18n .adm-input:focus { box-shadow: none; }
.adm-i18n .adm-affix { border: 0; }
.adm-i18n .adm-affix .adm-prefix { border: 0; border-right: 1px solid var(--adm-line); }
.adm-rt { border: 1px solid var(--adm-line); border-radius: var(--r-ctl); overflow: hidden; background: #fff; }
.adm-rt-bar { display: flex; align-items: center; gap: 2px; padding: 5px 7px; background: #f7f9fc;
border-bottom: 1px solid var(--adm-line); flex-wrap: wrap; }
.adm-rt-btn { min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 3px; background: none;
font: inherit; font-size: 12.5px; color: var(--c-text-soft); cursor: pointer; }
.adm-rt-btn:hover { background: #e6eaf2; color: var(--adm-ink); }
.adm-rt-btn.b { font-weight: 700; } .adm-rt-btn.i { font-style: italic; } .adm-rt-btn.u { text-decoration: underline; }
.adm-rt-sep { width: 1px; height: 16px; background: var(--adm-line); margin: 0 3px; }
.adm-rt-area { padding: 12px 14px; font-size: 13.5px; line-height: 1.65; outline: none; }
.adm-rt-area:focus { box-shadow: inset 0 0 0 2px var(--c-primary-soft); }
.adm-rt-area h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600;
letter-spacing: -.01em; color: var(--adm-ink); margin: 14px 0 6px; }
.adm-rt-area h3 { font-size: 15px; font-weight: 600; margin: 12px 0 5px; }
.adm-rt-area p { margin: 0 0 9px; }
.adm-rt-area ul, .adm-rt-area ol { margin: 0 0 9px; padding-left: 22px; }
.adm-rt-area blockquote { margin: 0 0 9px; padding-left: 13px; border-left: 2px solid var(--c-primary);
color: var(--c-text-soft); font-style: italic; }
.adm-rt-area a { color: var(--c-primary); }
.adm-drop { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 24px 18px;
border: 1px dashed var(--c-border-strong); border-radius: var(--r-ctl); background: #fafbfd;
cursor: pointer; text-align: center; }
.adm-drop:hover, .adm-drop.over { border-color: var(--c-primary); background: var(--c-primary-soft); }
.adm-drop-ico { color: #9aa3b4; }
.adm-drop:hover .adm-drop-ico, .adm-drop.over .adm-drop-ico { color: var(--c-primary); }
.adm-drop-t { font-size: 13px; font-weight: 500; color: var(--c-text); }
.adm-drop-h { font-size: 11.5px; color: var(--adm-mute); }
.adm-filelist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-filelist li { display: flex; align-items: center; gap: 9px; padding: 6px 9px; background: #fafbfd;
border: 1px solid var(--adm-line); border-radius: var(--r-sm); font-size: 12.5px; }
.adm-file-ico { color: var(--adm-mute); display: flex; }
.adm-file-thumb { width: 34px; height: 24px; flex: none; border-radius: 2px; overflow: hidden; background: #eef1f6;
display: grid; place-items: center; color: #9aa3b4; }
.adm-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-file-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-file-s { font-family: var(--font-mono); font-size: 11px; color: var(--adm-mute); }
.adm-rep { display: flex; flex-direction: column; gap: 8px; }
.adm-rep-row { border: 1px solid var(--adm-line); border-radius: var(--r-sm); background: #fafbfd; overflow: hidden; }
.adm-rep-hd { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--adm-line); background: #f4f6fa; }
.adm-rep-no { font-size: 11px; font-weight: 600; color: var(--c-primary); border: 1px solid var(--adm-line);
background: #fff; padding: 1px 6px; border-radius: 2px; }
.adm-rep-lb { font-size: 11.5px; color: var(--adm-mute); flex: 1; }
.adm-rep-tools { display: flex; gap: 2px; }
.adm-rep-bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: #fff; }
.adm-rep-add { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 7px 13px;
border: 1px dashed var(--c-border-strong); border-radius: var(--r-ctl); background: none;
font: inherit; font-size: 12.5px; color: var(--c-primary); cursor: pointer; }
.adm-rep-add:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.adm-ok { display: inline-flex; color: var(--c-success); }
/* Blokk-építő (Filament Builder) – típusos, összecsukható elemek. */
.adm-builder { display: flex; flex-direction: column; gap: 8px; }
.adm-bld-item { border: 1px solid var(--adm-line); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.adm-bld-hd { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
border: 0; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.adm-bld-hd:hover { background: #f7f9fc; }
.adm-bld-item.open .adm-bld-hd { border-bottom: 1px solid var(--adm-line); background: #f4f6fa; }
.adm-bld-grip { display: grid; place-items: center; color: #b3bac8; flex: none; }
.adm-bld-lb { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--adm-ink); }
.adm-bld-chev { color: var(--adm-mute); transition: transform var(--t-ctl) var(--ease-ctl); }
.adm-bld-item.open .adm-bld-chev { transform: rotate(90deg); }
.adm-bld-item.child { margin-left: 30px; }
.adm-bld-bd { padding: 14px 12px 12px; }
.adm-bld-tools { display: flex; justify-content: flex-end; gap: 2px; margin-top: 10px; }
.adm-bld-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px dashed var(--c-border-strong);
border-radius: var(--r-ctl); }
.adm-reltabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--adm-line); }
.adm-reltab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 10px; border: 0; background: none;
font: inherit; font-size: 13px; font-weight: 500; color: var(--c-text-soft); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adm-reltab.on { color: var(--adm-ink); font-weight: 600; border-bottom-color: var(--c-primary); }
.adm-relbody { padding: 14px; overflow-x: auto; }
.adm-formbar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: var(--s-3);
margin-top: var(--s-4); padding: 11px 16px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
border: 1px solid var(--adm-line); border-radius: var(--r-md); box-shadow: 0 -4px 16px rgba(17,32,58,.06); }
.adm-formbar-st { flex: 1; font-size: 12px; color: var(--adm-mute); }
.adm-formbar-st.dirty { color: var(--c-warning); font-weight: 500; }
.adm-inlineact { display: flex; gap: var(--s-2); }
.adm-detaildl { margin: 0; padding: 4px 18px 18px; }
.adm-detaildl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-4);
padding: 11px 0; border-bottom: 1px solid var(--adm-line-soft); }
.adm-detaildl > div:last-child { border-bottom: 0; }
.adm-detaildl dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--adm-mute); }
.adm-detaildl dd { margin: 0; font-size: 13.5px; }
.adm-mediapreview { padding: 18px; background: #f4f6fa; display: grid; place-items: center; }
.adm-mediapreview img { max-width: 100%; max-height: 420px; border-radius: var(--r-sm); box-shadow: var(--sh-2); }
.adm-mediapreview-doc { color: #9aa3b4; }
.adm-fnamerow { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.adm-fnamerow code { flex: 1; font-family: var(--font-mono); font-size: 12px; background: #f4f6fa;
border: 1px solid var(--adm-line); border-radius: var(--r-sm); padding: 8px 11px; overflow-x: auto; white-space: nowrap; }
.adm-fsection > .adm-table.mini { margin: 14px 18px 18px; width: calc(100% - 36px); min-width: 0; }
.adm-mailpreview { margin: 16px 18px; border: 1px solid var(--adm-line); border-radius: var(--r-sm); overflow: hidden; }
.adm-mail-hd { padding: 11px 14px; background: #f4f6fa; border-bottom: 1px solid var(--adm-line);
display: flex; flex-direction: column; gap: 3px; }
.adm-mail-hd span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--adm-mute); }
.adm-mail-hd strong { font-size: 14px; color: var(--adm-ink); }
.adm-mail-bd { margin: 0; padding: 16px; font-family: var(--font-display); font-size: 13px; line-height: 1.65;
white-space: pre-wrap; color: var(--c-text-soft); background: #fff; }
.adm-varrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 0 18px 18px; }
.adm-varrow-l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-mute); }
.adm-varrow code { font-family: var(--font-mono); font-size: 11px; background: var(--c-primary-soft);
color: var(--c-primary); padding: 2px 6px; border-radius: 2px; }
.adm-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-md);
background: var(--adm-ink); color: #fff; font-size: 13px; box-shadow: var(--sh-3); }
.adm-toast svg { color: #7fd39b; }
/* kapu – sarok-regisztrációs jelek a rajzi nyelvből */
.int-gate-card { position: relative; }
.adm-gate-marks { position: absolute; inset: 12px; pointer-events: none;
background:
linear-gradient(var(--c-primary), var(--c-primary)) left top / 14px 1px no-repeat,
linear-gradient(var(--c-primary), var(--c-primary)) left top / 1px 14px no-repeat,
linear-gradient(var(--c-primary), var(--c-primary)) right bottom / 14px 1px no-repeat,
linear-gradient(var(--c-primary), var(--c-primary)) right bottom / 1px 14px no-repeat;
opacity: .35; }
/* ==========================================================================
Assistant demo – a tenant-panel arculata (screen-internal.jsx).
A .adm-* készlet marad, ez csak a héjat írja felül.
========================================================================== */
.adm.kkm { --kkm-mh: 64px; display: block; }
/* ---- felső sáv ---------------------------------------------------------- */
.kkm-masthead {
position: sticky; top: 0; z-index: 30; height: var(--kkm-mh);
display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-5);
background: var(--c-primary); color: #fff;
}
.kkm-mh-brand {
width: var(--adm-side); flex: none; min-width: 0;
display: flex; align-items: center; gap: 10px; padding-left: 18px;
}
.kkm-mh-brand .crest-img { height: 30px; width: auto; flex: none; }
.kkm-mh-brand span { font-family: var(--font-display); font-size: 17px; font-weight: 600;
letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kkm-mh-actions { display: flex; align-items: center; gap: 10px; }
.kkm-mh-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-ctl);
background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13.5px;
font-weight: 500; white-space: nowrap; cursor: pointer;
transition: background var(--t-ctl) var(--ease-ctl);
}
.kkm-mh-btn:hover { background: rgba(255,255,255,.16); }
.kkm-mh-btn.manual { background: var(--c-tricolor-grn); border-color: var(--c-tricolor-grn); }
.kkm-mh-btn.manual:hover { background: #365b40; border-color: #365b40; }
.kkm-masthead .adm-user { margin-left: auto; }
.kkm-mh-avatar {
width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.5); background: #12224a; color: #fff;
font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
}
/* A masthead `color: #fff`-je öröklődne a lenyílóra is – ezért kap saját színt. */
.kkm-menu-id { padding: 9px 10px 8px; border-bottom: 1px solid var(--adm-line-soft);
line-height: 1.3; color: var(--c-text); }
.kkm-menu-id b { display: block; font-size: 13px; }
.kkm-menu-id i { font-size: 11.5px; font-style: normal; color: var(--adm-mute); }
/* ---- héj ---------------------------------------------------------------- */
.kkm-body { display: grid; grid-template-columns: var(--adm-side) minmax(0, 1fr); }
.adm.kkm .adm-side { top: var(--kkm-mh); height: calc(100vh - var(--kkm-mh)); }
.adm.kkm .adm-side-nav { padding: 14px 12px 24px; }
.adm.kkm .adm-navlink { padding: 9px 12px; font-size: 14px; }
.adm.kkm .adm-navlink.on { background: var(--adm-bg); color: var(--adm-ink); }
.adm.kkm .adm-navlink.on::before { display: none; }
/* ---- bejelentkezés ------------------------------------------------------ */
.kkm-login { min-height: 100vh; display: grid; grid-template-columns: 420px minmax(0, 1fr); }
.kkm-login-side {
display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8);
padding: var(--s-8) var(--s-7); color: #fff;
background: linear-gradient(155deg, #17284f 0%, var(--c-primary) 62%, #2f4576 100%);
}
.kkm-login-brand { display: flex; align-items: flex-start; gap: 14px; }
.kkm-login-brand .crest-img { height: 54px; width: auto; flex: none; }
.kkm-login-org { display: block; font-family: var(--font-serif); font-size: 27px;
line-height: 1.15; font-weight: 500; }
.kkm-login-sub { display: block; margin-top: 9px; font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: rgba(255,255,255,.72); }
.kkm-tricolor { display: block; margin-top: 13px; width: 84px; height: 4px;
background: linear-gradient(90deg, var(--c-tricolor-red) 0 33.3%, #fff 33.3% 66.6%,
var(--c-tricolor-grn) 66.6% 100%); }
.kkm-login-gov { width: 148px; height: auto; opacity: .62; }
.kkm-login-main { display: grid; place-items: center; padding: var(--s-8) var(--s-6); background: var(--c-bg); }
.kkm-login-box { width: 100%; max-width: 420px; text-align: center; }
.kkm-login-box h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700;
letter-spacing: -.02em; color: var(--c-heading); margin: 0; }
.kkm-login-box h1::after { content: ""; display: block; width: 52px; height: 3px;
margin: 14px auto 0; background: var(--c-focus); }
.kkm-login-lead { margin: 16px 0 26px; font-size: 15px; color: var(--c-text-soft); }
.kkm-login-card { text-align: left; padding: var(--s-6); background: var(--c-surface);
border-radius: var(--r-lg); box-shadow: var(--sh-mid); }
/* Panelválasztó a bejelentkezőn. A Filamentben két külön bejelentkező URL van
(tenant / admin); a demóban egy képernyő, itt választ a bemutató. */
.kkm-pick { margin-bottom: var(--s-5); }
.kkm-pick-l { display: block; margin-bottom: 7px; font-size: 12.5px; color: var(--c-text-mute); }
.kkm-pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
padding: 4px; background: var(--c-surface-deep); border: 1px solid var(--c-border-strong);
border-radius: var(--r-ctl); }
.kkm-pick-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--c-text-soft);
font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
transition: background var(--t-ctl) var(--ease-ctl), color var(--t-ctl) var(--ease-ctl); }
.kkm-pick-b:hover { color: var(--c-text); }
.kkm-pick-b.on { background: var(--c-primary); color: #fff; font-weight: 600; }
.kkm-pick-b:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.kkm-field { margin-bottom: var(--s-4); }
.kkm-field label { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-3); margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--c-text); }
.kkm-field sup { color: var(--c-danger); }
.kkm-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border-strong);
border-radius: var(--r-ctl); background: var(--c-surface); color: var(--c-text);
font: inherit; font-size: 14px; }
.kkm-field input:focus { outline: none; border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-soft); }
.kkm-pw { display: flex; }
.kkm-pw input { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.kkm-pw button { flex: none; width: 42px; display: grid; place-items: center;
border: 1px solid var(--c-border-strong); border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
background: var(--c-surface-deep); color: var(--c-text-mute); cursor: pointer; }
.kkm-pw button:hover { color: var(--c-text); }
.kkm-login-submit { width: 100%; margin-top: var(--s-2); padding: var(--ctl-pad);
border: 0; border-radius: var(--r-ctl); background: var(--c-primary); color: #fff;
font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.kkm-login-submit:hover { background: var(--c-primary-hov); }
.kkm-login-secure { margin: var(--s-5) 0 0; display: flex; align-items: center;
justify-content: center; gap: 7px; font-size: 12.5px; color: var(--c-text-mute); }
.kkm-login-demo { margin: 6px 0 0; font-size: 12px; color: var(--c-text-mute); }
.kkm-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
font-weight: 500; color: var(--c-primary); cursor: pointer; }
.kkm-link:hover { text-decoration: underline; }
.kkm-login-box > .kkm-link { margin-top: var(--s-4); }
@media (max-width: 900px) {
.kkm-login { grid-template-columns: minmax(0, 1fr); }
.kkm-login-side { padding: var(--s-6); gap: var(--s-6); }
.kkm-login-org { font-size: 23px; }
.kkm-login-gov { display: none; }
.kkm-login-box h1 { font-size: 28px; }
}
/* ---- reszponzív -------------------------------------------------------- */
@media (max-width: 1100px) {
.adm-formgrid { grid-template-columns: minmax(0, 1fr); }
.adm-formside { position: static; }
.adm-formside .adm-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-formside .adm-field.span-2 { grid-column: span 2; }
.adm-dashgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
.adm { grid-template-columns: 1fr; }
.adm-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--adm-line); }
.adm-side-nav { display: flex; gap: var(--s-4); overflow-x: auto; padding: 8px 12px; }
.adm-navgroup { margin-bottom: 0; display: flex; align-items: center; gap: 4px; }
.adm-navgroup-h { padding: 0 6px 0 0; white-space: nowrap; }
.adm-navgroup-h::after { display: none; }
.adm-navlink { white-space: nowrap; width: auto; }
.adm-navlink.on::before { display: none; }
.adm-side-foot { display: none; }
.adm-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kkm-body { grid-template-columns: minmax(0, 1fr); }
.adm.kkm .adm-side { position: static; height: auto; }
.adm.kkm .adm-side-nav { display: flex; gap: var(--s-4); overflow-x: auto; padding: 8px 12px; }
.adm.kkm .adm-navlink { width: auto; white-space: nowrap; }
.kkm-mh-brand { width: auto; }
}
@media (max-width: 760px) {
.adm-content { padding: var(--s-4) var(--s-4) 80px; }
.kkm-mh-brand { padding-left: 12px; }
.kkm-mh-brand span { font-size: 15px; }
.kkm-mh-btn { padding: 8px 10px; }
/* Keskeny képernyőn a két gomb csak ikon – a felirat a title-ben marad. */
.kkm-mh-btn span { display: none; }
.adm-page-hd h1 { font-size: 21px; }
.adm-fgrid, .adm-rep-bd { grid-template-columns: minmax(0, 1fr); }
.adm-field.span-2, .adm-formside .adm-field.span-2 { grid-column: span 1; }
.adm-user-t { display: none; }
.adm-statrow { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Archívum-oldalak (screen-archive.jsx)
A kártyák a főoldal osztályait használják; itt csak a lapfej, a szűrősor és
a két saját rajzolat (esemény-sor, közösségi fiók) él.
========================================================================== */
.arch-head { background: var(--c-surface); border-bottom: 1px solid var(--c-border);
padding: var(--s-8) 0 var(--s-7); }
.arch-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px;
color: var(--c-text-mute); margin-bottom: var(--s-3); }
.arch-crumb a { color: var(--c-primary); text-decoration: none; }
.arch-crumb a:hover { text-decoration: underline; }
.arch-head h1 { font-family: var(--font-serif); font-size: 44px; font-weight: 600;
line-height: 1.06; letter-spacing: -.01em; color: var(--c-heading); margin: 0; }
.arch-head p { font-size: 15px; line-height: 1.6; color: var(--c-text-soft);
margin: var(--s-3) 0 0; max-width: 68ch; }
.arch-head-rule { display: block; margin-top: var(--s-5); height: 1px;
background: linear-gradient(90deg, var(--c-primary) 0 64px, var(--c-border) 64px); }
.arch-tools { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
margin-bottom: var(--s-4); }
.arch-search { flex: 1; min-width: 260px; margin: 0; }
.arch-select { display: flex; flex-direction: column; gap: 5px; }
.arch-select span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--c-text-mute); }
.arch-select select { padding: 9px 11px; border: 1px solid var(--c-border-strong);
border-radius: var(--r-ctl); background: var(--c-surface); font: inherit; font-size: 14px; }
.arch-count { font-size: 13px; color: var(--c-text-mute); padding-bottom: 10px; margin-left: auto; }
.arch-count b { font-family: var(--font-serif); font-size: 22px; font-weight: 600;
color: var(--c-heading); font-variant-numeric: lining-nums; margin-right: 4px; }
.arch-chips { margin-bottom: var(--s-5); }
.arch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.arch-cards .lead-card { margin: 0; }
.arch-hair { margin-top: 0; }
.arch-empty { padding: var(--s-9) var(--s-5); text-align: center; border: 1px dashed var(--c-border-strong); }
.arch-empty p { font-size: 15px; color: var(--c-text-soft); margin: 0 0 var(--s-4); }
/* Esemény-sor: dátum-dobozka + törzs + jobb oldali státusz. */
.arch-events { display: flex; flex-direction: column; }
.arch-ev { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) 0;
border-top: 1px solid var(--c-border); text-decoration: none; color: inherit; }
.arch-ev:last-child { border-bottom: 1px solid var(--c-border); }
.arch-ev:hover { background: var(--c-surface-alt); }
.arch-ev-date { flex: none; width: 68px; text-align: center; border: 1px solid var(--c-border);
padding: 8px 0; background: var(--c-surface); }
.arch-ev-date b { display: block; font-family: var(--font-serif); font-size: 28px; font-weight: 600;
line-height: 1; color: var(--c-heading); font-variant-numeric: lining-nums; }
.arch-ev-date i { display: block; font-style: normal; font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--c-text-mute); margin-top: 2px; }
.arch-ev-date u { display: block; text-decoration: none; font-family: var(--font-mono);
font-size: 9.5px; color: var(--c-text-mute); opacity: .7; }
.arch-ev-main { flex: 1; min-width: 0; }
.arch-ev-kicker { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }
.arch-ev-tag { padding: 1px 6px; border: 1px solid var(--c-border-strong); border-radius: 2px;
color: var(--c-text-mute); letter-spacing: .06em; }
.arch-ev-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.32;
color: var(--c-text); }
.arch-ev-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 6px;
font-size: 12.5px; color: var(--c-text-mute); }
.arch-ev-meta span { display: inline-flex; align-items: center; gap: 5px; }
.arch-ev-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
min-width: 190px; text-align: right; }
.arch-ev-seats { font-size: 12.5px; font-weight: 600; color: var(--c-success); }
.arch-ev-seats.full { color: var(--c-warning); }
.arch-ev-seats.past { color: var(--c-text-mute); font-weight: 500; }
.arch-ev-dl { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-mute); }
/* Közösségi fiók-kártyák */
.arch-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.arch-social-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4);
border: 1px solid var(--c-border); background: var(--c-surface); text-decoration: none; color: inherit; }
.arch-social-card:hover { border-color: var(--c-primary); box-shadow: var(--sh-1); }
.arch-social-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arch-social-src { flex: none; display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--c-text-mute); }
@media (max-width: 1000px) {
.arch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arch-social { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.arch-head { padding: var(--s-7) 0 var(--s-6); }
.arch-head h1 { font-size: 32px; }
.arch-cards { grid-template-columns: minmax(0, 1fr); }
.arch-count { margin-left: 0; padding-bottom: 0; }
.arch-ev { flex-wrap: wrap; gap: var(--s-3); }
.arch-ev-side { min-width: 0; width: 100%; flex-direction: row; align-items: center;
justify-content: space-between; text-align: left; }
}
/* ---- Galéria-összeállító (assetpicker) ---------------------------------- */
.adm-picker { display: flex; flex-direction: column; gap: var(--s-4); }
.adm-picker-sel, .adm-picker-pool { border: 1px solid var(--adm-line); border-radius: var(--r-sm); background: #fafbfd; }
.adm-picker-hd { display: flex; align-items: center; gap: var(--s-3); padding: 8px 11px;
border-bottom: 1px solid var(--adm-line); background: #f4f6fa;
font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-mute); }
.adm-picker-hd > span:first-child { flex: 1; }
.adm-picker-hd .mono { text-transform: none; letter-spacing: 0; }
.adm-searchbox.sm { min-width: 0; width: 220px; padding: 4px 8px; text-transform: none; letter-spacing: 0; }
.adm-searchbox.sm input { font-size: 12px; }
.adm-picker-empty, .adm-picker-poolempty { padding: 18px; margin: 0; text-align: center;
font-size: 13px; color: var(--adm-mute); list-style: none; }
.adm-picker-grid { list-style: none; margin: 0; padding: 11px; display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 11px; }
.adm-picker-grid > li { background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-sm);
padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.adm-picker-grid > li.cover { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); }
.adm-picker-th { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden;
background: #eef1f6; display: grid; place-items: center; color: #9aa3b4; }
.adm-picker-th img { width: 100%; height: 100%; object-fit: cover; }
.adm-picker-cover { position: absolute; left: 5px; top: 5px; padding: 1px 6px; border-radius: 2px;
background: var(--c-primary); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.adm-picker-no { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 2px;
background: rgba(24, 40, 77, .78); color: #fff; font-size: 9.5px; }
.adm-picker-t { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--c-text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-picker-m { font-size: 10.5px; color: var(--adm-mute); }
.adm-picker-tools { display: flex; gap: 2px; margin-top: 2px; }
.adm-picker-grid.pool > li { padding: 0; border: 0; background: none; }
.adm-picker-add { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 8px;
background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-sm);
font: inherit; text-align: left; cursor: pointer; }
.adm-picker-add:hover { border-color: var(--c-primary); box-shadow: var(--sh-1); }
.adm-picker-plus { position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
background: rgba(24, 40, 77, .55); opacity: 0; transition: opacity .13s; }
.adm-picker-add:hover .adm-picker-plus { opacity: 1; }
/* Akinek a rendszere kéri, ne kapjon mozgást – a szín- és árnyékváltás marad.
Hoverre sehol nincs elmozdulás, csak a nyíl-tick és a képnagyítás mozog. */
@media (prefers-reduced-motion: reduce) {
.btn, .more-btn, .map-reset, .info-panel .pill-btn, .chip, .adm-btn,
.mission-card, .citizen-card, .media-card, .culture-card {
transition-duration: .01ms !important;
}
.arw::before, .arw::after { transition-duration: .01ms !important; }
.culture-card:hover .culture-img img, .lead-hero:hover .lead-hero-img img {
transform: none !important;
}
}
/* ==========================================================================
KKM asszisztens-widget
A kkm `resources/css/admin/app.css:44-100` (pulzálás, gépelés-pöttyök) és a
panel-blade Tailwind-osztályainak megfelelője. A pulzálás osztálynevei a
JS-ből jönnek (assistant.jsx), ezért kötöttek.
========================================================================== */
/* ---- pulzálás: amire a válasz kártyája mutat --------------------------- */
@keyframes ai-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(55, 80, 136, 0); }
50% { box-shadow: 0 0 0 6px rgba(55, 80, 136, .35); }
}
.ai-pulse { animation: ai-pulse 1s ease-in-out 3; border-radius: var(--r-sm); }
/* Mozgás nélküli változat: állandó gyűrű, hogy a kiemelés így is látszódjon. */
.ai-pulse-static { box-shadow: 0 0 0 3px rgba(55, 80, 136, .6); border-radius: var(--r-sm); }
/* A ragadós műveletsor és a lebegő indító gomb ugyanabban a jobb alsó sarokban
ülnek. A Filamentben a Mentés fent van, itt lent – ezért kap a sáv helyet a
gombnak: enélkül az asszisztens takarná a pulzáló Mentés gombot. */
.adm.kkm .adm-formbar { padding-right: 186px; }
/* ---- indító gomb és teaser ---------------------------------------------- */
.ai-launch {
position: fixed; right: 24px; bottom: 24px; z-index: 40;
display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px;
border: 0; border-radius: 999px; background: var(--c-primary); color: #fff;
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
box-shadow: 0 8px 22px -6px rgba(15, 23, 42, .45);
transition: background var(--t-ctl) var(--ease-ctl);
}
.ai-launch:hover { background: var(--c-primary-hov); }
.ai-launch:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ai-teaser {
position: fixed; right: 24px; bottom: 92px; z-index: 40; max-width: 262px;
padding: 12px 26px 12px 14px; background: #fff; border: 1px solid var(--adm-line);
border-radius: var(--r-lg); box-shadow: 0 8px 22px -8px rgba(15, 23, 42, .35);
}
.ai-teaser-t { display: block; border: 0; background: none; padding: 0; font: inherit;
font-size: 13.5px; line-height: 1.45; color: var(--c-text); text-align: left; cursor: pointer; }
.ai-teaser-x { position: absolute; right: 7px; top: 7px; display: grid; place-items: center;
width: 20px; height: 20px; border: 0; background: none; color: var(--adm-mute); cursor: pointer; }
.ai-teaser-x:hover { color: var(--c-text); }
/* ---- panel -------------------------------------------------------------- */
.ai-panel {
position: fixed; right: 24px; bottom: 24px; z-index: 40;
width: 380px; height: 560px; max-height: calc(100vh - 48px);
display: flex; flex-direction: column; overflow: hidden;
background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-lg);
box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .45);
}
.ai-panel-hd {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 12px 11px 14px; background: var(--c-primary); color: #fff;
}
.ai-panel-id { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.ai-panel-act { display: flex; align-items: center; gap: 3px; }
.ai-restart, .ai-iconbtn {
display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
color: inherit; font: inherit; cursor: pointer; border-radius: 999px;
}
.ai-restart { padding: 5px 9px; font-size: 12px; font-weight: 500; }
.ai-iconbtn { padding: 5px; }
.ai-restart:hover, .ai-iconbtn:hover { background: rgba(255, 255, 255, .16); }
/* ---- üzenetfolyam ------------------------------------------------------- */
.ai-stream { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px;
display: flex; flex-direction: column; gap: 12px; background: var(--adm-bg); }
.ai-msg { max-width: 85%; padding: 9px 12px; border-radius: var(--r-lg); font-size: 13.5px; line-height: 1.5; }
.ai-msg.assistant { background: #fff; border: 1px solid var(--adm-line); color: var(--c-text); }
.ai-msg.user { margin-left: auto; background: var(--c-primary); color: #fff; }
.ai-msg-t strong { font-weight: 600; }
.ai-opener { display: flex; align-items: flex-start; gap: 5px; margin: 0 0 7px;
padding-left: 8px; border-left: 2px solid var(--c-primary); font-size: 12px;
font-style: italic; color: var(--adm-mute); }
.ai-opener svg { margin-top: 2px; flex: none; }
.ai-chips p { margin: 0 0 8px; font-size: 11.5px; color: var(--adm-mute); }
.ai-chips > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip {
padding: 5px 11px; border: 1px solid var(--adm-line); border-radius: 999px;
background: #fff; font: inherit; font-size: 12px; color: var(--c-text-soft);
text-align: left; cursor: pointer; transition: color var(--t-ctl), border-color var(--t-ctl);
}
.ai-chip:hover { color: var(--c-primary); border-color: var(--c-primary); }
/* A buborék a tartalmához igazodik – enélkül a panel teljes szélességére
nyúlna, ami a 3 mp-es késleltetés alatt végig látszana. */
.ai-typing { width: fit-content; display: flex; align-items: center; gap: 4px;
padding: 11px 13px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-lg); }
.ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af;
animation: ai-typing-bounce 1.2s ease-in-out infinite; }
.ai-typing-dot:nth-child(2) { animation-delay: .15s; }
.ai-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing-bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-4px); }
}
/* ---- kártyák ------------------------------------------------------------ */
.ai-cardbtn {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px;
background: #fff; border: 1px solid var(--c-primary-soft); border-radius: var(--r-ctl);
font: inherit; font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer;
box-shadow: var(--sh-1); transition: background var(--t-ctl) var(--ease-ctl);
}
.ai-cardbtn:hover { background: var(--c-primary-soft); }
.ai-card { margin-top: 8px; padding: 11px; background: #fff;
border: 1px solid var(--adm-line); border-radius: var(--r-md); }
.ai-card.video { padding: 0; overflow: hidden; }
.ai-card-t { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.ai-diag { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ai-diag li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--c-text-soft); }
.ai-diag svg { margin-top: 1px; flex: none; }
.ai-diag-ok { color: #16a34a; }
.ai-diag-warn { color: #d97706; }
.ai-diag-sum { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--adm-line-soft);
font-size: 12px; line-height: 1.5; color: var(--c-text-soft); }
.ai-diag-sum strong { font-weight: 600; color: var(--c-text); }
.ai-video { position: relative; margin: 0; background: #000; }
.ai-video video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.ai-video > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Nincs videófájl: poszter + őszinte jelzés, lejátszás-gomb nélkül. */
.ai-video-soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92);
font-size: 11.5px; font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.ai-video-play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.ai-video-play img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ai-video-btn { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92);
color: var(--c-primary); box-shadow: 0 6px 16px -4px rgba(15, 23, 42, .5);
transition: transform var(--t-ctl) var(--ease-ctl); }
.ai-video-play:hover .ai-video-btn { transform: scale(1.08); }
.ai-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 11px; font-size: 12px; }
.ai-video-meta span { font-weight: 600; color: var(--c-text); }
.ai-video-meta i { font-style: normal; font-size: 11px; color: var(--adm-mute); }
.ai-walkcard-n { margin: 5px 0 0; font-size: 11.5px; color: var(--adm-mute); }
/* ---- beviteli sor ------------------------------------------------------- */
.ai-form { padding: 11px 14px 12px; border-top: 1px solid var(--adm-line); background: #fff; }
.ai-form-row { display: flex; align-items: flex-end; gap: 8px; }
.ai-form textarea {
flex: 1; min-width: 0; resize: none; overflow: hidden; padding: 8px 11px;
border: 1px solid var(--adm-line); border-radius: var(--r-ctl);
font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--c-text);
}
.ai-form textarea:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.ai-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px;
border: 0; border-radius: var(--r-ctl); background: var(--c-primary); color: #fff; cursor: pointer;
transition: background var(--t-ctl) var(--ease-ctl); }
.ai-send:hover { background: var(--c-primary-hov); }
.ai-privacy { display: flex; align-items: center; gap: 5px; margin: 8px 0 0;
font-size: 11px; line-height: 1.3; color: var(--adm-mute); }
.ai-privacy svg { flex: none; }
/* ---- walkthrough-overlay ------------------------------------------------ */
.ai-walk {
position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%);
width: min(420px, calc(100vw - 32px)); padding: 13px 15px;
background: var(--c-primary); color: #fff; border-radius: var(--r-lg);
box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .55);
}
.ai-walk-hd { display: flex; align-items: flex-start; gap: 12px; }
.ai-walk-hd > div { flex: 1; min-width: 0; }
.ai-walk-n { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ai-walk-cap { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; }
.ai-walk-act { display: flex; justify-content: flex-end; margin-top: 9px; }
.ai-walk-btn { padding: 6px 13px; border: 0; border-radius: var(--r-ctl); background: #fff;
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-primary); cursor: pointer; }
.ai-walk-btn:hover { background: var(--c-primary-soft); }
/* ---- mobil: a panel teljes képernyő ------------------------------------- */
@media (max-width: 640px) {
.ai-panel { inset: 0; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; }
.ai-launch { right: 16px; bottom: 16px; }
.ai-teaser { right: 16px; left: 16px; bottom: 78px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.ai-typing-dot { animation: none; opacity: .5; }
.ai-launch, .ai-send, .ai-chip, .ai-cardbtn, .ai-video-btn { transition-duration: .01ms !important; }
.ai-video-play:hover .ai-video-btn { transform: none; }
}
/* ==========================================================================
Asszisztens · Betanítás (admin panel)
A kkm `filament/admin/{widgets,pages}/ai-helper-insights.blade.php` megfelelője.
========================================================================== */
.ins-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.ins-stats.big { margin-bottom: var(--s-4); }
.ins-stat { padding: 14px 16px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--r-md); }
.ins-stats:not(.big) .ins-stat { background: var(--adm-bg); border-color: transparent; }
.ins-stat b { display: block; font-family: var(--font-serif); font-size: 30px; font-weight: 600;
line-height: 1.05; color: var(--c-primary); }
.ins-stats.big .ins-stat b { font-size: 38px; }
.ins-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--adm-mute); }
.ins-sample { display: inline-flex; align-items: center; gap: 6px; margin: 9px 0 0;
padding: 4px 11px; border-radius: 999px; background: #fdf3d8; border: 1px solid #efd9a3;
font-size: 12px; font-weight: 500; color: var(--c-warning); }
.ins-sample svg { flex: none; }
.ins-rows { display: flex; flex-direction: column; gap: 13px; }
.ins-rows.tight { gap: 9px; }
.ins-row-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
font-size: 13.5px; color: var(--c-text-soft); }
.ins-row-hd b { font-weight: 600; color: var(--adm-ink); }
.ins-row-n { display: flex; align-items: center; gap: 9px; flex: none; }
.ins-trend { font-size: 11.5px; font-weight: 600; font-style: normal; }
/* Csökkenő kérdésszám = kevesebb elakadás, ezért a lefelé nyíl a jó hír. */
.ins-trend.down { color: var(--c-success); }
.ins-trend.up { color: var(--c-danger); }
.ins-mute { font-size: 11.5px; font-style: normal; color: var(--adm-mute); }
.ins-bar { margin-top: 6px; height: 8px; border-radius: 999px; background: #eceff5; overflow: hidden; }
.ins-bar.thin { height: 6px; }
.ins-bar span { display: block; height: 100%; border-radius: 999px; background: var(--c-primary); }
.ins-bar.thin span { background: var(--c-primary); opacity: .68; }
.ins-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ins-scroll { overflow-x: auto; }
.ins-scroll .adm-table { min-width: 560px; }
@media (max-width: 1100px) {
.ins-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
.ins-stats { grid-template-columns: minmax(0, 1fr); }
}