/* ============================================================
   Jobs Pro Lite — Main Stylesheet
   Target: < 12KB, zero external fonts, mobile-first
   ============================================================ */

/* ── 1. Variables ── */
:root {
    --jpl-primary:      #006C86;
    --jpl-primary-dark: #00566B;
    --jpl-accent:       #e0f4f8;
    --jpl-text:         #1a202c;
    --jpl-muted:        #6b7280;
    --jpl-border:       #e5e7eb;
    --jpl-surface:      #f9fafb;
    --jpl-white:        #ffffff;
    --jpl-danger:       #dc2626;
    --jpl-success:      #16a34a;
    --jpl-radius:       8px;
    --jpl-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --jpl-font:         system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jpl-max:          900px;
}

/* Sembunyikan visual tapi tetap terbaca screen reader & mesin pencari —
   dipakai untuk H1 archive yang secara desain tidak perlu tampil di layar
   tapi tetap penting untuk SEO/aksesibilitas (satu H1 per halaman). */
.jpl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 2. Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--jpl-font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--jpl-text);
    background: var(--jpl-white);
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* SVG di dalam flex container inline agar tidak mendorong teks ke baris baru */
.jpl-sidebar-widget-head svg,
.jpl-hero-meta-item svg,
.jpl-cta-email-row svg,
.jpl-cta-subject-row svg,
.jpl-cta-cc-row svg,
.jpl-rekomen-badge svg { display: inline; vertical-align: middle; }
a { color: var(--jpl-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-size: 1rem; font-weight: 700; margin: 0; }

/* ── 3. Layout ── */
.jpl-container {
    max-width: var(--jpl-max);
    margin-inline: auto;
    padding-inline: 16px;
}
.jpl-wrap { min-height: 100dvh; display: flex; flex-direction: column; }
.jpl-content { flex: 1; }

/* ── 4. Header ── */
.jpl-header {
    background: var(--jpl-primary);
    color: var(--jpl-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.jpl-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
}
.jpl-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--jpl-white);
    text-decoration: none;
    flex-shrink: 0;
}
.jpl-logo:hover { text-decoration: none; opacity: .9; }
.jpl-logo img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
}
.jpl-nav {
    display: none;
    gap: 4px;
    flex: 1;
}
.jpl-nav a {
    color: #fff;
    font-size: .9rem;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background .15s;
    opacity: 1;
}
.jpl-nav a:hover, .jpl-nav a.current { background: rgba(0,0,0,.2); color: #fff; text-decoration: none; }
.jpl-nav-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--jpl-white);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.jpl-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.jpl-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jpl-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jpl-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.jpl-mobile-nav {
    background: var(--jpl-primary-dark);
    padding: 8px 0 12px;
    display: none;
}
.jpl-mobile-nav.is-open { display: block; }
.jpl-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 98;
}
.jpl-nav-overlay.is-open { display: block; }
.jpl-mobile-nav a {
    display: block;
    color: #fff;
    padding: 10px 20px;
    font-size: .95rem;
}
.jpl-mobile-nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }

/* ── 5. Breadcrumb ── */
.jpl-breadcrumb {
    font-size: .82rem;
    color: var(--jpl-muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--jpl-border);
}
.jpl-breadcrumb a { color: var(--jpl-muted); }
.jpl-breadcrumb a:hover { color: var(--jpl-primary); }
.jpl-breadcrumb span + span::before { content: ' › '; margin-inline: 4px; }

/* ── 6. Hero (company) ── */
.jpl-hero {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--jpl-border);
}
.jpl-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.jpl-company-logo {
    width: 72px;
    height: 72px;
    border-radius: var(--jpl-radius);
    border: 1px solid var(--jpl-border);
    object-fit: contain;
    background: var(--jpl-white);
    flex-shrink: 0;
    padding: 5px;
    overflow: hidden;
}
.jpl-company-logo-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--jpl-radius);
    background: var(--jpl-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.75rem;
    color: var(--jpl-primary);
    font-weight: 700;
}
.jpl-hero-title {
    flex: 1;
}
.jpl-hero-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--jpl-text);
    margin-bottom: 6px;
}
.jpl-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: .85rem;
    color: var(--jpl-muted);
}
.jpl-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.jpl-hero-meta-item svg { flex-shrink: 0; }
.jpl-rekomen-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}


/* ── 8. Posisi section ── */
.jpl-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 24px 0 14px;
}
.jpl-section-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--jpl-text);
}
.jpl-section-count {
    font-size: .82rem;
    color: var(--jpl-muted);
    background: var(--jpl-surface);
    border: 1px solid var(--jpl-border);
    border-radius: 20px;
    padding: 1px 8px;
}

/* ── 9. Position card ── */
.jpl-card {
    border: 1px solid var(--jpl-border);
    border-radius: var(--jpl-radius);
    background: var(--jpl-white);
    box-shadow: var(--jpl-shadow);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.jpl-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.jpl-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.jpl-card-header:focus-visible { outline: 2px solid var(--jpl-primary); outline-offset: -2px; }
.jpl-card-main { flex: 1; min-width: 0; }
.jpl-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jpl-text);
    margin-bottom: 8px;
    line-height: 1.35;
}
.jpl-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jpl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    font-weight: 500;
}
.jpl-badge-status    { background: #dcfce7; color: #15803d; }
.jpl-badge-status.closed { background: #fee2e2; color: #dc2626; }
.jpl-badge-type      { background: #e0f2fe; color: #0369a1; }
.jpl-badge-lokasi    { background: var(--jpl-surface); color: var(--jpl-muted); border: 1px solid var(--jpl-border); }
.jpl-badge-pendidikan { background: #faf5ff; color: #7c3aed; }
.jpl-badge-pengalaman { background: #fff7ed; color: #c2410c; }
.jpl-badge-deadline  { background: #fefce8; color: #854d0e; }
.jpl-badge-jumlah    { background: var(--jpl-accent); color: var(--jpl-primary); }
.jpl-card-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--jpl-border);
    background: var(--jpl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jpl-muted);
    transition: transform .2s, background .15s;
    margin-top: 2px;
}
.jpl-card.is-open .jpl-card-toggle { transform: rotate(180deg); background: var(--jpl-accent); color: var(--jpl-primary); }

/* ── 10. Card body (expanded) ── */
.jpl-card-body {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid var(--jpl-border);
}
.jpl-card.is-open .jpl-card-body { display: block; }
.jpl-card-body-inner { padding-top: 14px; }
.jpl-detail-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jpl-muted);
    margin-bottom: 6px;
}
.jpl-detail-content {
    font-size: .92rem;
    color: var(--jpl-text);
    margin-bottom: 16px;
    line-height: 1.7;
}
.jpl-detail-content p { margin-bottom: .5em; }
.jpl-detail-content ul { list-style: disc; padding-left: 1.25em; margin-bottom: .75em; }
.jpl-detail-content ol { list-style: decimal; padding-left: 1.25em; margin-bottom: .75em; }
.jpl-detail-content li { margin-bottom: .3em; }
.jpl-detail-content h2,
.jpl-detail-content h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--jpl-text);
    margin: 1.2em 0 .5em;
}
.jpl-detail-content strong { font-weight: 700; }
.jpl-apply-section { margin-top: 16px; }
.jpl-apply-section-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jpl-muted);
    margin-bottom: 8px;
}
.jpl-apply-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: opacity .15s, box-shadow .15s;
}
.jpl-btn:hover { opacity: .88; text-decoration: none; }
.jpl-btn-primary {
    background: var(--jpl-primary);
    color: var(--jpl-white);
}
.jpl-btn-outline {
    background: transparent;
    color: var(--jpl-primary);
    border: 1.5px solid var(--jpl-primary);
}
.jpl-subject-hint {
    font-size: .8rem;
    color: var(--jpl-muted);
    margin-top: 6px;
}
.jpl-jurusan-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}
.jpl-jurusan-tag {
    font-size: .77rem;
    padding: 2px 8px;
    background: var(--jpl-surface);
    border: 1px solid var(--jpl-border);
    border-radius: 4px;
    color: var(--jpl-muted);
}

