/*
Theme Name: FactoryHub Child
Theme URI: http://steelthemes.com/factoryhub
Author: SteelThemes
Author URI: http://steelthemes.com
Description: Industry, Factory, Engineering & All Industrial Business WordPress Theme
Version: 1.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: factoryhub
Domain Path: /lang/
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: factoryhub
*/

/* ==========================================================================
   SETTINGS HEADER
   ========================================================================== */
/*.main-nav a {*/
/*  color: #000000 !important;*/
/*}*/

/*.main-nav a:hover{*/
/*    color: #5fac00 !important;*/
/*}*/

/*.main-nav a:active{*/
/*    color: #5fac00;*/
/*}*/

.header-v1 .site-menu {
  background-color: #fff !important;
  border-bottom: 1px solid #f1f1f1;
}

/* ==========================================================================
   TATA LETAK CPT SINGLE (Careers dan Procurement)
   ========================================================================== */

/* 1. KANVAS & KOTAK UTAMA */
body.single-careers #primary.content-area,
body.single-procurement #primary.content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 40px 15px !important;
	border: 1px solid #f4f4f4 !important;
}

body.single-careers article.career-single-layout,
body.single-procurement article.career-single-layout {
	max-width: 1080px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 30px !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

/* 2. STYLING HEADER & META */
body.single-careers article.career-single-layout .entry-header,
body.single-procurement article.career-single-layout .entry-header {
	border-bottom: 1px solid #eeeeee !important;
	padding-bottom: 25px !important;
	margin-bottom: 30px !important;
	float: none !important;
	text-align: center;
}

body.single-careers article.career-single-layout h1.entry-title,
body.single-procurement article.career-single-layout h1.entry-title {
	text-align: center !important;
	font-size: 42px !important;
	padding: 15px 0px;
	margin: 0;
}

/* 4. Perbaikan Positioning ACF Meta (DIPERBARUI UNTUK PROCUREMENT) */
body.single-careers .job-details-meta,
body.single-procurement .job-details-meta {
	text-align: center !important;
	margin-top: 20px !important;
	color: #222222;
}
body.single-careers .job-details-meta ul,
body.single-procurement .job-details-meta ul {
	list-style: none !important; /* <-- INI YANG MENGHILANGKAN BULLET */
	padding: 0 !important;
	margin: 0 !important;
}
body.single-careers .job-details-meta li,
body.single-procurement .job-details-meta li {
	display: inline-block !important;
	margin: 0 15px !important;
	font-size: 16px;
}

/* 5. Styling Tombol Back to Career */
.career-back-link-wrapper {
	text-align: left !important;
	margin-bottom: 15px !important;
}
.back-to-career-link {
	font-size: 14px !important;
	color: #222222 !important;
	text-decoration: none !important;
	font-weight: bold !important;
}
.back-to-career-link:hover {
	color: #000 !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   TATA LETAK CPT ARCHIVE (Daftar Lowongan & Tender)
   ========================================================================== */

/* (FIX) Tengahkan Header Arsip CPT (HANYA CAREERS) */
body.archive.post-type-archive-careers .archive-header-custom {
    max-width: 1200px; /* Samakan dengan grid */
    margin: 0 auto 40px auto; 
    padding: 0 15px 30px 15px;
    border-bottom: 1px solid #eee;
}
/* (BARU) Buat Header Arsip PROCUREMENT Full-Width */
body.archive.post-type-archive-procurement .archive-header-custom {
    max-width: 100%; /* Full Width */
    margin: 0 auto 40px auto;
    padding: 0 15px 30px 15px;
    border-bottom: 1px solid #eee;
}

/* Styling Judul & Deskripsi (Berlaku untuk semua arsip kustom) */
.archive-title-custom {
    font-size: 42px !important;
    font-weight: 700 !important;
    text-align: left;
    margin: 12px 0px;
    line-height: 1.2;
    color: #222222;
}

.archive-description-custom{
    color: #222222 !important;
}

.post-type-archive-careers .archive-description-custom p {
    font-size: 16px;
    line-height: 1.7;
    color: #222222;
    margin-bottom: 15px;
    padding: 0px 16px;
}

.post-type-archive-procurement .archive-description-custom p {
    font-size: 16px;
    line-height: 1.7;
    color: #222222 !important;
    margin-bottom: 15px;
}

/* Hilangkan sidebar di halaman arsip */
body.archive.post-type-archive-careers #secondary.widget-area,
body.archive.post-type-archive-procurement #secondary.widget-area {
	display: none !important;
}

/* Buat area card di tengah (GRID 3 KOLOM - HANYA CAREERS) */

/*div.row{*/
/*    display: grid;*/
/*}*/

body.archive.post-type-archive-careers main#main.site-main {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 0 15px; 
	display: grid !important; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* <-- INI PENYEBABNYA */
	grid-gap: 20px; 
}

