/* =========================================================
   KKS 2026 – Stíluslap (style.css)
   Betűtípusok: Barlow Condensed (dinamikus kézilabda címsorok)
                + Plus Jakarta Sans (tiszta, jól olvasható törzsszöveg)
   Alapértelmezett: Világos (Light) téma + Neonzöld akcentus
   ========================================================= */
:root{
  --bg:#f6f5f0;
  --bg2:#eceae2;
  --card:#ffffff;
  --line:#dcd8cc;
  --ink:#111318;
  --muted:#555c69;
  --hot:#39ff14;        /* neonzöld fő akcentus */
  --hot-dark:#18a800;   /* sötétebb neonzöld világos háttéren lévő szöveghez */
  --hot-ink:#091207;    /* szövegszín neonzöld gombon */
  --yellow:#ffd600;     /* sárga kiemelés a korosztály találathoz */
  --sky:#00b8e6;
  --radius:22px;
  --court:rgba(0,0,0,.07);
  --font-disp:"Barlow Condensed", system-ui, -apple-system, sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0b0d12;
  --bg2:#12151d;
  --card:#171b25;
  --line:#262c3a;
  --ink:#f3f5f8;
  --muted:#9aa3b5;
  --hot:#39ff14;
  --hot-dark:#39ff14;
  --hot-ink:#091207;
  --yellow:#ffd600;
  --sky:#3ad1ff;
  --court:rgba(255,255,255,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--font-body);
  overflow-x:hidden;
  transition:background .35s,color .35s;
}
a{color:inherit}
img{max-width:100%;display:block}

/* Kézilabdás sport-tipográfia: szellős sorköz, hogy az ékezetek sose lógjanak egymásba */
.disp{
  font-family:var(--font-disp);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.025em;
  line-height:1.08;
}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
section{padding:100px 0;position:relative}

/* Fekete-fehér kézilabda ikon az eyebrow előtt */
.eyebrow{
  display:inline-flex;gap:10px;align-items:center;
  font-weight:700;font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);
}
.eyebrow::before{
  content:"";width:24px;height:24px;border-radius:50%;flex:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' stroke='%23111111' stroke-width='6'/%3E%3Cpolygon points='50,28 71,43 63,68 37,68 29,43' fill='%23111111'/%3E%3Cpath d='M50,28 L50,5 M71,43 L93,34 M63,68 L79,88 M37,68 L21,88 M29,43 L7,34' stroke='%23111111' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M35,8 L50,15 L65,8' fill='%23111111'/%3E%3Cpath d='M88,22 L83,38 L95,48' fill='%23111111'/%3E%3Cpath d='M86,76 L72,79 L68,94' fill='%23111111'/%3E%3Cpath d='M14,76 L28,79 L32,94' fill='%23111111'/%3E%3Cpath d='M12,22 L17,38 L5,48' fill='%23111111'/%3E%3C/svg%3E");
  background-size:cover;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

h2.disp{font-size:clamp(2.6rem,6vw,4.8rem);margin:14px 0 26px;line-height:1.08}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  border-radius:999px;font-weight:700;text-decoration:none;border:0;
  cursor:pointer;font-family:inherit;font-size:.98rem;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-hot{background:var(--hot);color:var(--hot-ink);box-shadow:0 10px 28px -8px rgba(57,255,20,.65)}
.btn-volt{background:var(--ink);color:var(--bg)}
.btn-volt:hover{background:var(--hot);color:var(--hot-ink)}
.btn-ghost{background:transparent;border:2px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--hot-dark)}

/* scroll-kézilabda (fekete-fehér) */
#progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--hot-dark),var(--hot));z-index:200;width:0}
#progressBall{
  position:fixed;top:-8px;width:22px;height:22px;border-radius:50%;z-index:201;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' stroke='%23111111' stroke-width='6'/%3E%3Cpolygon points='50,28 71,43 63,68 37,68 29,43' fill='%23111111'/%3E%3Cpath d='M50,28 L50,5 M71,43 L93,34 M63,68 L79,88 M37,68 L21,88 M29,43 L7,34' stroke='%23111111' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M35,8 L50,15 L65,8' fill='%23111111'/%3E%3Cpath d='M88,22 L83,38 L95,48' fill='%23111111'/%3E%3Cpath d='M86,76 L72,79 L68,94' fill='%23111111'/%3E%3Cpath d='M14,76 L28,79 L32,94' fill='%23111111'/%3E%3Cpath d='M12,22 L17,38 L5,48' fill='%23111111'/%3E%3C/svg%3E");
  background-size:cover;
  transform:translateX(-50%) rotate(0deg);left:0;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* NAV */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(1220px,100% - 24px);z-index:100;
  display:flex;align-items:center;gap:12px;
  padding:8px 12px 8px 20px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px);border:1px solid var(--line);
  box-shadow:0 10px 30px -15px rgba(0,0,0,.12);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;flex:none}