/* ── 11. Post content (the_content) ──
   Selalu didahului heading "Detail Perusahaan" (.jpl-section-head) di
   single.php — jadi tidak perlu border-top/padding-top sendiri lagi
   sebagai pemisah visual (dulu perlu sebelum heading itu ada, sekarang
   dobel jarak kalau dipertahankan). */
.jpl-post-content {
    margin: 0 0 24px;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--jpl-text);
}
.jpl-post-content h2, .jpl-post-content h3 { margin: 1.2em 0 .5em; font-weight: 700; }
.jpl-post-content h2 { font-size: 1.15rem; }
.jpl-post-content h3 { font-size: 1rem; }
.jpl-post-content p  { margin-bottom: .85em; }
.jpl-post-content ul, .jpl-post-content ol { padding-left: 1.3em; margin-bottom: .85em; }
.jpl-post-content li { margin-bottom: .3em; }
.jpl-post-content img { border-radius: 6px; margin: .5em 0; }
.jpl-post-content a { color: var(--jpl-primary); text-decoration: underline; }

/* ── 12. Empty state ── */
.jpl-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--jpl-muted);
    font-size: .95rem;
}
.jpl-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.jpl-empty-sub { font-size: .85rem; margin-top: 4px; opacity: .7; }

/* ── 13. Footer ── */
.jpl-footer {
    background: var(--jpl-text);
    color: #d1d5db;
    font-size: .85rem;
    margin-top: 40px;
}
.jpl-footer a { color: #9ca3af; text-decoration: underline; text-underline-offset: 3px; }
.jpl-footer a:hover { color: #fff; text-decoration: underline; }

/* Sitemap */
.jpl-footer-sitemap {
    padding: 36px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.jpl-sitemap-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 28px 40px;
}
@media (max-width: 700px) {
    .jpl-sitemap-grid { grid-template-columns: 1fr 1fr; }
    .jpl-sitemap-brand { grid-column: 1 / -1; }
}
.jpl-sitemap-brand { padding-right: 16px; }
.jpl-footer-sitename {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.jpl-footer-logo img { max-height: 36px; width: auto; filter: brightness(0) invert(1); margin-bottom: 10px; }
.jpl-footer-tagline {
    font-size: .85rem;
    color: #9ca3af;
    line-height: 1.6;
    margin-bottom: 20px;
}
.jpl-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jpl-footer-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.jpl-footer-social-btn:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.jpl-sitemap-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    margin-bottom: 12px;
}
.jpl-sitemap-col ul { list-style: none; }
.jpl-sitemap-col li { margin-bottom: 7px; }
.jpl-sitemap-col a { font-size: .83rem; color: #9ca3af; text-decoration: none; }
.jpl-sitemap-col a:hover { color: #fff; text-decoration: none; }

/* Bottom bar */
.jpl-footer-bar { padding: 16px 0; }
.jpl-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.jpl-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    list-style: none;
}
.jpl-footer-nav a {
    font-size: .83rem;
    color: #d1d5db;
    text-decoration: none;
}
.jpl-footer-nav a:hover { color: #fff; }

/* ── 14. Job card (desain job board) ── */
.jpl-jcard {
    position: relative;
    background: var(--jpl-white);
    border: 1.5px solid var(--jpl-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}
.jpl-jcard:hover { border-color: var(--jpl-primary); box-shadow: 0 4px 20px rgba(0,108,134,.12); }
.jpl-jcard.is-closed { opacity: .65; }

/* Blok "Deskripsi Lowongan" (_type => 'desk') — teks pengantar/pemisah
   antar-kelompok posisi, sengaja beda tampilan dari .jpl-jcard supaya jelas
   ini bukan kartu posisi yang bisa diklik. */
.jpl-desk-block {
    background: var(--jpl-accent);
    border-left: 3px solid var(--jpl-primary);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0 12px;
}
.jpl-desk-block:first-child { margin-top: 0; }
.jpl-desk-block-content {
    color: var(--jpl-text, #1f2937);
    line-height: 1.6;
}
.jpl-desk-block-content > *:first-child { margin-top: 0; }
.jpl-desk-block-content > *:last-child { margin-bottom: 0; }

/* Stretched link — cover seluruh card, satu touch target */
.jpl-jcard-title-link {
    color: inherit;
    text-decoration: none;
}
.jpl-jcard-title-link::after {
    content: '';
    position: absolute;
    inset: 0;
}
.jpl-jcard-title-link:hover { color: var(--jpl-primary); }
.jpl-jcard-title-link:focus-visible::after { outline: 2px solid var(--jpl-primary); outline-offset: 2px; }

/* Baris atas: logo + judul */
.jpl-jcard-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.jpl-jcard-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px solid var(--jpl-border);
    background: var(--jpl-white);
    padding: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.jpl-jcard-logo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jpl-primary);
    background: var(--jpl-accent);
    border: none;
    padding: 0;
    box-shadow: none;
}
.jpl-jcard-info { flex: 1; min-width: 0; }
.jpl-jcard-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px;
    color: var(--jpl-text);
}
.jpl-jcard-title a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}
.jpl-jcard-title a:hover { color: var(--jpl-primary); }
.jpl-jcard-company {
    font-size: .9rem;
    color: var(--jpl-muted);
    margin: 0;
}

/* Meta row: ikon + teks + separator titik */
.jpl-jcard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: .875rem;
    color: #4b5563;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.jpl-jcard-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.jpl-jcard-meta-item.is-type {
    color: var(--jpl-primary);
    font-weight: 600;
}
.jpl-jcard-sep {
    color: #d1d5db;
    font-size: .75rem;
    line-height: 1;
}

/* Footer: waktu + badge */
.jpl-jcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--jpl-border);
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.jpl-jcard-time {
    font-size: .82rem;
    color: var(--jpl-muted);
}
.jpl-jcard-time.is-recent {
    color: var(--jpl-success);
    font-weight: 600;
}
.jpl-jcard-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
}
.jpl-jcard-badge.is-hot   { color: #b91c1c; background: #fff1f1; }
.jpl-jcard-badge.is-closed { color: #6b7280; background: var(--jpl-surface); }

/* ── Halaman perusahaan: search & filter posisi + "Lihat Semua" ── */
.jpl-cp-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.jpl-cp-search-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--jpl-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
    background: var(--jpl-white);
}
.jpl-cp-search-wrap svg { color: #9ca3af; flex-shrink: 0; }
.jpl-cp-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .9rem;
    background: transparent;
    color: var(--jpl-text);
    min-width: 0;
}
.jpl-cp-search-input::placeholder { color: #9ca3af; }
.jpl-cp-select-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.jpl-cp-select-wrap {
    position: relative;
    display: inline-flex;
}
.jpl-cp-select-wrap svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.jpl-cp-pendidikan-select,
.jpl-cp-jurusan-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 160px;
    height: 36px;
    border: 1px solid var(--jpl-border);
    border-radius: 8px;
    padding: 0 28px 0 12px;
    font-size: .82rem;
    background: var(--jpl-white);
    color: var(--jpl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* Tombol ikon-saja, sebaris dengan dropdown filter. Ukurannya dikunci
   36x36 supaya sejajar tinggi dengan select di sebelahnya — ini juga yang
   mencegahnya ikut melar oleh align-items:stretch bawaan flex row. */
.jpl-cp-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--jpl-border);
    border-radius: 8px;
    background: var(--jpl-white);
    color: var(--jpl-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.jpl-cp-reset-btn:hover {
    background: var(--jpl-accent);
    border-color: var(--jpl-primary);
    color: var(--jpl-primary);
}
/* WAJIB: atribut [hidden] bekerja lewat aturan BAWAAN BROWSER
   ([hidden]{display:none}), dan CSS tema SELALU mengalahkan aturan bawaan
   itu — jadi `display:inline-flex` di atas membatalkan [hidden] dan tombol
   tetap tampil walau belum ada filter (JS mengontrol visibilitas lewat
   .hidden). Tanpa baris ini tombol muncul terus. */
.jpl-cp-reset-btn[hidden] { display: none; }
.jpl-cp-no-result {
    display: none;
    font-size: .85rem;
    color: var(--jpl-muted);
    padding: 12px 0;
}
.jpl-cp-no-result.is-visible { display: block; }
.jpl-cp-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--jpl-border);
    border-radius: 10px;
    background: var(--jpl-white);
    color: var(--jpl-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
}
.jpl-cp-expand-btn:hover { background: var(--jpl-accent); }

/* ── Standalone posisi page ── */
.jpl-pos-hero {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--jpl-border);
    margin-bottom: 4px;
}
.jpl-pos-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.jpl-pos-company {
    font-size: 16px;
    color: var(--jpl-muted);
    margin-top: 4px;
}
.jpl-pos-company a { color: var(--jpl-primary); text-decoration: none; }
.jpl-pos-company a:hover { text-decoration: underline; }
.jpl-pos-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--jpl-text);
}
.jpl-pos-updated {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    color: var(--jpl-muted);
    margin-top: 10px;
}
.jpl-pos-cta-bar { display: none; }

