/* =====================================================
   Routerrántotta – közös stílus (minden oldal ezt használja)
   Színek, betűk: itt a :root részben lehet egy helyen állítani.
   ===================================================== */
:root{
  --yellow:#FEC804;
  --yolk:#F59E00;
  --black:#000;
  --ink:#1c1a12;
  --white:#fffdf4;
  --font:"Trebuchet MS","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Arial Black","Helvetica Neue",Impact,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--black);background:var(--yellow);line-height:1.6;font-size:1.0625rem;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
.hp{position:absolute;left:-9999px}

/* ---------- fejléc + menü (kozos/keret.js tölti be) ---------- */
#fejlec{min-height:4.5rem}
.topbar{padding:1rem 0}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--display);font-size:1.15rem}
.brand img{width:44px;height:44px;border-radius:50%;border:2px solid var(--black)}
.menu{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.menu a{display:block;text-decoration:none;font-family:var(--display);font-size:.95rem;padding:.4rem .95rem;border:2px solid var(--black);border-radius:999px;transition:background .15s,color .15s}
.menu a:hover,.menu a[aria-current="page"]{background:var(--black);color:var(--yellow)}
.menu-btn{display:none;font-size:.95rem;padding:.5rem 1.2rem}
@media(max-width:1099px){
  .topbar nav{width:100%}
  .menu-btn{display:inline-block}
  .menu{display:none;flex-direction:column}
  .menu.open{display:flex}
  .menu a{border-radius:.7rem;padding:.6rem 1rem}
}

/* ---------- hero (főoldal) ---------- */
.hero{padding:0;text-align:center;overflow:hidden}
.hero-img{display:block;width:min(100%,46rem);height:auto;margin:0 auto;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 62%,transparent 100%)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,10vw,5.5rem);line-height:.95;letter-spacing:-.03em;margin:-.5rem 0 1rem}
.lead{max-width:38rem;margin:0 auto 1.75rem;font-size:1.2rem}
.page-title{font-size:clamp(2.2rem,8vw,4rem);margin:1.5rem 0 1rem}
.intro{max-width:40rem;font-size:1.15rem;margin:0 0 2rem}
.hero .cta{margin-top:.25rem}