.logo-img{height:44px;width:auto;object-fit:contain;transition:filter .3s}
:root[data-theme="dark"] .logo-img{filter:invert(1) brightness(1.08)}
nav ul{display:flex;gap:2px;list-style:none;margin-left:auto;flex-wrap:wrap}
nav ul a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:600;color:var(--muted);transition:.2s}
nav ul a:hover{background:var(--card);color:var(--ink)}
.icon-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;position:relative;text-decoration:none;flex:none;
  transition:border-color .2s,background .2s;
}
.icon-btn:hover{border-color:var(--hot-dark)}
.icon-btn svg{width:20px;height:20px}
#cartCount{
  position:absolute;top:-4px;right:-4px;background:var(--hot);color:var(--hot-ink);
  font-size:.72rem;font-weight:800;min-width:20px;height:20px;border-radius:10px;
  display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  border:1px solid var(--ink);
}
#menuBtn{display:none}
@media(max-width:1040px){
  nav ul{position:fixed;top:72px;left:0;right:0;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:24px;padding:12px;display:none}
  nav ul.open{display:flex}
  #menuBtn{display:grid;margin-left:auto}
}

/* HERO */
#home{min-height:100svh;padding-top:130px;overflow:hidden;display:flex;align-items:center}
.court-bg{position:absolute;inset:0;pointer-events:none;opacity:1}
.court-bg svg{width:100%;height:100%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;position:relative}
.hero h1{
  font-size:clamp(3.2rem,7.8vw,6.8rem);
  line-height:1.06;
  letter-spacing:.02em;
}
.hero h1 .o{color:var(--hot-dark);text-shadow:0 0 28px rgba(57,255,20,.22)}
:root[data-theme="dark"] .hero h1 .o{color:var(--hot)}
.hero h1 .stroke{-webkit-text-stroke:2px var(--ink);color:transparent}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(50%) rotate(2deg);animation:rise .85s cubic-bezier(.2,.9,.2,1.1) forwards;margin-right:.12em}
@keyframes rise{to{opacity:1;transform:none}}
.hero p.lead{max-width:540px;font-size:1.12rem;color:var(--muted);margin:24px 0 30px;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;font-weight:600;background:var(--card)}
.chip i{font-style:normal;color:var(--hot-dark);margin-right:4px}
:root[data-theme="dark"] .chip i{color:var(--hot)}
.game-card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:16px;position:relative;box-shadow:0 30px 80px -30px rgba(0,0,0,.22);transform:rotate(1deg)}
.game-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;font-weight:700}
.score{font-family:var(--font-disp);font-size:2.1rem;color:var(--hot-dark);line-height:1}
:root[data-theme="dark"] .score{color:var(--hot)}
#game{width:100%;aspect-ratio:4/5;border-radius:18px;background:#1d6b4f;touch-action:none;cursor:grab;display:block}
.game-hint{font-size:.82rem;color:var(--muted);text-align:center;padding-top:10px}
#goalFlash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:4.5rem;color:var(--hot);opacity:0;text-shadow:0 6px 0 #000}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.game-card{transform:none;max-width:420px}}