body.archive.post-type-archive-careers .site-content > .container > .row {
    display: grid;
}

/* Style untuk SATU CARD LOWONGAN (CAREERS) - EQUAL HEIGHT FIXED */
.post-type-archive-careers .career-card-item {
	background-color: #fff !important;
	color: #222222 !important;
	padding: 40px 30px !important;
	margin-bottom: 0 !important;
	border-radius: 15px !important;
	border: 1px solid #d8d8d8;
	
    /* (FIX 1) Paksa kartu mengisi tinggi penuh Grid */
	display: flex !important; 
    flex-direction: column !important;
	height: 100% !important; 
    box-sizing: border-box;
}

.post-type-archive-careers .career-card-content {
	display: flex !important;
	justify-content: space-between;
	align-items: flex-start !important; /* Rata kiri */
    flex-direction: column !important; /* Susun ke bawah */
	
    /* (FIX 2) Isi ruang kosong agar tombol terdorong ke bawah */
    height: 100% !important; 
    width: 100%;
}

/* Bagian Info (Judul) */
.post-type-archive-careers .career-card-info {
    width: 100%;
    flex-grow: 1 !important; /* (FIX 3) Ini yang mendorong tombol ke bawah */
}

/* Bagian Tombol */
.post-type-archive-careers .career-card-action {
    width: 100%;
    margin-top: 25px; /* Jarak minimal dari teks */
}

/* (FIX) Buat area card Procurement 1 KOLOM & FULL WIDTH */
body.archive.post-type-archive-procurement main#main.site-main {
	max-width: 100%; /* Sesuai permintaan "ujung kiri ke kanan" */
	margin: 0 auto !important;
	padding: 0 15px; /* Beri padding agar tabel tidak mepet */
	display: block !important;
}

/* Style untuk SATU CARD LOWONGAN (CAREERS) */
.post-type-archive-careers .type-careers.career-card-item {
    background-color: #fff !important;
    color: #222222 !important;
    border-radius: 15px !important;
    border: 1px solid #d8d8d8;
    margin-bottom: 0 !important;
    
    /* (FIX) Paksa lebar penuh kolom grid */
    width: 100% !important; 
    
    /* (FIX) Paksa tinggi penuh kolom grid */
    height: 100% !important; 
    
    display: flex !important;
    flex-direction: column !important;
    padding: 40px 30px !important;
    box-sizing: border-box;
}
.career-card-content {
	display: flex !important;
    flex-direction: column !important; /* (FIX) Susun vertikal (ke bawah) */
    align-items: flex-start !important; /* (FIX) Rata kiri */
	height: 100%; 
    justify-content: space-between; /* (FIX) Dorong tombol ke bawah */
}
.career-card-info h2.entry-title {
	margin: 0 0 5px 0 !important;
	font-size: 22px !important;
}
.career-card-info h2.entry-title a {
	color: #000 !important;
	text-decoration: none !important;
	color: #222222 !important;
}
.career-card-info .career-card-location {
	font-size: 15px !important;
	color: #222222 !important;
    margin-bottom: 8px; /* (BARU) Jarak ke tombol */
}

