/* ======================================================
   HALAMAN DETAIL LOWONGAN — jobs-detail.css
   Diextract dari template/detail-jobs.html. Melengkapi style.css.
====================================================== */

/* Fallback token — kalau style.css utama gagal termuat, halaman tetap rapi */
:root {
    --primary: #1457D8;
    --primary-dark: #0F3FA8;
    --primary-light: #E8EFFD;
    --navy: #101A33;
    --gray-800: #2D3748;
    --gray-700: #42526B;
    --gray-600: #6B7686;
    --gray-500: #94A0B3;
    --gray-border: #E2E7EF;
    --gray-bg: #F5F7FA;
    --green: #16A34A;
    --page-bg: #F8FAFC;
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-lg: 0 12px 32px rgba(20, 40, 90, .10);
}

/* ===== Breadcrumb ===== */
.breadcrumb-bkk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.breadcrumb-bkk a { color: var(--gray-600); }
.breadcrumb-bkk a:hover { color: var(--primary); }
.breadcrumb-bkk .sep { color: var(--gray-400, #B0BAC9); font-size: .7rem; }
.breadcrumb-bkk .current { color: var(--navy); }

/* ===== Header lowongan ===== */
.jd-head {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.jd-head-strip {
    height: 20px;
    background:
        radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .35), transparent 55%),
        linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.jd-head-body { padding: 0 1.6rem 1.5rem; }

.jd-logo {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--gray-border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem; /* logo turun ke bawah strip (tidak lagi overlap) */
    flex-shrink: 0;
    overflow: hidden;
}

.jd-logo img { width: 90px; height: 90px; object-fit: contain; border-radius: 12px; }

.jd-title {
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--navy);
    margin: 0;
}

.jd-company {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--gray-700);
    margin-top: .25rem;
    text-decoration: none;
}

.jd-company .verified { color: var(--primary); font-size: 1rem; }

.jd-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.jd-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gray-bg);
    border: 1px solid var(--gray-border);
    color: var(--gray-700);
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .75rem;
    border-radius: 30px;
}

.jd-chip i { color: var(--primary); font-size: .9rem; }

/* Badge "Populer" di header lowongan — diperbesar */
.jd-head .badge-populer {
    font-size: .9rem;
    padding: 7px 16px;
    border-radius: 8px;
}

.jd-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.4rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--gray-border);
    font-size: .82rem;
    color: var(--gray-600);
}

.jd-meta-items { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.jd-meta-row span { display: inline-flex; align-items: center; gap: .4rem; }
.jd-meta-row i { color: var(--gray-500); }
.jd-meta-row b { color: var(--navy); font-weight: 700; }

/* Tombol Lamar di header (sejajar dengan total pelamar) */
.jd-head-cta { flex-shrink: 0; }
.jd-head-cta form { margin: 0; }
.jd-apply-btn { padding: .6rem 1.4rem; font-size: .9rem; white-space: nowrap; }
.jd-apply-btn i { margin-right: .35rem; }

@media (max-width: 767.98px) {
    .jd-head-cta { width: 100%; }
    .jd-head-cta form, .jd-apply-btn { width: 100%; }
    .jd-apply-btn { display: flex; align-items: center; justify-content: center; }
}

/* ===== Kartu konten ===== */
.content-card {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.6rem;
}

.content-card+.content-card { margin-top: 1.1rem; }

.content-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.3px;
    color: var(--navy);
    margin: 0 0 1rem;
}

.content-title::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--primary);
    display: inline-block;
}

.jd-prose { color: var(--gray-700); font-size: .92rem; line-height: 1.75; }
.jd-prose p { margin-bottom: .85rem; }
.jd-prose p:last-child { margin-bottom: 0; }
.jd-prose ul, .jd-prose ol { padding-left: 1.3rem; margin-bottom: .85rem; }
.jd-prose li { margin-bottom: .4rem; }
.jd-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Daftar bullet dengan ceklis */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }

.check-list li {
    position: relative;
    padding-left: 2rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.check-list li::before {
    content: '\F26E';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: .05rem;
    color: var(--green);
    font-size: 1.05rem;
}

.check-list.dot li::before { content: '\F287'; color: var(--primary); }

/* Skill tags */
.skill-wrap { display: flex; flex-wrap: wrap; gap: .55rem; }

.skill-tag {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #D4E1FB;
    font-weight: 700;
    font-size: .82rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
}

/* Benefit grid */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }

.benefit-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--gray-bg);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: .8rem .9rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--navy);
}

.benefit-item .b-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--gray-border);
}

/* ===== Sidebar ===== */
.jd-sticky {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.salary-box {
    background: linear-gradient(135deg, #EAF0FD, #E3ECFD);
    border: 1px solid #D4E1FB;
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}

.salary-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary);
}