/* BENTO / Rólunk */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
.tile h3{font-size:1.25rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.tile p{color:var(--muted);line-height:1.6}
.t-mission{grid-column:span 4;background:linear-gradient(135deg,#39ff14,#9dff00);color:#0b1208;border:0}
.t-mission p{color:#0b1208;font-size:1.3rem;font-weight:600;line-height:1.5}
.t-photo{grid-column:span 2;padding:0;min-height:260px;background:#333 center/cover}
.t-phil{grid-column:span 2}
.t-phil .num{font-family:var(--font-disp);font-weight:800;font-size:3.2rem;color:var(--hot-dark);line-height:1.05;margin-bottom:10px}
:root[data-theme="dark"] .t-phil .num{color:var(--hot)}
.t-stat{grid-column:span 3;display:flex;align-items:end;justify-content:space-between;gap:16px}
.t-stat .big{font-family:var(--font-disp);font-weight:800;font-size:clamp(3.6rem,7vw,5.8rem);line-height:1;color:var(--hot-dark)}
:root[data-theme="dark"] .t-stat .big{color:var(--hot)}
@media(max-width:820px){.bento>*{grid-column:span 6!important}}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s cubic-bezier(.2,.9,.2,1)}
.rv.in{opacity:1;transform:none}

/* KOROSZTÁLYOK */
.finder{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 10px 10px 24px;margin-bottom:34px;max-width:640px}
.finder label{font-weight:700}
.finder input{flex:1;min-width:120px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:12px 18px;font:inherit;font-size:1.02rem}
#finderOut{width:100%;padding:4px 8px;color:var(--muted);font-size:.94rem;display:none}
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.group{perspective:1000px;height:310px;text-decoration:none;cursor:pointer}
.group .inner{position:relative;height:100%;transition:transform .7s cubic-bezier(.2,.9,.2,1.1);transform-style:preserve-3d}
.group:hover .inner,.group.match .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--card);overflow:hidden}
.face.back{transform:rotateY(180deg);background:var(--hot);color:var(--hot-ink);border:0}
.face .tag{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.face.back .tag{color:#1b3314}
.face .gname{font-family:var(--font-disp);font-weight:800;font-size:3.4rem;line-height:1.08;text-transform:uppercase}
.face .jersey{position:absolute;right:-20px;bottom:-30px;width:170px;opacity:.1}

/* Találatnál SÁRGA háttér fekete szöveggel */
.group.match .face.back{
  background:var(--yellow);
  color:#111318;
  border:3px solid #111318;
  box-shadow:0 16px 40px -12px rgba(255,214,0,.65);
}
.group.match .face.back .tag{color:#3d3300}
.go{font-weight:700;display:flex;align-items:center;gap:8px;font-size:.92rem}
@media(max-width:900px){.groups{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.groups{grid-template-columns:1fr}}

/* EGYÉNI KÉPZÉS */
#egyeni{background:var(--bg2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.pitch{position:relative;aspect-ratio:2/1.15;background:#1f7a5a;border-radius:24px;overflow:hidden;border:6px solid #e9e4d6}
.pitch svg{position:absolute;inset:0;width:100%;height:100%}
.pos{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:#111;color:#fff;font-weight:700;font-size:.72rem;cursor:pointer;display:grid;place-items:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s;text-transform:uppercase}
.pos:hover,.pos.active{transform:translate(-50%,-50%) scale(1.18);background:var(--hot);color:#111;border-color:#111}
.pos-info{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;min-height:120px}
.pos-info h4{font-family:var(--font-disp);font-weight:800;font-size:1.9rem;text-transform:uppercase;line-height:1.15}
.pos-info ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pos-info li{background:var(--bg2);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600}
.age-pill{display:inline-block;font-family:var(--font-disp);font-weight:800;font-size:2.6rem;line-height:1.1;color:var(--hot);background:#111;padding:6px 20px;border-radius:16px;transform:rotate(-2deg);margin:6px 0 18px}

/* IDŐPONTOK & MECCSEK */
#meccsek{background:var(--bg)}
.schedule-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media(max-width:940px){.schedule-grid{grid-template-columns:1fr}}
.match-list{display:grid;gap:14px}
.match-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  transition:transform .2s,border-color .2s;
}
.match-card:hover{transform:translateY(-3px);border-color:var(--hot-dark)}
@media(max-width:600px){.match-card{grid-template-columns:1fr;gap:12px}}
.match-date{
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;text-align:center;min-width:86px;
}
.match-date b{display:block;font-family:var(--font-disp);font-size:1.7rem;line-height:1.05;color:var(--hot-dark)}
:root[data-theme="dark"] .match-date b{color:var(--hot)}
.match-date small{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.match-teams{display:grid;gap:4px}
.match-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.match-age{background:var(--hot);color:var(--hot-ink);padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:800}
.match-vs{font-family:var(--font-disp);font-weight:800;font-size:1.55rem;line-height:1.15;text-transform:uppercase}
.match-venue{font-size:.86rem;color:var(--muted)}
.match-res{
  font-family:var(--font-disp);font-weight:800;font-size:1.6rem;
  background:var(--ink);color:var(--bg);padding:6px 14px;border-radius:12px;white-space:nowrap;
}
.training-box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.training-box h3{font-family:var(--font-disp);font-size:2rem;text-transform:uppercase;margin-bottom:14px;line-height:1.1}
.training-item{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.training-item:last-child{border-bottom:0;padding-bottom:0}
.training-item .tr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.training-item b{font-size:1rem;color:var(--ink)}
.training-item .tr-time{font-size:.82rem;font-weight:700;background:var(--bg2);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.training-item small{color:var(--muted);font-size:.85rem}

/* TÁBOR */
#tabor{background:var(--bg2)}
#tabor .split{align-items:start}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}
.cd{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 10px;text-align:center}
.cd b{display:block;font-family:var(--font-disp);font-weight:800;font-size:clamp(2.5rem,5.5vw,4.2rem);line-height:1.05;color:var(--hot-dark)}
:root[data-theme="dark"] .cd b{color:var(--hot)}
.cd small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.72rem}
.day{list-style:none;border-left:3px dashed var(--line);padding-left:26px;display:grid;gap:16px}
.day li{position:relative;line-height:1.45}
.day li::before{content:"";position:absolute;left:-37px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--hot-dark)}
:root[data-theme="dark"] .day li::before{border-color:var(--hot)}
.day b{font-family:var(--font-disp);font-weight:800;font-size:1.45rem;color:var(--hot-dark);margin-right:8px}
:root[data-theme="dark"] .day b{color:var(--hot)}
.camp-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.camp-photos div{aspect-ratio:1;border-radius:18px;background:#333 center/cover}
.camp-photos div:first-child{grid-row:span 2;aspect-ratio:auto}

/* =========================================================
   SHOP – Fényképes ruházati kártyák
   ========================================================= */
#termekek{background:var(--bg)}
.shop-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}
.shop-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--hot-dark)}
.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1050px){.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.products{grid-template-columns:1fr}}

.product{
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .3s;
}
.product:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(0,0,0,.22)}
.product .pimg{
  aspect-ratio:4/5;
  background:linear-gradient(180deg,#ecebe6 0%,#dedcd3 100%);
  position:relative;overflow:hidden;cursor:zoom-in;
}
:root[data-theme="dark"] .product .pimg{
  background:linear-gradient(180deg,#232836 0%,#181c26 100%);
}
.product .pimg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
}
.product:hover .pimg img{transform:scale(1.06)}
.product .badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--hot);color:var(--hot-ink);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.product .cat-pill{
  position:absolute;bottom:10px;left:12px;z-index:2;
  background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(6px);
  color:var(--ink);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);
}
.product .pbody{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.product h4{font-size:1.05rem;font-weight:700;line-height:1.35}
.product .pdesc{font-size:.84rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product .sizes{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.product .size-btn{
  padding:4px 9px;border-radius:6px;border:1px solid var(--line);background:var(--bg2);
  color:var(--ink);font-size:.74rem;font-weight:700;cursor:pointer;transition:.15s;
}
.product .size-btn:hover,.product .size-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.product .pfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.product .price-wrap{display:flex;flex-direction:column}
.product .old-price{font-size:.76rem;color:var(--muted);text-decoration:line-through}
.product .price{color:var(--ink);font-weight:800;font-size:1.08rem}
.product .add{
  padding:10px 16px;border-radius:12px;border:0;background:var(--ink);color:var(--bg);
  font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap;
}
.product .add:hover{background:var(--hot);color:var(--hot-ink)}
.woo-note{margin-top:24px;font-size:.88rem;color:var(--muted);border:1px dashed var(--line);border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* Fekete-fehér repülő kézilabda kosárba rakáskor */
.flyball{
  position:fixed;width:24px;height:24px;border-radius:50%;z-index:600;pointer-events:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' stroke='%23111111' stroke-width='6'/%3E%3Cpolygon points='50,28 71,43 63,68 37,68 29,43' fill='%23111111'/%3E%3Cpath d='M50,28 L50,5 M71,43 L93,34 M63,68 L79,88 M37,68 L21,88 M29,43 L7,34' stroke='%23111111' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:cover;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* Fotó Lightbox / Gyorsnézet */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);z-index:500;display:none;place-items:center;padding:24px}
.lightbox.open{display:grid}
.lightbox-inner{background:var(--card);border:1px solid var(--line);border-radius:24px;max-width:860px;width:100%;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;position:relative}
@media(max-width:720px){.lightbox-inner{grid-template-columns:1fr;max-height:90vh;overflow-y:auto}}
.lightbox-img{aspect-ratio:4/5;background:var(--bg2);width:100%;height:100%;object-fit:cover}
.lightbox-body{padding:28px;display:flex;flex-direction:column;gap:14px}
.lightbox-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.2rem;cursor:pointer;z-index:2}

/* =========================================================
   KOSÁR & KÉSZPÉNZES RENDELÉSI MODAL
   ========================================================= */
.cart-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:550;display:none;place-items:center;padding:20px}
.cart-modal.open{display:grid}
.cart-panel{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.cart-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--bg2)}
.cart-head h3{font-family:var(--font-disp);font-size:2rem;text-transform:uppercase;line-height:1.1}
.cart-body{padding:24px;overflow-y:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
@media(max-width:800px){.cart-body{grid-template-columns:1fr}}
.cart-list{display:grid;gap:12px;align-content:start}
.cart-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);
}
.cart-row img{width:64px;height:76px;object-fit:cover;border-radius:10px;background:var(--card)}
.cart-qty{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.cart-qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;cursor:pointer}
.cash-badge{
  background:color-mix(in srgb,var(--hot) 18%,var(--card));
  border:2px solid var(--hot-dark);border-radius:14px;padding:12px 16px;
  font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:10px;
}
.checkout-form{display:grid;gap:11px;align-content:start;background:var(--bg2);padding:20px;border-radius:18px;border:1px solid var(--line)}
.checkout-form input,.checkout-form select,.checkout-form textarea{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-size:.92rem;
}

/* =========================================================
   DOKUMENTUMOK – Csak TAO dokumentumok
   ========================================================= */
#dokumentumok{background:var(--bg2)}
.tao-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:720px){.tao-grid{grid-template-columns:1fr}}
.tao-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  text-decoration:none;transition:transform .2s,border-color .2s;
}
.tao-card:hover{transform:translateY(-3px);border-color:var(--hot-dark)}
.tao-card .tao-year{
  background:var(--hot);color:var(--hot-ink);font-weight:800;font-size:.76rem;
  padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:6px;
}
.tao-card b{display:block;font-size:1.05rem;line-height:1.35}
.tao-card .tao-dl{
  width:42px;height:42px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);
  display:grid;place-items:center;font-weight:800;flex:none;
}
.tao-card:hover .tao-dl{background:var(--hot);color:var(--hot-ink);border-color:var(--hot)}

/* EDZŐK */
#edzok{background:var(--bg)}
.coaches{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.coaches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.coaches{grid-template-columns:1fr}}
.coach{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:#222 center/cover;display:flex;align-items:end;color:#fff}
.coach::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.88))}
.coach .cinfo{position:relative;z-index:2;padding:22px;transition:transform .4s}
.coach .num{position:absolute;top:14px;right:16px;font-family:var(--font-disp);font-weight:800;font-size:3.6rem;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.7);z-index:2}
.coach h3{font-family:var(--font-disp);font-weight:800;font-size:2.1rem;text-transform:uppercase;line-height:1.1;margin-top:4px}
.coach .role{color:var(--hot);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
.coach q{display:block;font-size:.88rem;line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:.4s;margin-top:0}
.coach:hover q{max-height:200px;opacity:1;margin-top:10px}

/* KONTAKT */
#kontakt{background:var(--bg2)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact form{display:grid;gap:12px}
.contact input,.contact textarea{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 18px;color:var(--ink);font:inherit}
.contact textarea{min-height:140px;resize:vertical}
.map{border-radius:var(--radius);overflow:hidden;min-height:340px;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.5) contrast(1.05)}
.cline{display:flex;gap:12px;align-items:center;padding:10px 0;font-weight:600;text-decoration:none}
.cline span{width:40px;height:40px;border-radius:12px;background:var(--hot);display:grid;place-items:center;color:var(--hot-ink);font-weight:800;flex:none}

footer{border-top:1px solid var(--line);padding:50px 0 40px;color:var(--muted);font-size:.88rem;background:var(--bg)}
.fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.bigname{
  font-family:var(--font-disp);font-weight:900;
  font-size:clamp(2.6rem,9.5vw,8.2rem);line-height:1.05;
  text-transform:uppercase;color:var(--card);-webkit-text-stroke:1.5px var(--line);
  text-align:center;margin-top:30px;user-select:none;letter-spacing:.03em;
}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:700}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hero h1 span{opacity:1;transform:none}}