/* AI Job Poster by Bubek: tampilan lowongan */

.ajp {
	--ajp-ink: #14243B;
	--ajp-ink-2: #2E3B4D;
	--ajp-ink-3: #3E4C5E;
	--ajp-muted: #5F6B7A;
	--ajp-line: #DDE2E8;
	--ajp-line-2: #E7EBEF;
	--ajp-ground: #F3F5F7;
	--ajp-chip: #F0F3F6;
	--ajp-blue: #1D4E9E;
	--ajp-blue-soft: #E6EEFB;
	--ajp-green: #0A6E4D;
	--ajp-green-soft: #E6F4EE;
	--ajp-amber: #6B4500;
	--ajp-amber-soft: #FFF1CC;
	--ajp-urgent: #9A3412;
	--ajp-accent: #0A7A55;
	--ajp-font: 'Plus Jakarta Sans', system-ui, sans-serif;

	background: var(--ajp-ground);
	color: var(--ajp-ink);
	font-family: var(--ajp-font);
	font-size: 16px;
	line-height: 1.6;
}
.ajp *, .ajp *::before, .ajp *::after { box-sizing: border-box; }
.ajp h1, .ajp h2, .ajp h3 { font-family: var(--ajp-font); color: var(--ajp-ink); letter-spacing: normal; text-transform: none; }
.ajp a { color: var(--ajp-green); }
.ajp a:hover { color: #075239; }
.ajp a:focus-visible, .ajp button:focus-visible, .ajp summary:focus-visible, .ajp input:focus-visible, .ajp select:focus-visible {
	outline: 2px solid var(--ajp-blue); outline-offset: 2px;
}
.ajp-embed { background: transparent; }

.ajp-wrap { max-width: 1160px; margin: 0 auto; padding: 24px 24px 64px; }
.ajp-crumbs { font-size: 14px; color: var(--ajp-muted); margin-bottom: 18px; }
.ajp-crumbs a { color: var(--ajp-muted); }
.ajp-crumbs [aria-current] { color: var(--ajp-ink); }

.ajp-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ajp-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ajp-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.ajp-card { background: #fff; border: 1px solid var(--ajp-line); border-radius: 12px; padding: 28px 28px 26px; }
.ajp-card.is-soft { background: #F7FAFD; border-color: #D6E2F0; }
.ajp-card h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.ajp-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--ajp-ink-2); }
.ajp-card p:last-child { margin-bottom: 0; }
.ajp-h-sm { font-size: 17px !important; }
.ajp-note { margin-top: -6px !important; }

.ajp-list { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--ajp-ink-2); }
.ajp-list li { margin: 0 0 8px; }
ul.ajp-list { list-style: disc; }
ol.ajp-list { list-style: decimal; }

.ajp-muted { color: var(--ajp-muted); margin: 0; }
.ajp-muted-sm { font-size: 14px; color: var(--ajp-muted); }
.is-na { font-weight: 500 !important; font-style: italic; color: var(--ajp-muted) !important; }

/* Hero */
.ajp-hero { padding: 32px; }
.ajp-hero-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ajp-hero-text { flex: 1 1 300px; min-width: 0; }
.ajp-logo { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--ajp-line-2); }
.ajp-logo.is-initials { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; border: 0; }
.ajp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ajp-badge { display: inline-block; background: var(--ajp-chip); color: var(--ajp-ink-3); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.ajp-badge.is-green { background: var(--ajp-green-soft); color: var(--ajp-green); }
.ajp-badge.is-blue { background: var(--ajp-blue-soft); color: var(--ajp-blue); }
.ajp-badge.is-amber { background: var(--ajp-amber-soft); color: var(--ajp-amber); }
.ajp-title { margin: 0 0 6px; font-size: 34px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.ajp-company { margin: 0 !important; font-size: 17px !important; color: var(--ajp-ink-3) !important; }
.ajp-company a, .ajp-company strong { color: var(--ajp-ink); font-weight: 600; }

.ajp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ajp-chips.is-sm { margin-top: 10px; gap: 6px; }
.ajp-chip { background: var(--ajp-chip); color: var(--ajp-ink-2); font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 8px; }
.ajp-chips.is-sm .ajp-chip { font-size: 13px; padding: 4px 9px; }
.ajp-chip.is-green { background: var(--ajp-green-soft); color: var(--ajp-green); font-weight: 600; }
.ajp-chip.is-amber { background: var(--ajp-amber-soft); color: var(--ajp-amber); font-weight: 600; }
.ajp-chip.is-salary { background: #fff; border: 1px solid var(--ajp-line); color: var(--ajp-ink); font-weight: 700; }
.ajp-chip.is-muted { background: var(--ajp-chip); color: var(--ajp-muted); }
.ajp-chip.is-urgent { background: #FDEDE4; color: var(--ajp-urgent); font-weight: 600; }

.ajp-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ajp-line-2); }
.ajp-salary { font-size: 24px; font-weight: 800; color: var(--ajp-ink); }
.ajp-salary-sm { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.ajp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ajp-btn { display: inline-block; background: var(--ajp-accent); color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 16px; line-height: 1.3; padding: 14px 24px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-family: inherit; text-align: center; }
.ajp-btn:hover { filter: brightness(0.92); color: #fff; }
.ajp-btn.is-ghost { background: #fff; color: var(--ajp-ink) !important; border-color: #C9D1DB; font-weight: 600; }
.ajp-btn.is-ghost:hover { filter: none; background: var(--ajp-chip); }
.ajp-btn.is-disabled { background: var(--ajp-chip); color: var(--ajp-muted) !important; cursor: not-allowed; }
.ajp-block { display: block; }
.ajp-mt { margin-top: 16px; }

/* Detail */
.ajp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.ajp-dl div { padding: 12px 0; border-top: 1px solid var(--ajp-line-2); }
.ajp-dl dt { font-size: 13px; color: var(--ajp-muted); margin: 0 0 2px; font-weight: 400; }
.ajp-dl dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ajp-ink); }
.ajp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ajp-cols h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }

.ajp-faq details { border-top: 1px solid var(--ajp-line-2); padding: 14px 0; }
.ajp-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ajp-ink); }
.ajp-faq details p { margin: 10px 0 0; }

