/* =====================================================================
   Főoldal – látványos YiroSoft stílus (hero, futó sáv, szekciók, záró CTA).
   Csak a főoldal tölti (main_index.php). Osztály-előtag: .yh-
   ===================================================================== */
:root{ --yh-gold:#f3cf7a; --yh-gold-2:#c9962e; --yh-gold-3:#fff1c2; --yh-gold-rgb:243,207,122; --yh-purple:#8b5cf6; --yh-cyan:#38bdf8; --yh-green:#22c55e; }

/* ---------- általános ---------- */
.yh-section{ position:relative; padding:64px 0 24px; }
.yh-sec-head{ text-align:center; max-width:720px; margin:0 auto 28px; }
.yh-sec-head p{ color:var(--muted,#b6bcc6); margin:8px 0 0; font-size:1rem; }
.yh-kicker{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--yh-gold); background:rgba(var(--yh-gold-rgb),.09); border:1px solid rgba(var(--yh-gold-rgb),.28); box-shadow:0 0 20px rgba(var(--yh-gold-rgb),.1); }
.yh-h2{ margin:14px 0 0; font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:900; letter-spacing:-.02em; color:#fff; line-height:1.1; }
.yh-grad{ background:linear-gradient(100deg,var(--yh-gold-3),var(--yh-gold) 40%,#ffd27a 60%,var(--yh-gold-2)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:yhShimmer 5s linear infinite; }
@keyframes yhShimmer{ to{ background-position:-200% 0; } }

/* ---------- gombok ---------- */
.yh-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 20px; border-radius:14px; border:1px solid transparent; font-weight:800; font-size:.92rem; cursor:pointer; text-decoration:none; overflow:hidden; transition:transform .2s, box-shadow .2s, filter .2s, background .2s; white-space:nowrap; }
.yh-btn--lg{ padding:14px 26px; font-size:1rem; border-radius:16px; }
.yh-btn--gold{ color:#2a1d04; background:linear-gradient(180deg,var(--yh-gold-3) 0%,var(--yh-gold) 45%,var(--yh-gold-2) 100%); box-shadow:0 12px 30px rgba(var(--yh-gold-rgb),.35), inset 0 1px 0 rgba(255,255,255,.6); }
.yh-btn--gold::after{ content:''; position:absolute; top:-50%; left:-60%; width:40%; height:200%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transition:left .55s; }
.yh-btn--gold:hover::after{ left:130%; }
.yh-btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(var(--yh-gold-rgb),.45); color:#2a1d04; }
.yh-btn--glass{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); backdrop-filter:blur(10px); }
.yh-btn--glass:hover{ background:rgba(255,255,255,.14); transform:translateY(-3px); color:#fff; border-color:rgba(var(--yh-gold-rgb),.45); }
.yh-btn--ghost{ color:#e9ecf1; background:transparent; border-color:rgba(255,255,255,.14); }
.yh-btn--ghost:hover{ color:#fff; border-color:rgba(255,255,255,.35); transform:translateY(-3px); }

/* ---------- hero belépő animáció (nem függ a görgetés-figyeléstől) ---------- */
.yh-enter{ animation:yhEnter .8s cubic-bezier(.2,.8,.2,1) both; }
.yh-enter--2{ animation-delay:.18s; }
@keyframes yhEnter{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

/* ---------- reveal (görgetésre beúszó elemek) ---------- */
[data-yh-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
[data-yh-reveal].is-in{ opacity:1; transform:none; }

/* =====================================================================
   HERO
   ===================================================================== */
.yh-hero{ position:relative; min-height:min(100vh, 880px); display:flex; align-items:center; padding:calc(var(--nav-h,56px) + 56px) 0 70px; overflow:hidden; isolation:isolate; background:#07090e; }
.yh-hero-bg{ position:absolute; inset:0; z-index:0; }
.yh-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(1.15) contrast(1.05); transform:scale(1.04); animation:yhKen 28s ease-in-out infinite alternate; }
@keyframes yhKen{ from{ transform:scale(1.04) translate(0,0);} to{ transform:scale(1.12) translate(-1.5%,1%);} }
.yh-hero-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,9,14,.55) 0%,rgba(7,9,14,.25) 40%,rgba(7,9,14,.85) 85%,#0c1016 100%), radial-gradient(900px 500px at 15% 30%, rgba(var(--yh-gold-rgb),.14), transparent 65%), radial-gradient(700px 500px at 85% 70%, rgba(139,92,246,.18), transparent 65%); }
.yh-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.yh-aurora i{ position:absolute; width:55vw; height:55vw; max-width:900px; max-height:900px; border-radius:50%; filter:blur(90px); opacity:.45; animation:yhBlob 18s ease-in-out infinite alternate; }
.yh-aurora i:nth-child(1){ left:-15%; top:-20%; background:radial-gradient(circle, rgba(var(--yh-gold-rgb),.55), transparent 60%); }
.yh-aurora i:nth-child(2){ right:-15%; top:10%; background:radial-gradient(circle, rgba(139,92,246,.5), transparent 60%); animation-delay:-6s; animation-duration:22s; }
.yh-aurora i:nth-child(3){ left:30%; bottom:-35%; background:radial-gradient(circle, rgba(56,189,248,.35), transparent 60%); animation-delay:-12s; animation-duration:26s; }
@keyframes yhBlob{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(8%,6%) scale(1.15);} }
.yh-grid{ position:absolute; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); }
.yh-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.yh-particles i{ position:absolute; bottom:-20px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%; background:var(--c, var(--yh-gold)); box-shadow:0 0 12px var(--c, var(--yh-gold)); opacity:0; animation:yhRise var(--d) linear var(--delay) infinite; }
@keyframes yhRise{ 0%{ transform:translateY(0) scale(.5); opacity:0;} 10%{ opacity:.9;} 60%{ opacity:.6;} 100%{ transform:translateY(-105vh) scale(1.1); opacity:0;} }

.yh-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.yh-eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#f5e7c3; background:rgba(255,255,255,.06); border:1px solid rgba(var(--yh-gold-rgb),.3); backdrop-filter:blur(8px); }
.yh-eyebrow-dot{ width:9px; height:9px; border-radius:50%; background:var(--yh-green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:yhPing 1.8s ease-out infinite; }
@keyframes yhPing{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6);} 100%{ box-shadow:0 0 0 10px rgba(34,197,94,0);} }
.yh-title{ margin:18px 0 14px; font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:900; line-height:1.02; letter-spacing:-.03em; color:#fff; text-shadow:0 10px 40px rgba(0,0,0,.5); }
.yh-title-line{ display:block; }
.yh-title-gold{ background:linear-gradient(100deg,var(--yh-gold-3) 0%,var(--yh-gold) 35%,#fff5d6 50%,var(--yh-gold) 65%,var(--yh-gold-2) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:yhShimmer 4.5s linear infinite; filter:drop-shadow(0 6px 24px rgba(var(--yh-gold-rgb),.35)); }
.yh-lead{ max-width:560px; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; color:#cfd5df; margin:0 0 24px; }
.yh-lead strong{ color:#fff; }
.yh-cta{ display:flex; flex-wrap:wrap; gap:12px; }

.yh-live{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.yh-live-item{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); font-size:.78rem; color:#aeb6c4; transition:.2s; }
.yh-live-item:hover{ border-color:rgba(var(--yh-gold-rgb),.4); background:rgba(var(--yh-gold-rgb),.06); }
.yh-live-item i.bi{ color:var(--yh-gold); font-size:1rem; }
.yh-live-item b{ font-size:1.05rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.yh-live-item.is-online b{ color:#a7f3b8; }
.yh-pulse{ width:10px; height:10px; border-radius:50%; background:var(--yh-green); box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:yhPing 1.6s ease-out infinite; }

/* spotlight játékkártya */
.yh-spot{ position:relative; perspective:1200px; }
.yh-spot-glow{ position:absolute; inset:10% 5% 0; border-radius:40px; background:radial-gradient(closest-side, rgba(var(--yh-gold-rgb),.35), transparent); filter:blur(40px); z-index:0; animation:yhGlow 4s ease-in-out infinite alternate; }
@keyframes yhGlow{ from{ opacity:.6; transform:scale(.95);} to{ opacity:1; transform:scale(1.05);} }
.yh-spot-stage{ position:relative; z-index:1; aspect-ratio:4/3; transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform; }
.yh-spot-card{ position:absolute; inset:0; display:block; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); opacity:0; transform:translateY(20px) scale(.96); pointer-events:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); background:#0f131a; text-decoration:none; }
.yh-spot-card.is-active{ opacity:1; transform:none; pointer-events:auto; }
.yh-spot-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 8s ease; }
.yh-spot-card.is-active > img{ transform:scale(1.08); }
.yh-spot-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(5,7,12,.92) 100%); }
.yh-spot-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; background:conic-gradient(from var(--yh-ang,0deg), transparent 0 55%, var(--yh-gold-3) 70%, transparent 85%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:yhSpinBorder 5s linear infinite; }
@property --yh-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes yhSpinBorder{ to{ --yh-ang:360deg; } }
.yh-spot-status{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(10,12,18,.7); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px); }
.yh-spot-status i{ width:8px; height:8px; border-radius:50%; background:#9ca3af; }
.yh-spot-status.is-online i{ background:var(--yh-green); box-shadow:0 0 10px var(--yh-green); animation:yhPing 1.6s ease-out infinite; }
.yh-spot-status.is-maintenance i{ background:#f59e0b; } .yh-spot-status.is-development i{ background:var(--yh-cyan); }
.yh-spot-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:18px 18px 20px; }
.yh-spot-icon{ width:54px; height:54px; border-radius:16px; object-fit:cover; border:2px solid rgba(255,255,255,.2); box-shadow:0 8px 20px rgba(0,0,0,.5); background:#151a23; }
.yh-spot-text b{ display:block; font-size:1.25rem; font-weight:900; color:#fff; letter-spacing:-.01em; }
.yh-spot-text small{ display:block; font-size:.78rem; color:#b8c0cc; }
.yh-spot-text em{ font-style:normal; color:#a7f3b8; font-weight:700; }
.yh-spot-play{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; color:#2a1d04; background:linear-gradient(180deg,var(--yh-gold-3),var(--yh-gold-2)); box-shadow:0 10px 26px rgba(var(--yh-gold-rgb),.45); transition:transform .2s; }
.yh-spot-card:hover .yh-spot-play{ transform:scale(1.1) rotate(-6deg); }
.yh-spot-thumbs{ position:relative; z-index:2; display:flex; justify-content:center; gap:10px; margin-top:16px; }
.yh-spot-thumb{ position:relative; width:52px; height:52px; padding:0; border-radius:14px; overflow:hidden; border:2px solid rgba(255,255,255,.12); background:#0f131a; cursor:pointer; opacity:.6; transition:.2s; }
.yh-spot-thumb img{ width:100%; height:100%; object-fit:cover; }
.yh-spot-thumb:hover{ opacity:1; transform:translateY(-3px); }
.yh-spot-thumb.is-active{ opacity:1; border-color:var(--yh-gold); box-shadow:0 0 18px rgba(var(--yh-gold-rgb),.45); }
.yh-spot-prog{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--yh-gold); }
.yh-spot-thumb.is-active .yh-spot-prog{ animation:yhProg var(--yh-spot-ms,6000ms) linear forwards; }
@keyframes yhProg{ to{ width:100%; } }

.yh-scroll{ position:absolute; left:50%; bottom:22px; z-index:2; width:28px; height:44px; border-radius:16px; border:2px solid rgba(255,255,255,.28); transform:translateX(-50%); display:flex; justify-content:center; padding-top:6px; }
.yh-scroll span{ width:4px; height:8px; border-radius:2px; background:var(--yh-gold); animation:yhScroll 1.6s ease-in-out infinite; }
@keyframes yhScroll{ 0%{ transform:translateY(0); opacity:1;} 100%{ transform:translateY(18px); opacity:0;} }

/* =====================================================================
   FUTÓ SÁV
   ===================================================================== */
.yh-marquee{ position:relative; z-index:2; overflow:hidden; background:linear-gradient(90deg,rgba(var(--yh-gold-rgb),.14),rgba(139,92,246,.12),rgba(var(--yh-gold-rgb),.14)); border-top:1px solid rgba(var(--yh-gold-rgb),.25); border-bottom:1px solid rgba(var(--yh-gold-rgb),.25); }
.yh-marquee::before,.yh-marquee::after{ content:''; position:absolute; top:0; bottom:0; width:120px; z-index:1; pointer-events:none; }
.yh-marquee::before{ left:0; background:linear-gradient(90deg,#0c1016,transparent); } .yh-marquee::after{ right:0; background:linear-gradient(270deg,#0c1016,transparent); }
.yh-marquee-track{ display:flex; gap:44px; width:max-content; padding:12px 0; animation:yhMarquee 42s linear infinite; }
.yh-marquee:hover .yh-marquee-track{ animation-play-state:paused; }
.yh-marquee-track span{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#d9dee8; white-space:nowrap; }
.yh-marquee-track span i{ color:var(--yh-gold); }
.yh-marquee-track span.is-gold{ color:var(--yh-gold); }
@keyframes yhMarquee{ to{ transform:translateX(-50%); } }

/* =====================================================================
   MIÉRT A YIROSOFT
   ===================================================================== */
.yh-why{ background:radial-gradient(800px 400px at 50% 0, rgba(var(--yh-gold-rgb),.07), transparent 70%); }
.yh-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.yh-why-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 22px; border-radius:22px; text-decoration:none; color:inherit; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; transition-delay:0s !important; }
.yh-why-card::before{ content:''; position:absolute; inset:0; opacity:0; background:radial-gradient(400px 200px at 20% 0, color-mix(in srgb, var(--c1) 28%, transparent), transparent 70%); transition:opacity .3s; }
.yh-why-card:hover{ transform:translateY(-8px); border-color:color-mix(in srgb, var(--c1) 55%, transparent); box-shadow:0 24px 50px rgba(0,0,0,.4), 0 0 40px color-mix(in srgb, var(--c1) 22%, transparent); color:inherit; }
.yh-why-card:hover::before{ opacity:1; }
.yh-why-icon{ position:relative; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:1.5rem; color:#0b0e14; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 12px 28px color-mix(in srgb, var(--c1) 40%, transparent); transition:transform .3s; }
.yh-why-card:hover .yh-why-icon{ transform:rotate(-8deg) scale(1.08); }
.yh-why-card h3{ margin:6px 0 0; font-size:1.1rem; font-weight:900; color:#fff; }
.yh-why-card p{ margin:0; font-size:.88rem; line-height:1.55; color:#aeb6c4; flex:1; }
.yh-why-more{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:800; color:var(--c1); }
.yh-why-more i{ transition:transform .2s; } .yh-why-card:hover .yh-why-more i{ transform:translateX(4px); }

/* =====================================================================
   ZÁRÓ CTA
   ===================================================================== */
.yh-final{ padding:30px 0 70px; }
.yh-final-card{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:24px; padding:44px 46px; border-radius:30px; background:linear-gradient(135deg,#171d2a 0%,#0f131a 60%,#1a1526 100%); border:1px solid rgba(var(--yh-gold-rgb),.3); box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 80px rgba(var(--yh-gold-rgb),.08); }
.yh-final-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; background:conic-gradient(from var(--yh-ang,0deg), transparent 0 60%, var(--yh-gold) 72%, transparent 84%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:yhSpinBorder 8s linear infinite; }
.yh-final-orbs{ position:absolute; inset:0; pointer-events:none; }
.yh-final-orbs i{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; pointer-events:none; animation:yhBlob 14s ease-in-out infinite alternate; }
.yh-final-orbs i:nth-child(1){ width:340px; height:340px; left:-80px; top:-120px; background:rgba(var(--yh-gold-rgb),.45); }
.yh-final-orbs i:nth-child(2){ width:300px; height:300px; right:-60px; bottom:-140px; background:rgba(139,92,246,.45); animation-delay:-5s; }
.yh-final-orbs i:nth-child(3){ width:220px; height:220px; right:30%; top:-100px; background:rgba(56,189,248,.35); animation-delay:-9s; }
.yh-final-copy{ position:relative; z-index:1; }
.yh-final-copy p{ margin:10px 0 0; color:#b8c0cc; max-width:520px; }
.yh-final-actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* =====================================================================
   Reszponzív + mozgás-csökkentés
   ===================================================================== */
@media (max-width:1199px){ .yh-why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px){
  .yh-hero{ min-height:auto; padding-top:calc(var(--nav-h,56px) + 40px); }
  .yh-hero-inner{ grid-template-columns:1fr; gap:34px; }
  .yh-spot{ max-width:560px; margin:0 auto; width:100%; }
  .yh-final-card{ grid-template-columns:1fr; padding:34px 26px; }
  .yh-final-actions{ justify-content:flex-start; }
}
@media (max-width:575px){
  .yh-why-grid{ grid-template-columns:1fr; }
  .yh-cta .yh-btn{ flex:1 1 100%; }
  .yh-live-item{ flex:1 1 calc(50% - 10px); }
  .yh-scroll{ display:none; }
  .yh-spot-text b{ font-size:1.05rem; }
  .yh-marquee-track{ animation-duration:28s; }
}
@media (prefers-reduced-motion:reduce){
  .yh-hero *, .yh-marquee-track, .yh-final-card::after, .yh-spot-card::after, .yh-grad, .yh-title-gold{ animation:none !important; }
  [data-yh-reveal]{ opacity:1; transform:none; transition:none; }
  .yh-particles{ display:none; }
}