/* ============================================================
   OUTFIT — SELF-HOSTED VARIABLE FONT (css/fonts/)
   Korábban Google Fonts @import volt itt: az render-blokkoló volt, külső
   DNS/TLS kört igényelt minden látogatónál, és a CSP-t is sértené.
   A variable font a 100–900 közti ÖSSZES súlyt egyetlen fájlból adja
   (a 750-es súly is), a latin-ext készletben a magyar ő/ű is benne van.
   ============================================================ */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fonts/outfit-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fonts/outfit-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
css/01-base.css  (a korábbi style.css 1. modulja)
FRONTEND - PRÉMIUM LIGHT SLATE & GRAPHITE Theme (Max 5px Rounding)

A korábbi egyetlen style.css logikai modulokra bontva (01-base … 08-home-detail).
A header.php / admin_header.php SORRENDBEN tölti be őket — a kaszkád emiatt
pontosan ugyanaz marad. Új szabály a témájának megfelelő modulba kerüljön.
============================================================ */
:root {
    /* --- FELÜLET-HÁRMAS ---
       A lap három felületet ismer, nincs negyedik: lap-háttér, kártya, sötét sáv.
       2026-07: világosítva. A korábbi #e8e5e0 / #f6f4f1 páros túl közel volt
       egymáshoz (a kártya alig vált el az alaptól) és összességében lenyomta a
       lapot. A greige nem tűnt el, csak visszalépett hajszálvonalnak és
       másodlagos felületnek — így megmarad a meleg karakter, de lesz levegő. */
    --bg-page: #f7f5f1;        /* Lap-háttér: meleg törtfehér */
    --bg-card: #ffffff;        /* Kártyák: tiszta fehér — ettől válik el az alaptól */
    --bg-card-alt: #f0ede7;    /* Másodlagos felületek (táblázat-fejléc, mélyítés) */
    --bg-dark: #161513;        /* Márka-szén sötét akcent */

/* --- Meleg Szürke/Greige Skála (világostól sötétig - admin) --- */
--steel-50: #efede9;
--steel-100: #e2ded8;
--steel-200: #d3cec6;
--steel-300: #b4aea4;
--steel-400: #918a7f;
--steel-500: #6f6960;
--steel-600: #56504a;
--steel-700: #3e3a34;
--steel-800: #292623;
--steel-900: #1b1917;

/* --- Fekete felületek (fejléc, sötét sávok) --- */
--charcoal:      #161616;  /* Fő fekete (fejléc háttér, elsődleges gomb) */
--charcoal-hover:#2e2e2e;  /* Világosodó szürke hover */
--charcoal-soft: #242424;  /* Dropdown / mélyített felület sötét alapon */
--charcoal-line: #333333;  /* Szürke választóvonal sötét alapon */
--charcoal-text: #c6c6c6;  /* Halvány szürke szöveg sötét alapon */
--charcoal-text-strong: #ffffff;

/* --- Fémes fejléc-felület — EGYETLEN forrás! ---
   Csiszolt, átlós fényű sötét szénbarna gradiens. A frontend fejléc, a mobil
   oldalmenü, az admin fejléc ÉS az admin sidebar mind ezt használja, így a
   négy felület garantáltan azonos. Alatta a él-árnyék: vékony narancs derengés
   + mély vetett árnyék. */
--header-metal:
    linear-gradient(112deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 26%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.045) 68%,
        rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #242424 0%, #161616 55%, #0d0d0d 100%);
--header-metal-edge: 0 1px 0 rgba(191, 176, 138, 0.30), 0 6px 18px rgba(0, 0, 0, 0.35);

/* A fejléc ALATT folytatódó felület (admin sidebar): a teteje pontosan a
   --header-metal záró színe (#0d0d0d), és onnan sötétedik tovább — így a
   fejléc és a sidebar egyetlen összefüggő fém-felületnek látszik. */
--sidebar-metal:
    linear-gradient(112deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.015) 26%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.03) 68%,
        rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 60%, #060606 100%);

/* --- UNICORN / SZÜRKE TÉMA-TOKENEK — EGYETLEN forrás! ---
   Az AI Unicornisok és Árkalkulátor oldalak színei.
   Mostantól GLOBÁLISAK és az admin szürke palettáját követik. */
--uni-bg:        #f7f5f1;   /* = --bg-page, világosítva 2026-07 */
--uni-card:      #ffffff;   /* = --bg-card, tiszta fehér */
--uni-card-soft: #f0ede7;   /* = --bg-card-alt */
--uni-border:    #e4e0d8;   /* világosabb hajszálvonal (volt: #d3cec6) */
--uni-ink:       #1b1917;   /* admin steel-900 szöveg */
--uni-muted:     #918a7f;   /* admin steel-400 halvány */
/* Pezsgő VILÁGOS felületen. Egy árnyalattal mélyebb, mint az --accent-on-dark:
   a világosított alapon (#f7f5f1 / #ffffff) a régi #bfb08a kimosódott.
   FIGYELEM: a sötét felületek accentjét (--accent-on-dark) NEM szabad ezzel
   szinkronba hozni — ott épp a világosabb érték adja a kontrasztot. */
