/*
Theme Name: GenZ Clean v21
Theme URI: https://example.com/genz-clean
Author: AI Generator (S3 Web Coding Edition)
Description: Tema modern, bersih, super ringan. Revisi V21: Sembunyikan filter Job Type (Freelance dkk), perbaikan bug label ganda pada Keywords/Location yang bikin boros ruang, form pencarian dipadatkan lagi.
Version: 1.21
License: GPLv2 or later
Text Domain: genz-clean
*/

:root {
    --bg-main: #fafafa;
    --card-bg: #ffffff;
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --accent: #0071e3;
    
    --radius-card: 24px;
    --radius-pill: 100px;
    
    --title-color: #1d1d1f;
    --title-size: 1.25rem;
    --desc-color: #86868b;

    --container-width: 768px;
    --container-padding: 20px;
    --card-padding: 40px;

    --pill-bg-rgba: rgba(255, 255, 255, 0.85);
    --pill-bottom: 25px;
    --pill-top: 20px;
    --pill-padding: 6px;
    
    --btn-color: #1d1d1f;
    
    --font-main: 'Inter', sans-serif;
    --line-height: 1.6;
    --fs-pill: 0.85rem;
    --fs-title-loop: 1.5rem;
    --fs-title-single: 2.5rem;
    --fs-content: 1.1rem;
    
    --pill-btn1-bg: #f0f0f0; --pill-btn1-text: #1d1d1f;
    --pill-btn2-bg: #f0f0f0; --pill-btn2-text: #1d1d1f;
    --pill-btn3-bg: #f0f0f0; --pill-btn3-text: #1d1d1f;
    --pill-btn4-bg: #f0f0f0; --pill-btn4-text: #1d1d1f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main), system-ui, -apple-system, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: var(--line-height);
    padding-top: 100px;
    padding-bottom: 140px; 
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; 
}

a { text-decoration: none; color: var(--accent); transition: color 0.2s ease; }

/* Z-INDEX & FORBIDDEN CURSOR FIX */
.floating-header-wrapper, .floating-nav-wrapper { pointer-events: none !important; }
.floating-header, .floating-nav { pointer-events: auto !important; }
main.container, .single-post-wrapper, .single-content { position: relative; z-index: 10 !important; }
a, button, input[type="submit"], input[type="button"], .application_button, 
.single-content a, .job_listing a, .job_filters a {
    cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 50 !important;
}

/* LAYOUT UTAMA */
.container { max-width: var(--container-width); margin: 0 auto; padding: var(--container-padding); width: 100%; }

/* FLOATING HEADER */
.floating-header-wrapper {
    position: fixed; top: var(--pill-top); left: 50%; transform: translateX(-50%);
    z-index: 9999; width: 95%; max-width: var(--container-width);
}
.floating-header {
    background: var(--pill-bg-rgba); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-pill);
    padding: 8px 12px 8px 24px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    display: flex; justify-content: space-between; align-items: center;
}
.site-branding { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; overflow: hidden; }
.site-title { font-size: var(--title-size); font-weight: 800; letter-spacing: -0.02em; color: var(--title-color); margin: 0; line-height: 1.2; text-overflow: ellipsis; overflow: hidden; }
.site-description { display: none; }