/* gombok */
.cta{display:inline-block;background:var(--black);color:var(--yellow);font-family:var(--display);text-decoration:none;padding:.9rem 1.6rem;border-radius:999px;margin-bottom:3rem;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.dark .cta{background:var(--yellow);color:var(--black);margin:1.5rem 0 0}

/* ---------- fekete blokk ---------- */
.dark{background:var(--black);color:var(--white);padding:3.5rem 0}
.dark h2{font-family:var(--display);font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .75rem;color:var(--yellow)}
.split{display:grid;gap:2.5rem}
@media(min-width:800px){.split{grid-template-columns:1fr 1.1fr;align-items:start}}
.topics{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.topics li{border:2px solid var(--yellow);color:var(--yellow);border-radius:999px;padding:.15rem .8rem;font-size:.95rem}

/* ---------- űrlap ---------- */
form{display:grid;gap:1rem;background:var(--yellow);color:var(--black);padding:1.5rem;border-radius:1.25rem}
label{display:grid;gap:.3rem;font-weight:700}
input,textarea{font:inherit;padding:.75rem .9rem;border:2px solid var(--black);border-radius:.7rem;background:var(--white);color:var(--black);width:100%}
textarea{min-height:8rem;resize:vertical}
button{font:inherit;font-family:var(--display);background:var(--black);color:var(--yellow);border:0;border-radius:999px;padding:.9rem 1.6rem;cursor:pointer}
button:hover{background:var(--ink)}
.note{font-size:.9rem;margin:0}
.msg{padding:.8rem 1rem;border-radius:.7rem;font-weight:700;background:var(--black);color:var(--yellow)}
.msg[hidden]{display:none}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.95rem}
.check input{width:1.25rem;height:1.25rem;flex:none;margin:.15rem 0 0;padding:0;accent-color:var(--black)}

/* ---------- világos blokk: linkek, támogatás ---------- */
.light{padding:3.5rem 0}
main.light{padding-top:.5rem}
.light h2{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:-.02em;margin:0 0 1rem;line-height:1.1}
.links{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0 0 3rem;padding:0;list-style:none}
.links a{display:block;text-decoration:none;border:3px solid var(--black);border-radius:1rem;padding:.9rem 1.1rem;font-family:var(--display);transition:background .15s,color .15s}
.links a:hover{background:var(--black);color:var(--yellow)}
.links small{display:block;font-family:var(--font);font-weight:400;font-size:.88rem}
.support{display:flex;flex-wrap:wrap;gap:1rem}
.sbtn{display:flex;align-items:center;justify-content:center;width:15rem;height:3.4rem;max-width:100%;background:var(--black);color:var(--yellow);font-family:var(--display);text-decoration:none;border-radius:999px;transition:transform .15s}
.sbtn:hover{transform:translateY(-2px)}

/* kártyák (aloldalak, témakörök, projektek) */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:0 0 2.5rem;padding:0;list-style:none}
.card{display:block;height:100%;border:3px solid var(--black);border-radius:1rem;padding:1.1rem 1.25rem;text-decoration:none;transition:background .15s,color .15s}
a.card:hover{background:var(--black);color:var(--yellow)}
.card h3{font-family:var(--display);font-size:1.1rem;margin:0 0 .3rem;line-height:1.2}
.card p{margin:0;font-size:.95rem}
.badge{display:inline-block;background:var(--black);color:var(--yellow);font-size:.75rem;font-weight:700;border-radius:999px;padding:.1rem .6rem;margin-top:.6rem}
a.card:hover .badge{background:var(--yellow);color:var(--black)}