/* Style Tombol Archive (Careers) - (WARNA KUSTOM-MU) */
.button-requirements {
	display: inline-block !important;
	background-color: #5fac00 !important;
	color: #fff !important;
	padding: 15px 60px !important;
	border-radius: 30px !important;
	text-decoration: none !important;
	font-weight: bold !important;
	font-size: 14px !important;
}
.button-requirements:hover {
	background-color: #04192b !important;
	color: #5fac00 !important;
	transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ==========================================================================
   CF7 LAYOUT DAN STYLING (FINAL: 2 Kolom, 2 Kolom, 1 Kolom)
   ========================================================================== */

/* Layout Dasar Baris dan Kolom */
.wpcf7-form .cf7-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
	width: 100%;
}
.wpcf7-form .cf7-col-half {
	width: 50%;
	padding: 0 10px;
	box-sizing: border-box;
}
.wpcf7-form .cf7-col-full {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	color: #222222;
}

/* FIX: Memaksa textarea menjadi 100% lebar kolom penuh */
.wpcf7-form .cf7-col-full textarea {
	width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box;
}
.wpcf7-form .cf7-col-full p {
	width: 100% !important;
}

/* Styling Aesthetic (Field Input) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="file"],
.wpcf7-form textarea {
	border: 1px solid #ddd;
	padding: 12px 15px;
	margin-top: 5px;
	border-radius: 10px;
	background-color: #fff;
	color: #333;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.3s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
}

/* Focus & Submit Styles */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
	border-color: #0073aa;
	box-shadow: 0 0 5px rgba(0, 115, 170, 0.2);
	outline: none;
}

/* ==========================================================================
   STYLE TOMBOL SUBMIT (ISOLASI)
   ========================================================================== */
   