.ajp-source { background: #fff; border: 1px solid var(--ajp-line); border-radius: 12px; padding: 18px 22px; font-size: 15px; line-height: 1.6; color: var(--ajp-ink-2); }
.ajp-source:empty { display: none; }
.ajp-source strong { color: var(--ajp-ink); }
.ajp-warn { background: #FFF6EC; border: 1px solid #F0C99A; border-radius: 12px; padding: 18px 22px; font-size: 15px; line-height: 1.6; color: #6A3A05; }
.ajp-warn a { color: #6A3A05; font-weight: 600; }
.ajp-closed { background: #FDEDE4; border: 1px solid #F3B999; color: #7C2D12; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.ajp-closed a { color: #7C2D12; font-weight: 600; }

/* Sidebar */
.ajp-applycard { padding: 24px; }
.ajp-mini { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ajp-ink-2); margin: 0 0 18px; }
.ajp-mini div { display: flex; justify-content: space-between; gap: 12px; }
.ajp-mini dt { color: var(--ajp-muted); font-weight: 400; }
.ajp-mini dd { margin: 0; font-weight: 700; text-align: right; }
.ajp-mini dd.is-urgent { color: var(--ajp-urgent); }
.ajp-side .ajp-card { padding: 24px; }
.ajp-rel { display: flex; flex-direction: column; }
.ajp-rel a { display: block; text-decoration: none; padding: 12px 0; border-top: 1px solid var(--ajp-line-2); }
.ajp-rel strong { display: block; color: var(--ajp-ink); }
.ajp-rel span { font-size: 14px; color: var(--ajp-muted); }
.ajp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ajp-tags a { font-size: 14px; text-decoration: none; color: var(--ajp-blue); background: #EDF3FB; padding: 7px 12px; border-radius: 999px; }
.ajp-tags a span { color: var(--ajp-muted); }

/* Arsip */
.ajp-archive-head { margin-bottom: 18px; }
.ajp-filter { display: flex; flex-wrap: wrap; gap: 10px; background: #fff; border: 1px solid var(--ajp-line); border-radius: 12px; padding: 14px; margin-bottom: 24px; }
.ajp-filter input[type="search"] { flex: 2 1 260px; }
.ajp-filter select { flex: 1 1 160px; }
.ajp-filter input, .ajp-filter select { min-height: 48px; padding: 10px 12px; border: 1px solid #C9D1DB; border-radius: 10px; font: inherit; font-size: 15px; color: var(--ajp-ink); background: #fff; max-width: none; margin: 0; }
.ajp-filter .ajp-btn { flex: 0 0 auto; }
.ajp-jobs { display: flex; flex-direction: column; gap: 12px; }
.ajp-jobcard { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--ajp-line); border-radius: 12px; padding: 20px; }
.ajp-jobcard .ajp-logo { width: 52px; height: 52px; flex-basis: 52px; border-radius: 12px; font-size: 19px; }
.ajp-jobcard-body { flex: 1 1 auto; min-width: 0; }
.ajp-jobcard h3 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.ajp-jobcard h3 a { color: var(--ajp-ink); text-decoration: none; }
.ajp-jobcard h3 a:hover { text-decoration: underline; }
.ajp-jobcard-co { margin: 2px 0 0 !important; font-size: 15px; color: var(--ajp-ink-3); }
.ajp-jobcard-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; text-align: right; }
.ajp-empty { text-align: center; }
.ajp-pagination { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.ajp-pagination .page-numbers { display: inline-block; min-width: 44px; padding: 10px 14px; text-align: center; background: #fff; border: 1px solid var(--ajp-line); border-radius: 8px; text-decoration: none; color: var(--ajp-ink); }
.ajp-pagination .current { background: var(--ajp-ink); border-color: var(--ajp-ink); color: #fff; }
.ajp-more { margin-top: 16px; }

@media (max-width: 720px) {
	.ajp-wrap { padding: 16px 16px 48px; }
	.ajp-card, .ajp-hero { padding: 22px 18px; }
	.ajp-title { font-size: 27px; }
	.ajp-dl, .ajp-cols { grid-template-columns: minmax(0, 1fr); }
	.ajp-actions, .ajp-actions .ajp-btn { width: 100%; }
	.ajp-jobcard { flex-wrap: wrap; }
	.ajp-jobcard-meta { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

.ajp-summary p { white-space: pre-line; }

.ajp-dl dd { overflow-wrap: anywhere; }