/* Dev Radar — design rendszer (kiegészíti a Tailwindet) */

:root { --brand:#4f46e5; --accent:#10b981; }

body { -webkit-font-smoothing: antialiased; }

/* ---- finom scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; border: 2px solid #f8fafc; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- hero háttér: mély űr + halvány grid + radar ---- */
.hero-bg {
  position: relative;
  background:
    radial-gradient(120% 120% at 15% 10%, #312e81 0%, #1e1b4b 40%, #0b1020 100%);
  isolation: isolate;
  overflow: hidden;
}
/* Nyitott hero-szűrő popup: a hero az isolation miatt saját stacking contextben van,
   és az overflow levágná a lenyílót — csak NYITOTT állapotban emeljük ki, hogy a
   -mt-10-zel ráúszó kártyasor design-ja zárva változatlan maradjon. */
.hero-bg.hf-raised { overflow: visible; z-index: 40; }
/* A hero-szűrő blokk MINDIG a hero többi tartalma (statisztika-sor, radar) fölött —
   különben a lenyílók alatt átüt a mögöttes szöveg ("1386 állás…"). */
#herofilter { position: relative; z-index: 20; }
.hero-bg::before {  /* finom rács */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4;
  background-image:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

/* ---- radar kör + forgó sweep (kifinomult: szonár-ping + világító mag) ---- */
.radar { position: relative; width: 340px; height: 340px; max-width: 82vw; max-height: 82vw; }
.radar .ring { position:absolute; border:1px solid rgba(129,140,248,.22); border-radius:50%; inset:0; }
.radar .ring.r2 { inset:14%; } .radar .ring.r3 { inset:28%; } .radar .ring.r4 { inset:42%; } .radar .ring.r5 { inset:56%; }
.radar .tick { position:absolute; inset:0; }
.radar .tick::before, .radar .tick::after { content:""; position:absolute; background:rgba(129,140,248,.14); }
.radar .tick::before { left:0; right:0; top:50%; height:1px; }
.radar .tick::after { top:0; bottom:0; left:50%; width:1px; }
.radar .sweep {
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(52,211,153,.45) 0deg, rgba(52,211,153,.08) 22deg, transparent 60deg);
  animation: radar-spin 3.2s linear infinite;
  mask: radial-gradient(circle, #000 0, #000 99%, transparent 100%);
}
.radar .core {
  position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px; border-radius:50%;
  background:#34d399; box-shadow:0 0 16px 4px rgba(52,211,153,.6);
}
.radar .ping {
  position:absolute; width:9px; height:9px; border-radius:50%; background:#34d399;
  opacity:0; animation: radar-flash 3.2s ease-in-out infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
/* felvillan + táguló glória (box-shadow-spread) egy animációban */
@keyframes radar-flash {
  0%, 10%   { opacity:0; transform:scale(.3); box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  16%       { opacity:1; transform:scale(1.25); box-shadow:0 0 14px 3px rgba(52,211,153,.95), 0 0 0 0 rgba(52,211,153,.55); }
  44%       { opacity:1; transform:scale(1); box-shadow:0 0 8px 1px rgba(52,211,153,.5), 0 0 0 18px rgba(52,211,153,0); }
  70%, 100% { opacity:0; box-shadow:0 0 0 22px rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) { .radar .sweep, .radar .ping { animation: none; } .radar .ping{opacity:1} .radar .sweep{opacity:.4} }

/* ---- belépő animáció ---- */
.fade-up { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.fade-up.d1{animation-delay:.06s}.fade-up.d2{animation-delay:.12s}.fade-up.d3{animation-delay:.18s}
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }

/* ---- cég-monogram gradiensek (név hossza szerint stabilan választva) ---- */
.mono { color:#fff; font-weight:700; }
.mono-0{background:linear-gradient(135deg,#6366f1,#4338ca)}
.mono-1{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.mono-2{background:linear-gradient(135deg,#10b981,#047857)}
.mono-3{background:linear-gradient(135deg,#f59e0b,#b45309)}
.mono-4{background:linear-gradient(135deg,#ec4899,#9d174d)}
.mono-5{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}

/* ---- bérsáv-vizualizáció ---- */
.salary-bar { height:6px; border-radius:99px; background:#e2e8f0; overflow:hidden; }
.salary-bar > span { display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#34d399,#10b981,#4f46e5); }

/* ---- kártya hover emelés ---- */
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-3px); }

/* ---- leaflet popup csinosítás ---- */
.leaflet-popup-content-wrapper { border-radius:14px; box-shadow:0 12px 40px -12px rgba(16,24,40,.4); }
.leaflet-popup-content { margin:14px 16px; }