/* Style Umum (Diterapkan ke Contact Us & sebagai default) - (WARNA KUSTOM-MU) */
.wpcf7-form input[type="submit"] {
	background-color: #5fac00 !important; 
	color: #fff !important; 
	padding: 14px 30px !important; 
	border: none !important;
	border-radius: 25px !important; 
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important; 
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: #04192b !important; 
	color: #5fac00 !important; 
	padding: 14px 30px !important; 
	border: none !important;
	border-radius: 25px !important; 
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important; 
	cursor: pointer;
	transition: background-color 0.3s ease;
	transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Style Khusus Careers (Warna Gelap, Radius Bulat, HACK LINE-HEIGHT) - (WARNA KUSTOM-MU) */
.career-submit-btn input[type="submit"] {
	background-color: #04192b !important;
	color: #70c30c !important;
	border-radius: 25px !important; 
	padding: 0px 30px !important; /* Padding 0 atas/bawah */
	line-height: 48px !important; /* Hack line-height */
}
.career-submit-btn input[type="submit"]:hover {
	background-color: #04192b !important; 
	color: #70c30c !important;
	transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ==========================================================================
   FIX AKHIR: CF7 (Input & Label)
   ========================================================================== */

.wpcf7-form .cf7-col-full label {
	display: block !important;
	width: 100% !important;
}
.wpcf7-form .cf7-col-half input:not([type="submit"]),
.wpcf7-form .cf7-col-half textarea,
.wpcf7-form .cf7-col-half label {
	width: 100% !important;
	max-width: 100% !important;
	color: #222222;
}
.wpcf7-form input[type="file"] {
	width: 100% !important;
}

/* ==========================================================================
   Tombol Download Tender - (WARNA KUSTOM-MU)
   ========================================================================== */

.tender-download-section {
	text-align: center !important;
}
.tender-download-section .button-download {
	display: inline-block;
	font-weight: bold;
	background-color: #5fac00 !important;
	color: #fff !important;
	border-radius: 15px;
	font-size: 18px !important;
	padding: 15px 40px !important;
	text-transform: uppercase;
}
.tender-download-section .button-download:hover {
	background-color: #04192b !important;
	color: #5fac00 !important;
	transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ==========================================================================
   FIX: Styling "Nothing Found" di Arsip Careers & Procurement
   ========================================================================== */

/* Menargetkan kotak "Nothing Found" di KEDUA halaman arsip */
.post-type-archive-careers .no-results.not-found,
.post-type-archive-procurement .no-results.not-found {
    background-color: #ffffff !important; 
    color: #222222 !important;        
    padding: 30px !important;
    border: 1px solid #eeeeee !important; 
    border-radius: 8px !important;
    max-width: 800px;                 
    margin: 50px auto !important;     
    text-align: center;
}

/* Mengatur judul "Nothing Found" (HILANGKAN KOTAK HITAM) */
.post-type-archive-careers .no-results.not-found .page-title,
.post-type-archive-procurement .no-results.not-found .page-title {
    background: transparent !important; 
    color: #222222 !important;       
    padding: 0 !important;           
    margin-bottom: 15px !important;  
    font-size: 28px !important;
}

/* Mengatur teks deskripsi */
.post-type-archive-careers .no-results.not-found .page-content p,
.post-type-archive-procurement .no-results.not-found .page-content p {
    color: #222222 !important;
    font-size: 16px !important;
    margin-bottom: 25px !important;
}

/* Mengatur form pencarian di dalamnya */
.post-type-archive-careers .no-results.not-found .search-form,
.post-type-archive-procurement .no-results.not-found .search-form {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.post-type-archive-careers .no-results.not-found .search-form label,
.post-type-archive-procurement .no-results.not-found .search-form label {
    display: none !important; 
}
.post-type-archive-careers .no-results.not-found .search-field,
.post-type-archive-procurement .no-results.not-found .search-field {
    border: 1px solid #ddd !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    max-width: 300px;
    flex-grow: 1;
}

/* Mengatur tombol search agar sama dengan style-mu */
.post-type-archive-careers .no-results.not-found .search-submit,
.post-type-archive-procurement .no-results.not-found .search-submit {
    background-color: #04192b !important; 
    color: #70c30c !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}
.post-type-archive-careers .no-results.not-found .search-submit:hover,
.post-type-archive-procurement .no-results.not-found .search-submit:hover {
    background-color: #2a5233 !important;
}

/* ==========================================================================
   TATA LETAK TABEL PROCUREMENT
   ========================================================================== */

/* Wrapper untuk table, agar bisa scroll horizontal di HP jika terlalu lebar */
.procurement-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 20px;
}
table.procurement-table {
    width: 100%;
    border-collapse: collapse; /* Garis border rapi */
    margin: 0;
    padding: 12px;
}

/* Header Tabel (WARNA KUSTOM-MU) */
table.procurement-table th {
    background-color: #f9f9f9; /* Abu-abu muda */
    color: #222222; /* Teks Hitam */
    font-weight: bold;
    padding: 15px;
    text-align: left;
    font-size: 16px;
}
table.procurement-table th:first-child { border-top-left-radius: 8px; }
table.procurement-table th:last-child { border-top-right-radius: 8px; }

/* Baris & Sel Data */
table.procurement-table tr {
    border-bottom: 1px solid #eee;
}
table.procurement-table tr:last-child {
    border-bottom: none;
}
table.procurement-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}
table.procurement-table td {
    padding: 15px;
    vertical-align: middle;
    color: #222222;
}

/* Tombol "View Details" (WARNA KUSTOM-MU) */
.button-view-details {
    display: inline-block;
    background-color: #5fac00 !important;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease;
}
.button-view-details:hover {
    background-color: #04192b !important;
    color: #5fac00 !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   (WAJIB) FIX: Sembunyikan Logo Mobile di Desktop
   ========================================================================== */

@media (min-width: 992px) { 
    .tjk-mobile-logo-wrapper {
        display: none !important; /* Sembunyikan logo mobile di desktop */
    }
	.main-nav ul.menu > li.pll-parent-menu-item > a::before { /* (FIXED SELECTOR) */
		height: 0 !important;
        display: none !important;
	}
}

/* ==========================================================================
   FIX FINAL (v13): Mobile Responsif (HEADER + KONTEN GABUNGAN)
   ========================================================================== */

/* Terapkan ini hanya di layar mobile/tablet (di bawah 991px) */
@media (max-width: 991px) { 

    /* --- BAGIAN HEADER MOBILE (v5 - FLEXBOX) --- */
    
    /* 1. Sembunyikan header desktop (menu lengkap) */
    .site-menu,
    .header-main {
        display: none !important; 
    }

    /* 2. Jadikan <header> sebagai Flex Container */
    header#masthead.site-header {
        /*display: flex !important;*/
        justify-content: space-between !important; 
        flex-direction: row-reverse;
        align-items: center !important; 
        padding: 10px 15px !important; 
        height: auto !important; 
        min-height: 60px; 
        border-bottom: 1px solid #f1f1f1; /* (DIKEMBALIKAN KE KODEMU) */
    }

    /* 3. Styling Wrapper Logo Mobile (Anak Flex 1) */
    .tjk-mobile-logo-wrapper {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0; 
    }

    /* 4. Styling Gambar Logo Mobile (Sesuai penyesuaianmu) */
    .tjk-mobile-logo-wrapper .tjk-mobile-logo {
     padding: 0px 0px 0px 30px; /* Padding dari file-mu */
     max-height: 60px !important; /* Ukuran dari file-mu */
     width: auto !important;
     vertical-align: middle !important;
    }

    /* 5. Styling Burger Menu (Anak Flex 2) */
    .navbar-toggle {
        display: block !important;
        position: relative !important; /* Hapus absolute */
        margin: 0 !important; /* Hapus margin lama */
        top: auto !important;
        right: auto !important;
        flex-shrink: 0; 
    }
    
    .navbar-icon{ /* (DIKEMBALIKAN KE KODEMU) */
        position: relative;
        top: 55px;
        right: 20px;
    }
    
    /* --- BAGIAN KONTEN MOBILE (Arsip & CF7) --- */

    /* 6. Responsif CF7: Kembalikan ke 1 kolom di HP */
	.wpcf7-form .cf7-row .cf7-col-half {
		width: 100% !important;
	}

    /* 7. Responsif Arsip CPT: Beri jarak kiri/kanan di HP */
    body.archive.post-type-archive-careers main#main.site-main,
    body.archive.post-type-archive-procurement main#main.site-main {
        padding: 0 15px !important; /* Tambah padding kiri/kanan di HP */
        grid-template-columns: 100% !important; /* Paksa jadi 1 kolom di HP */
    }

    /* 8. Responsif Arsip CPT: Susun ulang isi card di HP */
    .career-card-content {
        flex-direction: column !important; /* Susun vertikal */
        align-items: flex-start !important; /* (FIXED TYPO: items) */
        text-align: left !important;
    }
    .career-card-action {
        width: 100% !important;
        margin-top: 25px !important; /* Jarak antara Teks dan Tombol */
    }
    .button-requirements {
        width: 100% !important; /* Buat tombol full-width di HP */
        text-align: center;
        padding: 15px 30px !important; /* Sesuaikan padding tombol mobile */
    }
    
    /* 9. Responsif Tabel Procurement di HP (FIXED) */
    table.procurement-table thead {
        display: none;
    }
    table.procurement-table, 
    table.procurement-table tbody, 
    table.procurement-table tr, 
    table.procurement-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    table.procurement-table tr {
        margin-bottom: 15px; 
        border: 1px solid #eee; /* Beri border di sekeliling kartu */
        border-radius: 8px; /* Sudut membulat */
        overflow: hidden; /* Rapikan sudut */
    }
    table.procurement-table tr:last-child {
        margin-bottom: 0;
    }
    table.procurement-table td {
        padding: 12px 15px 12px 130px; /* Padding kiri 130px untuk label */
        position: relative;
        text-align: left; /* (FIX) Teks rata kiri */
        border-bottom: 1px solid #f5f5f5;
        min-height: 48px; /* Tinggi minimum */
        display: flex; /* (FIX) Gunakan flex */
        align-items: center; /* (FIX) Ratakan vertikal */
    }
    table.procurement-table td:last-child {
        border-bottom: 0;
    }
    table.procurement-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 115px; /* (FIX) Lebar tetap untuk label */
        padding: 12px 15px;
        white-space: normal; /* (FIX) Izinkan label wrap */
        text-align: left; 
        font-weight: bold;
        color: #222222;
        background-color: #f9f9f9; /* Latar belakang abu-abu untuk label */
        border-right: 1px solid #eee; /* Garis pemisah */
    }
    
    /* Rapikan tombol di HP */
    table.procurement-table td[data-label="Details"],
    table.procurement-table td[data-label="详情"] {
        text-align: center;
        padding: 15px; /* (FIX) Hapus padding kiri aneh */
        display: block; /* Kembalikan ke block */
    }
    .button-view-details {
        width: auto; /* (FIX) Hapus width: 100% */
    }
}

/* ==========================================================================
   FIX: Memaksa Arsip Blog (home.php) menjadi Full-Width
   ========================================================================== */
body.home #primary.content-area {
    padding-top: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}
