/* 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;
}
.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 ---- */
.radar { position: relative; width: 320px; height: 320px; max-width: 80vw; max-height: 80vw; }
.radar .ring { position:absolute; inset:0; border:1px solid rgba(99,102,241,.30); border-radius:50%; }
.radar .ring.r2 { inset:18%; } .radar .ring.r3 { inset:36%; } .radar .ring.r4 { inset:54%; }
.radar .cross-h, .radar .cross-v { position:absolute; background:rgba(99,102,241,.22); }
.radar .cross-h { left:0; right:0; top:50%; height:1px; }
.radar .cross-v { top:0; bottom:0; left:50%; width:1px; }
.radar .sweep {
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(16,185,129,.55) 0deg, rgba(16,185,129,0) 60deg);
  animation: radar-spin 4s linear infinite;
  mask: radial-gradient(circle, #000 0, #000 99%, transparent 100%);
}
.radar .blip {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:#34d399; box-shadow:0 0 12px 2px rgba(52,211,153,.8);
  animation: blip 4s ease-in-out infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes blip { 0%,18% {opacity:0; transform:scale(.4);} 22% {opacity:1; transform:scale(1);} 60%,100% {opacity:0;} }
@media (prefers-reduced-motion: reduce) { .radar .sweep, .radar .blip { animation: none; } .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; }