/* ==============
   Alapok / Reset
   ============== */
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: Inter, Roboto, Arial, sans-serif;
  color: #0b2540;
  background: url('background.webp') top center / cover no-repeat;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* Lenti finom sáv */
body::after{
  content:"";
  position:fixed; left:0; bottom:0; width:100%; height:100px; z-index:-1;
  background: linear-gradient(to top, rgba(113,190,246,.9), rgba(182,219,248,.7));
}

/* ==============
   Layout
   ============== */
.container{ max-width:1100px; margin:0 auto; padding:20px }
.center{ text-align:center }
.justify{ text-align: justify }
.muted{ color: rgba(11,37,64,0.66) }
.spacer{ height:40px }

/* Üveges/Glass kártya */
.col, .feature, .media, footer, .team-frame, .three-cols {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(11,37,64,0.20);
}

/* Lebegő FB gomb */
.fb-float{ position:fixed; right:16px; top:12px; z-index:999 }
.fb-float a{
  background:white; border-radius:50%;
  width:44px; height:44px;
  box-shadow:0 4px 10px rgba(11,37,64,0.12);
  display:flex; align-items:center; justify-content:center;
}
.fb-float svg{ width:38px; height:38px; fill:#1877f2 }

/* Slideshow */
.slideshow{ position:relative; height:420px; border-radius:16px; overflow:hidden; margin-bottom:22px }
.slides{ height:100%; width:100%; display:flex; transition:transform .6s ease }
.slide{ min-width:100%; height:100%; background-size:cover; background-position:center }
.slideshow .dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px }
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer; transition:transform .2s }
.dot.active{ background:#fff; transform:scale(1.15) }

/* Két oszlop */
.two-cols{ display:flex; gap:18px; margin-bottom:22px }
.col{ padding:18px; flex:1 }
.cta-card{
  margin-top:14px; padding:12px;
  display:flex; align-items:center; gap:14px; justify-content:center;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
}
.cta-card .logo{ height:64px; width:auto }
.cta-card .cta{ margin:0; font-weight:600 }

/* Három kártya */
.three-cols{ display:flex; gap:14px; margin:22px 0; padding:18px }
.feature{ flex:1; padding:14px; text-align:center }
.feature img{ width:100%; height:180px; object-fit:cover; border-radius:10px }
.feature h3{ margin:12px 0 6px }

/* Média + QR */
/*.media{
  display:flex; flex-wrap:wrap; gap:20px; padding:20px; margin:30px auto;
}
.media-img{ width:100%; max-width:500px; height:300px; object-fit:cover; border-radius:15px }
.join-section{ flex:1; min-width:280px }*/


.media {
    display: flex;
    align-items: center;        /* <-- ez középre igazítja függőlegesen */
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    flex-wrap: wrap;
}

.media-img {
    flex: 1;
    max-width: 500px;
    height: auto;
    object-fit: contain;       /* nem vágja le a képet */
    align-self: center;        /* extra biztonság: mindig középen lesz */
    display: block;
    margin: 0 auto;
}

.join-section {
    flex: 1;
    text-align: center;
}



.qr-container{ display:flex; justify-content:center; gap:34px; margin-top:16px; flex-wrap:wrap }
.qr-bubble{
  background: rgba(255,255,255,0.22);
  padding:18px; border-radius:28px; text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.qr-bubble img{ height:150px; width:auto; margin:0 auto 8px }
.tip{ margin-top:8px }

/* Csapattagok karusel */
.team-section{ max-width:1100px; margin:40px auto; text-align:center }
.team-frame{ display:flex; align-items:center; gap:14px; padding:16px }
.team-carousel{ overflow:hidden; flex:1 }
.team-track{ display:flex; gap:20px; transition:transform .6s ease }
.team-item{
  width:300px; flex-shrink:0; padding:10px; border-radius:15px; text-align:center;
  background: rgba(255,255,255,.18);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.team-item img{ width:100%; border-radius:10px; height:200px; object-fit:cover }
.team-btn{
  background: rgba(255,255,255,.26); border:none; font-size:24px;
  padding:14px; border-radius:50%; cursor:pointer; transition: background .2s, transform .1s;
}
.team-btn:hover{ background: rgba(255,255,255,.38) }
.team-btn:active{ transform: scale(.96) }

/* Szöveg + kép blokk */
.media .txt{ flex:1; min-width:280px; padding:18px }

/* Videó thumb + modal */
.video-thumb{ position:relative; cursor:pointer }
.video-thumb img{ width:100%; height:160px; object-fit:cover; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.2) }
.play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:48px; color:#fff; text-shadow:0 0 10px rgba(0,0,0,.8); pointer-events:none;
}
.youtube-modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
  justify-content:center; align-items:center; z-index:9999; padding:20px;
}
.youtube-modal-content{
  position:relative; width:90%; max-width:900px; aspect-ratio:16/9;
  background: #000; border-radius:12px; overflow:hidden;
}
.youtube-modal iframe{ width:100%; height:100%; border:0 }
.youtube-close{
  position:absolute; top:-40px; right:0; font-size:32px; color:#fff;
  background:none; border:none; cursor:pointer;
}

