/* Reset és alap */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #1e0b3c, #3b1a5a 70%, #090825);
  cursor: none;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Vízszintes görgetés megakadályozása */
}

.neon-cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
  transition: transform 0.1s ease;
  z-index: 9999;
  border: 2px solid gray;
  opacity: 0.8;
}

/* Csillagok és effektusok */
.stars {
  width: 2px;
  height: 2px;
  position: fixed;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 1px white,
    50vw 75vh 1px white, 55vw 88vh 1px white, 60vw 95vh 1px white,
    65vw 72vh 1px white, 70vw 85vh 1px white, 75vw 78vh 1px white,
    80vw 92vh 1px white, 85vw 82vh 1px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}

.stars::after {
  content: "";
  position: relative;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 1px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

.shooting-star {
  position: fixed;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
  transform: rotate(180deg);
}

.shooting-star:nth-child(1) { top: 50%; left: -100px; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 35%; left: -100px; animation-delay: 1s; }
.shooting-star:nth-child(3) { top: 20%; left: -100px; animation-delay: 2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

@keyframes shoot {
  0% { transform: translateX(0) translateY(0) rotate(-150deg); opacity: 1; }
  100% { transform: translateX(120vw) translateY(50vh) rotate(-150deg); opacity: 0; }
}


/* Visszaszámláló doboz */
.christmas-countdown {
    margin-top: 20px;
    background: rgba(220, 53, 69, 0.1); /* Halvány piros háttér */
    border: 1px solid #dc3545; /* Piros keret */
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    color: #dc3545; /* Piros szöveg */
}

/* Cím */
.cc-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Időzítő konténer */
.cc-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif; /* Vagy a te betűtípusod */
}

/* Egy számjegy doboza */
.cc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 35px;
}

/* A számok */
.cc-box span {
    font-size: 1.9rem;
    font-weight: 800;
}

/* A feliratok (NAP, ÓRA...) */
.cc-box small {
    font-size: 1rem;
    opacity: 0.8;
    margin-top: 2px;
}

/* Kettőspont elválasztó */
.cc-sep {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 5px;
    position: relative;
    top: -5px; /* Kicsit feljebb igazítva */
}



/* Navbar */
.navbar {
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding-right: 200px;
  padding-left: 200px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.nav-buttons .navbtn {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: transparent;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: none;
  padding: 8px 15px;
}

.nav-buttons .navbtn i { margin-right: 10px; margin-left: -10px; }
.nav-buttons .navbtn:hover { color: #AD00FF; }
.nav-buttons .navbtn:not(:last-child)::after { content: "|"; color: #fff; font-weight: normal; margin-left: 20px; }

/* Főoldal specifikus elemek */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  padding-top: 200px;
  padding-bottom: 200px;
  max-width: 1300px;
  margin: 0 auto;
  gap: 30px;
}

.phone-container {
  position: relative;
  width: 350px;
  height: auto;
  top: 20px;
  opacity: 0;
  transform: rotate(90deg);
  animation: fadeInRotate 3s ease-in-out 0.5s forwards;
}


/* =========================================
   ÚJ VIX NAVBAR STÍLUSOK (Egyedi osztályok)
   ========================================= */

/* Navbar alap konténer */
.vix-navbar {
    background: rgba(15, 10, 30, 0.6) !important; /* Sötét, áttetsző háttér */
    backdrop-filter: blur(12px); /* Homályosítás (Glass effect) */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 40px !important; /* Kicsit szellősebb */
    position: fixed; /* Mindig felül maradjon */
    top: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.3s ease;
}

/* Logo stílus */
.vix-logo-img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 0 5px rgba(173, 0, 255, 0.5));
    transition: transform 0.3s ease;
}
.vix-logo-img:hover {
    transform: scale(1.05);
}

