/* Member card toggle kiegészítés */
.member-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.member-arrow {
    transition: transform 0.3s ease;
}

.member-arrow.open {
    transform: rotate(180deg);
}

.member-extra {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    margin-top: 6px;
}

.member-extra.show {
    max-height: 200px;
    opacity: 1;
}

:root {
    --main-blue: rgb(49, 192, 223);
    --main-blue-light: rgba(49, 192, 223, 0.7);
    --main-blue-shadow: rgba(49, 192, 223, 0.5);
    --bg-dark: #0a0f1a;
    --bg-gradient: linear-gradient(135deg, rgba(0, 0, 30, 0.8), rgba(0, 0, 0, 1));
}

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

html, body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    color: var(--main-blue);
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--bg-gradient);
    position: relative;
}

a {
    text-decoration: none;
    cursor: pointer;
}

/* -------------------- Canvas háttér -------------------- */
#bg-circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-gradient);
    z-index: -2;
}

/* -------------------- Header -------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(5, 15, 40, 0.85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
    z-index: 9999;
}

header .logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--main-blue);
    position: absolute;
    left: 20px;
}

nav {
    display: flex;
    gap: 36px;
}

nav a {
    color: var(--main-blue);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.35s ease;
}

nav a:hover {
    background-color: var(--main-blue-light);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 0 10px var(--main-blue-shadow);
}

/* Hamburger mobilra */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 20px;
}

.hamburger span {
    display: block;
    height: 3px;
    background: var(--main-blue);
    border-radius: 2px;
}

/* -------------------- Main Section -------------------- */
main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

.logo-container {
    width: 90vw;
    max-width: 640px;
    aspect-ratio: 16/9;
    background: #6fbddb;
    border: 3px solid #6fbddb;
    border-radius: 16px;
    box-shadow: 0 0 40px var(--main-blue-light);
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeInScale 1.6s ease forwards;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company-name {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--main-blue);
    text-shadow: 0 0 16px var(--main-blue-light);
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp 1s ease forwards 0.8s;
}

#real-time-clock {
    font-size: 5rem;
    font-weight: 700;
    color: #a5b8d1;
    text-shadow: 0 0 24px var(--main-blue-light);
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeUp 1s ease forwards 1.2s;
}

.tagline {
    font-size: 1.5rem;
    color: #a5b8d1;
    max-width: 480px;
    line-height: 1.4;
    opacity: 0;
    animation: fadeUp 1s ease forwards 1.6s;
}

/* -------------------- Letöltés Gomb (ÚJ) -------------------- */
/* -------------------- Letöltés Gomb (ÚJ) -------------------- */
/* -------------------- Letöltés Gomb (ÚJ) -------------------- */
/* -------------------- Letöltés Gomb (FRISSÍTVE) -------------------- */
/* -------------------- Letöltés Gomb (VÉGLEGESÍTETT FRISSÍTÉS) -------------------- */
/* -------------------- Letöltés Gomb (VÉGLEGESÍTETT FRISSÍTÉS) -------------------- */
/* -------------------- Letöltés Gomb (VÉGLEGES, Flexbox Központozással) -------------------- */
/* -------------------- Letöltés Gomb (VÉGLEGES, Flexbox Központozással) -------------------- */
.download-button {
    display: flex; /* 1. A gombot Flexbox konténerré tesszük */
    flex-direction: column; /* 2. A tartalom oszlopban legyen (több soros szöveg kezelése) */
    justify-content: center; /* 3. VERT. középre igazítás a gomb magasságához képest */
    text-align: center; /* HORIZ. középre igazítás (ez már megvolt) */
    
    background-color: var(--main-blue);
    color: white; 
    font-weight: 700;
    font-size: 1.3rem;
    padding: 15px 30px;
    border-radius: 8px;
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px var(--main-blue-shadow);
    transition: all 0.3s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
/* -------------------- Download Gombok Konténere (ÚJ, RESZPONZÍV) -------------------- */
.download-buttons-container {
    /* 1. Változás: A Grid Layout engedélyezése */
    display: grid; 
    
    /* 2. Változás: Reszponzív oszlopsablon beállítása */
    /* Annyi oszlop, amennyi elfér, a szélességet a tartalom határozza meg */
    grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
    
    /* Középre igazítás (horizontálisan) */
    justify-items: center; 
    
    /* Vízszintes (oszlopköz) ÉS Függőleges (sorköz) távolság */
    gap: 1.25rem 1.25rem; 
    
    width: 100%; 
    max-width: 1200px; 
    margin: 30px auto 0 auto; 
    
    /* Animáció */
    opacity: 0; 
    animation: fadeUp 1s ease forwards 2.0s;
}

/* 3. Változás: A gombok stílusa (a gombok magasságának dinamikus beállítása) */
.download-buttons-container > a,
.download-buttons-container > button {
    /* Szélesség: Kitölti a Grid cellát (ami a legszélesebb gomb tartalmához igazodik) */
    width: 100%; 
    min-width: min-content; 
    
    /* 🟢 A FIX MAGASSÁG EL LETT TÁVOLÍTVA (pl. height: 3.5rem;)! 
       Ehelyett PADDING-ot használunk, hogy a magasság dinamikus legyen. */
    
    /* Magasság: Függőleges kitöltés a dinamikus magasságért */
    /* Fent/Lent: 0.75rem, Balra/Jobbra: 1.5rem */
    padding: 0.75rem 1.5rem; 
    
    /* Szövegtördelés és igazítás beállításai */
    display: block;        /* Biztosítja a text-align használatát és a teljes szélességet */
    text-align: center;    /* A szöveg középre igazítása (vízszintesen) */
    white-space: normal;   /* Engedélyezi, hogy a szöveg több sorba tördelődjön */
    line-height: 1.2;      /* A sorköz beállítása */
    
    /*... egyéb gomb stílusok (szín, betűméret, stb.) ...*/
}

.download-button:hover {
    background-color: white;
    color: var(--bg-dark); /* Hover esetén sötét szöveg a fehér gombon */
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px var(--main-blue-light);
}


/* -------------------- Animációk -------------------- */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------- Szekciók -------------------- */
section {
    max-width: 900px;
    margin: 60px auto;
    padding: 28px 32px;
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(20, 40, 80, 0.7);
    color: #dbeafe;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease;
}

section.show {
    opacity: 1;
    transform: translateY(0);
}

section h2 {
    color: var(--main-blue);
    font-size: 2.4rem;
    margin-bottom: 18px;
    text-shadow: 0 0 12px var(--main-blue-light);
}

section p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #dbeafe;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 12px;
}