/* Kapcsolat */
footer{
  padding:20px; margin:20px auto; max-width:1100px; background:#fff;
  color:#0b2540;
}
.contact-form .row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{
  width:100%; padding:10px; border-radius:8px; border:1px solid rgba(11,37,64,.12);
  background:#fff; color:#0b2540;
}
.primary{
  background:#0b6fbf; color:white; border:none; padding:10px 14px;
  border-radius:8px; cursor:pointer; transition:transform .05s ease, opacity .15s ease;
}
.primary:hover{ opacity:.95 }
.primary:active{ transform: translateY(1px) }
.form-alert{ padding:10px; border-radius:8px; margin-bottom:10px }
.form-alert.error{ background:#ffe6e6 }
.form-alert.ok{ background:#e6ffea }
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

/* ==============
   Reszponzív
   ============== */
@media (max-width: 1024px){
  .slideshow{ height:360px }
  .team-item img{ height:180px }
}

@media (max-width: 900px){
  .two-cols{ flex-direction:column }
  .slideshow{ height:280px }
  .feature img{ height:160px }
}

@media (max-width: 600px){
  .slideshow{ height:200px }
  .team-item{ width:260px }
  .team-item img{ height:160px }
  .media-img{ max-width:100%; height:240px }
}

.two-cols {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 300px;
  background: rgba(255,255,255,0.3);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
}

textarea {
    resize: none;              /* letiltja az átméretezést */
    overflow: auto;            /* ha sok szöveg van, belül görgethető marad */
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(11,37,64,0.08);
    box-sizing: border-box;
}

.page-footer {
    text-align: center;
    padding: 5px 0;
    margin-top: -50px;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.2);
}

.page-footer strong {
    color: #fff;
    text-shadow: 0 0 6px rgba(255,255,255,0.4);
    font-weight: 600;
}

/*@media (max-width: 600px) {
    .page-footer {
        font-size: 13px;
        padding: 12px 0;
    }
}*/



.poster-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    justify-items: center;
    align-items: start;
    margin-top: 20px;
    padding: 10px;
}

.poster-thumb {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poster-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Lightbox modal */
.poster-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
}

.poster-modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255,255,255,0.3);
}

.poster-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.poster-close:hover {
    color: #71bef6;
}

/* Responsív elrendezés */
/*@media (max-width: 992px) {
    .poster-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .poster-gallery {
        grid-template-columns: 1fr;
    }
}*/




/* ==== PLAKÁT SZEKCIÓ FIX ==== */
.three-cols.posters{
  /* töröljük a .three-cols flexét */
  display: block;
  padding: 20px;
  margin: 24px 0;
}

.three-cols.posters h2{
  margin: 0 0 8px;
}

.three-cols.posters p{
  margin: 0 0 16px;
}

/* a 3 bélyeg egymás mellett rácsban */
.three-cols.posters .poster-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  justify-items: center;
  align-items: start;
}

/* reszponzív oszlopváltás */
@media (max-width: 992px){
  .three-cols.posters .poster-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .three-cols.posters .poster-gallery{
    grid-template-columns: 1fr;
  }
}

.posters .tip,
.muted.tip{
  flex: 0 0 100%;          /* ha a szülő flex: külön sorba teszi */
  text-align: center;      /* középre a szöveg */
  font-size: 16px;         /* kért méret */
  margin: 12px auto 0;     /* kis felső térköz */
  font-weight: 500;        /* enyhe kiemelés, nem tolakodó */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.media .txt p {
  line-height: 1.6;      /* picit levegősebb sorok */
  margin: 0 0 10px 0;    /* finom bekezdésköz lefelé */
}

.media .txt h2 {
  margin: 0 0 8px 0;     /* cím és első bekezdés közti kis térköz */
}

.media img[alt="SimCity - Játék leírás"]{
  display: block;
  margin: 0 auto;       /* vízszintesen középre */
  align-self: center;   /* flexben függőlegesen középre */
  max-width: 800px;     /* opcionális, ha egységes méretet akarsz */
  height: auto;
}

.contact-form .row-actions{
  display: flex;           /* felülírjuk a .row defaultját */
  width: 100%;
  justify-content: flex-end;
}

.contact-form .row-actions .primary{
  margin-left: auto;       /* ha később beteszel más elemet balra, a gomb marad jobbra */
}

.contact-form .anti-spam {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

.contact-form .captcha-label {
  font-size: 14px;
  color: rgba(11,37,64,0.75);
}

.contact-form .captcha-input {
  width: 120px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(11,37,64,0.12);
  background: #fff;
  color: #0b2540;
}

.txt ul.muted{
  margin: 10px 0 16px 2rem;  /* bal oldali +2rem behúzás */
  padding-left: 1rem;        /* pötty és szöveg közé kis tér */
  line-height: 1.6;
  list-style: disc;
  list-style-position: outside;
}

.txt ul.muted li + li{
  margin-top: 6px;       /* kis függőleges távolság az elemek között */
}

/* Mobilon kicsit kisebb behúzás, hogy ne „nyomja” a helyet */
@media (max-width: 600px){
  .txt ul.muted{
    margin-left: 1.25rem;
    padding-left: .75rem;
    line-height: 1.7;
  }
}