.elementor-widget-container [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-container [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-9441 .elementor-element.elementor-element-19e972a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-html [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-9441 .elementor-element.elementor-element-72b8603{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9441 .elementor-element.elementor-element-b456d58{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-9441 .elementor-element.elementor-element-b456d58:not(.elementor-motion-effects-element-type-background), .elementor-9441 .elementor-element.elementor-element-b456d58 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-shortcode [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-shortcode [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-9441 .elementor-element.elementor-element-59e5c52{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-9441 .elementor-element.elementor-element-b456d58{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}}@media(min-width:768px){.elementor-9441 .elementor-element.elementor-element-b456d58{--content-width:1200px;}}@media(max-width:1024px) and (min-width:768px){.elementor-9441 .elementor-element.elementor-element-b456d58{--content-width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-59e5c52 */.karir-section { 
    background: transparent; 
    padding: 20px 0; 
}

/* --- 1. FILTER & SEARCH BAR --- */
.filter-wrapper {
    background: var(--c-cream); 
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg); 
    padding: 24px 32px;
    margin-bottom: 48px; 
    display: flex; 
    flex-direction: column; 
    gap: 24px;
    box-shadow: var(--sh-soft);
}

.search-box { 
    position: relative; 
    width: 100%; 
}
.search-box i {
    position: absolute; 
    left: 20px; 
    top: 50%;
    transform: translateY(-50%); 
    color: var(--c-orange); 
    font-size: 18px;
}
.search-box input {
    width: 100%; 
    padding: 18px 20px 18px 56px;
    border: 1.5px solid var(--c-line); 
    border-radius: var(--r-pill);
    background: var(--c-paper); 
    font-family: var(--f-body);
    font-size: 16px; 
    color: var(--c-navy); 
    transition: all .25s ease;
}
.search-box input:focus {
    outline: none; 
    border-color: var(--c-orange);
    box-shadow: 0 4px 16px rgba(242,101,34,0.1);
}

.filter-pills { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    align-items: center; 
}
.filter-pills .filter-lbl { 
    font-size: 14px; 
    font-weight: 700; 
    color: var(--c-navy); 
    margin-right: 8px; 
}
.filter-btn {
    padding: 10px 20px; 
    border-radius: var(--r-pill); 
    background: var(--c-paper);
    border: 1.5px solid var(--c-line); 
    font-family: var(--f-body);
    font-size: 14px; 
    font-weight: 600; 
    color: var(--c-navy);
    cursor: pointer; 
    transition: all .25s ease;
}
.filter-btn:hover { 
    border-color: var(--c-navy); 
}
.filter-btn.active { 
    background: var(--c-navy); 
    color: var(--c-paper); 
    border-color: var(--c-navy); 
}

/* --- 2. JOB GRID & EMPTY STATE --- */
.job-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
}
.empty-state {
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 60px 20px;
    background: var(--c-cream); 
    border-radius: var(--r-lg);
    border: 1px dashed var(--c-line);
}
.empty-state i { 
    font-size: 48px; 
    color: var(--c-orange); 
    margin-bottom: 16px; 
    opacity: 0.5; 
}
.empty-state h3 { 
    font-size: 20px; 
    margin-bottom: 8px; 
    font-family: var(--f-display); 
}
.empty-state p { 
    color: var(--c-ink-soft); 
    font-size: 14px;
}

/* --- 3. JOB CARD --- */
.job-card {
    background: var(--c-paper); 
    border: 1px solid var(--c-line);
    border-radius: var(--r-md); 
    padding: 28px; 
    display: flex;
    flex-direction: column; 
    transition: all .3s ease; 
    position: relative;
}
.job-card:hover {
    transform: translateY(-6px); 
    box-shadow: var(--sh-mid);
    border-color: var(--c-orange); 
    background: var(--c-cream);
}
.job-card-head { 
    display: flex; 
    gap: 16px; 
    margin-bottom: 20px; 
    align-items: flex-start; /* Diubah agar ikon dan teks sejajar di tengah */
}

/* Pastikan juga H3 tidak memiliki margin atas bawaan dari Elementor */
.job-title-area h3 { 
    font-size: 18px; 
    line-height: 1.3; 
    margin: 0 0 6px 0; /* Memaksa margin atas menjadi 0 */
    font-family: var(--f-display); 
}

/* Logo / Ikon (Diperbarui menjadi Orange) */
.job-logo {
    width: 56px; 
    height: 56px; 
    border-radius: 12px; 
    background: var(--c-cream-2);
    color: var(--c-orange); 
    display: grid; 
    place-items: center; 
    font-size: 24px; 
    flex-shrink: 0;
}
.job-title-area h3 { 
    font-size: 18px; 
    line-height: 1.3; 
    margin-bottom: 6px; 
    font-family: var(--f-display); 
}
.job-company { 
    font-size: 14px; 
    color: var(--c-ink-soft); 
    font-weight: 500; 
}

/* --- 4. AREA 4 CHIPS (TAGS) --- */
.job-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-bottom: 24px; 
}
.j-tag { 
    font-size: 11px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    padding: 6px 12px; 
    border-radius: var(--r-pill); 
}
/* Chip 1: Kategori (Loker/Magang) */
.j-tag.t-cat { 
    background: var(--c-peach); 
    color: var(--c-orange-deep); 
}
/* Chip 2: Tipe Waktu (Full Time) -> Biru Eye-catchy */
.j-tag.t-type { 
    background: #E0F2FE; /* Biru Muda */
    color: #0284C7;      /* Biru Tua */
}
/* Chip 3: Sistem Pelaksanaan (Online/On-site) -> Lilac */
.j-tag.t-sys { 
    background: var(--c-lilac); 
    color: var(--c-navy); 
} 
/* Chip 4: Lokasi (Bali, Jakarta) -> Hijau Mint */
.j-tag.t-loc { 
    background: var(--c-mint); 
    color: var(--c-mint-deep); 
}

/* --- 5. LOGIKA BACA DETAIL (READ MORE) --- */
.job-desc-wrapper { 
    margin-bottom: 20px; 
}
.job-desc-text {
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden; 
    transition: all 0.3s ease; 
    font-size: 13.5px;
    color: var(--c-ink-soft); 
    line-height: 1.6;
}
.job-desc-text p { 
    margin-bottom: 8px; 
}
.job-desc-text p:last-child { 
    margin-bottom: 0; 
}
.job-desc-text.is-expanded { 
    -webkit-line-clamp: unset; 
}
.read-more-btn {
    background: none; 
    border: none; 
    padding: 0; 
    margin-top: 6px;
    font-family: var(--f-body); 
    font-size: 13px; 
    font-weight: 700;
    color: var(--c-orange); 
    cursor: pointer; 
    transition: color 0.2s ease;
}
.read-more-btn:hover { 
    color: var(--c-navy); 
}

/* --- 6. FOOTER KARTU (TANGGAL & TOMBOL) --- */
.job-meta {
    margin-top: auto; 
    padding-top: 20px; 
    border-top: 1px dashed var(--c-line);
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px;
}
.job-date { 
    font-size: 12.5px; 
    color: var(--c-ink-soft); 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}
.job-date i { 
    color: var(--c-orange); 
}
.job-meta .btn-sm {
    padding: 10px 18px;
    font-size: 13.5px;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 1024px) {
    .job-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .filter-wrapper { 
        padding: 20px; 
        gap: 20px; 
    }
    .job-grid { 
        grid-template-columns: 1fr; 
        gap: 16px;
    }
}/* End custom CSS */