/* ── Kartu Produk Afiliasi ──────────────────────────────────
   Grid di layar lebar (kartu wrap otomatis), baris tunggal yang bisa
   digeser (scroll-snap, swipe NATIF tanpa JS) di layar sempit — markup
   SAMA untuk dua-duanya, cuma display:grid vs display:flex yang beda per
   breakpoint. Tidak ada tombol panah: grid tidak butuh navigasi, dan swipe
   sentuh sudah cukup di HP (permintaan eksplisit pemilik). */
.jpl-afiliasi-wrap {
    margin: 8px 0 24px;
}
.jpl-afiliasi-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.jpl-afiliasi-head .jpl-pos-section-title {
    margin: 0;
}
.jpl-afiliasi-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.jpl-afiliasi-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jpl-muted);
    border: 1px solid var(--jpl-border);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}
.jpl-afiliasi-jumlah {
    font-size: .85rem;
    color: var(--jpl-muted);
    white-space: nowrap;
}
.jpl-afiliasi-track {
    display: grid;
    /* Batas atas 168px (BUKAN 1fr) — dengan 1fr, satu-satunya kartu saat
       cuma 1 produk aktif akan melebar mengisi seluruh baris. Dengan batas
       tetap, kartu selalu berukuran wajar berapa pun jumlah produknya;
       sisa ruang kosong di baris terakhir dibiarkan kosong, bukan dipaksa
       ke kartu yang ada. Angka dipilih supaya 3 kartu muat di kolom konten
       utama halaman posisi (900px kontainer − 32px padding − 300px sidebar
       − 24px gap = 544px). PENTING: auto-fill menghitung jumlah kolom dari
       batas MAX (bukan MIN) selama nilainya definite (px) — jadi batas
       atasnya sendiri yang harus pas: 3×168px + 2×14px gap = 532px ≤ 544px.
       Sudah diverifikasi render sungguhan (Playwright) menghasilkan tepat
       3 kolom di lebar 900px, bukan cuma hitungan di atas kertas. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 168px));
    gap: 14px;
}
@media (max-width: 767px) {
    /* Di bawah breakpoint ini, grid berubah jadi satu baris yang bisa
       digeser — markup TIDAK berubah, cuma cara menatanya. */
    .jpl-afiliasi-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none; /* scrollbar disembunyikan, tetap scrollable — swipe sudah cukup jadi petunjuk */
    }
    .jpl-afiliasi-track::-webkit-scrollbar { display: none; }
    .jpl-afiliasi-track .jpl-afiliasi-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        width: 200px;
    }
}

