/* ALMIGHTY GOLD - Premium Black & Gold Luxury Design - Esztétikus, kompakt verzió */
:root {
    --black: #000000;
    --dark: #0a0a0a;
    --gold: #d4af37;
    --gold-dark: #b8972e;
    --gold-light: #e8c670;
    --text: #f5f5f5;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--black);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: all 0.4s; }
a:hover { color: var(--gold-light); }

/* Header - Még vékonyabb (60px) */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(212,175,55,0.3);
    height: 60px;
    display: flex;
    align-items: center;
}

nav {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6rem; /* Kisebb logo szöveg */
    font-weight: 900;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1.5px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem; /* Kisebb távolságok */
    align-items: center;
    margin: 0;
}

nav ul li a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem; /* Kisebb betűméret a menüben */
    letter-spacing: 1px;
    position: relative;
    padding: 0.5rem 0;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--gold);
    transition: width 0.4s ease;
}

nav ul li a:hover::after { width: 100%; }

/* Gombok - LOGIN és REGISTER kisebbek és kompaktabbak */
.btn-login {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.2px;
    transition: all 0.4s;
}

.btn-login:hover {
    background: var(--gold);
    color: #000;
    box-shadow: 0 4px 15px rgba(212,175,55,0.4);
}

.btn-join {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #000;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.2px;
    box-shadow: 0 4px 15px rgba(212,175,55,0.4);
    transition: all 0.4s;
}

.btn-join:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212,175,55,0.6);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    font-size: 1.6rem;
    color: var(--gold);
    cursor: pointer;
}

/* Hero - Szövegek és gombok kisebbek, kompaktabbak */
.hero {
    padding: 9rem 6% 5rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), var(--black));
    text-align: center;
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
}

.hero-logo {
    width: 240px; /* Nagyobb logo, de nem túl nagy */
    margin-bottom: 2.5rem;
    filter: drop-shadow(0 10px 30px rgba(212,175,55,0.6));
}

.hero h1 {
    font-size: 4.2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
}

/* Chart - Magasság kisebb (600px) */
.chart-section {
    padding: 5rem 6%;
    background: var(--dark);
}

.chart-container {
    max-width: 1400px;
    margin: 0 auto;
    border: 3px solid rgba(212,175,55,0.4);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Footer */
footer {
    background: var(--black);
    padding: 4rem 6% 2rem;
    text-align: center;
    border-top: 1px solid rgba(212,175,55,0.3);
}

footer p { margin: 1rem 0; font-size: 1.1rem; }

/* Responsive */
@media (max-width: 768px) {
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.98);
        padding: 1.5rem 0;
        gap: 1.5rem;
        text-align: center;
    }
    nav ul.active { display: flex; }
    .hamburger { display: block; }
    .hero { padding: 7rem 5% 4rem; }
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: 1.3rem; }
    .hero-logo { width: 180px; }
}
/* ===== Global layout + footer fix ===== */
html, body { height:100%; }
body{ display:flex; flex-direction:column; }
footer{ margin-top:auto; position:relative!important; }

.page-content, main{ width:min(1100px, calc(100% - 48px)); margin:0 auto; padding-top:90px; padding-bottom:48px; }

section{ height:auto!important; min-height:unset!important; }

/* ===== Auth UI ===== */
.auth-wrapper{ padding-top:90px; padding-bottom:72px; width:min(1100px, calc(100% - 48px)); margin:0 auto; display:grid; place-items:center; }
.auth-card{ width:min(520px,100%); background:rgba(10,10,10,.7); border:1px solid rgba(212,175,55,.35); border-radius:18px; padding:28px; box-shadow:0 12px 50px rgba(0,0,0,.55); }
.auth-title{ text-align:center; color:var(--gold); margin-bottom:6px; }
.auth-subtitle{text-align:center; opacity:.85; margin-bottom:18px;}
.auth-form{ display:grid; gap:12px;}
.auth-input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(212,175,55,.25); background:rgba(0,0,0,.55); color:#fff;}
.auth-btn{ margin-top:6px; padding:12px; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-dark)); border:0; font-weight:800; cursor:pointer;}
.auth-links{text-align:center;margin-top:14px;}