.salary-value {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--navy);
    letter-spacing: -.4px;
    margin-top: .15rem;
}

.salary-value small { font-size: .78rem; font-weight: 600; color: var(--gray-500); }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.info-list li { display: flex; align-items: flex-start; gap: .8rem; }

.info-list .i-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gray-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.info-list .i-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.info-list .i-value { font-size: .9rem; font-weight: 700; color: var(--navy); }

/* Countdown deadline */
.deadline-box {
    border: 1px solid #FECACA;
    background: #FEF2F2;
    border-radius: var(--radius-md);
    padding: .9rem 1rem;
    margin-top: 1.1rem;
}

.deadline-label {
    font-size: .74rem;
    font-weight: 700;
    color: #DC2626;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
}

.deadline-timer { display: flex; gap: .5rem; }

.deadline-timer .seg {
    flex: 1;
    text-align: center;
    background: #fff;
    border: 1px solid #FECACA;
    border-radius: 9px;
    padding: .4rem 0;
}

.deadline-timer .seg b {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.deadline-timer .seg span {
    font-size: .62rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: .8rem;
    font-size: .95rem;
    border-radius: var(--radius-md);
}

.btn-ghost {
    background: #fff;
    border: 1.5px solid var(--gray-border);
    color: var(--gray-700);
    font-weight: 700;
    border-radius: var(--radius-md);
    padding: .7rem;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}

.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ===== Card warning (Tips Menjaga Diri) ===== */
.warning-card {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.warning-card .content-title { color: #92400E; }
.warning-card .content-title::before { background: #F59E0B; }
.warning-card .content-title i { color: #F59E0B; }
.warning-card .jd-prose { color: #78350F; }
.warning-card .jd-prose b { color: #92400E; }

/* ===== Kartu perusahaan (layout sesuai template, tanpa rating/karyawan) ===== */
.company-card .c-head { display: flex; align-items: center; gap: .85rem; }

.company-card .c-logo {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.company-card .c-logo img { width: 40px; height: 40px; object-fit: contain; }
.company-card .c-name { font-weight: 800; font-size: .98rem; color: var(--navy); }
.company-card .c-loc { font-size: .8rem; color: var(--gray-600); }

/* Statistik Lowongan Aktif — modern & profesional (data asli) */
.company-active {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: linear-gradient(135deg, #EAF0FD, #F5F8FE);
    border: 1px solid #D4E1FB;
    border-radius: var(--radius-md);
    padding: .85rem 1rem;
    margin: 1rem 0;
}

.company-active .ca-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(20, 87, 216, .25);
    flex-shrink: 0;
}

.company-active .ca-txt { flex: 1; min-width: 0; }

.company-active .ca-txt b {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.3px;
    line-height: 1.1;
}

.company-active .ca-txt span {
    font-size: .7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.company-active .ca-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: #15803D;
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
    padding: .3rem .65rem;
    border-radius: 20px;
    white-space: nowrap;
}

.company-active .ca-live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16A34A;
    animation: caPulse 1.6s ease-out infinite;
}

@keyframes caPulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.company-desc {
    color: var(--gray-600);
    font-size: .84rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    /* maksimal 3 baris */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Share */
.share-row { display: flex; gap: .55rem; flex-wrap: wrap; }

.share-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--gray-border);
    background: #fff;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all .2s;
    cursor: pointer;
    text-decoration: none;
}

.share-btn:hover { color: #fff; transform: translateY(-2px); }
.share-btn.wa:hover { background: #25D366; border-color: #25D366; }
.share-btn.tg:hover { background: #229ED9; border-color: #229ED9; }
.share-btn.fb:hover { background: #1877F2; border-color: #1877F2; }
.share-btn.cp:hover { background: var(--primary); border-color: var(--primary); }

/* Mobile apply bar */
.mobile-apply-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--gray-border);
    box-shadow: 0 -6px 20px rgba(20, 40, 90, .08);
    padding: .7rem 1rem;
    gap: .7rem;
    align-items: center;
}

.mobile-apply-bar .m-sal { flex: 1; min-width: 0; }
.mobile-apply-bar .m-sal small { font-size: .68rem; color: var(--gray-500); font-weight: 600; }

.mobile-apply-bar .m-sal b {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lowongan serupa */
.similar-wrap { margin-top: 1.6rem; }

@media (max-width: 991.98px) {
    .jd-sticky { position: static; }
    .jd-title { font-size: 1.3rem; }
}

@media (max-width: 575.98px) {
    .benefit-grid { grid-template-columns: 1fr; }
    .jd-head-body { padding: 0 1.1rem 1.3rem; }
    .content-card { padding: 1.2rem 1.15rem; }
    .mobile-apply-bar { display: flex; }
    body { padding-bottom: 76px; }
}