/* Inline Search di Header */
.header-search-container { display: flex; align-items: center; margin-left: 10px; }
.header-search-form {
    display: flex; align-items: center; background: rgba(180, 180, 180, 0.15); 
    border-radius: var(--radius-pill); padding: 4px 6px 4px 14px; border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-search-form:focus-within { background: #ffffff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); }
.header-search-input {
    border: none; background: transparent; outline: none; width: 85px; padding: 0;
    font-size: var(--fs-pill); font-family: inherit; transition: width 0.3s ease; color: var(--text-main); opacity: 1;
}
.header-search-input:focus { width: 160px; }
.header-search-submit {
    background: none; border: none; cursor: pointer; color: var(--text-main); display: flex;
    align-items: center; justify-content: center; padding: 6px; border-radius: 50%; opacity: 0.7; transition: opacity 0.2s, background 0.2s;
}
.header-search-submit:hover { opacity: 1; background: rgba(0,0,0,0.05); }

/* Cards (Post Loop) */
.post-card {
    background: var(--card-bg); border-radius: var(--radius-card); padding: 30px; margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0,0,0,0.02); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.post-thumbnail {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    display: block;
}

.post-title { font-size: var(--fs-title-loop); font-weight: 800; margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.02em; }
.post-title a { color: var(--text-main); }
.post-excerpt { color: var(--text-muted); font-size: 1rem; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Rounded Buttons */
.btn {
    display: inline-block; background: var(--btn-color); color: #fff !important; padding: 12px 28px;
    border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; transition: opacity 0.2s, transform 0.1s; border: none;
}
.btn:hover { opacity: 0.85; } .btn:active { transform: scale(0.97); }

/* Single Post Wrapper */
.single-post-wrapper { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--card-padding); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); }
.single-title { font-size: var(--fs-title-single); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; margin-bottom: 16px; }
.single-meta { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.single-content { font-size: var(--fs-content); color: #333; width: 100%; }
.single-content p { margin-bottom: 24px; }
.single-content h2, .single-content h3 { margin: 32px 0 16px; font-weight: 700; }
.single-content img { max-width: 100%; height: auto; border-radius: 16px; }

/* =========================================
   CSS TABEL 
   ========================================= */
.single-content table, .wp-block-table table {
    background: var(--card-bg); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #e0e0e0;
    border-style: hidden; margin-bottom: 24px;
}
.single-content th, .single-content td, .wp-block-table th, .wp-block-table td {
    border: 1px solid #e0e0e0; padding: 14px 18px; text-align: left; vertical-align: top; color: var(--text-main);
}
.single-content th, .wp-block-table th { background: var(--bg-main); font-weight: 700; }

table { width: 100%; max-width: 100%; border-collapse: collapse; }
table td, table th { word-break: break-word; overflow-wrap: break-word; white-space: normal; }
.wp-job-manager table { width: 100%; display: table; }

@media (max-width: 768px) {
    table { width: 100%; table-layout: fixed; }
    table td, table th { width: auto; padding: 10px; font-size: 14px; }
}


/* =========================================
   WP JOB MANAGER UI BEAUTIFICATION
   ========================================= */
.job_filters { background: var(--card-bg) !important; border-radius: var(--radius-card); padding: 18px 20px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); margin-bottom: 24px; width: 100%; border: 1px solid rgba(0,0,0,0.02); }
.job_filters .search_jobs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.job_filters .search_jobs > div { flex: 1 1 200px; width: 100%; margin: 0 !important; padding: 0 !important; }
.job_filters .search_jobs div.search_submit { flex: 0 0 auto; }
.job_filters .search_jobs div input[type="text"], .job_filters .search_jobs div select { width: 100%; padding: 12px 16px !important; border-radius: 12px !important; border: 1px solid #e0e0e0 !important; background: var(--bg-main) !important; font-size: 0.95rem !important; }

/* Label "Keywords" / "Location" dihilangkan karena sudah terwakili oleh placeholder di dalam input -> hemat ruang */
.job_filters .search_jobs .search_keywords label,
.job_filters .search_jobs .search_location label { display: none !important; margin: 0 !important; padding: 0 !important; }

/* Checkbox "Remote positions only" dirapatkan */
.job_filters .search_jobs .search_remote_position { display: flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; gap: 6px; }
.job_filters .search_jobs .search_remote_position label { margin: 0 !important; font-size: 0.9rem !important; }

/* Daftar checkbox tipe pekerjaan (Freelance, Full Time, Internship, Part Time, Temporary) disembunyikan sesuai permintaan */
.job_filters .job_types { display: none !important; }

.job_filters .search_jobs div.search_submit input[type="submit"] { background: var(--btn-color) !important; color: #fff !important; padding: 12px 28px !important; border-radius: var(--radius-pill) !important; font-weight: 600 !important; border: none !important; width: 100%; }


/* =========================================
   LIST PEKERJAAN (ULTIMATE OVERRIDE)
   ========================================= */
.single-content ul.job_listings { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
.single-content ul.job_listings li.job_listing { 
    background: var(--card-bg) !important; border-radius: 16px !important; margin-bottom: 16px !important; 
    border: 1px solid rgba(0,0,0,0.03) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.02) !important; 
    width: 100% !important; padding: 0 !important; overflow: hidden !important; display: block !important; 
}
.single-content ul.job_listings li.job_listing:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; transform: translateY(-2px); }

/* Struktur Flex yang Rapi & Padat (Kunci Utama) */
.single-content ul.job_listings li.job_listing > a {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: baseline !important;
    padding: 20px !important;
    gap: 4px 10px !important;
    text-decoration: none !important; color: var(--text-main) !important; width: 100% !important; box-sizing: border-box !important;
}

ul.job_listings li.job_listing img.company_logo { display: none !important; }

.job_listing .position {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.job_listing .position h3 {
    width: 100% !important;
    font-size: 1.05rem !important; 
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
    color: var(--text-main) !important;
}

.job_listing .company {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
}

.job_listing .location {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.job_listing .location::before { content: "•"; margin-right: 6px; color: #ddd; }

.job_listing .meta {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 8px 0 0 0 !important;
    padding: 12px 0 0 0 !important;
    border-top: 1px dashed #f0f0f0 !important;
}

.job_listing .job-type {
    background: rgba(0, 113, 227, 0.1) !important;
    color: var(--accent) !important;
    padding: 6px 12px !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
}

.job_listing .meta date, .job_listing .date {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #999 !important;
    margin: 0 !important;
    text-align: right !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job_listings.loading { opacity: 0.6; }

/* FLOATING BOTTOM NAV RAMPING */
.floating-nav-wrapper { position: fixed; bottom: var(--pill-bottom); left: 50%; transform: translateX(-50%); z-index: 9999; width: max-content; max-width: 95%; }
.floating-nav { background: var(--pill-bg-rgba); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-pill); padding: var(--pill-padding); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); position: relative; width: max-content; max-width: 100%; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.floating-nav::-webkit-scrollbar { display: none; }
.floating-menu-ul { list-style: none; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; flex-wrap: nowrap; }
.floating-menu-ul > li { margin: 0 3px; }
.floating-menu-ul > li > a { display: flex; align-items: center; justify-content: center; padding: 10px 18px; font-weight: 600; font-size: var(--fs-pill); border-radius: var(--radius-pill); white-space: nowrap; }
.floating-menu-ul > li:nth-child(1) > a { background: var(--pill-btn1-bg); color: var(--pill-btn1-text); }
.floating-menu-ul > li:nth-child(2) > a { background: var(--pill-btn2-bg); color: var(--pill-btn2-text); }
.floating-menu-ul > li:nth-child(3) > a { background: var(--pill-btn3-bg); color: var(--pill-btn3-text); }
.floating-menu-ul > li:nth-child(4) > a { background: var(--pill-btn4-bg); color: var(--pill-btn4-text); }

/* =========================================
   REVISI V20: S3 MOBILE OVERRIDE (PEMADATAN EKSTREM)
   ========================================= */
@media (min-width: 768px) {
    .single-content ul.job_listings li.job_listing > a { flex-wrap: nowrap !important; align-items: center !important; }
    ul.job_listings li.job_listing img.company_logo { display: block !important; flex: 0 0 50px !important; height: 50px !important; border-radius: 12px !important; object-fit: cover !important; margin-right: 20px !important; }
    .job_listing .position { flex: 1 !important; width: auto !important; }
    .job_listing .meta { width: auto !important; border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; gap: 15px !important; }
}

@media (max-width: 600px) {
    .container { padding: 12px; }
    .single-post-wrapper, .post-card { padding: 15px; }
    .floating-menu-ul > li > a { padding: 8px 14px; }
    .header-search-input { width: 75px; } 
    .header-search-input:focus { width: 110px; }
    
    /* 1. PEMADATAN FORM PENCARIAN (Job Filters) */
    .job_filters { 
        padding: 14px 12px !important; /* Rapat ke tepi */
        margin-bottom: 16px !important; 
    }
    .job_filters .search_jobs { 
        gap: 8px !important; /* Jarak antar input form dirapatkan */
    }
    .job_filters .search_jobs div input[type="text"], 
    .job_filters .search_jobs div select { 
        padding: 10px 12px !important; /* Tinggi input dikecilkan */
        font-size: 0.9rem !important; 
    }
    
    /* Posisi Checkbox Remote agar sejajar dan kecil */
    /* PENTING: selector di-scope khusus ke .search_remote_position saja, JANGAN generik ke semua label,
       karena versi sebelumnya (v20) tidak sengaja ikut menampilkan label "Keywords"/"Location" 
       yang seharusnya hidden -> itulah penyebab space renggang di mobile. Sudah diperbaiki di v21. */
    .job_filters .search_jobs .search_remote_position label {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        font-size: 0.8rem !important;
        gap: 6px !important;
        margin: 2px 0 !important;
        color: var(--text-main) !important;
    }
    .job_filters .search_jobs .search_remote_position input[type="checkbox"] {
        margin: 0 !important;
        position: relative;
        top: 1px;
    }

    .job_filters .search_jobs div.search_submit input[type="submit"] { 
        padding: 12px 20px !important; 
        margin-top: 4px !important; 
    }

    /* 2. ULTIMATE GRID UNTUK LISTING PEKERJAAN (Kompak, Sejajar, Anti-Potong) */
    .single-content ul.job_listings li.job_listing > a {
        display: grid !important;
        grid-template-columns: auto 1fr !important; /* Kolom 1 (Kiri) menyesuaikan teks, Kolom 2 memanjang */
        row-gap: 4px !important; /* Jarak atas bawah mutlak super rapat */
        column-gap: 6px !important;
        align-items: center !important;
        padding: 12px 14px !important; /* Bantalan dalam kotak sangat rapat */
    }
    
    /* Hilangkan pembungkus position & meta bawaan WP, gabungkan ke grid utama */
    .job_listing .position, .job_listing .meta {
        display: contents !important;
    }
    
    /* Judul: Dikecilkan, Memanjang Full di Atas */
    .job_listing .position h3 {
        grid-column: 1 / -1 !important; 
        font-size: 0.95rem !important; /* Judul Kecil Sesuai Request */
        line-height: 1.3 !important;
        margin: 0 !important;
        color: var(--text-main) !important;
    }
    
    /* Company: Posisi Kiri Bawah Judul */
    .job_listing .company {
        grid-column: 1 / 2 !important;
        font-size: 0.8rem !important;
        color: var(--text-muted) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Lokasi: Nempel Sebelah Kanan Company */
    .job_listing .location {
        grid-column: 2 / -1 !important;
        justify-self: start !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important; box-shadow: none !important;
        white-space: nowrap !important; /* ANTI POTONG (HONG KONG) */
    }
    .job_listing .location::before {
        content: "•";
        margin-right: 4px;
        color: #ccc;
    }
    
    /* Badge (Full Time): Naik merapat ke atas */
    .job_listing .job-type {
        grid-column: 1 / 2 !important;
        justify-self: start !important;
        margin: 6px 0 0 0 !important; 
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
    
    /* Tanggal Posting: Super Kecil, Nempel Kanan Sejajar Badge */
    .job_listing .meta date, .job_listing .date {
        grid-column: 2 / -1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 6px 0 0 0 !important; 
        font-size: 10px !important; /* SUPER KECIL */
        text-align: right !important;
        color: #999 !important;
    }
}

/* Responsive image fix: desktop 3:2, mobile optimized */
@media (max-width: 768px) {
    .post-thumbnail {
        aspect-ratio: 16 / 9;
    }
}


/* V23 FINAL THUMBNAIL FIX: prevent desktop crop */
.post-thumbnail {
    height: auto !important;
    min-height: 0 !important;
}
.post-thumbnail img,
.post-thumbnail a,
.post-thumbnail a img {
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 768px) {
    .post-thumbnail {
        aspect-ratio: 16 / 9;
    }
}