/* ============================================================================
   AksesKerja — Public landing page (logged-out)
   Reuses the marketplace token + component vocabulary. Same 1280px container
   as the app so the public surface and the product feel like one product.
   ========================================================================== */

.lp { min-height:100%; background:var(--bg-app); display:flex; flex-direction:column; }
.lp-wrap { width:100%; max-width:var(--page-max); margin:0 auto; padding:0 var(--space-8); }

/* ---- Public top bar ---- */
.lp-nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); flex:none; }
.lp-nav-inner { height:68px; display:flex; align-items:center; gap:var(--space-5); }
.lp-nav-links { display:flex; align-items:center; gap:var(--space-1); margin-left:var(--space-4); }
.lp-nav-link { border:none; background:transparent; font-family:inherit; font-size:var(--body-md-size); font-weight:700;
  color:var(--ink-600); padding:8px var(--space-3); border-radius:var(--radius-btn); cursor:pointer; transition:all .15s; }
.lp-nav-link:hover { color:var(--brand-blue); background:var(--bg-tinted); }
.lp-nav-cta { display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
@media (max-width:820px){ .lp-nav-links { display:none; } }

/* ---- Hero ---- */
.lp-hero { background:var(--brand-blue); padding:56px 0 52px; flex:none; }
.lp-hero h1 { font-size:44px; line-height:1.1; font-weight:800; letter-spacing:-.03em; color:#fff; margin-top:var(--space-3);
  max-width:16ch; text-wrap:pretty; }
.lp-hero p { font-size:var(--body-lg-size); font-weight:600; color:#DBEAFE; margin-top:var(--space-4); max-width:52ch; line-height:1.55; }
.lp-hero .eyebrow { color:#93C5FD; }
@media (max-width:720px){ .lp-hero h1 { font-size:32px; } .lp-hero { padding:40px 0 36px; } }

/* search — white card floating on the blue */
.lp-search { display:flex; gap:var(--space-2); background:#fff; border-radius:var(--radius-card); padding:var(--space-2);
  margin-top:var(--space-8); box-shadow:0 12px 32px rgba(15,23,42,.16); }
.lp-search-field { flex:1; display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); min-width:0; }
.lp-search-field + .lp-search-field { border-left:1px solid var(--border); }
.lp-search-field input { flex:1; border:none; outline:none; font-family:inherit; font-size:var(--body-md-size);
  font-weight:600; color:var(--ink-900); background:transparent; padding:14px 0; min-width:0; }
.lp-search-field input::placeholder { color:var(--ink-400); font-weight:600; }
@media (max-width:720px){
  .lp-search { flex-direction:column; }
  .lp-search-field + .lp-search-field { border-left:none; border-top:1px solid var(--border); }
}

.lp-kw { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-5); }
.lp-kw-label { font-size:var(--label-md-size); font-weight:700; color:#BFDBFE; }
.lp-kw button { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;
  font-family:inherit; font-size:var(--label-md-size); font-weight:700; padding:6px var(--space-3);
  border-radius:var(--radius-btn); cursor:pointer; transition:all .15s; }
.lp-kw button:hover { background:#fff; color:var(--brand-blue); border-color:#fff; }

/* trust stats — spread across the full hero width to balance the full-width search */
.lp-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--space-8);
  border-top:1px solid rgba(255,255,255,.22); padding-top:var(--space-6); }
.lp-stats > * + * { border-left:1px solid rgba(255,255,255,.22); padding-left:var(--space-6); }
.lp-stat-n { font-size:var(--headline-lg-size); font-weight:800; color:#fff; letter-spacing:-.02em; }
.lp-stat-l { font-size:var(--label-md-size); font-weight:700; color:#BFDBFE; margin-top:2px; }
@media (max-width:720px){
  .lp-stats { grid-template-columns:1fr; gap:var(--space-4); }
  .lp-stats > * + * { border-left:none; padding-left:0; }
}

/* ---- Job list section ---- */
.lp-section { padding:var(--space-10) 0; }
.lp-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-bottom:var(--space-5); }
.lp-sec-head h2 { font-size:var(--title-size); font-weight:800; letter-spacing:-.02em; color:var(--ink-900); }
.lp-filters { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.lp-filter { border:1px solid var(--border); background:#fff; font-family:inherit; font-size:var(--label-md-size);
  font-weight:700; color:var(--ink-600); padding:7px var(--space-4); border-radius:var(--radius-btn);
  cursor:pointer; transition:all .15s; }
.lp-filter:hover { border-color:var(--ink-300); color:var(--ink-800); }
.lp-filter.on { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/* job rows reuse the in-app .card .mkt-card .mkt-row vocabulary verbatim */
.lp-more { display:flex; justify-content:center; margin-top:var(--space-5); }
.lp-more-link { display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
  padding:var(--space-2) var(--space-3); font-family:inherit; font-size:var(--label-md-size); font-weight:800;
  color:var(--brand-blue); text-decoration:none; border-radius:var(--radius-btn); transition:color .15s, background .15s; }
.lp-more-link:hover { color:var(--brand-blue-hover); background:var(--brand-blue-light); }
/* the reveal ceiling turns into the signup ask */
.lp-more-cap { display:inline-flex; align-items:center; gap:7px; padding:11px var(--space-6); border-radius:var(--radius-btn);
  background:var(--brand-blue); color:#fff; font-size:var(--body-md-size); font-weight:800; text-decoration:none;
  box-shadow:var(--shadow-cta); transition:background .15s; }
.lp-more-cap:hover { background:var(--brand-blue-hover); }

/* ---- Value props ---- */
.lp-value { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lp-value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-4); }
@media (max-width:620px){ .lp-value-grid { grid-template-columns:1fr; } }
.lp-vcard { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-5) var(--space-6); border:1px solid var(--border);
  border-radius:var(--radius-card); background:#fff; transition:all .15s; text-decoration:none; }
/* only the two live tools are links — Discover Me ("Segera") stays inert */
.lp-vcard.is-link { cursor:pointer; }
.lp-vcard.is-link:hover { border-color:var(--brand-blue); box-shadow:var(--shadow-sm); }
.lp-vgo { color:var(--ink-300); flex:none; transition:color .15s; }
.lp-vcard.is-link:hover .lp-vgo { color:var(--brand-blue); }
.lp-vicon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.lp-vcard h3 { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); white-space:nowrap; }
.lp-vcard p { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); line-height:1.5; margin-top:4px; }

/* ---- Closing CTA + footer ---- */
.lp-cta { padding:var(--space-10) 0; }
.lp-cta-card { background:var(--brand-blue); border-radius:var(--radius-lg); padding:44px var(--space-10);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.lp-cta-card h2 { font-size:var(--headline-lg-size); font-weight:800; letter-spacing:-.02em; color:#fff; max-width:18ch; text-wrap:pretty; }
.lp-cta-card p { font-size:var(--body-md-size); font-weight:600; color:#DBEAFE; margin-top:var(--space-2); max-width:44ch; }
@media (max-width:720px){ .lp-cta-card { padding:var(--space-8) var(--space-6); } .lp-cta-card h2 { font-size:var(--title-size); } }

.lp-foot { border-top:1px solid var(--border); background:#fff; padding:var(--space-6) 0; }
.lp-foot-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.lp-foot-links { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.lp-foot-links a { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); text-decoration:none; transition:color .15s; }
.lp-foot-links a:hover { color:var(--brand-blue); }
.lp-foot-copy { font-size:var(--label-md-size); font-weight:600; color:var(--ink-400); }


/* ---- phone tap targets: keyword pills, filters & nav links sat at 29px ---- */
@media (max-width: 700px) {
  .lp-kw button,
  .lp-filter,
  .lp-nav-link,
  .lp-more-link,
  .lp-more-cap,
  .lp-foot-links a,
  .btn { min-height: 44px; }
  .lp-kw button, .lp-filter { display: inline-flex; align-items: center; }
  .lp-foot-links a { display: inline-flex; align-items: center; }
}

/* ============================================================================
   SEARCH BRIDGE — the card straddles the hero/results boundary.
   Search used to live in the hero while the list carried its own filter row, so
   one list had two control surfaces in two sections with the stats block between
   them: you filtered, and a marketing panel answered. A single card sitting ON
   the seam belongs to both sections, so the join stops being a divider.
   ============================================================================ */
.lp-bridge { position:relative; z-index:2; height:0; }
/* translateY(-50%) resolves against the card's OWN height, so exactly half sits
   in the blue whatever the card contains — a fixed pixel pull cannot, and drifts
   the moment a row is added. Clearance above and below is reserved by the
   neighbouring sections, sized from the same --lp-card-h. */
.lp-bridge-card { transform:translateY(-50%); background:#fff; border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg); padding:var(--space-4); }
:root { --lp-card-h:112px; }
.lp-hero { padding-bottom:calc(var(--lp-card-h) / 2 + var(--space-8)); }
#lowongan { padding-top:calc(var(--lp-card-h) / 2 + var(--space-8)); }

/* the group border was dropped to avoid a box inside a box, which left the inputs
   with no edges at all — each field carries its own instead */
.lp-bridge-card .lp-search { box-shadow:none; border:none; padding:0; background:none; gap:10px; margin-top:0; }
.lp-bridge-card .lp-search-field { border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-muted); padding:0 13px; height:44px; }
.lp-bridge-card .lp-search-field:focus-within { border-color:var(--brand-blue); background:#fff;
  box-shadow:0 0 0 3px var(--brand-blue-light); }
.lp-bridge-card .lp-search-field input { font-size:var(--body-md-size); }

/* keywords fill the search box, so they are text links; the chips on the list are
   toggles and keep the pills — two identical pill rows read as one stack */
.lp-bridge-card .lp-kw { margin-top:11px; gap:var(--space-3); }
.lp-bridge-card .lp-kw button { border:none; background:none; padding:2px 0; color:var(--t-accent);
  font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.lp-bridge-card .lp-kw button:hover { color:var(--brand-blue-hover); }

/* ---- List header: filters + the count they produce, as one block ---- */
.lp-listhead { display:flex; flex-direction:column; gap:9px; margin-bottom:var(--space-5); }
.lp-listhead .lp-filters { gap:6px; flex-wrap:wrap; }
.lp-listhead-report { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.lp-count { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }
.lp-count b { font-weight:800; color:var(--ink-900); }
.lp-clear { margin-left:auto; border:none; background:none; font-family:inherit;
  font-size:var(--label-md-size); font-weight:800; color:var(--t-accent); cursor:pointer; text-decoration:underline; }

/* hero type sized for the height of its band */
.lp-hero h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.12; letter-spacing:-.03em; max-width:22ch; }
.lp-hero p { font-size:var(--body-lg-size); max-width:52ch; }

/* one Lamar button for every row and every visitor — the quota is the apply
   dialog's business, so the row action carries no state about it */
.lp .mkt-row-right .btn-primary { padding:11px 22px; font-size:var(--body-md-size); font-weight:800; }

@media (max-width:700px){
  /* the fields stack, so the card is much taller and the reserved space follows */
  :root { --lp-card-h:180px; }
  .lp-bridge-card .lp-search { flex-direction:column; }
  .lp-bridge-card .lp-search-field { width:100%; }
}

/* The list header replaced .lp-sec-head, so it must not inherit that block's
   spacing: chips carry their own padding, so the report line needs real air
   beneath them rather than the 9px that read as a collapsed gap. */
#lowongan .lp-listhead { gap:var(--space-3); margin-bottom:var(--space-5); }
#lowongan .lp-listhead-report { padding-top:var(--space-1); }
#lowongan .lp-sec-head { margin-bottom:0; }

/* ---- Quick apply dialog (landing) ------------------------------------------- */
.la-head { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border-soft); }
.la-head-t { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); }
.la-head-c { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); margin-top:2px; }
.la-body { padding:var(--space-5) var(--space-6); max-height:58vh; overflow-y:auto; }
.la-cv { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px;
  border:1px dashed var(--border); border-radius:var(--radius); background:var(--surface-muted);
  font-family:inherit; font-size:var(--body-md-size); font-weight:700; color:var(--ink-600); cursor:pointer; }
.la-cv:hover { border-color:var(--brand-blue); color:var(--brand-blue); background:var(--bg-tinted); }
.la-foot { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:14px var(--space-6); border-top:1px solid var(--border-soft); }
.la-sent { padding:26px; text-align:center; }
.la-sent-ic { width:52px; height:52px; border-radius:var(--radius-md); margin:0 auto var(--space-4);
  display:flex; align-items:center; justify-content:center; background:var(--success-soft); color:var(--success-ink); }
.la-sent h3 { font-size:var(--headline-md-size); font-weight:800; color:var(--ink-900); margin:0; }
.la-sent-job { display:flex; align-items:center; gap:12px; margin-top:var(--space-4); padding:13px;
  background:var(--surface-muted); border-radius:var(--radius-md); text-align:left; }
.la-sent-t { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.la-sent-c { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }
.la-sent > p { font-size:var(--label-md-size); font-weight:600; color:var(--ink-600); line-height:1.6;
  margin:var(--space-4) 0 0; text-wrap:pretty; }
.la-sent > p b { font-weight:800; color:var(--ink-900); }
.la-sent-act { display:flex; gap:10px; margin-top:var(--space-5); }
.la-sent-act > * { flex:1 1 0; justify-content:center; }
@media (max-width:520px){ .la-sent-act { flex-direction:column; } }

.la-field { margin-bottom:var(--space-4); }
.la-field-top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:6px; }
.la-lab { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); }
.la-lab i { font-style:normal; color:var(--danger); }
.la-hint { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }
.la-err { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:var(--label-md-size); font-weight:700; color:var(--danger); }
.la-body .input { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; font-family:inherit; font-size:var(--body-md-size); font-weight:600; color:var(--ink-900); }
.la-body .input:focus { outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); }
.la-body textarea.input { resize:vertical; line-height:1.6; }

/* Guest quota, as pips + one clause. The old "Lamaran ke- 1 dari 5 tanpa akun"
   broke awkwardly at the hyphen and the bold numerals opened gaps mid-sentence.
   The pips carry the quantity, so the words only have to name it. */
.quota { display:inline-flex; align-items:center; gap:9px; }
.quota-pips { display:inline-flex; gap:4px; }
.quota-pips i { width:7px; height:7px; border-radius:9999px; background:var(--border); }
/* filled = already used, so a nearly-full row reads as "almost gone" at a glance */
.quota-pips i.on { background:var(--brand-blue); }
.quota-txt { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); white-space:nowrap; }
.quota-txt b { font-weight:800; color:var(--ink-900); }
/* the last one is the only state that warns */
.quota:has(.quota-pips i:nth-child(5).on) .quota-txt,
.quota-txt b:only-child { color:var(--ink-900); }

/* The count reports on the ROWS, so it sits close to them — previously it floated
   equidistant between the chips above and the first card below, belonging to
   neither. Space is taken from below the count and given to above it. */
#lowongan .lp-listhead { gap:var(--space-4); margin-bottom:var(--space-2); }
#lowongan .lp-listhead-report { padding-top:0; }

/* The quota is information, not a control, so it sits above the action row rather
   than competing with Batal and Kirim for the same line. */
.la-quota { padding:11px var(--space-6); border-top:1px solid var(--border-soft); background:var(--surface-muted); }

#lowongan .lp-listhead { gap:18px; }

/* The quota strip spans the dialog's full width, so a left-aligned line left a
   long empty run to its right; centred, the strip reads as one band rather than
   a label stranded in it. */
.la-quota { display:flex; justify-content:center; }