/* =========================
   JOBS LISTING PAGE
========================= */
.jobs-main {
    background: #f8fafc;
    min-height: 60vh;
    padding: 50px 0 80px;
}

/* =========================
   CARD JOB
========================= */
.vacancy-card-lg {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.vacancy-card-lg:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* subtle border hover */
.vacancy-card-lg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 2px solid transparent;
    transition: 0.2s;
}

.vacancy-card-lg:hover::after {
    border-color: rgba(31, 95, 175, 0.15);
}

/* =========================
   TITLE
========================= */
.job-title {
    font-size: 1rem;
    color: #111827;
    line-height: 1.4;
}

/* =========================
   META
========================= */
.job-meta {
    font-size: 0.85rem;
    color: #6b7280;
}

.job-meta i {
    color: #1f5faf;
}

/* =========================
   BADGE
========================= */
.badge-section {
    background: #e3f2fd;
    color: #1f5faf;
    font-size: 0.72rem;
    border-radius: 50px;
}

.badge-open {
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.7rem;
    border-radius: 50px;
}

.badge-period {
    background: #fff8e1;
    color: #f4c20d;
    font-size: 0.7rem;
    border-radius: 50px;
}

/* =========================
   FOOTER & DATE
========================= */
.job-footer {
    border-color: #f1f5f9;
}

.job-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

.job-apply {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f5faf;
}

/* hover kuning */
.vacancy-card-lg:hover .job-apply {
    color: #f4c20d;
}

/* =========================
   EMPTY STATE
========================= */
.empty-state i {
    font-size: 4rem;
    color: #cbd5e1;
}