/* ---------- TikTok live-menetrend (főoldal, kozos/live.js) ---------- */
.light.live{padding-bottom:0}
.live-lista{counter-reset:none}
.live-lista .card{background:var(--white)}
.live-lista .live-nap{margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.2}
.live-lista .live-nap span{display:block;font-family:var(--font);font-size:.9rem;font-weight:400}
.live-lista .live-ido{margin:.5rem 0 .35rem;font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em;line-height:1}
.live-lista .card h3{font-family:var(--font);font-weight:700;font-size:1rem;margin:0}
.live-ures{grid-column:1/-1;border:3px dashed var(--black);border-radius:1rem;padding:1rem 1.25rem}
.live-most{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;
  background:var(--black);color:var(--white);border-radius:1.25rem;padding:1rem 1.25rem 1rem 1.5rem;margin:0 0 2.5rem;
  box-shadow:0 0 0 4px var(--yellow),0 0 0 7px #e0182d}
.live-most[hidden]{display:none}
.live-most p{margin:0;flex:1 1 18rem;font-size:1.1rem}
.live-most strong{color:var(--yellow);font-family:var(--display);font-weight:900;margin-right:.25rem}
.live-ig{font-size:.9rem;opacity:.8;white-space:nowrap}
.live-most .cta{margin:0;background:#e0182d;color:var(--white)}

/* ---------- szöveges oldalak (impresszum, adatkezelés) ---------- */
.doc{max-width:44rem;padding-bottom:3.5rem}
.doc h2{font-family:var(--display);font-size:1.15rem;margin:1.8rem 0 .3rem;letter-spacing:0}
.doc h3{font-size:1.05rem;margin:1.2rem 0 .2rem;scroll-margin-top:1rem}
.doc p,.doc ul{margin:.4rem 0}
.doc ul{padding-left:1.2rem}
.doc .meta{font-size:.9rem}

/* ---------- lábléc ---------- */
footer{border-top:3px solid var(--yellow);background:var(--black);color:var(--white);padding:1.75rem 0;text-align:center;font-size:.95rem}
footer a{color:var(--yellow)}

/* ---------- adatkezelési értesítősáv ---------- */
.banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--black);color:var(--white);border-top:3px solid var(--yellow);padding:1rem 0}
.banner[hidden]{display:none}
.banner .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;justify-content:space-between}
.banner p{margin:0;flex:1 1 22rem;font-size:.95rem}
.banner a{color:var(--yellow)}
.banner button{background:var(--yellow);color:var(--black);padding:.65rem 1.8rem}
.banner button:hover{background:var(--yolk)}
body.has-banner footer{padding-bottom:7rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* ---------- Discord-doboz (főoldal, linkek oldal; kozos/discord.js) ---------- */
.discord{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  background:var(--black);color:var(--white);border-radius:1.25rem;padding:1.4rem 1.6rem;margin:0 0 2.5rem;
  box-shadow:0 0 0 4px var(--yellow),0 0 0 7px #5865F2}
.discord[hidden]{display:none}
.discord-szoveg{flex:1 1 20rem}
.discord h2{margin:0;color:var(--yellow);font-family:var(--display);font-size:1.5rem;line-height:1.15}
.discord p{margin:.3rem 0 0}
.discord .discord-felirat{margin:0 0 .15rem;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.discord-online{display:flex;align-items:center;gap:.5rem;font-weight:700}
.discord-online .pont{width:.7rem;height:.7rem;border-radius:50%;background:#23a55a;box-shadow:0 0 0 3px rgba(35,165,90,.3)}
.discord-leiras{opacity:.9}
.discord .cta{margin:0;background:#5865F2;color:var(--white)}

/* ---------- ötletküldő (otlet.html, kozos/otletek.js) + lábléc gombja ---------- */
.lablec-otlet{margin:0 0 1rem}
.lablec-gomb{display:inline-block;background:var(--yellow);color:var(--black);font-family:var(--display);text-decoration:none;padding:.6rem 1.3rem;border-radius:999px;transition:transform .15s}
.lablec-gomb:hover{transform:translateY(-2px)}
.otlet-honnan{border:2px solid var(--yellow);border-radius:.7rem;padding:.6rem .9rem;color:var(--yellow)}
.otlet-honnan[hidden]{display:none}
.otlet-honnan a{color:var(--white)}
label small{font-weight:400}
.valaszto{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.valaszto legend{font-weight:700;padding:0;margin-bottom:.3rem;width:100%}
.valaszto label{display:block;position:relative}
.valaszto input{position:absolute;opacity:0;width:1px;height:1px}
.valaszto span{display:block;border:2px solid var(--black);border-radius:999px;padding:.4rem 1rem;cursor:pointer;font-family:var(--display);font-weight:400;font-size:.95rem;background:var(--white)}
.valaszto input:checked+span{background:var(--black);color:var(--yellow)}
.valaszto input:focus-visible+span{outline:3px solid var(--black);outline-offset:3px}
.szuro{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.szuro button,.szuro a{font-family:var(--display);font-size:.9rem;padding:.4rem .95rem;border:2px solid var(--black);border-radius:999px;background:transparent;color:var(--black);text-decoration:none}
.szuro button[aria-pressed="true"],.szuro a[aria-current="page"],.szuro button:hover,.szuro a:hover{background:var(--black);color:var(--yellow)}
.otlet-lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.otlet,.admin-otlet{background:var(--white);border:3px solid var(--black);border-radius:1rem;padding:1rem 1.25rem}
.otlet p{margin:0}
.otlet-fej{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .5rem!important;font-size:.9rem}
.otlet-kat{background:var(--black);color:var(--yellow);font-weight:700;font-size:.8rem;border-radius:999px;padding:.1rem .65rem}
.otlet-allapot{border:2px solid var(--black);font-weight:700;font-size:.8rem;border-radius:999px;padding:0 .6rem}
.allapot-kesz .otlet-allapot{background:#1f8a4c;border-color:#1f8a4c;color:var(--white)}
.allapot-folyamatban .otlet-allapot{background:var(--yolk);border-color:var(--yolk)}
.allapot-elvetve .otlet-allapot{opacity:.65}
.otlet-meta{font-size:.88rem;margin-top:.4rem!important}
.otlet-valasz{margin-top:.7rem;border-left:4px solid var(--yellow);background:var(--yellow);border-radius:.5rem;padding:.5rem .8rem;font-size:.95rem}
.otlet-ures{border:3px dashed var(--black);border-radius:1rem;padding:1rem 1.25rem}
/* admin.php */
.admin .admin-otlet{margin:0 0 1.25rem}
.admin .admin-otlet form{padding:1rem;margin-top:.75rem}
.admin blockquote{margin:.5rem 0;padding:.6rem .9rem;border-left:4px solid var(--black);background:#f3efe0;white-space:normal}
.admin .otlet-kuldo{margin:0;font-size:.95rem}
.admin-sor{display:flex;flex-wrap:wrap;gap:1rem;align-items:end}
.admin-sor label{flex:1 1 12rem}
.admin select{font:inherit;padding:.6rem .8rem;border:2px solid var(--black);border-radius:.7rem;background:var(--white)}
.admin .torles{background:#b3261e;color:var(--white)}
.admin-belepes{max-width:24rem}
.admin .msg{margin:0 0 1rem}
.admin textarea,.admin select{font-weight:400}

/* ---------- Donably-előzetesek (főoldal, tamogatas.html, tamogatoi.html; kozos/donably.js) ---------- */
.donably{margin:0 0 1rem}
.donably[hidden]{display:none}
.donably-cim{margin-top:2.5rem!important}
.donably-lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.donably-kartya{display:grid;grid-template-columns:6rem 1fr;gap:1rem 1.25rem;align-items:start;
  border:3px solid var(--black);border-radius:1rem;padding:1rem 1.25rem;background:var(--white)}
.donably-kep{position:relative;width:6rem;height:6rem}
.donably-kep img{display:block;width:100%;height:100%;object-fit:cover;border-radius:.75rem;border:2px solid var(--black)}
.donably-lakat-hely{position:absolute;right:-.45rem;bottom:-.45rem;display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;background:var(--black);color:var(--yellow);box-shadow:0 0 0 3px var(--white)}
.donably-lakat{width:1.05rem;height:1.05rem}
.donably-tartalom{min-width:0}
.donably-datum{display:block;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);opacity:.75}
.donably-kartya h3{font-family:var(--display);font-size:1.15rem;line-height:1.2;margin:.1rem 0 .3rem;overflow-wrap:anywhere}
.donably-kartya p{margin:0 0 .8rem;font-size:.95rem;white-space:pre-line}
.donably-gomb{display:inline-block;background:var(--black);color:var(--yellow);font-family:var(--display);font-size:.9rem;
  text-decoration:none;padding:.55rem 1.1rem;border-radius:999px;transition:transform .15s}
.donably-gomb:hover,.donably-gomb:focus-visible{transform:translateY(-2px)}
.donably-ures{border-style:dashed}
.donably-osszes{display:inline-block;font-weight:700;color:var(--black);margin:.25rem 0 2.5rem}
.donably-osszes:hover{text-decoration-thickness:3px}
.rejtett{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){
  .donably-kartya{grid-template-columns:4.25rem 1fr;gap:.75rem 1rem;padding:.9rem 1rem}
  .donably-kep{width:4.25rem;height:4.25rem}
  .donably-lakat-hely{width:1.6rem;height:1.6rem}
  .donably-lakat{width:.85rem;height:.85rem}
  .donably-kartya h3{font-size:1.05rem}
  .donably-gomb{display:block;text-align:center;margin-left:-5.25rem}
}