.jpl-afiliasi-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jpl-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--jpl-white);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.jpl-afiliasi-item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.jpl-afiliasi-gambar {
    position: relative;
    aspect-ratio: 4 / 3;
    /* overflow:hidden WAJIB di sini (bukan cukup di .jpl-afiliasi-item) —
       tanpa ini, flex item column memakai ukuran minimum konten (gambar
       kotak) sebagai batas bawah, mengalahkan aspect-ratio dan membuat
       kartu jadi kotak 1:1 alih-alih 4:3 (kartu jadi lebih tinggi dari
       seharusnya). Ini aturan CSS spec: automatic min-size flex item
       cuma jadi 0 kalau boks itu sendiri overflow-nya bukan visible. */
    overflow: hidden;
    background: var(--jpl-surface);
}
.jpl-afiliasi-gambar img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain (BUKAN cover) — gambar produk di sini diisi admin bebas,
       bisa berupa foto produk BIASA (aman dipotong) atau grafis info
       lengkap dengan teks penting di tepi (mis. banner judul di atas)
       yang akan terpotong kalau di-crop. contain menampilkan gambar
       UTUH apa pun rasio aslinya, ruang kosong kiri-kanan/atas-bawah
       diisi warna latar netral (var(--jpl-surface) di elemen induk). */
    object-fit: contain;
}
.jpl-afiliasi-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e11d48;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
}
.jpl-afiliasi-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}
.jpl-afiliasi-kategori {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--jpl-primary);
}
.jpl-afiliasi-judul {
    font-size: .92rem;
    font-weight: 600;
    color: var(--jpl-text);
    line-height: 1.35;
    /* 1 baris, potong "…" kalau kepanjangan — judul bisa panjang, kartu
       tidak boleh melar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jpl-afiliasi-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--jpl-muted);
    margin-top: 2px;
}
.jpl-afiliasi-rating svg { width: 13px; height: 13px; }
.jpl-afiliasi-rating .is-penuh { color: #f59e0b; }
.jpl-afiliasi-rating .is-kosong { color: var(--jpl-border); }
.jpl-afiliasi-rating b { color: var(--jpl-text); font-weight: 600; margin-left: 2px; }
.jpl-afiliasi-harga {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.jpl-afiliasi-harga-asli {
    font-size: .78rem;
    color: var(--jpl-muted);
}
.jpl-afiliasi-harga-jual {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--jpl-text);
}
.jpl-afiliasi-terjual {
    font-size: .75rem;
    color: var(--jpl-muted);
}
.jpl-afiliasi-cta {
    /* Bukan full-width lagi — seluruh kartu sudah jadi link (<a>), tombol
       ini cuma penanda visual/afordans, bukan satu-satunya cara klik.
       Jadi ukurannya dikecilkan & auto-width (bukan block memenuhi
       kartu) supaya tidak terkesan seperti tombol utama yang wajib
       ditekan. align-self:center menimpa stretch bawaan flex column
       induknya (.jpl-afiliasi-info) supaya lebar mengikuti isi teks,
       diposisikan di tengah kartu (bukan rata kiri). */
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--jpl-primary);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
}

/* ── Mode List — baris ringkas, alternatif dari Grid di atas. Admin
   pilih salah satu lewat Jobs Core Pro → Afiliasi → Mode Tampilan.
   TIDAK butuh breakpoint mobile khusus (tidak seperti Grid yang berubah
   jadi slider di <768px) — baris vertikal sudah otomatis pas di semua
   lebar layar, tidak ada overflow horizontal untuk diatasi. */
.jpl-afiliasi-list {
    display: flex;
    flex-direction: column;
}
.jpl-afiliasi-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--jpl-border);
    text-decoration: none;
    color: inherit;
}
.jpl-afiliasi-row:last-child {
    border-bottom: none;
}
.jpl-afiliasi-row-gambar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--jpl-surface);
}
.jpl-afiliasi-row-gambar img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, sama alasannya seperti thumbnail Grid — gambar admin bisa
       berupa grafis info dengan teks penting di tepi, tidak boleh dipotong. */
    object-fit: contain;
}
.jpl-afiliasi-row-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.jpl-afiliasi-row-badge {
    /* Sama warna & gaya dengan .jpl-afiliasi-badge (mode Grid) — badge
       yang sama harus terlihat sebagai elemen yang sama di kedua mode,
       cuma posisinya beda: di sini inline di atas judul (bukan absolute
       menumpuk gambar), karena thumbnail List cuma 44px, kurang muat
       kalau badge ditumpuk di atasnya seperti di Grid. */
    display: inline-block;
    align-self: flex-start;
    background: #e11d48;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    margin-bottom: 2px;
}
.jpl-afiliasi-row-judul {
    font-size: .92rem;
    font-weight: 600;
    color: var(--jpl-text);
    /* 1 baris, potong "…" kalau kepanjangan — sama seperti mode Grid.
       min-width:0 di .jpl-afiliasi-row-info (induk) WAJIB ada supaya
       ellipsis bekerja di dalam flex row, bukan malah mendorong lebar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jpl-afiliasi-row-harga-asli {
    font-size: .75rem;
    color: var(--jpl-muted);
    margin-right: 6px;
}
.jpl-afiliasi-row-harga b {
    font-size: .95rem;
    font-weight: 700;
    color: var(--jpl-text);
}
.jpl-afiliasi-row-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--jpl-muted);
}
.jpl-afiliasi-row-bintang {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #f59e0b;
}
.jpl-afiliasi-row-bintang svg {
    width: 12px;
    height: 12px;
}

/* CTA bawah — cara melamar */
/* ── Cara Melamar CTA ── */
.jpl-pos-cta-bottom {
    border-top: 1px solid var(--jpl-border);
    padding-top: 24px;
    margin-top: 8px;
    margin-bottom: 24px;
}

/* Kotak utama pembungkus seluruh CTA */
.jpl-cta-box {
    background: var(--jpl-surface);
    border: 1.5px solid var(--jpl-border);
    border-radius: 14px;
    padding: 20px 22px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Baris tombol + atau + email */
.jpl-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.jpl-cta-apply-btn { flex-shrink: 0; }
.jpl-cta-divider {
    font-size: .82rem;
    color: var(--jpl-muted);
    font-style: italic;
    flex-shrink: 0;
}

/* Tombol "laporkan lowongan tutup" — sengaja kecil & bawah, jangan
   bersaing visual dengan tombol Apply utama (lihat inc/report-closed.php
   di plugin utk alasan fitur ini ada). */
.jobs-core-report-closed-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font-size: .8rem;
    color: var(--jpl-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.jobs-core-report-closed-btn:hover { color: var(--jpl-primary); }
.jobs-core-report-closed-btn:disabled { cursor: default; text-decoration: none; opacity: .8; }

/* Blok info email utama */
.jpl-cta-email-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.jpl-cta-email-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .95rem;
}
.jpl-cta-email-addr {
    font-weight: 700;
    color: var(--jpl-primary);
    word-break: break-all;
    user-select: all;
}
.jpl-cta-subject-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .85rem;
    color: var(--jpl-muted);
    padding-top: 2px;
}
.jpl-cta-subject-row strong { color: var(--jpl-text); }
.jpl-cta-cc-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .85rem;
    color: var(--jpl-muted);
    padding-top: 2px;
}
.jpl-cta-cc-row strong { color: var(--jpl-text); user-select: all; }