--uni-accent:    #b9a878;   /* pezsgő-arany világos alapon (aktív elemek) */
--uni-gold:      #b9a878;   /* KakasTech pezsgő-arany világos alapon */
/* A fémes (szürke) sáv rétegei — a stat-sáv és rokonai használják */
--uni-band-grad:   linear-gradient(180deg, #f0ede7 0%, #ddd8ce 55%, #cfc9be 100%);
--uni-band-border: #cfc9be;
--uni-band-edge:   #a8a196;

/* --- KATEGÓRIA ACCENT-SZÍNEK — EGYETLEN forrás! ---
   Minden fő tartalomtípusnak saját, visszafogott accent-árnyalata van, és ez
   KONZISZTENSEN jelenik meg: szekció-cím aláhúzás, badge, hover. Új kategória-
   színt ide vegyél fel, ne szórd szét a modulokban. A -soft változat halvány
   háttérként (badge, hover-tint) szolgál. */
--cat-hirek:         #2563eb;  /* AI Hírek — mély kék */
--cat-hirek-soft:    rgba(37, 99, 235, 0.10);
--cat-penz:          #0f7b4f;  /* AI Pénz — pénzügyi zöld */
--cat-penz-soft:     rgba(15, 123, 79, 0.10);
--cat-modellek:      #7c3aed;  /* AI Modellek — lila */
--cat-modellek-soft: rgba(124, 58, 237, 0.10);
--cat-promptok:      #0d8a94;  /* Prompt Bazár — teal */
--cat-promptok-soft: rgba(13, 138, 148, 0.10);
--cat-robotika:      #a82a58;  /* Robotika — koral-pink (a robotics badge színe) */
--cat-robotika-soft: rgba(168, 42, 88, 0.10);

/* --- TIPOGRÁFIAI SKÁLA — 1.25-ös arány, EGYETLEN forrás! ---
   Új méretet ne kézzel írj, ezekből a lépcsőkből dolgozz. */
--text-xs:   0.75rem;   /* 12px — meta, timestamp */
--text-sm:   0.875rem;  /* 14px — másodlagos szöveg */
--text-base: 1rem;      /* 16px — törzsszöveg */
--text-lg:   1.25rem;   /* 20px — kiemelt lead */
--text-xl:   1.5625rem; /* 25px — kártya-cím, h3 */
--text-2xl:  1.953rem;  /* 31px — szekció-cím, h2 */
--text-3xl:  2.441rem;  /* 39px — oldal-cím, h1 */

/* --- BETŰKÖZ — a prémium érzet nagyobb részt innen jön, mint a színből ---
   Két érték, két helyzet:
     --track-display : nagy méretű címekre. Az Outfit alapból tágas; 25px
                       felett a laza betűköz "szétesőnek" hat, a negatív
                       tracking fogja össze a szót.
     --track-eyebrow : uppercase eyebrow / meta / címke. Nagybetűnél épp
                       fordítva: a szűk betűköz olvashatatlanná tömöríti. */
--track-display: -0.022em;
--track-eyebrow:  0.14em;

/* --- Márka Szürke & Pezsgő Accentek (narancs kiváltva) --- */
--accent-orange:        #3e3a34;  /* Sötét szénszürke (volt narancs) */
--accent-orange-strong: #292623;  /* Nyomott / hover szürke */
--accent-orange-dark:   #1b1917;  /* Mély szürke kontraszthoz */
--accent-orange-soft:   rgba(62, 58, 52, 0.10);
--accent-orange-glow:   rgba(62, 58, 52, 0.20);
/* SÖTÉT felületen (fekete fejléc, kereső-panel, mobilmenü, footer) a sötét-
   szürke accent nem látszik — ott EZT a pezsgőarany accentet használd! */
--accent-on-dark:       #bfb08a;  /* pezsgőarany accent sötét alapon */
--accent-on-dark-soft:  rgba(191, 176, 138, 0.18);
--accent-on-dark-glow:  rgba(191, 176, 138, 0.35);

/* --- KakasTech logó 3D "benyomott" (deboss) effekt — EGYETLEN forrás! ---
   Felül sötét belső árnyék (a mélyedés felső pereme árnyékot vet a betűre),
   alul vékony fény-él (az alsó perem megcsillan). A text-shadow öröklődik,
   így a .logo-kakastech-frontend-re téve a narancs accent span is megkapja.
   MINDEN logó (frontend fejléc, mobil menü, admin fejléc, login hero,
   cookie banner) ugyanezt használja — ne definiálj külön effektet! */
--logo-deboss:
    0 -1px 0 rgba(0, 0, 0, 0.55),
    0 -2px 3px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.20),
    0 2px 3px rgba(255, 255, 255, 0.08);

/* --- Fémes pezsgő fény-csík (z.ai stílus) — EGYETLEN forrás, ne duplikáld! ---
   Középen forró, közel-fehér szikra (metál csillanás), a szélek felé pezsgő-
   aranyba majd átlátszóba fut. Világos kártyák tetejére. A ::before / háttér-
   réteg is ezt a változót használja, így nincs ismételt gradiens-definíció. */
--metallic-streak: linear-gradient(90deg,
    transparent 0%,
    rgba(191, 176, 138, 0) 12%,
    rgba(191, 176, 138, 0.25) 24%,
    rgba(212, 197, 158, 0.60) 36%,
    rgba(236, 220, 181, 0.90) 44%,
    #f7efd9 49%,
    #ffffff 50%,
    #f7efd9 51%,
    rgba(236, 220, 181, 0.90) 56%,
    rgba(212, 197, 158, 0.60) 64%,
    rgba(191, 176, 138, 0.25) 76%,
    rgba(191, 176, 138, 0) 88%,
    transparent 100%);
/* Sötét felületekhez (fejléc, footer, fekete bannerek): erősebb, fehérebb
   szikra, hogy a mély háttéren is kiemelkedjen — de a test pezsgőarany marad. */
--metallic-streak-on-dark: linear-gradient(90deg,
    transparent 0%,
    rgba(191, 176, 138, 0) 8%,
    rgba(191, 176, 138, 0.35) 24%,
    rgba(212, 197, 158, 0.70) 38%,
    rgba(236, 220, 181, 0.95) 46%,
    #faf4e3 49%,
    #ffffff 50%,
    #faf4e3 51%,
    rgba(236, 220, 181, 0.95) 54%,
    rgba(212, 197, 158, 0.70) 62%,
    rgba(191, 176, 138, 0.35) 76%,
    rgba(191, 176, 138, 0) 92%,
    transparent 100%);
/* A csík köré tett pezsgő fény (box-shadow) — szintén egy helyen definiálva. */
--metallic-glow: 0 0 10px rgba(191, 176, 138, 0.35),
                 0 0 25px rgba(191, 176, 138, 0.18),
                 0 0 50px rgba(191, 176, 138, 0.10);
/* Fehér fémcsillanás a SZÍNES gombok tetejére (színes alapon csak fehér látszik). */
--metallic-streak-on-orange: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 12%,
    rgba(255, 255, 255, 0.25) 30%,
    rgba(255, 255, 255, 0.60) 42%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.60) 58%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0) 88%,
    transparent 100%);

/* Egységes gombmagasság — minden fő akciógomb ugyanennyi (user + admin). */
--btn-h: 40px;

/* --- EGYSÉGES PRÉMIUM GOMB-FÉNY (közös recept, minden színhez) ---
   Lefelé sötétedő test és finom belső+külső árnyék a domború, plasztikus
   kinézethez — felső fehér fénycsík NÉLKÜL (2026-07: kérésre eltávolítva).
   Minden színes gomb ugyanezt a box-shadow párost kapja, csak a gradiens
   színe cserélődik. */
--btn-inner-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.22);     /* alsó belső árnyék */
--btn-drop:         0 1px 2px rgba(0, 0, 0, 0.18);            /* finom külső árnyék */
--btn-gloss: var(--btn-inner-shadow), var(--btn-drop);
--btn-gloss-hover:  inset 0 -1px 1px rgba(0, 0, 0, 0.22),
                    0 3px 8px rgba(0, 0, 0, 0.20);
