body{
  font-family:'Orbitron',sans-serif;
  background:linear-gradient(135deg,#020617,#020c1b,#0f172a);
  color:white;
}

/* NAVBAR */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  border-bottom:1px solid #38bdf8;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-img{
  width:35px;
  height:35px;
  object-fit:contain;
}

.logo-text{
  color:#38bdf8;
}

/* BUTTON */
.login-btn{
  background:#38bdf8;
  padding:8px 20px;
  border:none;
  cursor:pointer;
}

/* HERO */
.hero{
  text-align:center;
  padding:120px 20px;
}

.hero h1{
  font-size:55px;
  text-shadow:0 0 30px #38bdf8;
}

.hero p{
  color:#94a3b8;
}

.join-btn{
  margin-top:20px;
  padding:15px 40px;
  background:#38bdf8;
  border:none;
}

/* LAYOUT */
.container{
  display:flex;
}

.sidebar{
  width:220px;
  padding:20px;
  background:#020617;
}

.sidebar button{
  width:100%;
  margin:8px 0;
  padding:12px;
  background:#1e293b;
  border:none;
  color:white;
  transition:0.3s;
}

.sidebar button:hover{
  background:#38bdf8;
  transform:translateX(5px);
}

/* CONTENT */
.content{
  flex:1;
  padding:20px;
}

.card{
  background:#020617;
  padding:20px;
  border-radius:10px;
  box-shadow:0 0 20px rgba(56,189,248,0.2);
}

/* ADMIN */
.staff{
  display:flex;
  gap:20px;
}

.staff-card{
  background:#1e293b;
  padding:20px;
  border-radius:10px;
}

/* UPDATE */
.update{
  border-left:5px solid #38bdf8;
  padding:10px;
  margin:10px 0;
}



.rule {
  margin-top: 10px;
  border: 1px solid #38bdf8;
  border-radius: 8px;
  overflow: hidden;
}

.rule-title {
  padding: 12px;
  background: #1e293b;
  cursor: pointer;
}

.rule-title:hover {
  background: #38bdf8;
  color: black;
}

.rule-content {
  display: none;
  padding: 10px;
  background: #020617;
}


#ticket input,
#ticket select,
#ticket textarea {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  background: #1e293b;
  border: none;
  color: white;
}

#ticket textarea {
  height: 80px;
}

.ticket-card {
  background:#1e293b;
  padding:10px;
  margin:10px 0;
  border-left:4px solid #38bdf8;
}


.alt {
  background: orange;
}

/* ADMIN KÉPEK FIX MÉRET */
.staff-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 10px auto;

  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

/*cocial*/


/*📝 Whitelist jelentkezés<*/
#whitelist input,
#whitelist textarea {
  width:100%;
  margin:8px 0;
  padding:10px;
  background:#1e293b;
  border:none;
  color:white;
}

#whitelist textarea {
  height:80px;
}