/* Divider tipis antara main row dan lokasi */
.jpl-cta-sep {
    border: none;
    border-top: 1px solid var(--jpl-border);
    margin: 0;
}

/* Per cabang/lokasi — flat, no nested card */
.jpl-cta-groups-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jpl-cta-group-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.jpl-cta-group-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--jpl-muted);
    margin-bottom: 2px;
}
.jpl-pos-related-links {
    margin: 20px 0 0;
    padding: 16px 20px;
    background: var(--jpl-surface);
    border: 1px solid var(--jpl-border);
    border-radius: 12px;
}
.jpl-pos-related-label {
    font-size: .8rem;
    color: var(--jpl-muted);
    margin-bottom: 10px;
}
.jpl-pos-related-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jpl-pos-related-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    color: var(--jpl-primary);
    background: var(--jpl-white);
    border: 1.5px solid rgba(0,108,134,.25);
    border-radius: 20px;
    padding: 5px 14px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.jpl-pos-related-pill:hover {
    background: var(--jpl-accent);
    border-color: var(--jpl-primary);
    text-decoration: none;
}
.jpl-pos-back {
    padding-top: 20px;
    border-top: 1px solid var(--jpl-border);
    margin-top: 8px;
}
.jpl-archived-notice {
    background: #fef9ec;
    border: 1px solid #f5d77a;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: .88rem;
    color: #7a5c00;
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.jpl-archived-notice a { color: var(--jpl-primary); font-weight: 600; white-space: nowrap; }
.jpl-pos-closed-notice {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--jpl-radius);
    padding: 14px 16px;
    margin: 20px 0;
    font-size: .9rem;
    color: #991b1b;
}
.jpl-pos-closed-notice a { color: var(--jpl-primary); }
.jpl-pos-body { margin-top: 24px; }
.jpl-pos-section { margin-bottom: 28px; }
.jpl-pos-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jpl-text);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--jpl-accent);
}