/* Színcsaládonkénti gomb-színek — 2026-07-11-től GRADIENS TILOS a gombokon
   (user kérése: minden gomb sima, egyszínű; az elsődleges a fejléc feketéje).
   A tokenek neve maradt (sok helyen hivatkozott), az értékük lapos szín —
   azonos kezdő/záró stoppal írt gradiens, hogy a background-image
   hivatkozások is érvényesek maradjanak.
   Szemantika: mentés = ZÖLD, törlés = PIROS, teszt/frissítés = KÉK,
   elsődleges márka-CTA = FEKETE (fejléc-szín). */
--btn-grad-orange: linear-gradient(180deg, #161616 0%, #161616 100%);
--btn-grad-blue:   linear-gradient(180deg, #2563eb 0%, #2563eb 100%);
--btn-grad-red:    linear-gradient(180deg, #e2402a 0%, #e2402a 100%);
--btn-grad-green:  linear-gradient(180deg, #16a34a 0%, #16a34a 100%);
--btn-grad-dark:   linear-gradient(180deg, #161616 0%, #161616 100%);

/* Az --accent-blue* NÉGY definíciója innen TÖRÖLVE (2026-07).
   Halott kompatibilitási maradvány volt a fekete/pezsgő retheme-ből: a nevük
   "blue", de feketére/fehérre mutattak. A publikus CSS-ben NULLA hivatkozás
   volt rájuk (az adminban 50) — csak zajt és névütközést okoztak.
   A név mostantól egyértelműen az adminé, ahol valóban kéket jelent. */

/* --- ÁLLAPOTSZÍNEK — EGYETLEN forrás! ---------------------------------
   2026-07: korábban az admin.css újradefiniálta mindegyiket, más értékekkel.
   A győztest KONTRASZT döntötte el a világosított felületeken (WCAG AA, 4.5:1),
   nem ízlés — ezért lett a danger az admin értéke, a success a publikusé:

     --danger   #d6341a (4,42 BUKIK)  vs  #c33333 (5,02 ok)  -> #c33333
     --success  #15803d (4,61 ok)     vs  #1f9d55 (3,21 BUKIK) -> #15803d
     --warning  #b45309 mindkettőben azonos volt

   A -soft változatok rgba-ra álltak át: az áttetsző tint bármelyik felületen
   működik, az opak tint (#fdeceb) csak azon, amire hangolták. */
--danger: #c33333;
--danger-soft: rgba(195, 51, 51, 0.10);
--success: #15803d;
--success-soft: rgba(21, 128, 61, 0.10);
--warning: #b45309;
--warning-soft: rgba(180, 83, 9, 0.12);
--gold: #b8860b;

/* --- Prémium, semleges árnyalatú árnyékok --- */
--shadow-card: 0 1px 3px rgba(27, 25, 23, 0.07);
--shadow-card-hover: 0 10px 30px rgba(27, 25, 23, 0.13);
--shadow-dropdown: 0 12px 32px rgba(27, 25, 23, 0.16);
--shadow-modal: 0 24px 64px rgba(27, 25, 23, 0.24);

/* Egységes lekerekítés */
--radius-sharp: 4px;

}

/* ============================================================
GLOBÁLIS ALAPOK (LIGHT EDITION)
============================================================ */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
background-color: var(--bg-page);
/* Vízszintes túlcsordulás elleni GYÖKÉR-szintű védőháló. A body is clip-el, de
   a position:fixed elemek (pl. a jobbról benyíló .mobile-menu, ami zárva
   translateX(105%)-kal a viewporton kívülre lóg) KIKERÜLIK a body clipjét —
   emiatt a dokumentum szélesebb lett a kijelzőnél, és a mobil böngésző
   ~0.95x-re KIZOOMOLT (oldalt üres sáv, „nem tölti ki"). A html-clip a fixed
   elemeket is levágja, így a dokumentum sosem szélesebb a viewportnál.
   A nyitott menü a viewporton belül van, azt nem érinti. */
overflow-x: clip;
}

body {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-page);
color: var(--steel-500);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
/* A .page-hero teljes szélességű sávja vw-alapú negatív margóval lóg ki a
   tartalom-oszlopból — a görgetősáv-szélességnyi túllógást itt vágjuk le. */
overflow-x: clip;
}

/* --- CÍMSOR-ALAPÉRTELMEZÉS ------------------------------------------------
   SZÁNDÉKOSAN a lehető legkisebb specificitással (0,0,1): ez csak azoknak a
   címsoroknak ad betűközt, amelyeknek MA egyáltalán nincs. Minden meglévő,
   osztály-alapú szabály (~150 db, 12-féle értékkel) továbbra is felülírja —
   nem harcolunk velük, csak padlót teszünk alájuk.
   A text-wrap: balance a többsoros címek tördelését teszi egyenletessé. */
h1, h2, h3, h4 {
    letter-spacing: var(--track-display);
    text-wrap: balance;
}

a {
color: var(--steel-900);
text-decoration: none;
transition: color 0.15s ease;
}

a:hover {
color: var(--steel-500);
text-decoration: none;
}

img {
max-width: 100%;
height: auto;
}

/* ============================================================
FEJLÉC (HEADER)
============================================================ */
.site-header {
background: linear-gradient(180deg, #242424 0%, #161616 100%);
border-top: 3px solid;
border-image: linear-gradient(90deg, #bfb08a 0%, #ecdcb5 50%, #bfb08a 100%) 1;
border-bottom: 1.5px solid rgba(236, 227, 205, 0.25);
box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.45);
color: var(--charcoal-text-strong);
min-height: 90px;
padding: 15px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: 100;
box-sizing: border-box;
}

.logo-link {
display: flex;
align-items: center;
text-decoration: none;
}

.logo-kakastech-frontend {
font-size: 48px;
font-weight: 850;
font-family: system-ui, -apple-system, sans-serif;
letter-spacing: -1.2px;
text-transform: lowercase;
color: var(--charcoal-text-strong);
line-height: 1;
display: inline-block;
text-shadow: var(--logo-deboss);
}

/* --- KakasTech logó: pezsgő „csillanó" jel az AUDIO-LEJÁTSZÓ nyelvén ---
   EGYETLEN forrás az egész oldalon (fejléc, mobil menü, cookie-sáv, login hero,
   admin). A pont a hanghullám fényes gyöngye, a „.tech" a csiszolt pezsgő
   fém-nyelv, lassan végigsuhanó csillanással. Ugyanaz a színskála, mint az
   audio EQ sávoké: #fff7e6 → #e2d3a8 → #bfb08a. Ne definiáld újra máshol! */
.logo-dot {
    color: #e6d7ac;
    -webkit-text-fill-color: #e6d7ac;
    text-shadow:
        0 0 10px rgba(191, 176, 138, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.25);
}

.logo-tech-accent,
.logo-tech-accent-frontend {
    background: linear-gradient(100deg,
        #b3a480 0%, #cdbd94 22%, #efe4c4 43%, #fff7e6 50%, #efe4c4 57%, #cdbd94 78%, #b3a480 100%);
    background-size: 260% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    animation: kt-logo-sheen 6.5s ease-in-out infinite;
    transition: filter 0.25s ease;
}

/* Hoverre finom pezsgő ragyogás — mint az audio-lapka hover-glow-ja */
.logo-link:hover .logo-tech-accent-frontend {
    filter: drop-shadow(0 0 6px rgba(191, 176, 138, 0.5));
}

@keyframes kt-logo-sheen {
    0%, 100% { background-position: 150% 0; }
    50%      { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-tech-accent,
    .logo-tech-accent-frontend {
        animation: none;
        background-position: 42% 0; /* megállított, mégis telt pezsgő tónus */
    }
}

/* ============================================================
   AI-JEL (lapka + kakastaréj) — a markup: includes/logo-mark.php
   ============================================================
   A jel a szókép JOBB oldalán áll. A lapka teste ugyanaz a sötét fém, mint a
   fejléc felülete: nem rákerül, hanem belőle van kivágva. A fedelén a taréj
   három oszlopa PONTOSAN a három felső láb fölött ül (x = 17 / 25 / 33) — így
   a taréj a lapka folytatása, nem odarajzolt dísz.

   MIÉRT MŰKÖDIK KÉTFÉLE MÉRETBEN: 40px alatt a taréj csomópontjai
   összefolynának, ezért kiesik, és helyette a belső keret + egy nagyobb „AI"
   jön. Mindkét állapot benne van a markupban, a váltást CSS intézi — a PHP
   nem ismeri a viewportot, tehát a fejléc mobil-lépcsőjét csak így lehet
   kiszolgálni.

   SZÍNEZÉS CSS-BŐL: az SVG-ben szándékosan nincs fill/stroke a rajzelemeken
   (a gradienseket kivéve) — a CSS felülírja a presentation attribútumot is,
   így a világos felület (cookie-sáv) egyetlen modifierrel megoldható. */

.kt-ai-mark {
    /* inline-flex + vertical-align: a jel flex-konténerben (fejléc) ÉS
       inline szövegfolyamban (footer, cookie-sáv) is helyesen ül. */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin-left: 15px;
    transition: filter 0.25s ease;
}

.kt-ai-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Alapszínek (sötét felület) --- */
.kt-ai-legs        { stroke: #bfb08a; stroke-width: 1.7; }
.kt-ai-node        { fill: #e6d7ac; }
/* A gerinc a jel FŐSZEREPLŐJE — vastagabb, mint bármi más a lapkán */
.kt-ai-comb        { stroke: #e6d7ac; stroke-width: 1.9; }
.kt-ai-spark       { stroke: #fff7e6; stroke-width: 2.1; }
.kt-ai-crest-dot   { fill: #0d0d0d; stroke: #e6d7ac; stroke-width: 1.3; }
.kt-ai-crest-dot--mid { fill: #e6d7ac; stroke: none; }
.kt-ai-fire        { fill: #fff7e6; opacity: 0; }
.kt-ai-divider     { stroke: rgba(236, 220, 181, 0.30); stroke-width: 1; }

.kt-ai-txt {
    fill: #f2e7ca;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-weight: 800;
}

/* Nagyban visszafogott AI, hogy a taréj vigye a jelet; kicsiben viszont az
   AI az egyetlen tartalom, ott nagy és olvasható. */
.kt-ai-txt--lg { font-size: 10.5px; letter-spacing: 1.6px; }
.kt-ai-txt--sm { font-size: 16px; letter-spacing: 0.4px; }

/* --- Állapot-váltás: alapból a NAGY rajz él --- */
.kt-ai-frame,
.kt-ai-txt--sm { display: none; }

/* --- KICSI: a taréj kiesik, jön a keret és a középre húzott „AI" --- */
.kt-ai-mark--sm {
    width: 29px;
    height: 29px;
    margin-left: 11px;
}

.kt-ai-mark--sm .kt-ai-crest,
.kt-ai-mark--sm .kt-ai-txt--lg { display: none; }

.kt-ai-mark--sm .kt-ai-frame,
.kt-ai-mark--sm .kt-ai-txt--sm { display: block; }

/* Kis méretben vastagabb láb, különben eltűnik a hajszálvonal */
.kt-ai-mark--sm .kt-ai-legs { stroke-width: 2; }

/* --- Világos felületen (cookie-sáv): halvány pezsgő test, sötét felirat --- */
.kt-ai-mark--on-light .kt-ai-body {
    fill: rgba(185, 168, 120, 0.10);
    stroke: #b9a878;
}

.kt-ai-mark--on-light .kt-ai-legs { stroke: #b9a878; }
.kt-ai-mark--on-light .kt-ai-comb { stroke: #9b8e6c; }
.kt-ai-mark--on-light .kt-ai-node { fill: #b9a878; }
.kt-ai-mark--on-light .kt-ai-crest-dot   { fill: #fff; stroke: #9b8e6c; }
.kt-ai-mark--on-light .kt-ai-crest-dot--mid { fill: #9b8e6c; }
.kt-ai-mark--on-light .kt-ai-divider     { stroke: rgba(155, 142, 108, 0.35); }
.kt-ai-mark--on-light .kt-ai-txt         { fill: #7d7050; }
.kt-ai-mark--on-light .kt-ai-frame       { stroke: rgba(185, 168, 120, 0.45); }
/* A fénycsík világos háttéren nem csillanásnak, hanem koszfoltnak látszik */
.kt-ai-mark--on-light .kt-ai-sheen       { display: none; }

/* --- Mozgás ---------------------------------------------------------- */

/* A lapkán átfutó fénycsík PONTOSAN a .tech csillanásának ütemében (6,5 s),
   így a szókép és a jel egyetlen mozdulatot tesz, nem kettőt.
   FIGYELEM: a skewX-et a keyframe-nek is tartalmaznia kell — a CSS transform
   felülírja az SVG transform attribútumát, tehát enélkül a csík kiegyenesedne. */
.kt-ai-sheen { animation: kt-chip-sheen 6.5s ease-in-out infinite; }

@keyframes kt-chip-sheen {
    0%, 8%    { transform: translateX(-64px) skewX(-12deg); }
    46%, 100% { transform: translateX(64px) skewX(-12deg); }
}

/* A négy hosszú láb végpontja lélegzik, váltott ütemben */
.kt-ai-node    { animation: kt-ai-pulse 3.6s ease-in-out infinite; }
.kt-ai-node--b { animation-delay: 1.2s; }

@keyframes kt-ai-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* A taréj csomópontjai BALRÓL JOBBRA gyulladnak ki, és köztük végigfut egy
   impulzus a vezetősávon. Ettől lesz ugyanaz az ábra egyszerre kakastaréj
   és neurális háló — ez a jel egyetlen igazi ötlete. */
.kt-ai-fire     { animation: kt-ai-fire 2.6s ease-in-out infinite; }
.kt-ai-fire--2  { animation-delay: 0.22s; }
.kt-ai-fire--3  { animation-delay: 0.44s; }

@keyframes kt-ai-fire {
    0%, 26%, 100% { opacity: 0; }
    8%            { opacity: 0.95; }
}

/* A gerinc teljes hossza ~49 egység, ezért fut ennyit a szaggatás-eltolás.
   Ha a taréj rajza (kt_logo_mark) változik, ezt az értéket is igazítani kell,
   különben az impulzus a vonal közepén tűnne el. */
.kt-ai-spark {
    stroke-dasharray: 4 60;
    animation: kt-ai-spark 2.6s linear infinite;
}

@keyframes kt-ai-spark {
    0%        { stroke-dashoffset: 8;   opacity: 0; }
    6%        { opacity: 1; }
    46%       { opacity: 1; }
    52%, 100% { stroke-dashoffset: -52; opacity: 0; }
}

/* Hoverre ugyanaz a pezsgő ragyogás, mint a .tech-en */
.logo-link:hover .kt-ai-mark,
.header-logo-link:hover .kt-ai-mark {
    filter: drop-shadow(0 0 7px rgba(191, 176, 138, 0.5));
}

@media (prefers-reduced-motion: reduce) {
    .kt-ai-sheen { animation: none; opacity: 0.25; }
    .kt-ai-node  { animation: none; opacity: 0.8; }
    /* A kigyulladás és az impulzus tisztán mozgás-effekt: nyugalmi állapotban
       egyszerűen nincs — a taréj alap-rajza önmagában is teljes. */
    .kt-ai-fire,
    .kt-ai-spark { animation: none; opacity: 0; }
}

/* A fejléc mobil-lépcsőjén a szókép 30px-re esik (responsive.css), a jel
   tehát 40px alá kerül → a taréj kiesik. Ugyanaz a váltás, mint a --sm-nél. */
@media (max-width: 768px) {
    .kt-ai-mark {
        width: 27px;
        height: 27px;
        margin-left: 10px;
    }
    .kt-ai-mark .kt-ai-crest,
    .kt-ai-mark .kt-ai-txt--lg { display: none; }
    .kt-ai-mark .kt-ai-frame,
    .kt-ai-mark .kt-ai-txt--sm { display: block; }
    .kt-ai-mark .kt-ai-legs    { stroke-width: 2; }
}

.logo-separator {
    height: 30px;
    width: 1px;
    background: rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 16px;
}

.site-logo {
height: 48px;
filter: none;
width: auto;
object-fit: contain;
}

/* ============================================================
FEJLÉC FELHASZNÁLÓ IKON (USER ICON BUTTON)
============================================================ */
.header-user-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--charcoal-text);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.header-user-icon-btn:hover {
    color: var(--charcoal-text-strong);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-on-dark);
    box-shadow: 0 0 8px var(--accent-on-dark-soft);
}

.header-user-icon-btn svg,
.header-user-icon-btn i {
    width: 20px;
    height: 20px;
}

/* ============================================================
   ÉLŐ ADAT WIDGETEK ÉS KERESŐ GOMB (HEADER)
   ============================================================ */
.header-widgets {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sharp, 4px);
    padding: 4px 14px;
    height: 40px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.widget-item {
    display: flex;
    align-items: center;
    padding-right: 14px;
    border-right: 1px solid rgba(212, 197, 161, 0.15); /* Muted champagne metallic line */
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02);
    height: 28px;
}

.widget-item:last-child {
    border-right: none;
    padding-right: 0;
}

/* Árfolyamok */
.widget-rates {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: auto;
}

/* Elavult (stale) árfolyam-adat: a js/arfolyam.js kapcsolja, ha az
   /api/arfolyam válasza szerint minden szolgáltató elhalt. */
.widget-rates.is-stale {
    opacity: 0.55;
}

.rate-spark {
    display: block;
    margin-top: 2px;
    opacity: 0.85;
}
.rate-spark polyline {
    vector-effect: non-scaling-stroke;
}

.rate-sub {
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--charcoal-text);
}

.rate-currency {
    font-weight: 700;
    margin-right: 4px;
    color: var(--charcoal-text-strong);
    display: inline-block;
    width: 10px;
}

.rate-trend {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rate-trend--up {
    color: #ef4444; /* Piros - gyengülő forint */
}

.rate-trend--down {
    color: #22c55e; /* Zöld - erősödő forint */
}

.rate-trend--flat {
    color: var(--steel-300);
}

.rate-val {
    font-family: monospace;
    letter-spacing: -0.2px;
}

/* Időjárás */
.widget-weather {
    gap: 10px;
}

.widget-weather .weather-icon-wrap {
    display: inline-flex;
    align-items: center;
}

.widget-weather .weather-icon {
    width: 22px;
    height: 22px;
    color: #ece3cd; /* Champagne sun icon! */
    filter: drop-shadow(0 0 5px rgba(236, 227, 205, 0.3));
}

/* A JS az ikon <i>-jét cseréli, majd a lucide SVG-vé alakítja — a wrapper méretét
   az SVG-re is örökítjük, hogy a csere alatt/után ne ugráljon a layout. */
.widget-weather .weather-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.mm-weather-icon-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.mm-weather-icon-wrap svg {
    width: 16px;
    height: 16px;
}

.widget-weather .weather-temps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.1;
}

.widget-weather .weather-temp-max,
.widget-weather .weather-temp-now {
    font-size: 13px;
    color: #ece3cd; /* Champagne — aktuális hőfok */
    font-weight: 800;
}

.widget-weather .weather-temp-min,
.widget-weather .weather-temp-range {
    font-size: 10.5px;
    color: var(--steel-400, #a39c93);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Dátum */
.widget-date {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.2;
}

.date-nums {
    font-size: 13px;
    font-weight: 800;
    color: var(--charcoal-text-strong);
    letter-spacing: 0.5px;
}

.date-day {
    font-size: 10px;
    font-weight: 700;
    color: #ece3cd; /* Muted champagne instead of orange */
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Kereső: gomb + alatta nyíló panel közös horgony */
.header-search {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Kereső indító gomb */
.header-search-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sharp);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--charcoal-text);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.header-search-toggle-btn:hover {
    color: var(--charcoal-text-strong);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(236, 227, 205, 0.45); /* Champagne hover border instead of orange */
    box-shadow: 0 0 8px rgba(236, 227, 205, 0.18);
}

/* Nyitott állapot — prémium sötét/pezsgő, jelezve hogy a panel lent van */
.header-search-toggle-btn.is-active {
    color: #ffffff;
    background: #0d0d0d;
    border-color: rgba(236, 227, 205, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.header-search-toggle-btn svg,
.header-search-toggle-btn i {
    width: 20px;
    height: 20px;
}

/* Prémium lenyíló kereső panel — a gomb ALATT nyílik, jobbra igazítva */
.header-search-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    left: auto;
    width: 440px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(180deg, var(--charcoal-hover) 0%, var(--charcoal) 100%);
    border: 1px solid var(--charcoal-line);
    border-top: 2px solid var(--accent-on-dark);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30);
    z-index: 199;
    padding: 14px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, visibility 0.18s ease;
}

/* Kis nyíl a gombra mutatva */
.header-search-dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--charcoal-hover);
    border-top: 2px solid var(--accent-on-dark);
    border-left: 1px solid var(--charcoal-line);
    transform: rotate(45deg);
    pointer-events: none;
}

.header-search-dropdown.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.header-search-dropdown-inner {
    width: 100%;
}

.header-search-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    padding: 0 6px 0 14px;
    height: 48px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-search-dropdown-container:focus-within {
    border-color: var(--accent-on-dark);
    box-shadow: 0 0 0 3px var(--accent-on-dark-soft);
}

.header-search-dropdown-icon {
    width: 18px;
    height: 18px;
    color: var(--steel-400);
    flex-shrink: 0;
}

input.header-search-dropdown-input[type="text"],
input.header-search-dropdown-input[type="text"]:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--steel-900);
    font-size: 15px;
    font-family: inherit;
    padding: 0;
    box-sizing: border-box;
}

.header-search-dropdown-input::placeholder {
    color: var(--steel-400);
}

.header-search-dropdown-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel-400);
    padding: 4px;
    cursor: pointer;
    transition: color 0.15s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.header-search-dropdown-clear:hover {
    color: var(--accent-orange);
}

.header-search-dropdown-clear svg,
.header-search-dropdown-clear i {
    width: 16px;
    height: 16px;
}

/* Submit: az egységes narancs fényes gomb, a mezőbe ülő pill */
.header-search-dropdown-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 4px;
    background: var(--btn-grad-orange);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: var(--btn-gloss);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.header-search-dropdown-submit svg,
.header-search-dropdown-submit i {
    width: 16px;
    height: 16px;
}

.header-search-dropdown-submit:hover {
    filter: brightness(1.06);
    box-shadow: var(--btn-gloss-hover);
}

/* Élő keresés találati lista */
.header-search-results {
    display: none;
    margin-top: 10px;
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid var(--charcoal-line);
    padding-top: 8px;
}

.header-search-results.is-visible {
    display: block;
}

.hs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 4px;
    color: var(--charcoal-text);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.hs-item + .hs-item {
    border-top: 1px solid var(--charcoal-line);
}

.hs-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--charcoal-text-strong);
}

.hs-item-thumb {
    width: 46px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}

.hs-item-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel-400);
}

.hs-item-thumb-ph svg,
.hs-item-thumb-ph i {
    width: 16px;
    height: 16px;
}

.hs-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-item-title {
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hs-item-section {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-on-dark);
}

.hs-item-title mark {
    background: var(--accent-on-dark-soft);
    color: #ecdcb5;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

.hs-item-arrow {
    width: 16px;
    height: 16px;
    color: var(--steel-400);
    flex-shrink: 0;
}

.hs-item:hover .hs-item-arrow {
    color: var(--accent-on-dark);
}

.hs-empty,
.hs-loading {
    padding: 14px 8px;
    font-size: 13px;
    color: var(--charcoal-text);
    text-align: center;
}

/* Kivezetés a teljes találati oldalra — a legördülő csak ízelítő, a
   szekciókra bontott, listás nézetet a /kereses oldal adja. */
.hs-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 8px;
    border-top: 1px solid var(--charcoal-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-on-dark);
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.hs-all:hover {
    background: rgba(255, 255, 255, 0.06);
}

.hs-all svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Skeleton betöltés-jelző a live-search találati listához: a "Keresés…"
   felirat helyett a leendő találat-sorok halvány, csillanó vázát mutatjuk —
   kisebb az érzékelt várakozás, nincs layout-ugrás betöltéskor. */
.hs-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
}
.hs-skeleton-thumb,
.hs-skeleton-line {
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
    animation: hs-skeleton-shimmer 1.2s ease-in-out infinite;
}
.hs-skeleton-thumb {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.hs-skeleton-line {
    height: 10px;
    flex: 1;
}
.hs-skeleton-line--short {
    flex: 0 0 45%;
}
@keyframes hs-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hs-empty strong {
    color: var(--charcoal-text-strong);
}

.main-nav {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}

.main-nav a {
display: flex;
align-items: center;
padding: 6px 0;
color: var(--charcoal-text);
font-family: 'Outfit', sans-serif;
font-weight: 750;
font-size: 13.5px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
transition: color 0.25s ease;
position: relative;
}

.main-nav a::before {
content: "/";
background: linear-gradient(135deg, #ebdcb9 0%, #a39678 50%, #ebdcb9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.06));
margin-right: 14px;
font-weight: 500;
font-family: 'Outfit', sans-serif;
transition: color 0.15s ease;
}

.main-nav > a:first-child::before {
    content: none;
}

.main-nav a::after {
content: '';
position: absolute;
bottom: -6px;
left: 22px;
right: 0;
height: 2px;
background: transparent;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.main-nav a:first-child::after {
left: 0;
}

.main-nav a:hover {
background-color: transparent;
color: #ffffff;
}

.main-nav a:hover::after {
background: rgba(255, 255, 255, 0.4);
}

.main-nav a.active {
background-color: transparent;
color: #ffffff;
}

.main-nav a.active::after {
background: #ece3cd; /* var(--champagne-light) */
box-shadow: 0 0 10px rgba(236, 227, 205, 0.55);
}

/* ============================================================
   NAVIGÁCIÓS LENYÍLÓ MENÜK (DROPDOWN)
   ============================================================ */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.nav-chevron {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--charcoal-soft);
    border: 1px solid var(--charcoal-line);
    border-radius: var(--radius-sharp);
    box-shadow: var(--shadow-dropdown);
    min-width: 220px;
    z-index: 1000;
    padding: 6px 0;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Lenyíló menüben lévő linkek stílusai */
.main-nav .nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--charcoal-text);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    text-align: left;
    line-height: 1.4;
    text-transform: none;
    width: 100%;
    box-sizing: border-box;
}

.main-nav .nav-dropdown-menu a::before {
    content: none;
}

.main-nav .nav-dropdown-menu a:hover {
    background-color: var(--charcoal-hover);
    color: var(--charcoal-text-strong);
}


/* ============================================================
NYELVVÁLTÓ (a szénbarna fejlécen)
============================================================ */
.lang-switcher {
position: relative;
}

.lang-switcher-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sharp);
background-color: rgba(255, 255, 255, 0.05);
cursor: pointer;
font-size: 13px;
text-transform: none;
font-weight: 600;
color: var(--charcoal-text);
transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--charcoal-text-strong);
    border-color: var(--accent-on-dark);
    box-shadow: 0 0 8px var(--accent-on-dark-soft);
}

.lang-switcher-toggle span {
color: inherit;
}

.lang-switcher-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 6px;
background-color: var(--charcoal-soft);
border: 1px solid var(--charcoal-line);
border-radius: var(--radius-sharp);
box-shadow: var(--shadow-dropdown);
min-width: 140px;
padding: 4px 0;
z-index: 200;
}

.lang-switcher-menu.open {
display: block;
}

.lang-switcher-menu a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
color: var(--charcoal-text);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher-menu a:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--charcoal-text-strong);
}

.lang-switcher-menu a.active {
background-color: rgba(255, 255, 255, 0.05);
color: var(--accent-on-dark);
font-weight: 700;
}

/* ============================================================
FŐ TARTALOMTERÜLET
============================================================ */
.site-main {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
/* A padding értékei változóban: a .page-hero sáv negatív margója ezekből
   számol, így a responsive felülírás (responsive.css) is szinkronban marad. */
--main-pad-top: 40px;
--main-pad-x: 32px;
padding: var(--main-pad-top) var(--main-pad-x) 64px;
}

.page-hero {
    position: relative;
    text-align: left;
    margin: calc(-1 * var(--main-pad-top, 40px)) calc(50% - 50vw) 24px;
    padding: 20px clamp(var(--main-pad-x, 32px), 4vw, 76px) 20px;
    /* A világosított felület-hármashoz igazítva (2026-07). Korábban
       #edeae5 → #d3cec6 volt, ami az új, világosabb lap-háttéren indokolatlanul
       sötét sávot vágott a lap tetejébe. */
    background: linear-gradient(180deg, var(--bg-card-alt) 0%, #e2ded5 100%);
    border-bottom: 1px solid var(--uni-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.035);
}

.page-hero::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.page-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1b1917; /* Admin --steel-900 */
    margin-bottom: 4px;
    text-transform: uppercase;
    text-wrap: balance;
    position: relative;
    padding-left: 14px;
    line-height: 1.2;
}

.page-hero h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: #bfb08a; /* champagne gold vertical accent bar! */
    border-radius: 1.5px;
}

.page-hero p {
    color: #56504a; /* Admin --steel-600 */
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 1000px; /* Megnövelt szélesség, hogy a szöveg kiférjen egy sorban */
    margin: 0;
}

.page-hero-eyebrow {
    margin-bottom: 4px;
}

/* ============================================================
KÁRTYÁK ÉS RÁCSRENDSZER
============================================================ */
.box-grid {
display: grid;
/* 3 oszlop desktopon. A rács a kereső-sávval EGY szélességben (teljes
   site-main), hogy a kártyák szélesebbek legyenek és egy vonalban álljanak
   a keresővel/tabokkal. Tableten 2, mobilon 1 oszlop (lásd responsive.css). */
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: 24px;
width: 100%;
}

.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp);
padding: 30px;
box-shadow: var(--shadow-card);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}