.news-header-custom{
    padding: 0px 15px;
    padding-bottom: 8px;
    margin-top: 80px;
    border-bottom: 1px solid #f4f4f4;
}
div#primary.content-area{
    padding-top: 30px !important;
}
/* ==========================================================================
   STYLING BARU: TATA LETAK SINGLE NEWS/CSR (Hero Layout - FIXED)
   ========================================================================== */

/* 1. KANVAS & KOTAK UTAMA (News) */
body.single-post #primary.content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
    padding: 0 !important; 
	border: none !important; 
}
body.single-post article.news-csr-hero-layout {
	max-width: 100% !important; 
	padding: 0 !important; 
	background: #ffffff !important; 
	box-shadow: none !important;
}

/* 2. STYLING HERO HEADER (Gambar Latar) */
.entry-header-hero {
    position: relative;
    height: 70vh; 
    min-height: 450px;
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    margin-left: -50vw; 
}

/* 3. STYLING OVERLAY (Lapisan Gelap) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
    
    /* (FIX) Gunakan Flexbox untuk mendorong Atas dan Bawah */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Dorong 1 ke atas, 1 ke bawah */
    padding: 40px 0; /* Padding atas/bawah */
    box-sizing: border-box;
}

/* 4. STYLING KONTEN DI DALAM OVERLAY (Wrapper Atas & Bawah) */
.hero-content-top,
.hero-content-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1080px; /* Lebar konten utama */
    margin: 0 auto;
    color: #ffffff;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 5. STYLING TOMBOL BACK (DI ATAS) */