/* ── 14. Homepage Hero Search ── */
.jpl-home-hero {
    background: linear-gradient(160deg, var(--jpl-accent) 0%, #fff 60%);
    padding: 52px 0 44px;
    text-align: center;
}
.jpl-home-hero .jpl-hero-title {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 800;
    color: var(--jpl-text);
    line-height: 1.2;
    margin-bottom: 10px;
}
.jpl-home-hero .jpl-hero-sub {
    font-size: .95rem;
    color: var(--jpl-muted);
    margin-bottom: 28px;
}

/* Combined search bar */
.jpl-hero-form { max-width: 780px; margin: 0 auto 18px; }
.jpl-hero-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--jpl-border);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    overflow: hidden;
    height: 58px;
}
.jpl-hero-lokasi {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    color: var(--jpl-muted);
    flex-shrink: 0;
    border-right: 1.5px solid var(--jpl-border);
    height: 100%;
    min-width: 0;
}
.jpl-hero-lokasi svg { flex-shrink: 0; color: var(--jpl-primary); }
.jpl-hero-lokasi > svg:last-child { color: var(--jpl-muted); }
.jpl-hero-select {
    border: none;
    outline: none;
    background: transparent;
    font-size: .875rem;
    font-weight: 500;
    color: var(--jpl-text);
    cursor: pointer;
    max-width: 170px;
    appearance: none;
    -webkit-appearance: none;
}
.jpl-hero-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 100%;
    min-width: 0;
}
.jpl-hero-input-wrap svg { color: var(--jpl-muted); flex-shrink: 0; }
.jpl-hero-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .95rem;
    background: transparent;
    color: var(--jpl-text);
    min-width: 0;
}
.jpl-hero-input::placeholder { color: #b0b7c3; }
.jpl-hero-btn {
    flex-shrink: 0;
    height: 100%;
    padding: 0 28px;
    background: var(--jpl-primary);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: none;
    cursor: pointer;
    border-radius: 0 14px 14px 0;
    transition: background .15s;
}
.jpl-hero-btn:hover { background: var(--jpl-primary-dark); }

/* Popular tags */
.jpl-hero-popular {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 780px;
    margin: 0 auto;
}
.jpl-hero-popular-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--jpl-muted);
}
.jpl-hero-tag {
    font-size: .8rem;
    padding: 5px 14px;
    border-radius: 50px;
    background: #fff;
    color: var(--jpl-text);
    border: 1.5px solid var(--jpl-border);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.jpl-hero-tag:hover { border-color: var(--jpl-primary); color: var(--jpl-primary); }
.jpl-hero-tag.is-active { background: var(--jpl-primary); color: #fff; border-color: var(--jpl-primary); }

/* ── Kategori Posisi bar (kartu berwarna) ── */
.jpl-kategori-bar { margin: 20px 0 8px; }
.jpl-kategori-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.jpl-kategori-row::-webkit-scrollbar { height: 5px; }
.jpl-kategori-row::-webkit-scrollbar-thumb { background: var(--jpl-border); border-radius: 10px; }
.jpl-kat-card {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: 148px;
    min-height: 64px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--jpl-surface);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.jpl-kat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
    filter: brightness(1.06);
    text-decoration: none;
    color: #fff;
}
.jpl-kat-label {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
}
/* Indikator kartu kategori aktif — ganti jadi warna solid tema (seperti
   referensi Dealls), menimpa gradient asal kartu. !important perlu karena
   gradient di-set inline per kartu (spesifisitas inline > class). */
.jpl-kat-card.is-active {
    background: var(--jpl-primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
}
/* "Semua Pekerjaan" — kartu utama, gradient ungu-teal khas */
.jpl-kat-all {
    background: linear-gradient(135deg, var(--jpl-primary), #9333ea);
}

@media (min-width: 780px) {
    .jpl-kat-card { width: 168px; min-height: 72px; }
    .jpl-kat-label { font-size: .9rem; }
}

/* Results reset link */
.jpl-results-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: #e06060;
    text-decoration: none;
    margin-left: 8px;
    background: #fff5f5;
    border: 1.5px solid #f5c0c0;
    border-radius: 50px;
    padding: 5px 14px;
    transition: all .15s;
}
.jpl-results-reset:hover { background: #fde8e8; border-color: #f0a0a0; color: #c94040; text-decoration: none; }
.jpl-results-reset svg { display: inline; vertical-align: middle; }

/* Mobile */
@media (max-width: 600px) {
    .jpl-home-hero { padding: 36px 0 28px; }
    .jpl-hero-bar { flex-wrap: wrap; border-radius: 16px; height: auto; }
    .jpl-hero-lokasi { width: 100%; border-right: none; border-bottom: 1.5px solid var(--jpl-border); height: 48px; }
    .jpl-hero-select { max-width: 100%; width: 100%; }
    .jpl-hero-input-wrap { width: 100%; height: 48px; }
    .jpl-hero-btn { width: 100%; border-radius: 0 0 16px 16px; height: 48px; }
}

/* ── Filter bar (archive / results) ── */
/* ── Search + Filter bar ── */
.jpl-search-bar-wrap {
    background: var(--jpl-primary);
    padding: 20px 0 16px;
}
.jpl-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.jpl-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 0 16px;
    height: 48px;
}
.jpl-search-input-wrap svg { color: #9ca3af; flex-shrink: 0; display: inline; }
.jpl-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .95rem;
    background: transparent;
    color: var(--jpl-text);
    min-width: 0;
}
.jpl-search-input::placeholder { color: #9ca3af; }
.jpl-search-btn {
    height: 48px;
    padding: 0 22px;
    border-radius: 10px;
    background: #fff;
    color: var(--jpl-primary);
    font-weight: 700;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.jpl-search-btn:hover { background: var(--jpl-accent); color: var(--jpl-primary-dark); }
.jpl-search-reset {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .15s;
}
.jpl-search-reset:hover { background: rgba(255,255,255,.25); }
.jpl-search-reset svg { display: inline; }

/* Varian simpel — search bar tanpa dropdown filter (mis. arsip artikel) */
.jpl-search-bar-wrap--simple { padding-bottom: 20px; }
.jpl-search-form--simple { margin-bottom: 0; }

/* Filter dropdowns */
.jpl-filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.jpl-dropdown { position: relative; }
.jpl-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    background: #fff;
    color: var(--jpl-primary-dark);
    border: 1.5px solid #fff;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.jpl-dropdown-btn svg { display: inline; }
.jpl-dropdown-btn:hover,
.jpl-dropdown.is-active .jpl-dropdown-btn { background: var(--jpl-accent); color: var(--jpl-primary-dark); border-color: var(--jpl-accent); }
.jpl-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid var(--jpl-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 200;
    padding: 6px 0;
}
.jpl-dropdown-panel[hidden] { display: none; }
.jpl-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 16px;
    font-size: .875rem;
    color: var(--jpl-text);
    text-decoration: none;
    transition: background .1s;
}
.jpl-dropdown-option:hover { background: var(--jpl-surface); }
.jpl-dropdown-option.is-selected { color: var(--jpl-primary); font-weight: 700; }
.jpl-dropdown-option small { color: var(--jpl-muted); font-size: .78rem; }

/* Popular tags */
.jpl-search-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.jpl-search-popular-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    flex-shrink: 0;
}
.jpl-popular-tag {
    font-size: .8rem;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(0,0,0,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    text-decoration: none;
    transition: background .15s;
}
.jpl-popular-tag:hover { background: rgba(0,0,0,.3); color: #fff; text-decoration: none; }
.jpl-popular-tag.is-active { background: #fff; color: var(--jpl-primary); border-color: #fff; }

/* Results bar */
.jpl-results-bar {
    background: var(--jpl-white);
    border-bottom: 1px solid var(--jpl-border);
    padding: 10px 0;
}
.jpl-results-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.jpl-results-count { font-size: .875rem; color: var(--jpl-muted); }
.jpl-results-count strong { color: var(--jpl-text); }
.jpl-sort-tabs { display: flex; gap: 6px; }
.jpl-sort-tab {
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--jpl-border);
    color: var(--jpl-muted);
    text-decoration: none;
    transition: all .15s;
}
.jpl-sort-tab:hover { border-color: var(--jpl-primary); color: var(--jpl-primary); text-decoration: none; }
.jpl-sort-tab.is-active { background: var(--jpl-primary); color: #fff; border-color: var(--jpl-primary); }

/* Legacy filter bar (arsip taxonomy) */
.jpl-filter-bar {
    background: var(--jpl-surface);
    border-bottom: 1px solid var(--jpl-border);
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.jpl-filter-bar::-webkit-scrollbar { display: none; }
.jpl-filter-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: max-content;
    padding-inline: 16px;
}
.jpl-filter-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--jpl-muted);
    margin-right: 2px;
    flex-shrink: 0;
}
.jpl-filter-tag {
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--jpl-border);
    background: var(--jpl-white);
    color: var(--jpl-text);
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.jpl-filter-tag:hover { background: var(--jpl-accent); color: var(--jpl-primary); text-decoration: none; border-color: var(--jpl-primary); }
.jpl-filter-tag.is-active { background: var(--jpl-primary); color: var(--jpl-white); border-color: var(--jpl-primary); }
.jpl-filter-tag small { color: var(--jpl-muted); }

/* ── 15. Archive header ── */
.jpl-arc-head {
    padding: 20px 0 14px;
    border-bottom: 1px solid var(--jpl-border);
    margin-bottom: 6px;
}
.jpl-arc-head h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.jpl-arc-head p {
    font-size: .9rem;
    color: var(--jpl-muted);
    margin: 0;
}
.jpl-arc-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: .82rem;
    color: var(--jpl-muted);
}

/* ── 16. Archive card ── */
.jpl-arc-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--jpl-border);
    border-radius: var(--jpl-radius);
    background: var(--jpl-white);
    box-shadow: var(--jpl-shadow);
    margin-bottom: 10px;
    transition: box-shadow .15s, border-color .15s;
}
.jpl-arc-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.09); border-color: #d1d5db; }
.jpl-arc-card.is-rek { border-left: 3px solid var(--jpl-primary); }
.jpl-arc-card-link { flex-shrink: 0; display: block; }
.jpl-arc-logo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--jpl-border);
    background: var(--jpl-surface);
    padding: 4px;
}
.jpl-arc-logo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--jpl-primary);
    background: var(--jpl-accent);
    border: none;
    padding: 0;
}
.jpl-arc-body { flex: 1; min-width: 0; }
.jpl-arc-top { margin-bottom: 10px; }
.jpl-arc-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.jpl-arc-title a { color: var(--jpl-text); text-decoration: none; }
.jpl-arc-title a:hover { color: var(--jpl-primary); }
.jpl-arc-rek { color: #f59e0b; flex-shrink: 0; }
.jpl-arc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .8rem;
    color: var(--jpl-muted);
}
.jpl-arc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.jpl-arc-positions {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jpl-arc-pos {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--jpl-text);
}
.jpl-arc-pos::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jpl-primary);
    flex-shrink: 0;
}
.jpl-arc-pos.is-closed::before { background: #d1d5db; }
.jpl-arc-pos.is-closed .jpl-arc-pos-name { color: var(--jpl-muted); text-decoration: line-through; }
.jpl-arc-pos-name { font-weight: 500; }
.jpl-arc-pos-type {
    font-size: .75rem;
    padding: 1px 6px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 10px;
}
.jpl-arc-pos-closed {
    font-size: .72rem;
    padding: 1px 6px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 10px;
}
.jpl-arc-pos-more {
    font-size: .8rem;
    color: var(--jpl-muted);
    padding-left: 12px;
}
.jpl-arc-no-pos { font-size: .85rem; color: var(--jpl-muted); margin-bottom: 8px; }
.jpl-arc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.jpl-arc-count {
    font-size: .8rem;
    color: var(--jpl-muted);
    background: var(--jpl-surface);
    border: 1px solid var(--jpl-border);
    border-radius: 20px;
    padding: 2px 8px;
}
.jpl-arc-cta {
    font-size: .85rem;
    font-weight: 600;
    color: var(--jpl-primary);
    text-decoration: none;
}
.jpl-arc-cta:hover { text-decoration: underline; }

/* ── 17. Pagination ── */
/* AJAX loading state untuk daftar posisi */
#jpl-results { transition: opacity .15s; }
#jpl-results.is-loading { opacity: .45; pointer-events: none; }

.jpl-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 28px 0 16px;
    flex-wrap: wrap;
}
.jpl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: .9rem;
    border: 1px solid var(--jpl-border);
    background: var(--jpl-white);
    color: var(--jpl-text);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.jpl-pagination .page-numbers:hover { background: var(--jpl-accent); color: var(--jpl-primary); }