/* A kártya felső fémes narancs csíkját a 05-home-buttons.css `.card::before`
   /* Bejelentkezés & Regisztráció */
html body:has(.auth-container) {
    background-color: var(--bg-page); /* tokenből, ne beégetve */
}

/* A .uni-page oldalak ugyanazt a szürke hátteret használják mint az egész site */

.auth-container {
    max-width: 520px;
    margin: 0 auto 40px;
    padding: 0 16px;
}

.auth-container .card {
    padding: 32px;
    border: 1px solid rgba(191, 176, 138, 0.30);
    border-radius: var(--radius-sharp, 4px);
    background: 
        radial-gradient(120% 60% at 50% 0%, rgba(191, 176, 138, 0.12) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, rgba(46, 46, 46, 0.98) 0%, rgba(23, 23, 23, 0.98) 55%, rgba(13, 13, 13, 0.99) 100%);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    color: #ece7db;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Prémium szegmens-váltó a Bejelentkezés / Regisztráció között */
.auth-tabs {
    display: flex;
    margin-bottom: 26px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(191, 176, 138, 0.16);
    border-radius: var(--radius-sharp, 4px);
    padding: 4px;
    gap: 4px;
}

.auth-tab {
    flex: 1;
    padding: 11px 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: rgba(236, 231, 219, 0.60);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.auth-tab:hover {
    color: #f2eee4;
    background: rgba(255, 255, 255, 0.05);
}

.auth-tab.active {
    color: var(--accent-on-dark, #bfb08a);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(191, 176, 138, 0.25);
}

.auth-tab.active i,
.auth-tab.active svg {
    color: var(--accent-on-dark, #bfb08a);
}

.auth-hero-tagline {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(236, 231, 219, 0.60);
    font-weight: 500;
}

/* A két űrlap különlegességei */
.auth-container .card form.auth-form:not(.active) {
    display: none;
}

.auth-container .card form.auth-form.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field-group {
    margin-bottom: 20px;
}

.auth-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(236, 231, 219, 0.60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    text-align: left;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.auth-input,
.auth-input-wrapper input.auth-input[type="text"],
.auth-input-wrapper input.auth-input[type="email"],
.auth-input-wrapper input.auth-input[type="password"] {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    font-size: 14px;
    border: 1px solid rgba(191, 176, 138, 0.20);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.25);
    color: #ece7db;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus,
.auth-input-wrapper input.auth-input[type="text"]:focus,
.auth-input-wrapper input.auth-input[type="email"]:focus,
.auth-input-wrapper input.auth-input[type="password"]:focus {
    border-color: rgba(191, 176, 138, 0.50);
    background-color: rgba(0, 0, 0, 0.40);
    box-shadow: 0 0 8px rgba(191, 176, 138, 0.30);
}

.auth-input-wrapper svg,
.auth-input-wrapper i {
    position: absolute;
    left: 12px;
    color: rgba(236, 231, 219, 0.50);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.auth-footer-links {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(236, 231, 219, 0.60);
}

.auth-footer-links a {
    color: var(--accent-on-dark, #bfb08a);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.auth-footer-links a:hover {
    color: #ece7db;
    text-decoration: underline;
}

.auth-turnstile-wrap {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

/* 3D Champagne Lejátszó-Stílusú Gomb */
.auth-container .btn-primary {
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.22) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--accent-on-dark, #bfb08a);
    font-weight: 800;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 7px rgba(0, 0, 0, 0.6),
        0 5px 16px rgba(13, 13, 13, 0.5);
    transition: all 0.2s ease;
    height: 40px;
    border-radius: var(--radius-sharp, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.auth-container .btn-primary:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.60);
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.30) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #343434 0%, #1a1a1a 55%, #0f0f0f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 22px rgba(191, 176, 138, 0.30),
        0 0 0 1px rgba(191, 176, 138, 0.28);
    color: #f2eee4;
}

.auth-container .btn-primary i,
.auth-container .btn-primary svg {
    color: inherit;
}

/* 3. Hover Block Overrides (No Shifting) */
.auth-container,
.auth-container *,
.auth-container *:hover,
.vault-col-profile *,
.vault-col-profile *:hover,
.vault-col-prompts *,
.vault-col-prompts *:hover,
.card,
.card:hover,
.auth-tab,
.auth-tab:hover,
.btn-primary,
.btn-primary:hover {
    transform: none;
    transition: none;
}

/* 4. Auth Hero Banner (Logós sáv a login felett — beépítve a kártya fejlécébe) */
.auth-hero {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(191, 176, 138, 0.18);
    padding: 32px 20px 24px;
    text-align: center;
    margin: -32px -32px 26px -32px; /* A kártya széléhez húzzuk */
    box-sizing: border-box;
}

.auth-hero .logo-kakastech-frontend {
    font-size: 32px;
    font-weight: 850;
    letter-spacing: -1.2px;
    text-transform: lowercase;
    color: #f4efe3;                 /* lágy meleg-fehér a sötét hero-n */
    -webkit-text-fill-color: #f4efe3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    display: inline-block;
    line-height: 1;
}

/* A pont és a „.tech" a KÖZÖS pezsgő-csillanó effektet öröklik (fentről),
   hogy a hero logója pontosan olyan legyen, mint a fejlécé — sötét háttéren is.
   A pontnak itt erősebb ragyogás jár, hogy elváljon a sötét felülettől. */
.auth-hero .logo-kakastech-frontend .logo-dot {
    text-shadow: 0 0 12px rgba(191, 176, 138, 0.55);
}



/* ============================================================
   MOBIL FEJLÉC — hamburger gomb + jobbról benyíló oldalmenü
   (Mandiner-stílus: logó balra, jobbra kereső · user · menü.
   A gombot a responsive.css kapcsolja be ≤768px alatt.)
   ============================================================ */
.header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sharp);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--charcoal-text-strong);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.header-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-on-dark);
}

.header-menu-toggle svg,
.header-menu-toggle i {
    width: 22px;
    height: 22px;
}

.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 301;
    width: min(340px, 88vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    --charcoal-line: #2d2d2d;
    background: linear-gradient(180deg, #242424 0%, #161616 100%);
    border-left: 1px solid var(--charcoal-line);
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.mobile-menu.is-open {
    transform: translateX(0);
}

body.mobile-menu-open {
    overflow: hidden;
}

.mobile-menu-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #242424;
    border-bottom: 1px solid var(--charcoal-line);
}

/* Szókép + AI-jel egy csomagban, hogy a .mobile-menu-head space-between-je
   a jelet ne a bezáró gomb felé tolja. */
.mobile-menu-brand {
    display: inline-flex;
    align-items: center;
}

.mobile-menu-logo {
    font-size: 26px;
}

/* A 26px-es szókép mellé arányos, kisebb jel */
.mobile-menu-brand .kt-ai-mark {
    width: 23px;
    height: 23px;
    margin-left: 9px;
}

.mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sharp);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--charcoal-text-strong);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mobile-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #bfb08a;
}