/*📝 Whitelist jelentkezés vég<*/
/*📝  <*/
/* GRID */
.grid {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.box {
  background:#1e293b;
  padding:10px;
  border-radius:10px;
  width:150px;
  text-align:center;
}

.box img {
  width:100%;
  border-radius:8px;
}

/* NEWS */
.news-card {
  background:#1e293b;
  padding:15px;
  margin:10px 0;
  border-radius:10px;
}

.news-card img {
  width:100%;
  border-radius:10px;
  margin-bottom:10px;
}
/*📝 vég<*/

/*optimalizalas<*/
/* GRID DOBOZ */
.box {
  background:#1e293b;
  padding:10px;
  border-radius:10px;
  width:160px;
  height:180px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* KÉP FIX MÉRET */
.box img {
  width:100%;
  height:100px;
  object-fit:cover; /* fontos */
  border-radius:8px;
}

.news-card img {
  width:100%;
  height:200px;
  object-fit:cover; /* nem torzul */
  border-radius:10px;
}


.box img:hover,
.news-card img:hover {
  transform:scale(1.05);
  transition:0.3s;
}
/*/fracio hirdetés */
.faction-grid {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.faction-card {
  background:#1e293b;
  padding:15px;
  border-radius:10px;
  width:250px;
  text-align:center;
  transition:0.3s;
}

.faction-card:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px #38bdf8;
}

.faction-card img {
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:10px;
}

.faction-card p {
  font-size:14px;
  margin:10px 0;
}


/*live*/
.stream-grid {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.stream-card {
  background:#1e293b;
  padding:15px;
  border-radius:10px;
  width:300px;
  text-align:center;
}

.stream-card iframe {
  border-radius:10px;
  margin:10px 0;
}

.stream-card button {
  background:#38bdf8;
  border:none;
  padding:8px 15px;
  cursor:pointer;
}




/*készitö  */
.footer {
  background:#020617;
  color:#94a3b8;
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  border-top:1px solid #1e293b;
}

.footer a {
  margin:0 8px;
  font-size:18px;
  text-decoration:none;
  transition:0.3s;
}

.footer a:hover {
  color:#38bdf8;
}

/* MOBIL */
@media(max-width:700px){
  .footer {
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
}
/*PICSI LODIG  A ELEJÉN*/
#loader {
  position:fixed;
  width:100%;
  height:100%;
  background:#020617;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:9999;
}

/* SPINNER */
.spinner {
  width:50px;
  height:50px;
  border:5px solid #1e293b;
  border-top:5px solid #38bdf8;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:15px;
}

@keyframes spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

.bar {
  width:100%;
  height:15px;
  background:#1e293b;
  border-radius:10px;
  margin-bottom:10px;
}

.bar div {
  height:100%;
  border-radius:10px;
}

#cpuBar { background:lime; }
#ramBar { background:#38bdf8; }
#diskBar { background:orange; }

/*GAFIKON*/
canvas {
  max-width:100%;
  margin:20px 0;
  background:#020617;
  padding:10px;
  border-radius:10px;
}

canvas {
  max-width: 600px;   /* kisebb lesz */
  height: 250px !important;
  margin: 20px auto;
  display: block;
}

/*UDVLÖZLÖ*/
#home {
  text-align:center;
}

.home-video {
  margin-top:20px;
}

.home-video iframe {
  width:100%;
  max-width:700px;
  height:350px;
  border-radius:10px;
}

/*HOME*/
.back-btn {
  background:#38bdf8;
  border:none;
  padding:8px 15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:6px;
  transition:0.3s;
}

.back-btn:hover {
  background:#0ea5e9;
}

/*SZÉPITÖ*/
.home-text {
  max-width: 800px;
  margin: auto;
  text-align: center;
  line-height: 1.6;
}

.home-text h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.home-text h3 {
  margin-top: 25px;
  color: #38bdf8;
}

.home-text p {
  margin: 10px 0;
}


/**/
.coupon-box {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#020617;
  padding:30px;
  border-radius:15px;
  text-align:center;
  z-index:9999;
  box-shadow:0 0 20px #38bdf8;
}

.coupon-code {
  font-size:24px;
  margin:15px 0;
  color:#38bdf8;
  font-weight:bold;
  letter-spacing:2px;
}

.coupon-box button {
  padding:8px 15px;
  background:#38bdf8;
  border:none;
  cursor:pointer;
  border-radius:5px;
}

#logo {
  width: 80px;     /* méret */
  height: auto;
}

.player{
  background:#111;
  padding:10px;
  margin:5px;
  border-radius:8px;
  border-left:3px solid #0ea5e9;
}

/*fivem csatlakozo*/
.join-btn{
  background:#0ea5e9;
  padding:12px 25px;
  border:none;
  border-radius:10px;
  color:white;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 0 15px #0ea5e9;
  transition:0.3s;
}

.join-btn:hover{
  background:#0284c7;
  box-shadow:0 0 25px #0ea5e9;
}
/*discord*/


body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

/*bilenyü*/
#keyboard {
  display: grid;
  grid-template-columns: repeat(10, 60px);
  gap: 10px;
  justify-content: center;
  margin-top: 50px;
}

.key {
  width: 60px;
  height: 60px;
  background: #0a0f1c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
}

/* RGB border */
.key::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(270deg, red, orange, yellow, green, cyan, blue, violet);
  background-size: 400%;
  z-index: -1;
  animation: rgbMove 5s linear infinite;
  opacity: 0;
  transition: 0.3s;
}

.key:hover::before {
  opacity: 1;
}

.key:hover {
  transform: scale(1.1);
}

/* lenyomás effekt */
.key.active {
  transform: scale(0.9);
  background: #111a30;
}

/* info box */
.key-info {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a0f1c;
  color: white;
  padding: 15px 25px;
  border-radius: 15px;
  opacity: 0;
  transition: 0.3s;
}

/* RGB animáció */
@keyframes rgbMove {
  0% { background-position: 0%; }
  100% { background-position: 400%; }
}



body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}