.jpl-pagination .page-numbers.current { background: var(--jpl-primary); color: var(--jpl-white); border-color: var(--jpl-primary); }
.jpl-pagination .page-numbers.dots { border: none; background: none; color: var(--jpl-muted); }

/* ── 17b. Blog card grid ── */
.jpl-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 12px;
}
.jpl-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--jpl-white);
    border: 1px solid var(--jpl-border);
    border-radius: var(--jpl-radius);
    box-shadow: var(--jpl-shadow);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.jpl-blog-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.09); border-color: #d1d5db; }
.jpl-blog-card-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--jpl-surface);
}
.jpl-blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}
.jpl-blog-card:hover .jpl-blog-card-thumb img { transform: scale(1.04); }
.jpl-blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
}
.jpl-blog-card-date {
    font-size: .78rem;
    color: var(--jpl-muted);
    margin: 0 0 6px;
}
.jpl-blog-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jpl-blog-card-title a { color: var(--jpl-text); text-decoration: none; }
.jpl-blog-card-title a:hover { color: var(--jpl-primary); }
.jpl-blog-card-excerpt {
    font-size: .87rem;
    color: var(--jpl-muted);
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jpl-blog-card-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--jpl-primary);
    text-decoration: none;
    margin-top: auto;
}
.jpl-blog-card-link:hover { text-decoration: underline; }

/* ── 18. Responsive ── */
@media (min-width: 640px) {
    .jpl-hero-title h1 { font-size: 1.75rem; }
    .jpl-card-header { padding: 16px 20px; }
    .jpl-card-body  { padding: 0 20px 20px; }
    .jpl-arc-logo   { width: 64px; height: 64px; }
    .jpl-arc-card   { padding: 20px; gap: 16px; }
    .jpl-arc-title  { font-size: 1.05rem; }
    .jpl-arc-positions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .jpl-arc-pos { border: 1px solid var(--jpl-border); border-radius: 20px; padding: 2px 10px 2px 8px; background: var(--jpl-surface); }
    .jpl-arc-pos::before { width: 5px; height: 5px; }
}
/* Nav desktop baru muncul saat layar cukup lebar untuk semua menu. */
@media (min-width: 860px) {
    .jpl-nav { display: flex; }
    .jpl-nav-toggle { display: none; }
    .jpl-mobile-nav, .jpl-mobile-nav.is-open { display: none; }
    .jpl-nav-overlay, .jpl-nav-overlay.is-open { display: none; }
}
@media (min-width: 900px) {
    .jpl-hero-title h1 { font-size: 2rem; }
}

/* ── 15. Single layout: main + sidebar ── */
.jpl-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 0;
}
.jpl-single-main { align-self: start; }
.jpl-sidebar { align-self: stretch; }
@media (min-width: 780px) {
    .jpl-single-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

/* Sidebar */
.jpl-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 32px;
}
.jpl-sidebar-widget {
    background: var(--jpl-white);
    border: 1.5px solid var(--jpl-border);
    border-radius: 14px;
    overflow: hidden;
}
/* Batasi tinggi iklan (ad-core) di dalam sidebar widget — ad-core tidak
   punya opsi "max height" sendiri, cuma min_height (reserve space), jadi
   iklan responsive/native bisa jadi sangat tinggi dan membuat kolom
   sidebar lebih tinggi dari kolom konten utama. Begitu itu terjadi,
   .jpl-sidebar-inner (position:sticky) kehilangan ruang gerak untuk
   "menempel" saat scroll — jadi kelihatan seperti tidak sticky sama sekali. */