/* Menü lista */
.vix-nav-list {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Linkek stílusa */
.vix-link {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 15px !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px; /* Távolság az ikon és a szöveg között */
    position: relative;
}

/* Ikon színe */
.vix-link i {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Hover effektus */
.vix-link:hover {
    color: #AD00FF !important; /* Lila szín hoverre */
    text-shadow: 0 0 10px rgba(173, 0, 255, 0.4);
}
.vix-link:hover i {
    color: #AD00FF;
}

/* Elválasztó vonal (|) a menüpontok közé */
/* Csak asztali nézetben (lg felett) jelenjen meg */
@media (min-width: 992px) {
    .vix-link::after {
        content: "|";
        position: absolute;
        right: -5px;
        color: rgba(255, 255, 255, 0.3);
        font-weight: 300;
        pointer-events: none;
    }

    /* Az utolsó elemnél ne legyen vonal */
    .nav-item:last-child .vix-link::after {
        display: none;
    }
}

/* Hamburger gomb stílusa */
.vix-toggler {
    border: 1px solid rgba(173, 0, 255, 0.3) !important;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.3s;
}
.vix-toggler:focus {
    box-shadow: 0 0 10px rgba(173, 0, 255, 0.5);
}
.vix-toggler i {
    font-size: 24px;
    color: #fff;
}

/* MOBIL NÉZET (Reszponzivitás) */
@media (max-width: 991px) {
    .vix-navbar {
        padding: 10px 20px !important;
        background: rgba(10, 5, 20, 0.95) !important; /* Mobilon sötétebb háttér */
    }
    
    .vix-nav-list {
        margin-top: 20px;
        padding-bottom: 20px;
        gap: 0;
    }

    .vix-link {
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        justify-content: flex-start; /* Balra igazítás mobilon */
    }
    
    .vix-link:hover {
        background: rgba(173, 0, 255, 0.1);
        padding-left: 25px !important; /* Kis csúszás effekt */
    }

    /* Mobilon ne legyen elválasztó vonal */
    .vix-link::after {
        display: none !important;
    }
    
    /* Bejelentkezés gomb kiemelése mobilon */
    .vix-link.highlight {
        margin-top: 10px;
        background: rgba(173, 0, 255, 0.2);
        border-radius: 8px;
        border: 1px solid rgba(173, 0, 255, 0.3);
        justify-content: center;
    }
}

@keyframes fadeInRotate {
  0% { opacity: 0; transform: rotate(90deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

.phone-image { width: 200%; height: auto; position: relative; z-index: 1; right: 100px; }
.shadow-image { position: absolute; top: 87.5%; left: 73%; transform: translateX(-50%); width: 700px; height: auto; opacity: 0; z-index: -1; animation: fadeInShadow 0.5s ease-in-out 2.5s forwards; }
@keyframes fadeInShadow { from { opacity: 0; } to { opacity: 1; } }
.video { position: absolute; left: -15%; top: 12%; width: 175%; height: 75%; z-index: -100; background-size: cover; overflow: hidden; object-fit: fill; border-radius: 20px; }

.boxes-container { display: flex; justify-content: space-between; gap: 20px; margin: 40px auto; max-width: 1200px; }
.purple-section { background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); color: #ffffff; padding: 20px 10px; border-radius: 10px; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); flex: 1; text-align: center; }
.purple-section .container { padding: 0 20px; }
.lock-icon { font-size: 4em; color: #dda0dd; margin-bottom: 20px; text-shadow: 0 0 10px #8a2be2; }
.section-text { font-family: SF UI Display, sans-serif; font-size: 1.2em; font-weight: 400; line-height: 1.5; margin: 0; }

.left-nav { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 1001; }
.nav-dot { display: block; width: 15px; height: 15px; background-color: transparent; border: 3px solid #a855f7; border-radius: 50%; box-shadow: 0 0 10px #d65eff, 0 0 20px #d65eff, 0 0 30px #d65eff; transition: all 0.3s ease; text-decoration: none; }
.nav-dot:hover { border-color: #d65eff; box-shadow: 0 0 15px #d65eff, 0 0 25px #d65eff, 0 0 35px #d65eff; transform: scale(1.2); }
.nav-dot.active { background-color: #d7b1fb; border-color: #d7b1fb; box-shadow: 0 0 15px #d65eff, 0 0 25px #d65eff, 0 0 35px #d65eff; transform: scale(1.2); }

.h-title { color: #FFF; text-align: left; font-family: SF UI Display; font-size: 64px; font-weight: 300; margin-top: 2em; margin-bottom: 1em; text-shadow: 0 0 8px #ab00fd, 0 0 20px #7700b0; animation: fadeInUp 3s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

a.join { border-radius: 20px; border: 3px solid #AD00FF; background: rgba(125, 5, 199, 0.20); box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10); color: #FFF; text-shadow: 0px 1px 15px #000; font-family: SF UI Display, sans-serif; font-size: 22px; font-weight: 500; text-transform: uppercase; text-decoration: none; padding: 10px 15px; display: inline-block; transition: all 0.3s ease; position: relative; overflow: hidden; margin-top: 30px; }
a.join:hover { border-color: #d65eff; box-shadow: 0 0 20px #AD00FF, 0 0 15px rgba(173, 0, 255, 0.6); color: #fff; text-shadow: 0 0 10px #d65eff, 0 0 30px #AD00FF; }

.header { position: relative; }
.header .container { height: 400px; display: block; position: relative; z-index: 999; }
.f-left h5, h2 { margin: 0; }
.f-left h5 { color: #AD00FF; font-family: Poppins; font-size: 13px; font-weight: 500; letter-spacing: 2.21px; text-transform: uppercase; }
.f-left h2 { color: #DDE4ED; font-family: SF UI Display; font-size: 30px; font-weight: 400; line-height: 145%; letter-spacing: 0.72px; text-transform: uppercase; }

.feature { border-radius: 20px; background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 26.3%, rgba(217, 217, 217, 0.10) 100%); box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10); padding: 15px; display: flex; flex-direction: column; align-items: center; gap: 1em; }
.f-name { color: #FFF; text-align: center; font-family: SF UI Display; font-size: 25px; font-weight: 500; }
.f-desc { color: #FFF; text-align: center; font-family: SF UI Display; font-size: 20px; font-weight: 400; }
.f-list { display: flex; gap: 1em; margin-top: 5em; }
.f-icon { margin-top: -5em; }
.f-right a { color: #A2A8BA; font-family: Poppins; font-size: 13px; font-weight: 500; letter-spacing: 2.21px; text-transform: uppercase; text-decoration: none; }
.f-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2em; }

/* --- FOOTER --- */
.footer { background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(25px); text-align: center; padding: 15px; position: relative; }
.footer h3 { color: #DDE4ED; font-family: SF UI Display; font-size: 30px; font-weight: 400; letter-spacing: 0.72px; }
.footer span { color: #A2A8BA; font-family: Poppins; font-size: 16px; font-weight: 400; line-height: 28px; }
.f-text { max-width: 45%; margin: 0 auto; }
.f-bottom { display: flex; justify-content: space-between; }
.fo-left, .fo-right { color: #A2A8BA; font-family: Poppins; font-size: 15px; line-height: 28px; letter-spacing: 0.32px; margin: 0 auto; }
.fo-links { display: flex; gap: 1em; list-style: none; }
.fo-links a { color: #A2A8BA; font-family: Poppins; font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 0.32px; text-decoration: none; }
.fo-links li::before { content: "|"; color: rgba(120, 0, 176, 0.81); margin-right: 10px; }
.fo-links li:first-child::before { content: ""; }

/* --- MISC --- */
.logo { height: 60px; display: flex; }
.vix-logo-img { animation: flipY 3s infinite; }
.logo-text { color: #a855f7; font-family: SF UI Display, sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; }

/* --- ANIMATIONS & EFFECTS --- */
@keyframes flipY { from { transform: rotateY(180deg); } to { transform: rotateY(-180deg); } }
.fade-in { opacity: 0; animation: fadeIn 1s ease-in-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* Pricing */
.pricing { width: 100%; padding: 200px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px 50px; }
.p-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.p-left h5 { font-size: 14px; color: #a855f7; margin: 0 0 7px; text-transform: uppercase; letter-spacing: 1px; font-family: SF UI Display; }
.p-left h2 { font-size: 36px; margin: 0; background: linear-gradient(45deg, #ffffff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: SF UI Display, sans-serif; }
.p-right a { color: #a855f7; text-decoration: none; font-weight: bold; transition: color 0.3s; font-family: SF UI Display; }
.p-right a:hover { color: #ffffff; }
.p-right a i { margin-right: 5px; }
.p-list { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
.p-name { font-family: SF UI Display, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; text-align: center; margin-bottom: 10px; text-shadow: 0 0 10px rgba(173, 0, 255, 0.2); letter-spacing: 1px;  background: linear-gradient(45deg, rgba(255, 255, 255, 0.7), rgba(168, 85, 247, 0.7)); }
.plan { animation: fadeIn 3s; flex: 1; min-width: 300px; max-width: 350px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }
.plan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #a855f7, #7c3aed); }
/*.plan:hover { transform: translateY(-10px); box-shadow: 0 12px 40px rgba(168, 85, 247, 0.5); } */
.plan2 { animation: fadeIn 3s; flex: 1; min-width: 300px; max-width: 350px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 15px #a855f7, 0 0 20px #a855f7; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; transform: scale(1.03); }
/*.plan2:hover { transform: translateY(10px) scale(1.05); box-shadow: 0 12px 40px rgba(168, 85, 247, 0.5); } */
.p-price { font-size: 32px; font-weight: bold; margin-bottom: 20px; background: linear-gradient(45deg, #ffffff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.p-features { margin-bottom: 15px; }
.p-feature { font-family: SF UI Display, sans-serif; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; background: linear-gradient(45deg, #ffffff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.p-feature i { margin-right: 10px; color: #a855f7; font-size: 20px; }
.p-button { border-radius: 20px; border: 3px solid #AD00FF; background: rgba(125, 5, 199, 0.20); color: #FFF; font-family: SF UI Display, sans-serif; font-size: 18px; font-weight: 500; text-transform: uppercase; text-decoration: none; padding: 10px 20px; display: inline-block; margin: 25px auto 0; transition: all 0.3s ease; cursor: pointer; }
@keyframes pulseGlow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* Sticky bubble */
.sticky-bubble { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, #AD00FF, #7c3aed); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; text-decoration: none; box-shadow: 0 4px 10px rgba(173, 0, 255, 0.5); transition: all 0.3s ease; z-index: 1000; }
.sticky-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 15px rgba(173, 0, 255, 0.7); }
.sticky-bubble i { margin: 0; }

/* GYIK Szekció */
#section3.faq.section { color: #ffffff; padding: 40px 20px; border-radius: 10px; margin: 20px auto; max-width: 1300px; font-family: Poppins; }
.faq { padding: 0 20px; }

.question { 
    background-color: rgba(138, 43, 226, 0.1); 
    border: 2px solid #8a2be2; 
    border-radius: 8px; 
    padding: 15px; 
    margin-bottom: 10px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    font-weight: 500; 
    color: #f3e5f5; 
    font-family: Poppins, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question::after { 
    content: "▼"; 
    font-weight: 900;
    flex-shrink: 0; 
    margin-left: 10px;
}

.question:hover { background-color: rgba(138, 43, 226, 0.2); }
.question.active { background-color: rgba(138, 43, 226, 0.3); border-color: #6a0dad; }
.question.active::after { content: "▲"; }

.answercont { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; margin-bottom: 20px; }
.answer { font-family: SF UI Display, sans-serif; background-color: #4b0082; color: #f3e5f5; border-left: 4px solid #8a2be2; padding: 15px; border-radius: 0 8px 8px 0; font-style: italic; }
/* Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #1e0b3c; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a855f7, #7c3aed); border-radius: 10px; border: 2px solid #1e0b3c; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d65eff, #a855f7); }
* { scrollbar-width: thin; scrollbar-color: #a855f7 #1e0b3c; }

/* Login Page Styles */
.login-section { margin-top: 30px !important; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: Poppins, sans-serif; }
.login-container { max-width: 600px; width: 100%; margin: 0 auto; }
.login-card { border-radius: 25px; padding: 40px; backdrop-filter: blur(10px); text-align: center; }
.login-title { font-size: 2rem; color: #fff; margin-bottom: 60px; text-shadow: 0 0 10px #AD00FF, 0 0 20px #7700b0; font-weight: 700; }
.login-form { display: flex; flex-direction: column; }
.login-group { margin-bottom: 20px; text-align: left; }
.login-label { display: block; color: #DDE4ED; font-size: 1rem; margin-bottom: 5px; font-weight: 500; }
.login-input-wrapper { position: relative; display: flex; align-items: center; }
.login-icon { position: absolute; left: 15px; color: #fff; font-size: 1.2rem; z-index: 1; pointer-events: none; }
.toggle-password { position: absolute; right: 15px; color: #fff; font-size: 1.2rem; z-index: 1; cursor: pointer; transition: color 0.3s; }
.toggle-password:hover { color: #d65eff; }
.login-input { width: 100%; padding: 12px 45px; border: 1px solid #AD00FF; border-radius: 20px; background: rgba(0,0,0,0.2); color: #fff; font-size: 1rem; transition: all 0.3s; box-sizing: border-box; }
.login-input:focus { outline: none; border-color: #d65eff; box-shadow: 0 0 10px #AD00FF; background: rgba(255, 255, 255, 0.05); }
.login-input::placeholder { color: rgba(255,255,255,0.7); }
.login-btn { background: #AD00FF; border: 2px solid #AD00FF; color: #fff; padding: 12px 20px; border-radius: 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 10px; }
.login-btn:hover { background: #d65eff; box-shadow: 0 0 15px #AD00FF, 0 0 25px #AD00FF inset; transform: translateY(-2px); }
.login-links { margin-top: 20px; display: flex; justify-content: center; }
.login-link { color: #AD00FF; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.login-link:hover { color: #d65eff; text-shadow: 0 0 5px #AD00FF; }


@media only screen and (max-width: 600px) {
  .question { 
      padding: 10px; 
      font-size: 14px; 
      align-items: flex-start;
  }
  .answer { padding: 10px; font-size: 14px; }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  body { overflow-y: auto; }
  .navbar { padding: 0 10px; }
  .header-content { flex-direction: column; text-align: center; padding: 100px 20px; }
  .phone-container, .neon-cursor, .left-nav { display: none; }
  .boxes-container { flex-direction: column; gap: 15px; margin: 20px auto; max-width: 90%; }
  .purple-section { padding: 15px 5px; }
  .lock-icon { font-size: 2.5em; }
  .section-text { font-size: 1em; }
  .h-title { font-size: 36px; margin-top: 1em; margin-bottom: 0.5em; }
  a.join { font-size: 16px; padding: 8px 12px; margin-bottom: 50px; }
  .feature { padding: 10px; gap: 0.5em; }
  .f-name { font-size: 18px; }
  .f-desc { font-size: 14px; }
  .f-list { flex-direction: column; gap: 0.5em; margin-top: 2em; }
  .f-left h2 { font-size: 20px; }
  .f-left h5 { font-size: 10px; }
  .f-right a { font-size: 10px; }
  .footer { padding: 10px; }
  .footer h3 { font-size: 20px; }
  .footer span { font-size: 14px; }
  .f-text { max-width: 90%; }
  .f-bottom { flex-direction: column; gap: 10px; }
  .fo-links { flex-direction: column; gap: 0.5em; }
  .logo { height: 50px; margin-top: 10px; margin-bottom: 10px; }
  .logo img { width: auto; height: 100%; }
  .logo-text { font-size: 16px; }
  .pricing { padding: 100px 0; }
  .container { padding: 0 10px 20px; }
  .p-title { flex-direction: column; text-align: center; margin-bottom: 20px; }
  .p-left h2 { font-size: 24px; }
  .p-right { display: none; }
  .p-list { flex-direction: column; align-items: center; gap: 15px; margin-bottom: 30px; }
  .plan, .plan2 { min-width: 280px; max-width: 100%; padding: 20px; }
  .p-name { font-size: 18px; }
  .p-price { font-size: 24px; }
  .p-feature { font-size: 14px; }
  .p-button { font-size: 14px; padding: 8px 15px; }
  .sticky-bubble { display: none; }
  #section3.faq.section { padding: 20px 10px; margin: 10px auto; }
  .faq { padding: 0 10px; }
  .login-card { padding: 20px; border-radius: 15px; }
  .login-title { font-size: 1.5rem; margin-bottom: 40px; }
  .login-btn { border-radius: 15px; }
  .login-input { border-radius: 10px; }
  .login-links { flex-direction: column; gap: 10px; align-items: center; }

  /* Hamburger gomb mobil menühöz */
  .nav-buttons { display: flex !important; flex-direction: column; gap: 15px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); padding: 20px; border-radius: 10px; }
  .navbtn { justify-content: center; padding: 12px; font-size: 16px; min-height: 48px; }
}

/* Hamburger gomb stílusai */
.hamburger-btn { background: none; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.hamburger-btn:hover { transform: scale(1.1); }
.hamburger-btn .fa-bars { width: 25px; height: 20px; position: relative; display: block; color: #fff; transition: all 0.3s ease; }
.hamburger-icon::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background: #fff; transform: translateY(-50%); }

.error-text { color: #f73030; font-weight: 400; margin-top: 10px; text-align: center; }