.hero-back-button {
    margin-bottom: 20px !important; 
    text-align: left !important; 
}
.hero-back-button .back-to-career-link {
    color: #ffffff !important; 
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.hero-back-button .back-to-career-link:hover {
    color: #ffffff !important;
    opacity: 1;
    text-decoration: underline !important;
}

/* 6. STYLING METADATA ATAS (Kategori & Tags) */
.hero-meta-top {
    margin-bottom: 15px; 
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.hero-meta-top .cat-link a,
.hero-meta-top .tag-link a {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    background-color: rgba(112, 195, 12, 0.8); /* Lime Green */
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 5px; 
    display: inline-block;
}
.hero-meta-top .cat-link a:hover,
.hero-meta-top .tag-link a:hover {
    background-color: #04192b; 
    color: #70c30c !important;
}

/* 7. STYLING JUDUL H1 HERO (DI TENGAH) */
.entry-title-hero {
    font-size: 48px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    margin: 0;
    line-height: 1.2;
    padding: 12px 0px;
}

/* 8. STYLING METADATA BAWAH (Tanggal & Author) */
.hero-meta-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
}
.hero-meta-bottom .meta-date,
.hero-meta-bottom .meta-author {
    color: #eee !important;
    margin-right: 15px; 
    margin-bottom: 5px; 
    display: inline-flex; 
    align-items: center;
}
.hero-meta-bottom .meta-date a {
    color: #eee !important; 
    text-decoration: none;
}
.hero-meta-bottom .meta-date a:hover {
    text-decoration: underline; 
}
.hero-meta-bottom .meta-date a i {
    color: #5fac00 !important; /* Ikon Jam Hijau Kustom-mu */
    margin-right: 5px; 
    opacity: 0.8;
}

/* 9. STYLING KONTEN DI BAWAH HERO */
.entry-content-below-hero {
    max-width: 1080px; 
    margin: 40px auto; 
    padding: 0 15px; 
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    box-sizing: border-box; 
}

/* 10. Responsif (HP) */
@media (max-width: 768px) {
    .hero-overlay {
        padding: 20px 0; /* Padding HP lebih kecil */
    }
    .hero-content-top,
    .hero-content-bottom {
        padding: 0 20px; /* Padding HP lebih kecil */
    }
    .entry-title-hero {
        font-size: 32px !important; 
    }
    .entry-content-below-hero {
        margin: 30px auto; 
        padding: 0 20px; 
    }
}
.hero-back-button {
    margin-bottom: 20px !important; /* Jarak ke meta di bawahnya */
    text-align: left !important; /* Pastikan rata kiri */
}

.hero-back-button .back-to-career-link {
    color: #ffffff !important; /* Warna Putih */
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hero-back-button .back-to-career-link:hover {
    text-decoration: underline !important;
}

body.single-careers #primary.content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
    padding: 0 !important; /* Hapus padding agar hero bisa full-width */
	border: none !important; /* Hapus border abu-abu */
}
body.single-careers article.careers-hero-layout {
	max-width: 100% !important; 
	padding: 0 !important; 
	background: #ffffff !important; 
	box-shadow: none !important;
}

/* 2. STYLING HERO HEADER (Gambar Latar) */
.entry-header-hero {
    position: relative;
    height: 70vh; 
    min-height: 450px;
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    margin-left: -50vw; 
}

/* 3. STYLING OVERLAY (Lapisan Gelap) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
    
    /* Gunakan Flexbox untuk mendorong Atas dan Bawah */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Dorong 1 ke atas, 1 ke bawah */
    padding: 40px 0; /* Padding atas/bawah */
    box-sizing: border-box;
}