.member-card {
    background: rgba(20, 30, 55, 0.7);
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(40, 60, 120, 0.65);
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.8s ease;
    opacity: 0;
}

.member-card.show {
    opacity: 1;
    transform: translateY(0);
}

.member-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 16px 36px var(--main-blue-light);
}

.member-name {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--main-blue);
    margin-bottom: 6px;
}

.member-role {
    font-style: italic;
    color: rgba(49, 192, 223, 0.8);
    margin-bottom: 12px;
}

.member-description {
    font-size: 1.05rem;
    color: #dbeafe;
}

/* -------------------- Footer -------------------- */
footer {
    background: rgba(5, 15, 40, 0.85);
    color: var(--main-blue);
    padding: 20px 10px 30px;
    text-align: center;
    font-size: 1rem;
    box-shadow: inset 0 1px 3px var(--main-blue-shadow);
}

footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
}

footer .social-icons a {
    color: var(--main-blue);
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

footer .social-icons a:hover {
    color: var(--main-blue-light);
    transform: scale(1.2);
}

/* -------------------- Media Queries -------------------- */
@media(max-width:768px) {
    header {
        justify-content: flex-start;
    }

    nav {
        display: none;
        flex-direction: column;
        background: rgba(5, 15, 40, 0.95);
        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
        padding: 20px;
        gap: 16px;
        border-radius: 0 0 0 12px;
    }

    nav.show {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

@media(max-width:480px) {
    main {
        padding: 0 15px;
    }

    .logo-container {
        width: 240px;
    }

    .company-name {
        font-size: 2.4rem;
    }

    .tagline {
        font-size: 1.1rem;
        max-width: 300px;
    }
    
    .download-button {
        font-size: 1.1rem;
        padding: 12px 24px;
    }

    section {
        margin: 40px 15px;
        padding: 20px;
    }

    section h2 {
        font-size: 1.8rem;
    }
}

/* Slideshow CSS */
.slideshow-wrapper {
    width: 90%;
    max-width: 900px;
    margin: 60px auto;
    position: relative;
}

.slideshow-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* Fix 16:9 arány */
    padding-top: 56.25%;
    /* 9/16*100% */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.slide.active {
    opacity: 1;
    position: absolute;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ne torzuljon */
    display: block;
    border-radius: 16px;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 24px;
    padding: 12px;
    border-radius: 50%;
    user-select: none;
    transition: background 0.3s ease;
}

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.dots {
    text-align: center;
    margin-top: 12px;
}

.dot {
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--main-blue);
    transform: scale(1.2);
}
/* ========================== */
/* 💬 CHAT + SLIDESHOW GOMBOK */
/* ========================== */

/* ========================== */
/* 💬 CHAT + SLIDESHOW GOMBOK */
/* ========================== */
#toggle-slideshow,
#toggle-chat {
    position: fixed;
    bottom: 30px;
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    background: var(--main-blue);
    color: white;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
}

#toggle-slideshow { left: 30px; }
#toggle-chat { right: 30px; }

#toggle-slideshow:hover,
#toggle-chat:hover {
    background: var(--main-blue-light);
    transform: translateY(-3px);
    box-shadow: 0 0 12px var(--main-blue-shadow);
}

/* ========================================== */
/* 💬 CHAT ABLAK STÍLUSOK (RESZPONZÍV KIVITEL) */
/* ========================================== */

