:root {
    /* =========================
       BACKGROUND (ALAPOK)
       ========================= */
    --primary-bg: #05070B; /* fő háttér (teljes oldal) */
    --secondary-bg: #0f1219; /* #0B1220, szekciók, váltások */
    --surface-bg: #080d18; /* #111827, kártyák, panelek */

    /* =========================
       BLUE AURA (SECONDARY BRAND)
       ========================= */
    --color-blue-dark: #1B2A4A; /* hover background, subtle glow */
    --color-blue-mid: #223A6B; /* border hover, focus state */
    --color-blue-light: #2F4F8F; /* aktív elemek, kiemelés */

    /* =========================
       GOLD (PRIMARY BRAND)
       ========================= */
    --color-gold-primary: #D4AF37; /* fő brand szín (gombok, highlight) */
    --color-gold-light: #F5D77A; /* fény, gradient felső része */
    --color-gold-dark: #B8962E; /* hover / active állapot */
    --color-gold-soft: #E6C768; /* szöveghez optimalizált arany */

    /* =========================
       GLOW / EFFECT
       ========================= */
    --color-glow-gold: rgba(255, 209, 102, 0.2); /* arany glow */
    --color-glow-blue: rgba(47, 79, 143, 0.2); /* kék glow */

    /* =========================
       TEXT
       ========================= */
    --color-text-primary: #F9FAFB; /* fő szöveg */
    --color-text-secondary: #D1D5DB; /* leírás, kisebb szöveg */
    --color-text-muted: #9CA3AF; /* meta, placeholder */

    /* =========================
       ⚙UI (BORDER, DIVIDER, STATES)
       ========================= */
    --color-border: #1F2937; /* alap border */
    --color-divider: #111827; /* elválasztók */
    --color-hover: #1B2A4A; /* hover háttér */
    --color-active: #D4AF37; /* aktív kiemelés */

    /* =========================
       GRADIENTS
       ========================= */
    --gradient-gold: linear-gradient(135deg, #B8962E, #D4AF37, #F5D77A);
    --gradient-bg: linear-gradient(180deg, #05070B, #0B1220);

    /* =========================
       SHADOW / EFFECT PRESETS
       ========================= */
    --shadow-gold-glow: 0 0 20px var(--color-glow-gold);
    --shadow-blue-glow: 0 0 20px var(--color-glow-blue);
}

@font-face {
    font-family: Cinzel;
    src: url(/assets/frontend/font/Cinzel/static/Cinzel-Bold.ttf);
}

@font-face {
    font-family: Cinzel-Light;
    src: url(/assets/frontend/font/Cinzel/static/Cinzel-Medium.ttf);
}

@font-face {
    font-family: Raleway;
    src: url(/assets/frontend/font/Raleway/Raleway-VariableFont_wght.ttf);
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

html {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    background-image: none;
}

body {
    font-size: 16px;
    /*font-family: Baskerville, sans-serif;*/
    font-family: Raleway, sans-serif;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: scroll-position;
    overflow-y: auto;
}

html, body {
    background-color: var(--primary-bg);
    background: linear-gradient(180deg, var(--secondary-bg), var(--secondary-bg));
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.app-content {
    padding-bottom: 3rem;
}

.page-content {
    padding-top: 12rem;
    text-align: justify;
}

.gradient-text {
    background: linear-gradient(
            to top,
            #AC752B 0%,
            #C88E34 25%,
            #EDB842 45%,
            #FDE45C 55%,
            #FDE45C 65%,
            #EDB842 80%,
            #C88E34 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.text-bold {
    color: var(--color-gold-soft);
    font-weight: 600;
}

/* =========================
   HEADLINGS
========================= */
.page-title-container {
    margin-bottom: 3rem;
    text-align: center;
}

.page-content h1.page-title {
    font-family: Cinzel, sans-serif;
    position: relative;
    padding-bottom: 0;
    background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold-primary), var(--color-gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-content h1.page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60%;
    height: 2px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--color-glow-gold), transparent);
}

.page-content h2 {
    font-family: Cinzel, sans-serif;
    font-size: 24px;
    color: var(--color-text-secondary);
    position: relative;
    text-align: left;
}

.page-content h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 8px;
    background: var(--color-gold-primary);
}

/* =========================
   BUTTONS
========================= */
.aura-btn {
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold-primary), var(--color-gold-light));
    color: var(--primary-bg);
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 20px;
    transition: 0.3s;
}

.aura-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 209, 102, 0.4);
    color: var(--surface-bg);
}

/* =========================
   ANIMATIONS
========================= */
.fade-in.fade-from-top {
    opacity: 0;
    transform: translateY(-120px);
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
    transition-delay: .5s;
}

.fade-in.fade-from-bottom {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
    transition-delay: .5s;
}

.fade-in.fade-from-top.visible,
.fade-in.fade-from-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in.fade-from-left {
    opacity: 0;
    transform: translateX(-10vw);
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
    transition-delay: .5s;
}

.fade-in.fade-from-right {
    opacity: 0;
    transform: translateX(10vw);
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
    transition-delay: .5s;
}

.fade-in.fade-from-left.visible,
.fade-in.fade-from-right.visible {
    opacity: 1;
    transform: translatex(0);
}