.jpl-sidebar-widget .ad-core-block {
    max-height: 400px;
    overflow: hidden;
}

.jpl-sidebar-widget-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--jpl-text);
    padding: 12px 14px;
    border-bottom: 1px solid var(--jpl-border);
    background: var(--jpl-surface);
}

/* Trending list */
.jpl-trending-list { padding: 4px 0; }
.jpl-trending-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--jpl-border);
    transition: background .12s;
    width: 100%;
    box-sizing: border-box;
}
.jpl-trending-item:last-child { border-bottom: none; }
.jpl-trending-item:hover { background: var(--jpl-surface); text-decoration: none; }
.jpl-trending-rank {
    font-size: .75rem;
    font-weight: 700;
    color: var(--jpl-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.jpl-trending-item:nth-child(1) .jpl-trending-rank { color: #f59e0b; }
.jpl-trending-item:nth-child(2) .jpl-trending-rank { color: #9ca3af; }
.jpl-trending-item:nth-child(3) .jpl-trending-rank { color: #b45309; }
.jpl-trending-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.jpl-trending-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--jpl-border);
}
.jpl-trending-logo-ph {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--jpl-accent);
    color: var(--jpl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}
.jpl-trending-info { flex: 1; min-width: 0; }
.jpl-trending-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--jpl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.jpl-trending-meta {
    font-size: .75rem;
    color: var(--jpl-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.jpl-trending-dot { color: var(--jpl-border); }

/* Mobile: sidebar turun ke bawah */
@media (max-width: 779px) {
    .jpl-sidebar-inner { position: static; }
    .jpl-sidebar { display: block; width: 100%; }
    .jpl-sidebar-widget {
        display: block;
        background: var(--jpl-white);
        border: 1.5px solid var(--jpl-border);
        border-radius: 14px;
        overflow: hidden;
    }
}

/* ── 16. Pagination (homepage flat posisi) ── */
.jpl-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 0 32px;
}
.jpl-page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1.5px solid var(--jpl-border);
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--jpl-text);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.jpl-page-link:hover { border-color: var(--jpl-primary); color: var(--jpl-primary); background: var(--jpl-accent); text-decoration: none; }

/* ── 16. Artikel / Blog CPT ── */
.jpl-article { padding-bottom: 40px; }
.jpl-article-hero {
    margin: 16px 0 0;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
}
.jpl-article-hero-img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}
.jpl-article-header {
    padding: 24px 0 16px;
    border-bottom: 1px solid var(--jpl-border);
    margin-bottom: 24px;
}
.jpl-article-title {
    font-size: clamp(1.4rem, 4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--jpl-text);
    margin-bottom: 10px;
}
.jpl-article-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
    color: var(--jpl-muted);
    margin: 0;
}
.jpl-article-meta svg { display: inline; vertical-align: middle; }
.jpl-article-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--jpl-text);
}
.jpl-article-content h2 { font-size: 1.3rem; font-weight: 700; margin: 28px 0 12px; }
.jpl-article-content h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 10px; }
.jpl-article-content p  { margin-bottom: 16px; }
.jpl-article-content ul, .jpl-article-content ol { padding-left: 20px; margin-bottom: 16px; list-style: revert; }
.jpl-article-content li { margin-bottom: 6px; }
.jpl-article-content img { border-radius: 8px; max-width: 100%; height: auto; margin: 16px 0; }
.jpl-article-content a  { color: var(--jpl-primary); text-decoration: underline; }
.jpl-article-content blockquote {
    border-left: 3px solid var(--jpl-primary);
    padding: 10px 16px;
    margin: 20px 0;
    background: var(--jpl-accent);
    border-radius: 0 8px 8px 0;
    color: var(--jpl-text);
    font-style: italic;
}
@media (min-width: 640px) {
    .jpl-article-title { font-size: 2rem; }
}
@media (min-width: 900px) {
    .jpl-article-title { font-size: 2.2rem; }
}

/* ── Plugin overrides: contrast fix ── */

/* ── 17. Print ── */
@media print {
    .jpl-header, .jpl-footer, .jpl-ad, .jpl-card-toggle, .jpl-nav-toggle, .jpl-totop { display: none !important; }
    .jpl-card-body { display: block !important; }
}

/* ── 18. Tombol "Kembali ke atas" ── */
.jpl-totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--jpl-accent);
    color: var(--jpl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    /* Lebih tinggi dari z-index iklan anchor (9999 di ad-core) — pengaman
       cadangan kalau pengukuran JS (lihat theme.js) telat/gagal geser
       posisinya, tombol ini tetap di atas & bisa diklik, tidak ketiban. */
    z-index: 10000;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, background .15s, color .15s;
    pointer-events: none;
}
.jpl-totop.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.jpl-totop svg { transform: rotate(180deg); }
.jpl-totop:hover { background: var(--jpl-primary); color: var(--jpl-white); }

/* ── Halaman Kontak (page-kontak.php) ─────────────────────────── */
.jpl-contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--jpl-white);
    border: 1px solid var(--jpl-border);
    border-radius: var(--jpl-radius);
    padding: 24px;
    box-shadow: var(--jpl-shadow);
}
.jpl-contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jpl-contact-field { display: flex; flex-direction: column; gap: 6px; }
.jpl-contact-field label { font-size: .85rem; font-weight: 600; color: var(--jpl-text); }
.jpl-contact-field .req { color: var(--jpl-danger); }
.jpl-contact-field input,
.jpl-contact-field textarea {
    font-family: var(--jpl-font);
    font-size: .9rem;
    color: var(--jpl-text);
    border: 1px solid var(--jpl-border);
    border-radius: 8px;
    padding: 10px 12px;
    resize: vertical;
}
.jpl-contact-field input:focus,
.jpl-contact-field textarea:focus {
    outline: none;
    border-color: var(--jpl-primary);
}
.jpl-contact-notice {
    font-size: .85rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0;
}
.jpl-contact-notice.is-success { background: #f0fdf4; color: var(--jpl-success); }
.jpl-contact-notice.is-error   { background: #fef2f2; color: var(--jpl-danger); }