#chat-box {
    display: flex;
    position: fixed;
    /* Csökkentett alsó távolság (rem-ben) */
    bottom: 3rem; 
    /* Reszponzív oldalsó távolság */
    right: 3vw; 
    /* Reszponzív szélesség (20rem az alap) */
    width: clamp(200px, 20rem, 90vw); 
    max-height: 80vh; /* Max. magasság a viewport 80%-a */
    background: rgba(10, 20, 40, 0.95);
    border: 0.125rem solid var(--main-blue-light); /* 2px -> rem */
    border-radius: 1rem; /* 16px -> rem */
    box-shadow: 0 0.5rem 1.8rem rgba(0, 0, 0, 0.6); /* 8px 30px -> rem */
    overflow: hidden;
    z-index: 10001;
    flex-direction: column;
    animation: fadeInUp 0.4s ease forwards;
}

#chat-box header {
    background: var(--main-blue);
    color: white;
    padding: 0.6rem 1rem; /* 10px 16px -> rem */
    font-weight: 700;
    font-size: 1rem; 
    text-align: center;
}

#chat-messages {
    flex: 1;
    padding: 0.6rem; 
    overflow-y: auto;
    font-size: 0.95rem; 
    display: flex;
    flex-direction: column;
    gap: 0.5rem; 
    min-height: 6.25rem; /* 100px -> rem */
}

/* KESKENY RESZPONZÍV INPUT RÉSZ */
#chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 6px -> rem */
    /* ULTRA KESKENY PADDING: 2px felül/alul -> 0.125rem */
    padding: 0.125rem 0.5rem; 
    background: rgba(255, 255, 255, 0.05);
    /* Az 1px border maradhat fix, vagy átváltható */
    border-top: 1px solid rgba(49, 192, 223, 0.2); 
}

#chat-input {
    flex: 1;
    /* KESKENY PADDING: 5px felül/alul -> 0.3rem */
    padding: 0.3rem 0.75rem; 
    border-radius: 1.25rem; /* 20px -> rem */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    outline: none;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transition: border-color 0.2s ease;
}

#chat-input:focus {
    border-color: var(--main-blue);
}

#send-chat {
    /* KESKENY PADDING: 5px felül/alul -> 0.3rem */
    padding: 0.3rem 0.9rem; 
    background: var(--main-blue);
    border: none;
    border-radius: 1.25rem; /* 20px -> rem */
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

#send-chat:hover { 
    background: var(--main-blue-light); 
}

/* Chat üzenetek buborékok */
.user-msg, .bot-msg {
    padding: 0.5rem 0.75rem; /* 8px 12px -> rem */
    font-size: 0.9rem;
    border-radius: 1rem 1rem 0 1rem; /* Csak az user-msg kapja meg. */
}

.bot-msg {
    border-radius: 1rem 1rem 1rem 0; /* A bot-msg is rem-ben */
}

/* A fő gombok reszponzívvá tétele (opcionális, de ajánlott) */
#toggle-slideshow,
#toggle-chat {
    /* ... (a korábbi fix 30px-es értéket váltjuk át) */
    bottom: 2rem; 
    padding: 0.7rem 1rem; /* 14px 22px -> rem */
    font-size: 1rem;
    left: 2rem; /* a 30px helyett */
}

#toggle-chat { 
    right: 2rem; /* a 30px helyett */
    left: auto;
}
/* Media Query reszponzív egységekkel */
@media(max-width: 768px) {
    #chat-box {
        /* A mobil nézetben a szélesség nagy része */
        width: 90vw; 
        /* Kis képernyőn középre, hogy ne érjenek össze a gombokkal */
        left: 5vw; 
        right: 5vw;
        /* A gombok fölé helyezzük, hogy ne takarja el őket a bemeneti mező */
        bottom: 5rem;
    }
}
/* Animációk */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========================== */
/* 💳 Member card toggle javítás */
.member-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.member-arrow {
    transition: transform 0.3s ease;
}

.member-arrow.open {
    transform: rotate(180deg);
}

.member-extra {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    opacity: 0;
    margin-top: 0;
    padding: 0 0;
}

.member-extra.show {
    max-height: 250px; /* nagyobb ha több szöveg */
    opacity: 1;
    margin-top: 6px;
    padding: 8px 0;
}

/* ========================== */
/* Slideshow fix (arány + hover) */
.slideshow-wrapper {
    width: 90%;
    max-width: 900px;
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.slide img {
    border-radius: 16px;
    object-fit: cover;
}

/* Prev/Next gombok */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    padding: 12px;
    border-radius: 50%;
    user-select: none;
    transition: all 0.3s ease;
    z-index: 10;
}

.prev:hover, .next:hover { background: rgba(0,0,0,0.8); }

/* Dots */
.dots {
    text-align: center;
    margin-top: 12px;
}

.dot {
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--main-blue);
    transform: scale(1.2);
}