/* 4. STYLING KONTEN DI DALAM OVERLAY (Wrapper Atas & Bawah) */
.hero-content-top,
.hero-content-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1080px; /* Lebar konten utama */
    margin: 0 auto;
    color: #ffffff;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 5. STYLING TOMBOL BACK (DI ATAS) */
.hero-back-button {
    margin-bottom: 20px !important; 
    text-align: left !important; 
}
.hero-back-button .back-to-career-link {
    color: #ffffff !important; 
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.hero-back-button .back-to-career-link:hover {
    color: #ffffff !important;
    opacity: 1;
    text-decoration: underline !important;
}

/* 6. STYLING JUDUL H1 HERO (DI BAWAH) */
.entry-title-hero {
    font-size: 48px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    margin: 0 0 15px 0; /* Jarak ke meta di bawah */
    line-height: 1.2;
    padding: 0;
    font-weight: bold;
}

/* 7. STYLING METADATA BAWAH (Lokasi & Tipe) */
.hero-meta-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
}
.hero-meta-bottom .meta-date,
.hero-meta-bottom .meta-author {
    color: #eee !important;
    margin-right: 20px; 
    margin-bottom: 5px; 
    display: inline-flex; 
    align-items: center;
    font-style: italic; /* Buat miring agar beda */
}


/* 8. STYLING KONTEN DI BAWAH HERO */
.entry-content-below-hero {
    max-width: 1080px; 
    margin: 40px auto; 
    padding: 0 15px; 
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    box-sizing: border-box; 
}

/* 9. Responsif (HP) */
@media (max-width: 768px) {
    .hero-overlay {
        padding: 20px 0; /* Padding HP lebih kecil */
    }
    .hero-content-top,
    .hero-content-bottom {
        padding: 0 20px; /* Padding HP lebih kecil */
    }
    .entry-title-hero {
        font-size: 32px !important; 
    }
    .entry-content-below-hero {
        margin: 30px auto; 
        padding: 0 20px; 
    }
}

/* ==========================================================================
   STYLING PAGE HEADER ARSIP (FULL WIDTH BREAKOUT)
   ========================================================================== */

/* * Trik ini memaksa elemen menjadi 100% lebar layar (viewport)
 * bahkan jika berada di dalam container yang sempit.
 */
.archive-hero-full {
    width: 100vw;        /* Lebar 100% Viewport */
    position: relative;
    left: 50%;           /* Geser ke tengah */
    right: 50%;
    margin-left: -50vw;  /* Tarik ke kiri sejauh setengah layar */
    margin-right: -50vw; /* Tarik ke kanan sejauh setengah layar */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 350px;       /* Tinggi Header (Sesuaikan) */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    color: #fff;
}

/* Pastikan teks judul di dalamnya tetap di tengah (container) */
.archive-hero-full .container {
    width: 100%;
    max-width: 1200px; /* Atau sesuaikan dengan lebar tema-mu */
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Overlay Gelap */
.hero-overlay-archive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Gelap 60% */
    z-index: 1;
}

/* Judul */
.archive-hero-full h1.page-title {
    color: #fff !important;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}