.mobile-menu-close svg,
.mobile-menu-close i {
    width: 20px;
    height: 20px;
}

/* Élő infó blokk: dátum · időjárás · árfolyamok */
.mobile-menu-info {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--charcoal-line);
}

.mm-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--charcoal-text);
}

.mm-info-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-on-dark);
    flex-shrink: 0;
}

.mm-info-strong {
    color: var(--charcoal-text-strong);
    font-weight: 700;
}

.mm-info-muted {
    opacity: 0.75;
}

.mm-info-currency {
    font-weight: 800;
    color: var(--accent-on-dark);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Kereső a panelben */
.mobile-menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 18px 4px;
    padding: 0 6px 0 12px;
    height: 46px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--charcoal-line);
    border-radius: var(--radius-sharp, 4px);
    transition: border-color 0.15s ease;
}

.mobile-menu-search:focus-within {
    border-color: var(--accent-on-dark);
}

.mm-search-icon {
    width: 17px;
    height: 17px;
    color: var(--charcoal-text);
    flex-shrink: 0;
}

.mobile-menu-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--charcoal-text-strong);
    font-size: 15px;
    font-family: inherit;
}

.mobile-menu-search input::placeholder {
    color: var(--charcoal-text);
    opacity: 0.7;
}

.mobile-menu-search button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-grad-orange);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: var(--btn-gloss);
    transition: filter 0.15s ease;
}

