/* LokerNet Custom Styles
 * Palette: Blue (#2563EB) & Orange (#F97316) on Deep Midnight (#0A0F1E)
 */

:root {
    --bg: #0A0F1E;
    --bg-2: #0F1626;
    --card: #131B2E;
    --border: rgba(255,255,255,0.08);
    --fg: #F8FAFC;
    --muted: #94A3B8;
    --blue: #2563EB;
    --blue-2: #3B82F6;
    --blue-dark: #1D4ED8;
    --orange: #F97316;
    --orange-2: #FB923C;
    --orange-dark: #EA580C;
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
}
.font-display { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; }

/* Backgrounds */
.hero-bg {
    background:
      radial-gradient(ellipse 70% 50% at 15% 10%, rgba(37,99,235,0.20), transparent 55%),
      radial-gradient(ellipse 50% 40% at 85% 25%, rgba(249,115,22,0.12), transparent 55%),
      radial-gradient(ellipse 60% 50% at 50% 110%, rgba(37,99,235,0.14), transparent 55%),
      #0A0F1E;
}
.grid-pattern {
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 30%, transparent 90%);
}
.glass {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
}
.gradient-text {
    background: linear-gradient(120deg, #3B82F6 0%, #2563EB 40%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Logo */
.logo-box {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    box-shadow: 0 4px 16px -4px rgba(37,99,235,0.4);
}
.logo-l { color: #2563EB; }
.logo-n { color: #F97316; }
.logo-search { color: #1E293B; }

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    box-shadow: 0 8px 24px -8px rgba(37,99,235,0.5);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
    box-shadow: 0 12px 32px -8px rgba(37,99,235,0.7);
    transform: translateY(-2px);
}
.btn-orange {
    background: linear-gradient(135deg, #F97316, #EA580C);
    box-shadow: 0 8px 24px -8px rgba(249,115,22,0.4);
    transition: all 0.3s ease;
}
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(249,115,22,0.6); }

/* Animations */
@keyframes float {
    0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
    50% { transform: translateY(-14px) rotate(var(--rot,0deg)); }
}
.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7.5s ease-in-out infinite 0.4s; }
.float-3 { animation: float 8s ease-in-out infinite 0.8s; }

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track { display: flex; width: max-content; animation: marquee 35s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

@keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0.7); }
    50% { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes logo-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
    50% { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}
.logo-dot { animation: logo-pulse 2.5s infinite; }

/* Job card */
.job-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.job-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(37,99,235,0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.job-card:hover {
    border-color: rgba(37,99,235,0.35);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(37,99,235,0.25);
}
.job-card:hover::after { opacity: 1; }

/* Category card */
.category-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.category-card:hover::before { transform: translateX(100%); }
.category-card:hover {
    border-color: rgba(37,99,235,0.3);
    transform: translateY(-4px);
}
.category-card:hover .cat-icon {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: white;
}

/* Nav */
.nav-scrolled {
    background: rgba(10,15,30,0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, #2563EB, #F97316);
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Dropdown */
.dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
}
.dropdown-parent:hover .dropdown, .dropdown-parent:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Search bar */
.search-glow { transition: all 0.3s ease; }
.search-glow:focus-within {
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    border-color: rgba(37,99,235,0.5);
}
.custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    appearance: none;
    padding-right: 2rem;
}

/* Chips */
.chip {
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.2);
    color: #93C5FD;
    transition: all 0.2s ease;
}
.chip:hover {
    background: rgba(37,99,235,0.18);
    border-color: rgba(37,99,235,0.45);
    color: #BFDBFE;
}
.chip.active {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    border-color: transparent;
    color: white;
}

/* Badges */
.badge-fulltime { background: rgba(37,99,235,0.12); color: #93C5FD; border: 1px solid rgba(37,99,235,0.25); }
.badge-parttime { background: rgba(249,115,22,0.12); color: #FDBA74; border: 1px solid rgba(249,115,22,0.25); }
.badge-remote { background: rgba(168,85,247,0.12); color: #C4B5FD; border: 1px solid rgba(168,85,247,0.25); }
.badge-intern { background: rgba(56,189,248,0.12); color: #7DD3FC; border: 1px solid rgba(56,189,248,0.25); }
.badge-kontrak { background: rgba(234,179,8,0.12); color: #FDE68A; border: 1px solid rgba(234,179,8,0.25); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0F1E; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2563EB; }

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.mobile-menu.open { transform: translateX(0); }

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem; right: 2rem;
    transform: translateY(150%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    z-index: 9999;
}
.toast.show { transform: translateY(0); }

/* Back to top */
.back-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.back-top.visible {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Testimonial */
.testimonial-track { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }

/* Aurora orb */
.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
}

/* Number counter */
.stat-number { font-variant-numeric: tabular-nums; }

/* Hide horizontal scrollbar */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Filter checkbox */
.filter-check:checked + label { color: #3B82F6; }
.filter-check:checked + label .check-box {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    border-color: transparent;
}
.filter-check:checked + label .check-box i { opacity: 1; }
.check-box i { opacity: 0; transition: opacity 0.2s; }

/* Section dividers */
.section-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), transparent);
}

/* GeneratePress Overrides */
.site-header, .site-footer { display: none; } /* Sembunyikan header/footer bawaan GP jika ada */