.mobile-menu-search button:hover {
    filter: brightness(1.06);
}

.mobile-menu-search button svg,
.mobile-menu-search button i {
    width: 17px;
    height: 17px;
}

/* Navigáció a panelben */
.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 14px;
}

.mm-nav-main {
    display: block;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--charcoal-text-strong);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mm-nav-main:hover,
.mm-nav-main.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-on-dark);
}

.mm-nav-subs {
    display: flex;
    flex-direction: column;
    padding: 0 0 6px 16px;
}

.mm-nav-subs a {
    padding: 9px 12px;
    font-size: 14px;
    color: var(--charcoal-text);
    text-decoration: none;
    border-left: 2px solid var(--charcoal-line);
    border-radius: 0 4px 4px 0;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mm-nav-subs a:hover {
    color: var(--accent-on-dark);
    border-left-color: var(--accent-on-dark);
    background: rgba(255, 255, 255, 0.04);
}

/* Fiók blokk a panel alján */
.mobile-menu-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px 4px;
    border-top: 1px solid var(--charcoal-line);
}

.mm-foot-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--charcoal-text-strong);
    text-decoration: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--charcoal-line);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mm-foot-link:hover {
    border-color: var(--accent-on-dark);
    color: var(--accent-on-dark);
}

.mm-foot-link--muted {
    background: transparent;
}

.mm-foot-link svg,
.mm-foot-link i {
    width: 18px;
    height: 18px;
    color: var(--accent-on-dark);
    flex-shrink: 0;
}