/* ==========================================================================
   Lokarir — design system
   Satu file CSS untuk semua halaman. Tanpa Tailwind CDN (dulu tiap halaman
   nunggu ~300KB JS cuma buat styling, dan config-nya kebawa di tiap file).
   Brand: ungu #6d28d9 (aksi utama) + oranye #f97316 (aksen).
   ========================================================================== */

:root {
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #5321E0;   /* diukur dari logo resmi */
  --brand-800: #3f169e;

  --accent-50:  #fff7ed;
  --accent-100: #ffedd5;
  --accent-500: #f97316;
  --accent-600: #ea580c;

  --ink-900: #14142b;
  --ink-800: #1f2044;
  --ink-700: #35365c;
  --ink-500: #61628a;
  --ink-400: #8b8ca8;
  --ink-300: #b9bacb;

  --surface:      #ffffff;
  --surface-soft: #f8f7fd;
  --surface-tint: #f2f0fb;
  --border:       #e6e4f2;
  --border-strong:#d5d2e8;

  --ok-50: #ecfdf5; --ok-500: #10b981; --ok-700: #047857;
  --warn-50:#fffbeb; --warn-500:#f59e0b; --warn-700:#b45309;
  --err-50: #fef2f2; --err-500: #ef4444; --err-700: #b91c1c;
  --info-50:#eff6ff; --info-500:#3b82f6; --info-700:#1d4ed8;

  /* --- skala tipografi ---------------------------------------------------
     Sebelumnya skalanya belah dua: judul 48px lalu langsung terjun ke teks
     11,8px, tanpa ukuran tengah. Di HP kelas menengah teks 12px susah dibaca,
     dan sasaran kami justru orang yang melamar lewat HP. Lantainya dinaikkan:
     tidak ada teks di bawah 13px, badan tetap 16px, judul dikecilkan supaya
     jaraknya ke badan tidak menganga. */
  --fs-display: 2.25rem;   /* 36px — judul hero, dulu 48px */
  --fs-h1:      1.75rem;   /* 28px */
  --fs-h2:      1.375rem;  /* 22px */
  --fs-h3:      1.0625rem; /* 17px */
  --fs-body:    1rem;      /* 16px */
  --fs-sm:      0.9375rem; /* 15px — teks pendukung, dulu 12,8px */
  --fs-xs:      0.8125rem; /* 13px — LANTAI. Jangan bikin lebih kecil dari ini */

  /* --- ritme vertikal ----------------------------------------------------
     Jarak antar seksi besar dulu cuma 28px sehingga semuanya terasa mepet.
     Sekarang seksi bernapas; di dalam seksi tetap rapat supaya tetap terbaca
     sebagai satu kesatuan. */
  --space-section: 3.5rem; /* 56px di mobile, jadi 80px di layar lebar */
  --space-block:   1.5rem;
  --space-tight:   0.75rem;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 43, .06), 0 1px 3px rgba(20, 20, 43, .04);
  --shadow:    0 4px 12px rgba(20, 20, 43, .06), 0 1px 3px rgba(20, 20, 43, .04);
  --shadow-lg: 0 18px 40px -12px rgba(76, 29, 149, .22);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--surface-soft);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; color: var(--ink-900); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body); }
p  { margin: 0 0 1em; }
a  { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
small { font-size: var(--fs-xs); }
.skip-link { position:fixed; left:12px; top:10px; z-index:500; padding:10px 14px; border-radius:8px; background:#242130; color:#fff; font-size:.8125rem; font-weight:700; transform:translateY(-160%); transition:transform .16s ease; }
.skip-link:focus { transform:translateY(0); outline:3px solid #c4b5fd; outline-offset:2px; text-decoration:none; }

/* --- layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-sm{ display: flex; flex-direction: column; gap: 8px; }
.stack-lg{ display: flex; flex-direction: column; gap: var(--space-section); }
.row  { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hidden { display: none !important; }
.muted { color: var(--ink-500); }
.tiny { font-size: var(--fs-xs); line-height: 1.55; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.grid-detail  { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

@media (min-width: 900px) {
  :root { --space-section: 5rem; }   /* 80px di layar lebar */
}

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar, .grid-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }

  /* Sasaran kami melamar lewat HP, sering sambil berdiri atau di angkutan.
     Ambangnya: aksi utama 48px, aksi kedua 44px, chip 40px — tidak ada yang
     di bawah itu, karena target kecil memaksa orang membidik dua kali. */
  .btn      { min-height: 48px; padding: 13px 22px; }
  .btn-sm   { min-height: 44px; padding: 11px 16px; font-size: var(--fs-sm); }
  .btn-icon { min-height: 44px; width: 44px; }
  .chip     { min-height: 40px; padding: 9px 16px; }
  .input, .select, .textarea { min-height: 48px; font-size: var(--fs-body); }
  .card { padding: 18px 16px; }
  .wrap { padding: 0 16px; }

  /* Kolom pencarian jadi bertumpuk; tombolnya melebar penuh supaya jadi
     sasaran paling gampang di layar. */
  .searchbar-hero { padding: 8px; gap: 10px; }
  .searchbar-hero .btn { width: 100%; }

  /* Kartu lowongan: logo dikecilkan supaya judul dapat ruang lebih. */
  .job-card { padding: 16px; gap: 12px; }
  .job-card .logo-box { width: 44px; height: 44px; flex-basis: 44px; font-size: .95rem; }
  .job-card h3 { font-size: var(--fs-body); }

  /* Judul seksi dan tautannya menumpuk, bukan berdesakan satu baris. */
  .section-title { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- header publik ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
/* Logo penuh (lambang + tulisan) dipakai apa adanya — tidak lagi menyusun
   ikon + teks "Lokarir" sendiri, karena jarak dan berat hurufnya jadi tidak
   pernah sama persis dengan logo resminya. Tinggi yang diatur, lebar mengikuti. */
.logo { display: inline-flex; align-items: center; }
.logo:hover { text-decoration: none; opacity: .85; }
.logo img { height: 34px; width: auto; }
@media (max-width: 620px) { .logo img { height: 30px; } }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; color: var(--ink-700);
  font-weight: 600; font-size: var(--fs-sm);
}
.nav-links a:hover { background: var(--surface-tint); text-decoration: none; color: var(--brand-700); }
.nav-links a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Spesifisitas 2 kelas supaya menang atas .btn { display: inline-flex } */
.header-actions .nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; gap: 2px;
  }
  .header-actions .nav-toggle { display: inline-flex; }
}

/* --- tombol ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand-700); color: #fff; box-shadow: 0 6px 16px -6px rgba(109,40,217,.6); }
.btn-primary:hover:not(:disabled) { background: var(--brand-800); }
.btn-accent { background: var(--accent-500); color: #fff; box-shadow: 0 6px 16px -6px rgba(249,115,22,.55); }
.btn-accent:hover:not(:disabled) { background: var(--accent-600); }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-tint); color: var(--brand-700); border-color: var(--brand-200); }
.btn-soft { background: var(--brand-50); color: var(--brand-700); }
.btn-soft:hover:not(:disabled) { background: var(--brand-100); }
.btn-danger { background: var(--err-50); color: var(--err-700); border-color: #fecaca; }
.btn-danger:hover:not(:disabled) { background: #fee2e2; }
.btn-sm { padding: 9px 15px; font-size: var(--fs-xs); }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 36px; height: 36px; border-radius: 50%; }

/* --- kartu -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
}
.card-flat { box-shadow: none; }
.card-pad-sm { padding: 14px 16px; }
.card-link { display: block; color: inherit; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.card-link:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--brand-200); transform: translateY(-2px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-block); }
.card-head h2, .card-head h3 { margin: 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--space-block); }
.divider { height: 1px; background: var(--border); border: 0; margin: 18px 0; }

/* --- badge / chip ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
  background: var(--surface-tint); color: var(--ink-700); white-space: nowrap;
}
.badge-brand { background: var(--brand-50); color: var(--brand-700); }
.badge-accent { background: var(--accent-50); color: var(--accent-600); }
.badge-ok   { background: var(--ok-50);   color: var(--ok-700); }
.badge-warn { background: var(--warn-50); color: var(--warn-700); }
.badge-err  { background: var(--err-50);  color: var(--err-700); }
.badge-info { background: var(--info-50); color: var(--info-700); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-500); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); cursor: pointer;
  transition: all .12s ease;
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-700); }
.chip[aria-pressed="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* --- form --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.field .help { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.55; }
.input, .select, .textarea {
  width: 100%; padding: 11px 14px; font-family: var(--font); font-size: .92rem; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.select {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2361628a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--brand-700); width: 16px; height: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.searchbar {
  display: flex; gap: 8px; padding: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.searchbar .input, .searchbar .select { border: none; background: transparent; box-shadow: none; }
.searchbar .input:focus, .searchbar .select:focus { box-shadow: none; }
.searchbar .divider-v { width: 1px; background: var(--border); margin: 6px 0; }
@media (max-width: 700px) {
  .searchbar { flex-direction: column; border-radius: var(--radius-lg); }
  .searchbar .divider-v { display: none; }
  .searchbar .input, .searchbar .select { border: 1px solid var(--border-strong); border-radius: var(--radius); }
}

/* --- alert / toast ------------------------------------------------------ */
.alert {
  padding: 13px 16px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid transparent; display: flex; gap: 9px; align-items: flex-start;
}
.alert-err  { background: var(--err-50);  color: var(--err-700);  border-color: #fecaca; }
.alert-ok   { background: var(--ok-50);   color: var(--ok-700);   border-color: #a7f3d0; }
.alert-warn { background: var(--warn-50); color: var(--warn-700); border-color: #fde68a; }
.alert-info { background: var(--info-50); color: var(--info-700); border-color: #bfdbfe; }

#toasts {
  position: fixed; z-index: 200; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  width: calc(100% - 32px); max-width: 460px;
}
.toast {
  pointer-events: auto; width: 100%; padding: 12px 16px; border-radius: var(--radius);
  background: var(--ink-900); color: #fff; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow-lg); animation: toast-in .2s ease;
}
.toast-ok  { background: #065f46; }
.toast-err { background: #991b1b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- kartu lowongan ----------------------------------------------------- */
.job-card { display: flex; gap: 14px; padding: 20px; }
.job-card .logo-box {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: var(--radius);
  background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; overflow: hidden;
}
.job-card h3 { font-size: var(--fs-h3); margin-bottom: 3px; line-height: 1.35; }
.job-card .company { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--ink-500); margin-top: 10px; }
.job-meta span { display: inline-flex; align-items: center; gap: 5px; }
.salary { font-weight: 700; color: var(--ok-700); font-size: var(--fs-sm); }

.empty {
  padding: 48px 24px; text-align: center; color: var(--ink-500);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
}
.empty .icon { font-size: 2rem; margin-bottom: 8px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-tint) 25%, #eceafa 50%, var(--surface-tint) 75%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius);
  height: 92px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- statistik ---------------------------------------------------------- */
.stat { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.stat .num { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); line-height: 1.15; letter-spacing: -.02em; }
.stat .lbl { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; margin-top: 4px; }
.stat-brand  { background: var(--brand-50);  border-color: var(--brand-100); }
.stat-brand .num { color: var(--brand-700); }
.stat-accent { background: var(--accent-50); border-color: var(--accent-100); }
.stat-accent .num { color: var(--accent-600); }
.stat-ok { background: var(--ok-50); border-color: #a7f3d0; }
.stat-ok .num { color: var(--ok-700); }

/* --- tabel -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
table.tbl th {
  text-align: left; padding: 12px 14px; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-500); background: var(--surface-soft);
  border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 700;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-soft); }

/* --- tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  padding: 10px 16px; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: .9rem; font-weight: 700; color: var(--ink-500);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--brand-700); }
.tabs button[aria-selected="true"] { color: var(--brand-700); border-bottom-color: var(--brand-700); }

/* --- dashboard shell ---------------------------------------------------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { display: grid; grid-template-columns: 80px minmax(0, 1fr); min-height: 100vh; }
.app-side {
  position: sticky; top: 0; z-index: 50; height: 100vh; padding: 14px 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92); border-right: 1px solid #e8e6ef;
  box-shadow: 8px 0 28px rgba(35,25,67,.035); backdrop-filter: blur(18px);
  overflow: visible;
}
.side-brand {
  position: relative; display: grid; place-items: center; flex: 0 0 50px;
  width: 50px; height: 50px; margin-bottom: 2px; border-radius: 16px;
  background: linear-gradient(145deg,#f5f1ff,#fff); border: 1px solid #ebe5fc;
  box-shadow: 0 7px 18px rgba(80,29,200,.09); transition: transform .16s ease, box-shadow .16s ease;
}
.side-brand:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(80,29,200,.14); }
.side-brand img { width: 34px; height: 34px; object-fit: contain; }
.side-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.app-side a.nav-item, .app-side button.nav-item {
  position: relative; display: grid; place-items: center; flex: 0 0 46px;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px;
  background: transparent; color: #66647a; cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.app-side .nav-item svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.nav-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.app-side .nav-item:hover, .app-side .nav-item:focus-visible {
  background: #f3f0fb; color: var(--brand-700); text-decoration: none; transform: translateY(-1px);
}
.app-side .nav-item:focus-visible { outline: 3px solid rgba(80,29,200,.16); outline-offset: 2px; }
.app-side .nav-item[aria-current="true"] {
  color: #fff; background: linear-gradient(145deg,#6840d7,#4d19bd);
  box-shadow: 0 7px 16px rgba(80,29,200,.25);
}
.app-side .nav-item[aria-current="true"]::before {
  content: ''; position: absolute; left: -12px; width: 3px; height: 22px;
  border-radius: 0 8px 8px 0; background: var(--brand-700);
}
.app-side [data-label]::after {
  content: attr(data-label); position: absolute; left: calc(100% + 13px); top: 50%; z-index: 200;
  padding: 8px 11px; border-radius: 9px; background: #242130; color: #fff;
  box-shadow: 0 8px 24px rgba(22,17,36,.2); font: 650 .76rem/1.2 var(--font);
  letter-spacing: -.01em; white-space: nowrap; pointer-events: none; opacity: 0;
  transform: translate(-5px,-50%); transition: opacity .14s ease, transform .14s ease;
}
.app-side [data-label]:hover::after, .app-side [data-label]:focus-visible::after {
  opacity: 1; transform: translate(0,-50%);
}
.app-side .nav-item .count {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px;
  background: #e64567; color: #fff; font-size: .58rem; line-height: 1; font-weight: 800;
}
.app-side .spacer { flex: 1; min-height: 8px; }
.app-side .side-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid #eceaf1; }
.app-side .nav-danger:hover, .app-side .nav-danger:focus-visible { color: #c93953; background: #fff0f2; }
@media (min-width: 901px) and (max-height: 900px) {
  .app-side { padding-top: 10px; padding-bottom: 8px; gap: 7px; }
  .side-brand { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  .side-brand img { width: 30px; height: 30px; }
  .side-nav, .app-side .side-foot { gap: 2px; }
  .app-side a.nav-item, .app-side button.nav-item { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .app-side .nav-item svg { width: 19px; height: 19px; }
  .app-side .side-foot { padding-top: 6px; }
}
.app-main { padding: 26px 28px 60px; min-width: 0; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.app-topbar h1 { font-size: 1.5rem; margin: 0; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 800; font-size: .82rem; flex: 0 0 38px;
}
.avatar-sm { width: 32px; height: 32px; flex-basis: 32px; font-size: var(--fs-xs); }
.avatar-lg { width: 62px; height: 62px; flex-basis: 62px; font-size: 1.3rem; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-side {
    position: sticky; top: 0; height: 78px; width: 100%; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--border); padding: 9px 12px;
    align-items: center; justify-content: flex-start; gap: 9px; scrollbar-width: none;
  }
  .app-side::-webkit-scrollbar { display: none; }
  .side-brand { flex-basis: 46px; width: 46px; height: 46px; margin: 0; }
  .side-brand img { width: 31px; height: 31px; }
  .side-nav { flex-direction: row; gap: 4px; }
  .app-side a.nav-item, .app-side button.nav-item { display:flex; flex-direction:column; gap:3px; width:auto; min-width:70px; height:58px; flex-basis:70px; border-radius:12px; }
  .app-side .nav-item svg { width:20px; height:20px; }
  .app-side .nav-label { position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:nowrap; font-size:.625rem; line-height:1; font-weight:650; }
  .app-side .spacer, .app-side .side-foot { display: none; }
  .app-side [data-label]::after { display: none; }
  .app-side .nav-item[aria-current="true"]::before { left: 50%; top: auto; bottom: -11px; width: 20px; height: 3px; transform: translateX(-50%); border-radius: 8px 8px 0 0; }
  .app-main { padding: 18px 16px 60px; }
}

/* --- recruiter console design system ---------------------------------- */
.app-main {
  --console-ink: #24212b; --console-muted: #686471; --console-faint: #898590;
  --console-line: #e5e2e8; --console-soft: #f7f6f8; --console-brand: #5826c7;
  background:#f8f7f9; color:var(--console-ink);
}
.app-main #panel { max-width:1380px; margin:0 auto; }
.app-topbar { max-width:1380px; margin:0 auto 28px; padding-bottom:18px; border-bottom:1px solid var(--console-line); }
.app-topbar h1 { font-size:1.5rem; line-height:1.25; letter-spacing:-.035em; color:var(--console-ink); }
.app-topbar p { margin-top:5px; color:var(--console-muted); font-size:.8125rem; line-height:1.5; }
.app-main .card-head { align-items:flex-end; margin-bottom:18px; }
.app-main .card-head h2 { font-size:1.25rem; line-height:1.3; letter-spacing:-.025em; }
.app-main .card-head h3,.app-main .section-title h2 { font-size:1rem; line-height:1.4; letter-spacing:-.015em; }
.app-main .card-head p { max-width:680px; margin-top:5px; font-size:.8125rem!important; line-height:1.55; color:var(--console-muted); }
.app-main .section-title { margin:24px 0 12px; align-items:center; }
.app-main .card { border:1px solid var(--console-line); border-radius:12px; box-shadow:none; }
.app-main .card:hover { box-shadow:none; }
.app-main .stat { position:relative; padding:16px 18px; border:1px solid var(--console-line); border-radius:10px; background:#fff; overflow:hidden; }
.app-main .stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#c9c5cd; }
.app-main .stat-brand::before { background:var(--console-brand); }.app-main .stat-accent::before{background:#b26b2c}.app-main .stat-ok::before{background:#238467}
.app-main .stat-brand,.app-main .stat-accent,.app-main .stat-ok { background:#fff; border-color:var(--console-line); }
.app-main .stat .num { color:var(--console-ink); font-size:1.375rem; font-variant-numeric:tabular-nums; }
.app-main .stat-brand .num,.app-main .stat-accent .num,.app-main .stat-ok .num{color:var(--console-ink)}
.app-main .stat .lbl { color:var(--console-muted); font-size:.75rem; font-weight:600; }
.app-main .table-wrap { border:1px solid var(--console-line); border-radius:10px; box-shadow:none; background:#fff; }
.app-main table.tbl { font-size:.8125rem; }
.app-main table.tbl th { padding:11px 14px; background:#f8f7f9; color:#5f5b65; border-bottom-color:var(--console-line); font-size:.6875rem; letter-spacing:.045em; }
.app-main table.tbl td { padding:13px 14px; border-bottom-color:#ece9ee; }
.app-main .table-empty { padding:34px 16px; text-align:center; color:var(--console-muted); font-size:.8125rem; line-height:1.5; }
.app-main table.tbl tbody tr { transition:background .16s ease; }.app-main table.tbl tbody tr:hover{background:#faf9fb}
.app-main .btn { min-height:40px; border-radius:8px; transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; }
.app-main .btn,.app-main .chip,.app-main button,.app-main a.btn { touch-action:manipulation; }
.app-main .btn:active,.app-main .chip:active { opacity:.82; }
.app-main .btn-sm { min-height:36px; padding-top:7px; padding-bottom:7px; }
.app-main .btn-primary { background:var(--console-brand); border-color:var(--console-brand); box-shadow:none; }
.app-main .btn-primary:hover { background:#4617ae; border-color:#4617ae; box-shadow:none; transform:none; }
.app-main .btn:focus-visible,.app-main .chip:focus-visible { outline:2px solid var(--console-brand); outline-offset:2px; }
.app-main .btn:disabled { opacity:.45; cursor:not-allowed; }
.app-main .chip { min-height:36px; padding:7px 12px; border-radius:999px; border-color:#d9d5dd; background:#fff; color:#57525e; font-size:.75rem; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.app-main .chip:hover { border-color:#ad9acb; background:#faf8fd; }.app-main .chip[aria-pressed="true"]{background:#ede7f8;border-color:#cfc0ec;color:#4c1cae;box-shadow:none}
.app-main .input,.app-main .select,.app-main .textarea { border-color:#d7d3dc; border-radius:8px; background:#fff; color:var(--console-ink); }
.app-main .input,.app-main .select { min-height:44px; }.app-main .input:focus,.app-main .select:focus,.app-main .textarea:focus{border-color:#7450cc;box-shadow:0 0 0 3px #eee8fa}
.app-main .badge { border-radius:999px; font-size:.6875rem; line-height:1.35; letter-spacing:0; }
.app-main .alert { border-radius:9px; box-shadow:none; font-size:.8125rem; line-height:1.55; }
.app-main .alert-mark { display:inline-grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-top:1px; border:1px solid currentColor; border-radius:50%; font-size:.6875rem; line-height:1; font-weight:800; font-style:normal; opacity:.82; }
.app-main .job-meta { gap:6px 12px; margin-top:10px; color:var(--console-muted); font-size:.75rem; }
.app-main .empty.admin-empty { min-height:210px; padding:42px 20px; border:1px dashed #d4d0d8; border-radius:10px; background:#fbfafc; }
.admin-empty-mark { position:relative; display:grid; place-items:center; width:50px; height:50px; margin:0 auto 14px; border:1px solid #d4cae7; border-radius:50%; background:#f7f3fc; }
.admin-empty-mark::before,.admin-empty-mark i { content:''; display:block; border-radius:50%; background:var(--console-brand); }.admin-empty-mark::before{width:15px;height:15px}.admin-empty-mark i{position:absolute;width:7px;height:7px;right:2px;top:6px;background:#2b9177}
.app-main .empty.admin-empty strong { display:block; color:var(--console-ink); font-size:.9375rem; }.app-main .empty.admin-empty p{max-width:440px;margin:6px auto 0;color:var(--console-muted);font-size:.8125rem;line-height:1.55}
.app-main .kanban { gap:12px; }.app-main .kanban-col{background:#f1eff3;border:1px solid var(--console-line);border-radius:10px}.app-main .kanban-card{border-color:var(--console-line);border-radius:8px;box-shadow:none}.app-main .kanban-card:hover{transform:none;box-shadow:none;border-color:#b9a9d8}
.app-main .tabs button { min-height:44px; }.app-main code{font-size:.8125rem}
@media(max-width:700px){.app-topbar{margin-bottom:20px}.app-topbar h1{font-size:1.3rem}.app-main .card-head{align-items:flex-start;flex-direction:column}.app-main .input,.app-main .select,.app-main .textarea{font-size:1rem}.app-main .btn,.app-main .btn-sm{min-height:44px}.app-main table.tbl{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){.app-main *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* --- jobseeker dashboard ------------------------------------------------ */
.seeker-app .app-main { background:#f8f7f9; }
.seeker-app .app-topbar .btn-primary { min-height:42px; padding:9px 16px; border-radius:9px; }
.seeker-app .seeker-profile-alert {
  max-width:1380px; margin:0 auto 20px; padding:14px 16px; align-items:center;
  background:#fffaf0; border-color:#ead9ae; color:#6f5218;
}
.seeker-app .seeker-profile-alert strong { display:block; margin-bottom:2px; color:#4d390f; font-size:.875rem; }
.seeker-app .seeker-profile-alert p { margin:0; color:#745c2d; font-size:.75rem; line-height:1.55; }
.seeker-app .seeker-profile-alert .btn { flex:0 0 auto; margin-left:auto; background:#6a43ce; border-color:#6a43ce; color:#fff; }
.seeker-app .seeker-profile-alert .btn:hover { background:#5425bd; border-color:#5425bd; }
.seeker-app .bar { height:6px; background:#efecf4; }
.seeker-app .bar > i { background:#7550cf; }
.seeker-welcome-card { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:28px; align-items:center; padding:30px; margin-bottom:18px; border:1px solid #ddd5ef; border-radius:18px; background:#fff; }
.seeker-kicker,.cv-eyebrow { display:block; margin-bottom:8px; color:#6b3bce; font-size:.6875rem; line-height:1.2; font-weight:800; letter-spacing:.09em; }
.seeker-welcome-copy h2 { margin:0 0 8px; font-size:1.65rem; letter-spacing:-.035em; }
.seeker-welcome-copy p { max-width:620px; margin:0; color:#625d69; font-size:.875rem; line-height:1.65; }
.seeker-primary-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.seeker-progress { padding:20px; border-radius:14px; background:#f4f0fc; text-align:center; }
.seeker-progress strong { display:block; color:#4c1cae; font-size:1.8rem; line-height:1; }
.seeker-progress span { display:block; margin-top:7px; color:#655c72; font-size:.6875rem; font-weight:700; }
.seeker-progress-bar { height:6px; margin-top:13px; overflow:hidden; border-radius:20px; background:#ddd5ed; }
.seeker-progress-bar i { display:block; height:100%; border-radius:inherit; background:#6334c7; }
.seeker-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
.seeker-step { display:flex; align-items:center; gap:12px; min-height:74px; padding:14px; border:1px solid #e1dee5; border-radius:12px; background:#fff; color:#45404b; text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease; }
.seeker-step:hover { border-color:#bcaed8; background:#fcfaff; text-decoration:none; }
.seeker-step > span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#f0edf3; color:#6b6570; font-size:.75rem; font-weight:800; }
.seeker-step strong,.seeker-step small { display:block; }.seeker-step strong{font-size:.8125rem}.seeker-step small{margin-top:2px;color:#76717c;font-size:.6875rem;line-height:1.35}
.seeker-step.is-done > span { background:#e8f6f1; color:#13745a; }.seeker-step.is-done>span::before{content:'✓';}.seeker-step.is-done>span{font-size:0}.seeker-step.is-done>span::before{font-size:.78rem}
.seeker-step.is-next { border-color:#bfaee4; background:#faf8ff; }
.seeker-status-strip { display:flex; align-items:center; gap:24px; padding:15px 18px; margin-bottom:24px; border:1px solid #e2dfe6; border-radius:12px; background:#fff; }
.seeker-status-strip>div{min-width:120px}.seeker-status-strip span,.seeker-status-strip small{display:block}.seeker-status-strip span{font-size:1.1rem;font-weight:800}.seeker-status-strip small{color:#706b75;font-size:.6875rem}.seeker-status-strip .btn{margin-left:auto}
.seeker-empty-jobs { padding:28px; border:1px dashed #d8d3dc; border-radius:12px; background:#fbfafc; text-align:center; }.seeker-empty-jobs p{margin:5px 0 14px;color:#726d77;font-size:.8125rem}
.intent-gate,.browse-home{max-width:900px;padding:36px;margin:24px auto;border:1px solid #ddd7e8;border-radius:18px;background:#fff}.intent-gate>h2,.browse-home>h2{margin:0 0 10px;font-size:1.8rem;letter-spacing:-.04em}.intent-gate>p,.browse-home>p{max-width:680px;margin:0;color:#625d69;font-size:.875rem;line-height:1.65}.intent-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 20px}.intent-option{display:flex;flex-direction:column;align-items:flex-start;min-height:220px;padding:22px;border:1px solid #dcd7e2;border-radius:14px;background:#fff;color:#312c38;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.intent-option:hover{border-color:#a992d5;background:#fcfaff;box-shadow:0 8px 24px rgba(45,28,78,.07)}.intent-option:focus-visible{outline:3px solid #cdbaf3;outline-offset:3px}.intent-option:disabled{cursor:wait;opacity:.55}.intent-number{display:grid;place-items:center;width:34px;height:34px;margin-bottom:auto;border-radius:50%;background:#f0eafb;color:#5c2abd;font-size:.72rem;font-weight:800}.intent-option strong{margin-top:22px;font-size:1rem}.intent-option small{margin-top:7px;color:#6e6875;font-size:.78rem;line-height:1.55}.intent-link{margin-top:16px;color:#5722bf;font-size:.76rem;font-weight:800}.intent-privacy{padding-top:16px;border-top:1px solid #ece8f0;font-size:.75rem!important}.browse-home{margin-top:0;margin-left:0}.browse-home .row-wrap{margin-top:20px}
.cv-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.cv-choice-card { display:flex; flex-direction:column; gap:5px; min-height:108px; padding:16px; border:1px solid #dcd7e2; border-radius:12px; background:#fff; color:#37323d; text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease; }
.cv-choice-card:hover { border-color:#aa94d8; background:#fcfaff; }.cv-choice-card strong{font-size:.875rem}.cv-choice-card span{color:#716b78;font-size:.75rem;line-height:1.5}.cv-choice-primary{border-color:#c7b8e8;background:#faf8ff}
.cv-upload-drop { display:block; padding:15px; border:1px dashed #cfc9d6; border-radius:10px; background:#faf9fb; text-align:center; cursor:pointer; }

/* CV builder: single-column form first, A4 preview second. */
.cv-builder-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.cv-builder-head h2{margin:0;font-size:1.65rem}.cv-builder-head p{margin:5px 0 0;color:#686270;font-size:.8125rem}.cv-back{min-height:44px;padding:8px 12px;border:1px solid #d9d4df;border-radius:9px;background:#fff;color:#504a57;cursor:pointer}
.cv-builder-layout { display:grid; grid-template-columns:minmax(0,720px) minmax(330px,1fr); gap:22px; align-items:start; }
.cv-builder-form { display:flex; flex-direction:column; gap:14px; }
.cv-form-card { position:relative; padding:22px; border:1px solid #e0dce4; border-radius:14px; background:#fff; }
.cv-form-card>h3,.cv-form-card>div>h3{margin:0;font-size:1rem}.cv-help{margin:3px 0 18px;color:#746e79;font-size:.75rem;line-height:1.55}.cv-step{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f0eafb;color:#5b2abd;font-size:.72rem;font-weight:800}
.cv-history-row { padding:16px; margin-bottom:10px; border:1px solid #e7e3ea; border-radius:11px; background:#faf9fb; }.cv-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.cv-history-head strong{font-size:.78rem}.cv-text-action{min-width:44px;min-height:44px;padding:5px;border:0;background:none;color:#b4233c;font:700 .7rem var(--font);cursor:pointer}.cv-year-row{grid-template-columns:repeat(2,minmax(0,160px))}.cv-no-experience{margin:0 0 14px}
.cv-template-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.cv-template-option{display:flex;flex-direction:column;gap:7px;align-items:center;min-height:96px;padding:9px 6px;border:1px solid #e1dce6;border-radius:10px;cursor:pointer;font-size:.7rem}.cv-template-option input{position:absolute;opacity:0;pointer-events:none}.cv-template-option:focus-within{outline:3px solid #d7c7fa;outline-offset:2px}.cv-template-option input:checked + .cv-template-swatch{outline:3px solid #7042cc;outline-offset:2px}.cv-template-swatch{display:block;width:48px;height:62px;border:1px solid #dedbe2;border-top:9px solid #5321e0;background:linear-gradient(#ddd 0 0) 8px 13px/30px 3px no-repeat,linear-gradient(#eee 0 0) 8px 21px/30px 2px no-repeat,linear-gradient(#eee 0 0) 8px 28px/25px 2px no-repeat,#fff}.cv-template-modern{border-top-color:#117066}.cv-template-hangat{border-top-color:#be5b2b}.cv-template-tegas{border-top-color:#26374b}.cv-template-minimal{border-top-color:#777}
.cv-builder-actions { position:sticky; bottom:10px; z-index:5; display:flex; justify-content:flex-end; gap:9px; padding:12px; border:1px solid #e2dde7; border-radius:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.cv-preview-wrap { position:sticky; top:18px; }.cv-preview-label{margin-bottom:8px;color:#6e6875;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.cv-paper{position:relative;width:100%;min-height:560px;padding:34px 34px 28px;overflow:hidden;border:1px solid #ddd9e1;background:#fff;color:#29262d;box-shadow:0 12px 28px rgba(30,24,43,.09);font-family:Arial,sans-serif}.cv-paper-head{padding-bottom:16px;border-bottom:3px solid var(--cv-accent)}.cv-paper-head h2{margin:0;color:#211d28;font:700 1.45rem/1.15 Arial,sans-serif;letter-spacing:-.03em}.cv-paper-head p{margin:5px 0;color:var(--cv-accent);font-size:.72rem;font-weight:700}.cv-paper-head div{color:#68636d;font-size:.56rem}.cv-paper section{margin-top:15px}.cv-paper section h3{margin:0 0 7px;color:var(--cv-accent);font:700 .65rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}.cv-paper section p{margin:0;color:#4f4a54;font-size:.6rem;line-height:1.55}.cv-entry{margin-bottom:9px}.cv-entry strong,.cv-entry span{display:block}.cv-entry strong{font-size:.64rem}.cv-entry span{margin-top:2px;color:#77717b;font-size:.54rem}.cv-entry p{margin-top:4px!important}.cv-paper-skills{display:flex;flex-wrap:wrap;gap:4px}.cv-paper-skills span{padding:3px 5px;border-radius:4px;background:var(--cv-soft);color:#49434f;font-size:.52rem}.cv-paper footer{position:absolute;left:34px;right:34px;bottom:14px;padding-top:6px;border-top:1px solid #e9e6ec;color:#99949d;font-size:.45rem;text-align:right}.cv-paper-modern{border-top:9px solid var(--cv-accent)}.cv-paper-hangat .cv-paper-head{padding:15px;background:var(--cv-soft);border-bottom:0}.cv-paper-tegas .cv-paper-head{margin:-34px -34px 0;padding:30px 34px 20px;background:#26374b;border:0}.cv-paper-tegas .cv-paper-head h2{color:#fff}.cv-paper-tegas .cv-paper-head div{color:#dfe6ed}.cv-paper-minimal .cv-paper-head{border-bottom:1px solid #888}.cv-paper-minimal section h3{color:#333}
@media(max-width:700px){
  .seeker-app .seeker-profile-alert { align-items:flex-start; flex-wrap:wrap; }
  .seeker-app .seeker-profile-alert .btn { width:100%; margin:8px 0 0; }
  .seeker-welcome-card{grid-template-columns:1fr;padding:22px 18px}.seeker-welcome-copy h2{font-size:1.4rem}.seeker-progress{display:none}.seeker-primary-actions .btn{width:100%}
  .seeker-steps{grid-template-columns:1fr;gap:8px}.seeker-step{min-height:64px}.seeker-status-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seeker-status-strip>div{min-width:0;text-align:center}.seeker-status-strip .btn{grid-column:1/-1;width:100%;margin:4px 0 0}
  .intent-gate,.browse-home{padding:24px 18px;margin:4px auto 20px}.intent-gate>h2,.browse-home>h2{font-size:1.5rem}.intent-options{grid-template-columns:1fr;margin:22px 0 18px}.intent-option{min-height:190px;padding:18px}.browse-home .btn{width:100%}
  .cv-choice-grid{grid-template-columns:1fr}.cv-builder-head{display:block}.cv-back{margin-bottom:12px}.cv-form-card{padding:18px 15px}.cv-template-grid{grid-template-columns:repeat(3,1fr)}.cv-builder-actions{bottom:6px}.cv-builder-actions .btn{flex:1;padding-left:10px;padding-right:10px}.cv-preview-wrap{position:static}.cv-paper{min-height:500px;padding:28px 24px 25px}.cv-paper-tegas .cv-paper-head{margin:-28px -24px 0;padding:26px 24px 18px}
}
@media(max-width:1050px){.cv-builder-layout{grid-template-columns:1fr}.cv-preview-wrap{position:static;max-width:560px}.cv-paper{min-height:650px}}

/* --- kanban pipeline ---------------------------------------------------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kanban-col { flex: 0 0 260px; background: var(--surface-tint); border-radius: var(--radius-lg); padding: 12px; }
.kanban-col > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kanban-col > header h4 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.kanban-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.kanban-card h5 { margin: 0 0 2px; font-size: .9rem; }
.kanban-card p { margin: 0; font-size: var(--fs-xs); color: var(--ink-500); }

/* --- modal -------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(20,20,43,.55);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px;
  animation: fade .15s ease;
}
.modal {
  background: var(--surface); border-radius: var(--radius-xl); width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop .18s ease;
}
.modal-lg { max-width: 780px; }
.modal.lamar-detail-modal { max-width: 1040px; background: #f7f7fa; }
.lamar-detail-modal .modal-body { padding: 18px; }
.lamar-detail-modal .modal-head { background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.lamar-preview-note { font-size: .76rem; color: #777889; margin: 0 2px 12px; }
.lamar-preview-note span { color: #6941c6; background: #f0eaff; padding: 4px 8px; border-radius: 7px; font-weight: 700; margin-right: 6px; }
.lamar-detail-hero { color: #fff; padding: 24px 26px; border-radius: 20px 20px 0 0; background: radial-gradient(circle at 85% 10%,rgba(255,255,255,.18),transparent 28%),linear-gradient(135deg,#21143f,#5735a7 70%,#7554cc); }
.lamar-hero-top,.lamar-hero-main,.lamar-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lamar-code { font: 700 .74rem/1 var(--font); letter-spacing:.08em; padding:7px 9px; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#e9e2ff; }
.lamar-live { display:flex; align-items:center; gap:7px; font-size:.76rem; color:#dffbef; }
.lamar-live i { width:7px; height:7px; background:#62e5ab; border-radius:50%; box-shadow:0 0 0 4px rgba(98,229,171,.14); }
.lamar-live.is-closed { color:#ffe3e3; }.lamar-live.is-closed i{background:#ff8888;box-shadow:0 0 0 4px rgba(255,136,136,.14)}
.lamar-hero-main { margin:22px 0; align-items:flex-end; }.lamar-hero-main p{margin:0 0 3px;color:#cfc3ed;font-size:.8rem}.lamar-hero-main h2{margin:0;color:#fff;font-size:1.55rem;letter-spacing:-.025em}
.lamar-owner { display:flex;align-items:center;gap:9px }.lamar-owner>span,.lamar-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);font-size:.76rem;font-weight:800}.lamar-owner div{display:flex;flex-direction:column}.lamar-owner small{color:#cfc3ed;font-size:.68rem}.lamar-owner strong{font-size:.85rem}
.lamar-meta { display:flex; flex-wrap:wrap; gap:8px }.lamar-meta span{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.1);font-size:.76rem;color:#f3efff}
.lamar-kpis { display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #ecebf1;border-top:0;border-radius:0 0 20px 20px;overflow:hidden;margin-bottom:14px;box-shadow:0 8px 26px rgba(32,23,56,.05)}
.lamar-kpis>div{padding:18px 20px;border-right:1px solid #eeeef3}.lamar-kpis>div:last-child{border:0}.lamar-kpis span,.lamar-kpis small{display:block;color:#8a8998;font-size:.7rem}.lamar-kpis strong{font-size:1.45rem;letter-spacing:-.04em;color:#24212f;margin-right:5px}.lamar-kpis small{display:inline}
.lamar-progress{height:5px;border-radius:9px;background:#ece9f4;margin-top:7px;overflow:hidden}.lamar-progress i{display:block;height:100%;background:#7554cc;border-radius:9px}
.lamar-section,.lamar-focus,.lamar-activity{background:#fff;border:1px solid #e9e8ee;border-radius:18px;padding:20px;margin-bottom:14px}.lamar-section-head{margin-bottom:16px}.lamar-section-head small{font-size:.65rem;letter-spacing:.09em;color:#9a98a6;font-weight:800}.lamar-section-head h3{font-size:.98rem;margin:2px 0 0}.lamar-section-head>span{font-size:.72rem;color:#777584;background:#f2f1f5;padding:6px 9px;border-radius:8px}
.lamar-flow{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 8px}.lamar-flow-item{position:relative;text-align:center;color:#aaa8b3;font-size:.66rem}.lamar-flow-item:after{content:'';position:absolute;top:13px;left:calc(50% + 15px);right:calc(-50% + 15px);height:1px;background:#e6e4eb}.lamar-flow-item:nth-child(7n):after,.lamar-flow-item:last-child:after{display:none}.lamar-flow-item i{position:relative;z-index:1;display:grid;place-items:center;width:27px;height:27px;margin:0 auto 7px;border-radius:9px;background:#f2f1f5;color:#9693a1;font-style:normal;font-weight:800}.lamar-flow-item.is-done{color:#5c3aa8}.lamar-flow-item.is-done i{background:#ede8fb;color:#6842bb}.lamar-flow-item.is-current{color:#24212f;font-weight:700}.lamar-flow-item.is-current i{background:#6842bb;color:#fff;box-shadow:0 0 0 4px #eee8fb}
.lamar-text-btn,.lamar-more{border:0;background:none;color:#6842bb;font:700 .74rem var(--font);cursor:pointer}.lamar-candidate{display:grid;grid-template-columns:1.4fr .8fr 1.3fr .7fr auto;gap:18px;align-items:center;padding:14px;border:1px solid #ecebf1;border-radius:14px;background:#fcfcfd}.lamar-candidate-person{display:flex;align-items:center;gap:10px}.lamar-avatar{background:#eee8fb;color:#6842bb}.lamar-candidate div{display:flex;flex-direction:column}.lamar-candidate small{font-size:.67rem;color:#9997a4}.lamar-candidate strong{font-size:.78rem;color:#2d2936}.lamar-candidate em{font-size:.68rem;color:#817e8b;font-style:normal}.lamar-overdue strong{color:#c13d48!important}.lamar-more{font-size:1rem;color:#777584}.lamar-empty{padding:28px;text-align:center;border:1px dashed #d9d6e2;border-radius:14px;background:#faf9fc}.lamar-empty strong,.lamar-empty span{display:block}.lamar-empty strong{font-size:.86rem}.lamar-empty span{font-size:.74rem;color:#8d8a98;margin-top:4px}
.lamar-bottom-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.lamar-bottom-grid>div{margin:0}.lamar-count{background:#fbeaec!important;color:#b83242!important}.lamar-focus ul,.lamar-activity ol{list-style:none;padding:0;margin:0}.lamar-focus li{display:flex;gap:10px;padding:9px 0;border-top:1px solid #f0eff3}.lamar-focus li i{width:7px;height:7px;border-radius:50%;background:#dc6671;margin-top:7px}.lamar-focus li span,.lamar-activity li span{display:flex;flex-direction:column}.lamar-focus li strong,.lamar-activity li strong{font-size:.77rem}.lamar-focus li small,.lamar-activity li small{font-size:.68rem;color:#94919e}.lamar-activity li{display:grid;grid-template-columns:55px 1fr;gap:10px;padding:8px 0;position:relative}.lamar-activity time{font-size:.68rem;color:#8f8c99}
@media(max-width:760px){.lamar-kpis{grid-template-columns:1fr 1fr}.lamar-kpis>div:nth-child(2){border-right:0}.lamar-flow{grid-template-columns:repeat(2,1fr)}.lamar-flow-item:after{display:none}.lamar-candidate{grid-template-columns:1fr}.lamar-bottom-grid{grid-template-columns:1fr}.lamar-owner{display:none}}

/* --- sourcing workspace ------------------------------------------------ */
.sourcing-workspace {
  --src-ink: #24212b; --src-muted: #686471; --src-faint: #8a8692;
  --src-line: #e6e3e9; --src-soft: #f7f6f8; --src-brand: #5826c7;
  max-width: 1380px; margin: 0 auto; color: var(--src-ink);
}
.sourcing-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.workspace-kicker { color:var(--src-brand); font-size:.75rem; line-height:1; letter-spacing:.08em; font-weight:750; margin-bottom:10px; }
.sourcing-head h2 { margin:0; font-size:1.75rem; line-height:1.2; letter-spacing:-.035em; }
.sourcing-head p { margin:7px 0 0; color:var(--src-muted); font-size:.875rem; line-height:1.5; }
.sourcing-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.sourcing-actions .btn{min-height:44px;border-radius:9px}
.mingcute-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mingcute-icon.icon-fill{fill:currentColor;stroke:none}
.sourcing-pulse {
  display:grid; grid-template-columns:minmax(310px,1.65fr) repeat(4,minmax(96px,.5fr));
  background:#fff; border:1px solid var(--src-line); border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.pulse-primary { display:flex; align-items:center; gap:12px; min-height:74px; padding:14px 18px; background:var(--src-soft); }
.pulse-primary.has-alert { background:#fff7f6; box-shadow:inset 3px 0 #c74848; }
.pulse-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; color:#25745d; background:#e2f3ec; font-size:.8rem; font-weight:800; }
.has-alert .pulse-icon { color:#a83232; background:#f8dddd; }
.pulse-primary strong,.pulse-primary small { display:block; }
.pulse-primary strong { font-size:.8125rem; line-height:1.4; }
.pulse-primary small { color:var(--src-muted); font-size:.75rem; line-height:1.4; margin-top:2px; }
.pulse-metric { display:flex; flex-direction:column; justify-content:center; min-height:74px; padding:14px 16px; border-left:1px solid var(--src-line); }
.pulse-metric strong { font-size:1.25rem; line-height:1.15; letter-spacing:-.035em; }
.pulse-metric span { font-size:.75rem; line-height:1.3; color:var(--src-muted); margin-top:3px; white-space:nowrap; }
.sourcing-focus,.sourcing-list { background:#fff; border:1px solid var(--src-line); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.focus-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; }
.focus-head span { font-size:.6875rem; letter-spacing:.08em; color:#a33d3d; font-weight:800; }
.focus-head h3 { margin:4px 0 0; font-size:1rem; line-height:1.35; }
.focus-head>small { color:var(--src-muted); background:var(--src-soft); border:1px solid var(--src-line); border-radius:999px; padding:4px 9px; font-size:.75rem; }
.focus-list { padding:0 8px 8px; }
.focus-row { display:grid; grid-template-columns:40px minmax(170px,.8fr) minmax(240px,1.2fr) 40px; gap:12px; align-items:center; width:100%; min-height:60px; padding:8px 10px; border:0; border-top:1px solid #eeecf0; background:none; text-align:left; color:inherit; cursor:pointer; border-radius:8px; transition:background .16s ease; }
.focus-row:hover { background:var(--src-soft); }.focus-row:focus-visible{outline:2px solid var(--src-brand);outline-offset:-2px}
.candidate-monogram { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#eee9f9; color:#5022b3; font-size:.75rem; font-weight:800; }
.candidate-photo{display:block;width:36px;height:36px;flex:0 0 36px;border-radius:50%;object-fit:cover;background:#eee9f9}.candidate-photo-lg{width:68px;height:82px;flex-basis:68px;border-radius:10px}
.focus-person,.focus-action { display:flex; flex-direction:column; min-width:0; }
.focus-person strong,.focus-action strong { font-size:.8125rem; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.focus-person small,.focus-action small { font-size:.75rem; line-height:1.4; color:var(--src-muted); margin-top:2px; }
.is-late { color:#b3343b!important; font-weight:700; }.row-arrow{display:grid;place-items:center;width:40px;height:40px;color:#77717f;font-size:1rem}
.sourcing-list { overflow:visible; }
.candidate-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding:14px 18px; border-bottom:1px solid var(--src-line); }
.candidate-toolbar h3 { margin:0; font-size:1rem; line-height:1.35; }
.candidate-toolbar>div>span { display:block; color:var(--src-muted); font-size:.75rem; line-height:1.4; margin-top:3px; }
.candidate-groups{display:flex;gap:8px;overflow-x:auto;padding:12px 18px;border-bottom:1px solid var(--src-line);scrollbar-width:thin}.candidate-groups .chip{flex:0 0 auto;min-height:44px}
.candidate-controls { display:flex; align-items:center; gap:8px; }
.candidate-search { display:flex; align-items:center; width:min(330px,31vw); min-height:44px; padding:0 12px; border:1px solid #d7d3dc; border-radius:8px; background:#fff; transition:border-color .16s ease,box-shadow .16s ease; }
.candidate-search:focus-within { border-color:#7450cc; box-shadow:0 0 0 3px #eee8fa; }
.candidate-search svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:#77727e; stroke-width:1.8; margin-right:8px; }
.candidate-search input { min-width:0; width:100%; border:0; outline:0; background:none; font:500 .8125rem/1.4 var(--font); color:var(--src-ink); }
.candidate-search input::placeholder{color:#8c8791}.candidate-status{min-height:44px;max-width:200px;border-radius:8px;font-size:.8125rem;padding-top:0;padding-bottom:0}.candidate-controls .btn{min-height:44px;border-radius:8px}
.candidate-table-wrap { border:0; border-radius:0; }.candidate-table{font-size:.8125rem}
.candidate-table th { background:#faf9fb!important; color:#615d68!important; font-size:.6875rem!important; letter-spacing:.045em!important; padding:11px 16px!important; }
.candidate-table td { padding:13px 16px!important; border-bottom-color:#eceaee!important; }
.candidate-select-cell{width:42px!important;padding-left:14px!important;padding-right:4px!important;text-align:center}.candidate-select-cell input{width:18px;height:18px;accent-color:var(--src-brand);cursor:pointer}.candidate-select-cell input:disabled{cursor:not-allowed;opacity:.35}
.candidate-table tbody tr { cursor:default; transition:background .16s ease; }.candidate-table tbody tr:hover{background:#faf9fb}
.candidate-cell { display:flex; align-items:center; gap:11px; min-width:220px; }.candidate-cell>div,.candidate-table td:nth-child(2),.candidate-table td:nth-child(4){display:flex;flex-direction:column}
.candidate-cell-stack{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}.candidate-cell-stack>*{max-width:100%}.candidate-cell-stack small{display:block;color:var(--src-muted);font-size:.75rem;line-height:1.4;overflow-wrap:anywhere}
.candidate-cell strong,.cell-main { display:block;font-size:.8125rem; line-height:1.4; color:var(--src-ink); }.candidate-cell small,.candidate-table td>small{font-size:.75rem;line-height:1.4;color:var(--src-muted);margin-top:2px}
.candidate-source-tag{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:5px;padding:3px 7px;border:1px solid #d9cef0;border-radius:999px;background:#f4f0fb;color:#582bb7;font-size:.64rem;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-import-head .candidate-source-tag{display:inline-flex;margin:0;vertical-align:middle}
.pic-chip { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eeecf0; color:#4f4a55; font-size:.6875rem; font-weight:800; }.pic-name{font-size:.75rem;margin-left:7px}
.row-open { width:40px; height:40px; border:1px solid transparent; border-radius:8px; background:transparent; color:#5d2fc0; cursor:pointer; transition:background .16s ease,border-color .16s ease; }.row-open:hover{background:#f0ebfa;border-color:#ded3f3}.row-open:focus-visible{outline:2px solid var(--src-brand);outline-offset:2px}
.sourcing-empty { text-align:center; padding:64px 20px; }.sourcing-empty h3{margin:16px 0 6px;font-size:1rem}.sourcing-empty p{max-width:440px;margin:0 auto 20px;color:var(--src-muted);font-size:.8125rem;line-height:1.6}.sourcing-empty .btn{min-height:44px}
.empty-orbit { position:relative; display:grid; place-items:center; width:52px; height:52px; margin:auto; border:1px solid #d6caed; border-radius:50%; background:#faf8fd; }.empty-orbit:before,.empty-orbit i{content:'';display:block;border-radius:50%;background:#5b2bc1}.empty-orbit:before{width:16px;height:16px}.empty-orbit i{position:absolute;width:7px;height:7px;right:1px;top:7px;background:#29967b}
.cv-setup-card{display:grid;gap:18px}.cv-setup-section{padding:16px;border:1px solid var(--src-line);border-radius:12px;background:#fff}.cv-setup-label{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}.cv-setup-label>span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:#eee8fa;color:#5b2bc1;font-size:.72rem;font-weight:800}.cv-setup-label strong,.cv-setup-label small{display:block}.cv-setup-label strong{font-size:.875rem}.cv-setup-label small{margin-top:3px;color:var(--src-muted);font-size:.72rem;line-height:1.45}.cv-file-picker{display:grid;place-items:center;min-height:112px;padding:18px;border:1.5px dashed #bcaadd;border-radius:10px;background:#faf8ff;text-align:center;cursor:pointer;transition:border-color .18s ease,background .18s ease}.cv-file-picker:hover,.cv-file-picker:focus-within{border-color:#7144c8;background:#f6f1ff}.cv-file-picker strong{color:#5125ad;font-size:.84rem}.cv-file-picker span{display:block;max-width:100%;margin-top:5px;color:var(--src-muted);font-size:.7rem;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-source-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cv-source-option{position:relative;cursor:pointer}.cv-source-option input{position:absolute;opacity:0;pointer-events:none}.cv-source-option span{display:grid;place-items:center;min-height:46px;padding:9px 12px;border:1px solid #dcd7e2;border-radius:9px;background:#fff;color:#514c57;font-size:.75rem;font-weight:700;text-align:center;transition:border-color .16s ease,background .16s ease,color .16s ease}.cv-source-option:hover span{border-color:#aa94d8;background:#fcfaff}.cv-source-option input:focus-visible+span{outline:3px solid #e7ddf8;outline-offset:2px}.cv-source-option input:checked+span{border-color:#7450cc;background:#eee8fa;color:#5022b3}.cv-custom-source{margin:12px 0 0}.field-error{margin-top:8px;color:#ae353c;font-size:.72rem;font-weight:650}
.google-connect-card{display:grid;justify-items:center;gap:10px;padding:26px 18px;text-align:center}.google-connect-card>strong{font-size:1rem}.google-connect-card>p{max-width:470px;margin:0;color:var(--src-muted);font-size:.8rem;line-height:1.6}.google-connect-card>code{display:block;width:100%;padding:8px 10px;border-radius:7px;background:#f5f3f7;color:#4e4855;font-size:.7rem;text-align:left;word-break:break-all}.google-meet-mark{position:relative;width:58px;height:44px;margin-bottom:4px}.google-meet-mark i{position:absolute;display:block}.google-meet-mark i:nth-child(1){inset:5px 13px 5px 2px;border-radius:8px;background:#1a73e8}.google-meet-mark i:nth-child(2){right:0;top:10px;width:18px;height:24px;clip-path:polygon(0 25%,100% 0,100% 100%,0 75%);background:#00ac47}.google-meet-mark i:nth-child(3){left:2px;bottom:5px;width:12px;height:14px;border-radius:0 0 0 8px;background:#fbbc04}.google-meet-mark i:nth-child(4){left:2px;top:5px;width:12px;height:14px;border-radius:8px 0 0;background:#ea4335}.meet-scheduler{display:grid;gap:16px}.meet-account{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid #dce9e4;border-radius:10px;background:#f7fcfa}.meet-account-dot{width:10px;height:10px;border-radius:50%;background:#1d9b72;box-shadow:0 0 0 4px #dff4ec}.meet-account>div{display:flex;flex:1;min-width:0;flex-direction:column}.meet-account small{color:#69756f;font-size:.62rem;font-weight:800;letter-spacing:.06em}.meet-account strong{margin-top:2px;font-size:.78rem;overflow:hidden;text-overflow:ellipsis}.meet-candidate-strip{display:flex;gap:7px;padding-bottom:3px;overflow-x:auto}.meet-candidate-strip>span{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-height:38px;padding:6px 10px 6px 6px;border:1px solid #ddd6ea;border-radius:999px;background:#faf8fd;color:#514c57;font-size:.7rem;font-weight:700}.meet-candidate-strip b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#6536bf;color:#fff;font-size:.64rem}.meet-timeline{display:grid;gap:6px;max-height:270px;overflow:auto}.meet-timeline>div{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:7px 10px;border-left:3px solid #7953c6;border-radius:0 8px 8px 0;background:#faf9fb}.meet-timeline span{color:#5528b0;font-size:.76rem;font-weight:850;font-variant-numeric:tabular-nums}.meet-timeline strong{font-size:.75rem}.meet-timeline small{max-width:220px;color:var(--src-muted);font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meet-results{display:grid;gap:8px}.meet-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--src-line);border-radius:9px;background:#faf9fb}.meet-result-row.is-success{border-color:#c9e4da;background:#f7fcfa}.meet-result-row.is-error{border-color:#ecc9cc;background:#fff9f9}.meet-result-row>div{display:flex;min-width:0;flex-direction:column}.meet-result-row strong{font-size:.78rem}.meet-result-row small{margin-top:3px;color:var(--src-muted);font-size:.7rem}
.cv-import-shell{display:grid;gap:16px}.cv-import-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}.cv-import-head strong{display:block;font-size:.95rem}.cv-import-head p{margin:3px 0 0;color:var(--src-muted);font-size:.78rem;line-height:1.5}.cv-import-head>b{color:var(--src-brand);font-size:.9rem;font-variant-numeric:tabular-nums}.cv-overall-progress{height:8px;overflow:hidden;border-radius:999px;background:#ebe7f0}.cv-overall-progress>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--src-brand),#29967b);transition:width .3s ease}.cv-queue-list{display:grid;gap:7px;max-height:420px;overflow:auto}.cv-queue-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:58px;padding:8px 11px;border:1px solid var(--src-line);border-radius:9px;background:#faf9fb;transition:border-color .2s ease,background .2s ease}.cv-queue-row.is-processing{border-color:#bda9e5;background:#faf8ff}.cv-queue-row.is-success{border-color:#c9e4da;background:#f7fcfa}.cv-queue-row.is-error{border-color:#ecc9cc;background:#fff9f9}.cv-queue-number{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#ede9f3;color:#5e5867;font-size:.72rem;font-weight:800}.cv-queue-file{min-width:0}.cv-queue-file strong,.cv-queue-file small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-queue-file strong{font-size:.78rem}.cv-queue-file small{margin-top:3px;color:var(--src-muted);font-size:.7rem}.is-error .cv-queue-file small{color:#a8323a}.cv-queue-state{color:#716b78;font-size:.7rem;font-weight:700}.is-success .cv-queue-state{color:#24745d}.is-error .cv-queue-state{color:#ae353c}.cv-queue-summary{margin-right:auto;color:var(--src-muted);font-size:.78rem}.cv-queue-summary strong{color:var(--src-ink)}.cv-dotmatrix{display:grid;grid-template-columns:repeat(5,5px);grid-template-rows:repeat(5,5px);gap:2px;width:max-content}.cv-dotmatrix i{width:5px;height:5px;border-radius:1.5px;background:var(--src-brand);opacity:.12;animation:cv-dot-spiral 1.35s linear infinite;animation-delay:calc(var(--dot-order) * -54ms);will-change:opacity,transform}@keyframes cv-dot-spiral{0%,36%,100%{opacity:.12;transform:scale(.82)}8%{opacity:1;transform:scale(1)}16%{opacity:.58;transform:scale(.94)}24%{opacity:.28;transform:scale(.88)}}.candidate-detail-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;margin-bottom:16px}.candidate-detail-head h3{margin:4px 0}.candidate-address{margin-top:8px;line-height:1.5}.cv-data-section{margin:16px 0;padding-top:16px;border-top:1px solid var(--src-line)}.cv-data-section h4{margin:0 0 10px}.cv-data-item{padding:9px 0;border-bottom:1px solid #efedf1}.cv-data-item:last-child{border-bottom:0}.cv-data-item strong,.cv-data-item small{display:block}.cv-data-item small{margin-top:2px;color:var(--src-muted)}.cv-data-item p{margin:5px 0 0;color:#55515d;font-size:.78rem;line-height:1.55}
@media(max-width:1050px){.sourcing-pulse{grid-template-columns:1fr repeat(2,.35fr)}.pulse-metric:nth-last-child(-n+2){display:none}.candidate-toolbar{align-items:flex-start;flex-direction:column}.candidate-controls{width:100%}.candidate-search{width:auto;flex:1}}
@media(max-width:700px){.sourcing-head{align-items:flex-start;flex-direction:column;margin-bottom:22px}.sourcing-actions{width:100%;justify-content:stretch}.sourcing-actions .btn{flex:1 1 calc(50% - 4px)}.sourcing-pulse{grid-template-columns:1fr 1fr 1fr}.pulse-primary{grid-column:1/-1}.pulse-metric{padding:12px;min-height:66px}.focus-row{grid-template-columns:40px 1fr 40px}.focus-action{display:none}.candidate-controls{align-items:stretch;flex-direction:column}.candidate-search{flex:auto;width:100%}.candidate-search input,.candidate-status{font-size:1rem}.candidate-status{max-width:none}.candidate-table th:nth-child(3),.candidate-table td:nth-child(3),.candidate-table th:nth-child(4),.candidate-table td:nth-child(4),.candidate-table th:nth-child(6),.candidate-table td:nth-child(6){display:none}.candidate-table td{padding:12px!important}.candidate-select-cell{padding-left:8px!important;padding-right:2px!important}.pic-name{display:none}.sourcing-empty{padding:48px 16px}.candidate-detail-head{grid-template-columns:auto minmax(0,1fr)}.candidate-detail-head>.badge{grid-column:1/-1}.meet-timeline>div{grid-template-columns:48px minmax(0,1fr)}.meet-timeline small{grid-column:2;max-width:100%}}
@media(max-width:700px){.cv-import-head{grid-template-columns:auto minmax(0,1fr)}.cv-import-head>b{grid-column:2}.cv-queue-row{grid-template-columns:32px minmax(0,1fr)}.cv-queue-state{grid-column:2}.cv-queue-list{max-height:52vh}}
@media(max-width:700px){.cv-source-options{grid-template-columns:repeat(2,minmax(0,1fr))}.cv-setup-section{padding:14px}.cv-file-picker{min-height:100px}}
@media(prefers-reduced-motion:reduce){.sourcing-workspace *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(prefers-reduced-motion:reduce){.cv-dotmatrix i{animation:none!important;opacity:.55}.cv-overall-progress>span{transition:none}}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-head h3 { margin: 0; }
.modal-body { padding: 20px 22px; }
.modal-foot {
  padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- chat --------------------------------------------------------------- */
.chat-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px; }
.bubble { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.55; }
.bubble-them { background: var(--surface-tint); color: var(--ink-800); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble-me   { background: var(--brand-700); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble .when { display: block; font-size: var(--fs-xs); opacity: .75; margin-top: 5px; }

/* --- timeline ----------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 16px 16px; font-size: .86rem; }
.timeline li::before {
  content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand-500); border: 2px solid var(--surface);
}
.timeline li:last-child { padding-bottom: 0; }

/* --- landing hero ------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; padding: 62px 0 52px;
  background:
    radial-gradient(1000px 420px at 12% -10%, var(--brand-100), transparent 62%),
    radial-gradient(760px 340px at 92% 4%, var(--accent-50), transparent 60%),
    var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.hero h1 { font-size: clamp(1.75rem, 4vw, var(--fs-display)); max-width: 16ch; line-height: 1.2; }
.hero p.lead { font-size: 1.0625rem; color: var(--ink-500); max-width: 46ch; line-height: 1.65; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.role-card { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.role-card .ico {
  width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center;
  font-size: 1.2rem; margin-bottom: 12px; background: var(--brand-50);
}
.role-card h3 { font-size: 1.05rem; }
.role-card p { font-size: .88rem; color: var(--ink-500); margin-bottom: 14px; }

/* --- footer ------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-section); padding: 40px 0 32px; background: var(--surface);
  border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ink-500);
}
.site-footer a { color: var(--ink-700); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- misc --------------------------------------------------------------- */
.prose { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-700); white-space: pre-line; }
.prose strong { color: var(--ink-900); }
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.pagination button {
  min-width: 36px; padding: 7px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); font-family: var(--font); font-weight: 700; font-size: .84rem;
  color: var(--ink-700); cursor: pointer;
}
.pagination button[aria-current="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-tint); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; }
.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;
}
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ==========================================================================
   Landing publik — brand refresh 2026
   Search-first marketplace, memakai identitas resmi Lokarir tanpa mengubah
   geometri, warna, atau rasio logo.
   ========================================================================== */
.home-page { background:#fff; }
.home-page .site-header { background:rgba(255,255,255,.96); border-bottom-color:#ece9f1; }
.home-page .site-header .wrap { height:76px; }
.home-page .site-header .logo img { height:38px; }
.home-page .nav-links a { border-radius:8px; color:#4a4654; }
.home-page .nav-links a[aria-current="page"],.home-page .nav-links a:hover { background:#f2edfc; color:#5321E0; }
.home-page .header-actions .btn { border-radius:8px; }
.home-hero { position:relative; overflow:hidden; padding:64px 0 72px; background:#fbfafc; border-bottom:1px solid #ece9f1; }
.home-hero::before { content:''; position:absolute; width:380px; height:380px; border:1px solid #e7def8; border-radius:50%; left:-260px; top:-210px; }
.home-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:64px; align-items:center; }
.home-hero-copy { position:relative; z-index:2; min-width:0; padding:20px 0; }
.home-eyebrow,.home-section-kicker { margin:0 0 14px; color:#5321E0; font-size:.75rem; line-height:1.4; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.home-eyebrow { display:flex; align-items:center; gap:9px; }.home-eyebrow span{display:block;width:22px;height:2px;background:#22C1AB}
.home-hero h1 { max-width:12ch; margin:0 0 20px; font-size:clamp(2.7rem,5.4vw,5.1rem); line-height:1.02; letter-spacing:-.06em; font-weight:800; color:#17131f; }
.home-hero h1 em { color:#5321E0; font-style:normal; }
.home-hero .lead { max-width:590px; margin:0 0 28px; color:#5f5968; font-size:1.0625rem; line-height:1.7; }
.home-page .searchbar-hero { display:grid; grid-template-columns:minmax(200px,1.25fr) minmax(150px,.75fr) auto; gap:0; width:min(760px,100%); max-width:none; padding:6px; background:#fff; border:1px solid #dcd6e3; border-radius:12px; box-shadow:0 12px 32px rgba(44,27,78,.08); }
.home-search-field { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:5px 14px; border-right:1px solid #e8e4eb; }
.home-search-field>span { padding-left:1px; color:#6f6876; font-size:.6875rem; line-height:1.2; font-weight:700; }
.home-search-field .input,.home-search-field .select { min-height:30px!important; height:30px; padding:2px 1px; border:0; border-radius:0; box-shadow:none!important; color:#201b28; font-size:.875rem!important; }
.home-search-field .select { padding-right:28px; }
.home-page .searchbar-hero .btn { align-self:stretch; min-height:54px; padding-inline:22px; border-radius:8px; box-shadow:none; }
.home-page .hero-note { min-height:22px; margin:12px 0 0; color:#6a6470; font-size:.8125rem; }
.home-assurances { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:20px; color:#4e4955; font-size:.75rem; font-weight:600; }
.home-assurances span { display:flex; align-items:center; gap:6px; }.home-assurances i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dff7f1;color:#17745f;font-size:.65rem;font-style:normal;font-weight:900}
.home-brand-stage { position:relative; min-height:520px; border-radius:26px; background:#ede8fb; overflow:hidden; isolation:isolate; }
.home-brand-stage::after { content:''; position:absolute; inset:18px; border:1px solid rgba(83,33,224,.13); border-radius:18px; z-index:-1; }
.home-brand-mark { position:absolute; width:72%; max-width:430px; height:auto; left:50%; top:50%; transform:translate(-52%,-49%); filter:drop-shadow(0 22px 22px rgba(49,21,113,.08)); }
.home-app-tile { position:absolute; width:76px; height:76px; right:28px; top:28px; border-radius:19px; box-shadow:0 12px 28px rgba(48,25,102,.18); }
.brand-shape { position:absolute; border-radius:50%; background:#22C1AB; opacity:.14; z-index:-1; }.brand-shape-one{width:230px;height:230px;right:-75px;bottom:-50px}.brand-shape-two{width:110px;height:110px;left:-36px;top:64px;background:#5321E0;opacity:.08}
.brand-message { position:absolute; display:flex; flex-direction:column; min-width:170px; padding:13px 15px; border:1px solid rgba(68,48,92,.12); border-radius:10px; background:rgba(255,255,255,.93); box-shadow:0 10px 26px rgba(45,29,75,.08); backdrop-filter:blur(8px); }
.brand-message strong{font-size:.75rem;color:#28222f}.brand-message span{margin-top:2px;font-size:.6875rem;color:#746d79}.brand-message-top{left:26px;top:34px}.brand-message-bottom{right:25px;bottom:26px}
.home-page .page { padding-block:76px 92px; gap:96px; }
.home-section-head { align-items:flex-end; margin-bottom:24px; }.home-section-head>div>p:not(.home-section-kicker){max-width:560px;margin:8px 0 0;color:#6d6673;font-size:.875rem}.home-section-head h2{margin:0;font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.035em}.home-section-kicker{margin-bottom:8px}
.home-page .tautan-lihat { color:#5321E0; font-size:.8125rem; font-weight:750; }.home-page .tautan-lihat span{margin-left:5px}.home-page #latestJobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.home-page #latestJobs>.job-card{height:100%;border-radius:12px;border-color:#e6e2e9;box-shadow:none;transition:border-color .16s ease,background .16s ease}.home-page #latestJobs>.job-card:hover{transform:none;box-shadow:none;border-color:#b9aad9;background:#fdfcff}
.home-categories { padding:32px; border:1px solid #e6e2e9; border-radius:16px; background:#faf9fb; }.home-categories .section-title{margin-bottom:16px}.home-categories .chip{background:#fff;border-color:#ddd8e2;border-radius:8px}.home-categories .chip:hover{border-color:#a995d4;color:#5321E0}
.home-page .janji { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:72px; padding:64px 0 0; border-top:1px solid #ded9e2; }.janji-intro h2{max-width:12ch;margin:0 0 14px;font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.18;letter-spacing:-.04em}.janji-intro>p:last-child{max-width:35ch;color:#6d6673;font-size:.875rem}
.home-page .janji-list { display:grid; grid-template-columns:1fr; gap:0; }.home-page .janji-list li{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:19px 0;border-top:1px solid #ebe7ed}.home-page .janji-list li:first-child{border-top:0;padding-top:0}.home-page .janji-list li>span{color:#5321E0;font-size:.6875rem;font-weight:800;letter-spacing:.06em}.home-page .janji-list strong{display:block;font-size:.9375rem}.home-page .janji-list p{margin:5px 0 0;color:#68616e;font-size:.8125rem;line-height:1.6}
.home-page .ajakan { position:relative; display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:34px; align-items:center; padding:44px 46px; border-radius:20px; background:#21163f; text-align:left; overflow:hidden; }.home-page .ajakan::after{content:'';position:absolute;width:260px;height:260px;right:-130px;top:-140px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.home-page .ajakan>img{width:128px;height:auto;padding:10px;border-radius:10px;background:#fff}.home-page .ajakan h2{max-width:20ch;margin:0;color:#fff;font-size:1.55rem;letter-spacing:-.03em}.home-page .ajakan p:not(.home-section-kicker){max-width:52ch;margin:8px 0 0;color:#c9c0dc;font-size:.8125rem}.home-page .ajakan .home-section-kicker{color:#61d7c7}.ajakan-actions{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.home-page .ajakan .btn{margin:0;background:#fff;border-color:#fff;color:#3d1698;white-space:nowrap}.home-page .ajakan .btn:hover{background:#f1ecfb;border-color:#f1ecfb}.home-page .ajakan .tautan-lihat{margin:0;color:#dcd3ee}
.home-page .site-footer { margin-top:0; background:#faf9fb; border-top-color:#e6e2e9; }.home-page .site-footer .logo img{height:38px}
@media(max-width:980px){.home-hero-grid{grid-template-columns:1fr;gap:36px}.home-brand-stage{min-height:400px}.home-brand-mark{width:55%;max-width:340px}.home-page .ajakan{grid-template-columns:100px 1fr}.home-page .ajakan>img{width:94px}.ajakan-actions{grid-column:2;flex-direction:row;align-items:center}}
@media(max-width:700px){.home-page{overflow-x:hidden}.home-page .site-header .wrap{height:68px;gap:8px}.home-page .site-header .logo{flex:0 0 auto}.home-page .site-header .logo img{height:30px}.home-page .header-actions{gap:6px}.home-page #headerAuth .btn-ghost{display:none}.home-page #headerAuth .btn-primary{padding-inline:13px}.home-page .nav-toggle{flex:0 0 44px}.home-hero{padding:42px 0 48px}.home-hero-grid{min-width:0}.home-hero h1{max-width:100%;font-size:clamp(2.35rem,11.5vw,3.25rem);overflow-wrap:anywhere}.home-hero .lead{font-size:1rem}.home-page .searchbar-hero{grid-template-columns:minmax(0,1fr);padding:7px;gap:4px}.home-search-field{min-width:0;padding:8px 10px;border-right:0;border-bottom:1px solid #ebe7ed}.home-city-field{border-bottom:0}.home-page .searchbar-hero .btn{width:100%;margin-top:2px}.home-assurances{display:grid;grid-template-columns:1fr;gap:8px}.home-brand-stage{width:100%;min-width:0;min-height:320px;border-radius:18px}.home-brand-mark{width:64%}.home-app-tile{width:58px;height:58px;right:18px;top:18px;border-radius:15px}.brand-message{min-width:142px;padding:10px 11px}.brand-message-top{left:15px;top:18px}.brand-message-bottom{right:14px;bottom:14px}.home-page .page{padding-block:56px 72px;gap:68px}.home-page #latestJobs{grid-template-columns:1fr}.home-categories{padding:22px 18px}.home-page .janji{grid-template-columns:1fr;gap:30px;padding-top:46px}.janji-intro h2{max-width:17ch}.home-page .ajakan{grid-template-columns:1fr;gap:18px;padding:30px 22px}.home-page .ajakan>img{width:110px}.ajakan-actions{grid-column:1;flex-direction:column;align-items:stretch}.home-page .ajakan .btn{width:100%;text-align:center}.home-page .ajakan .tautan-lihat{text-align:center}}
@media(prefers-reduced-motion:reduce){.home-page *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ==========================================================================
   Halaman depan — versi tenang
   Dirombak setelah membandingkan dengan KitaLulus & Pintarnya. Temuan yang
   diperbaiki: satu halaman dulu memuat 38 badge, 43 emoji, dan lima seksi
   berat dengan jarak antar seksi cuma 28px. Semuanya dihias, jadi tidak ada
   tempat mata beristirahat — itu yang bikin tampilannya terasa dibuat mesin.
   Sekarang: lebih sedikit yang ditampilkan, lebih banyak ruang kosong, dan
   isinya lowongan sungguhan bukan dekorasi.
   ========================================================================== */

/* Hero memakai lebar kontainer yang sama dengan isi di bawahnya, supaya
   judul dan kartu lowongan berbaris pada garis kiri yang sama. Sebelumnya
   hero dikurung 720px dan ditaruh di tengah, jadi terlihat menjorok masuk
   sementara "Lowongan terbaru" mulai jauh di kiri. */
.hero-inner h1 { margin-bottom: 12px; max-width: 18ch; }
.hero-inner .lead { margin-bottom: 28px; max-width: 56ch; }
.searchbar-hero { max-width: 780px; }

/* Kolom pencarian dibuat lebih tinggi: ini elemen paling sering disentuh,
   dan sasaran kami memakainya dengan jempol di HP. */
.searchbar-hero { padding: 10px; }
.searchbar-hero .input,
.searchbar-hero .select { min-height: 48px; font-size: var(--fs-body); }
.searchbar-hero .btn { min-height: 48px; padding-inline: 28px; }

.hero-note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-500); }

.page { padding-block: var(--space-section); display: flex;
        flex-direction: column; gap: var(--space-section); }

/* Tautan "lihat semua" dibuat sebagai teks, bukan tombol — di halaman depan
   sudah ada satu tombol utama, dan dua tombol setara membuat orang ragu. */
.tautan-lihat { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* Blok janji: tanpa kartu, tanpa ikon. Kalimatnya yang bekerja. */
.janji { border-top: 1px solid var(--border); padding-top: var(--space-block); }
.janji-list { list-style: none; margin: 0; padding: 0;
              display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.janji-list li { color: var(--ink-700); line-height: 1.65; }
.janji-list strong { color: var(--ink-900); }

.ajakan { text-align: center; padding: var(--space-block) 0; }
.ajakan h2 { margin-bottom: 8px; }
.ajakan p { color: var(--ink-500); max-width: 42ch; margin: 0 auto 24px; }
.ajakan .tautan-lihat { display: inline-block; margin-left: 16px; }

@media (max-width: 700px) {
  .janji-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ajakan .btn { width: 100%; }
  .ajakan .tautan-lihat { display: block; margin: 16px 0 0; }
}

/* Kartu lowongan versi tenang: meta jadi satu baris bertitik pemisah,
   gaji dan waktu dipisah ke kaki kartu supaya mata punya urutan baca. */
.job-meta span + span::before { content: '·'; margin: 0 8px 0 0; color: var(--ink-300); }
.job-kaki {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.job-waktu { font-size: var(--fs-xs); color: var(--ink-400); white-space: nowrap; }
.tanda-verif { color: var(--ok-700); font-weight: 700; }
.chip-jumlah { color: var(--ink-400); font-weight: 500; }

/* Keadaan "belum ada lowongan" di halaman depan. Situs yang baru dibuka pasti
   melewati fase ini; kalau dibiarkan cuma satu baris abu, kesannya rusak. */
.kosong-awal {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: 48px 24px; text-align: center;
}
.kosong-awal h3 { margin-bottom: 8px; }
.kosong-awal p { color: var(--ink-500); max-width: 46ch; margin: 0 auto 24px; }
@media (max-width: 620px) { .kosong-awal { padding: 36px 18px; } .kosong-awal .btn { width: 100%; } }

/* ==========================================================================
   Public suite — shared with the landing page
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100; width: 100%;
  background: rgba(255,255,255,.96); border-bottom: 1px solid #e6e2e9;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-header .wrap { height: 76px; }
.site-header .logo img, .site-footer .logo img { display:block; width:auto; height:38px; }
.nav-links a { border-radius:8px; color:#4a4654; }
.nav-links a:hover,.nav-links a[aria-current="page"] { color:#5321e0; background:#f2edfc; }
.header-actions .btn { border-radius:8px; }
.site-footer { margin-top:0; padding:52px 0 24px; background:#faf9fb; border-top:1px solid #e6e2e9; }
.site-footer h4 { margin-bottom:14px; color:#28222f; font-size:.8125rem; }
.site-footer p,.site-footer small,.site-footer a { color:#68616e; font-size:.8125rem; line-height:1.65; }
.site-footer a:hover { color:#5321e0; }

.public-page { min-height:100vh; background:#fff; color:#28222f; }
.public-intro { padding:52px 0 34px; background:#faf9fb; border-bottom:1px solid #e6e2e9; }
.public-intro-inner { max-width:1180px; }
.public-kicker { margin:0 0 10px; color:#5321e0; font-size:.72rem; line-height:1; font-weight:800; letter-spacing:.105em; text-transform:uppercase; }
.public-intro h1,.employer-hero h1,.auth-brand h1 { margin:0; max-width:17ch; color:#28222f; font-size:clamp(2rem,4vw,3.25rem); line-height:1.08; letter-spacing:-.045em; }
.public-intro h1 + p { max-width:650px; margin:14px 0 0; color:#68616e; font-size:.95rem; line-height:1.7; }
.public-main { min-height:420px; padding-top:34px; padding-bottom:76px; }
.public-search { max-width:850px; margin:28px 0 0; padding:7px; border-color:#ddd8e2; border-radius:12px; box-shadow:0 12px 32px rgba(40,25,70,.06); }
.public-search .input,.public-search .select { min-height:46px; border:0; box-shadow:none; }
.public-search .btn { min-height:46px; border-radius:8px; padding-inline:26px; }
.company-search { max-width:620px; }

.jobs-layout { grid-template-columns:260px minmax(0,1fr); gap:34px; align-items:start; }
.jobs-page #filterPanel { position:sticky; top:102px; padding:20px; border-color:#e6e2e9; border-radius:12px; box-shadow:none; }
.jobs-page #jobList { gap:10px; }
.jobs-page #jobList .job-card { border-color:#e6e2e9; border-radius:12px; box-shadow:none; }
.jobs-page #jobList .job-card:hover { transform:none; border-color:#b9aad9; background:#fdfcff; box-shadow:none; }

.companies-page #companyList { gap:12px; }
.company-card { min-height:220px; padding:22px; border-color:#e6e2e9; border-radius:12px; box-shadow:none; }
.company-card:hover { transform:none; border-color:#b9aad9; background:#fdfcff; box-shadow:none; }
.company-card .avatar { background:#eee9f9; color:#5321e0; }
.company-verified { display:inline-flex; margin:5px 0 2px; padding:3px 7px; border-radius:5px; background:#e7f7f3; color:#197666; font-size:.65rem; font-weight:750; letter-spacing:.03em; }

.employer-hero { padding:68px 0 72px; background:#faf9fb; border-bottom:1px solid #e6e2e9; }
.employer-hero-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); gap:76px; align-items:center; }
.employer-hero .lead { max-width:610px; margin:20px 0 0; color:#68616e; font-size:1rem; line-height:1.75; }
.employer-flow { padding:30px; border:1px solid #ddd7e5; border-radius:16px; background:#fff; box-shadow:0 18px 48px rgba(45,29,75,.07); }
.employer-flow h2 { margin:0 0 22px; font-size:1.45rem; letter-spacing:-.03em; }
.employer-steps { margin:0; padding:0; list-style:none; counter-reset:steps; }
.employer-steps li { position:relative; min-height:46px; padding:0 0 18px 42px; color:#68616e; font-size:.82rem; line-height:1.55; counter-increment:steps; }
.employer-steps li::before { content:counter(steps); position:absolute; left:0; top:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#eee9f9; color:#5321e0; font-size:.68rem; font-weight:800; }
.employer-steps li:not(:last-child)::after { content:''; position:absolute; left:12px; top:28px; bottom:2px; width:1px; background:#e5dfeb; }
.employer-steps li:last-child { padding-bottom:0; }
.employer-steps strong { color:#28222f; }
.employer-main { display:flex; flex-direction:column; gap:72px; padding-top:72px; padding-bottom:88px; }
.employer-features { gap:12px; }
.employer-features .card { padding:26px; border-color:#e6e2e9; border-radius:12px; box-shadow:none; }
.employer-features .card>span { display:block; margin-bottom:25px; color:#5321e0; font-size:.7rem; font-weight:800; letter-spacing:.08em; }
.employer-rules { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); column-gap:68px; padding:46px; border:1px solid #e6e2e9; border-radius:16px; background:#faf9fb; }
.employer-rules h2,.employer-rules>p { grid-column:1; }
.employer-rules ul { grid-column:2; grid-row:1 / span 3; margin:0; }
.employer-rules li { padding-bottom:10px; color:#514b57; line-height:1.6; }
.employer-cta { padding:42px 46px; border-radius:18px; color:#fff; background:#21163f; overflow:hidden; }
.employer-cta h2 { color:#fff; }
.employer-cta p { margin-bottom:0; color:#c9c0dc; }
.employer-cta .btn { position:relative; border-color:#fff; background:#fff; color:#3d1698; }

.auth-page { background:#faf9fb; }
.auth-shell { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr); max-width:1040px; gap:72px; align-items:start; padding-top:64px; padding-bottom:84px; }
.auth-brand { position:sticky; top:124px; padding:40px 8px 0; }
.auth-brand img { width:78px; height:78px; object-fit:contain; margin-bottom:28px; }
.auth-brand h1 { font-size:clamp(2rem,3.5vw,2.8rem); }
.auth-brand>p:last-child { max-width:39ch; margin:16px 0 0; color:#68616e; font-size:.9rem; line-height:1.7; }
.auth-card { padding:34px; border-color:#e2dde6; border-radius:16px; box-shadow:0 18px 50px rgba(45,29,75,.07); }
.auth-card>h1 { margin-bottom:8px; font-size:1.5rem!important; letter-spacing:-.025em; }
.auth-card .chip { min-height:44px; border-radius:8px; }
.auth-card .input { min-height:46px; border-radius:8px; }

@media(max-width:900px){
  .employer-hero-grid,.auth-shell { grid-template-columns:1fr; gap:40px; }
  .auth-shell { max-width:650px; }
  .auth-brand { position:static; padding-top:0; }
  .auth-brand img { width:64px; height:64px; margin-bottom:20px; }
  .employer-rules { grid-template-columns:1fr; }
  .employer-rules h2,.employer-rules>p,.employer-rules ul { grid-column:1; grid-row:auto; }
}
@media(max-width:700px){
  .site-header .wrap { height:68px; gap:8px; }
  .site-header .logo img { height:30px; }
  .header-actions { gap:6px; }
  #headerAuth .btn-ghost { display:none; }
  #headerAuth .btn-primary { padding-inline:13px; }
  .nav-toggle { flex:0 0 44px; }
  .site-footer { padding-top:40px; }
  .public-intro { padding:38px 0 26px; }
  .public-intro h1 { font-size:2.25rem; }
  .public-search { display:grid; grid-template-columns:1fr; gap:4px; }
  .public-search .divider-v { display:none; }
  .public-search .input,.public-search .select { width:100%; }
  .public-main { padding-top:24px; padding-bottom:56px; }
  .jobs-layout { grid-template-columns:1fr; gap:24px; }
  .jobs-page #filterPanel { position:static; }
  .companies-page #companyList { grid-template-columns:1fr; }
  .employer-hero { padding:44px 0 52px; }
  .employer-hero-grid { gap:34px; }
  .employer-flow { padding:24px 20px; }
  .employer-main { gap:52px; padding-top:52px; padding-bottom:64px; }
  .employer-features { grid-template-columns:1fr; }
  .employer-rules,.employer-cta { padding:30px 22px; }
  .employer-cta .row-between { align-items:flex-start; flex-direction:column; gap:22px; }
  .auth-shell { gap:30px; padding-top:38px; padding-bottom:58px; }
  .auth-brand { padding-inline:0; }
  .auth-card { padding:26px 20px; }
}

/* Hero preview: informasi produk, tanpa pengulangan logo. */
.home-product-preview { min-height:520px; padding:22px; border:1px solid #e1dce7; border-radius:20px; background:#f8f6fb; color:#28222f; }
.preview-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 2px 18px; color:#6d6673; font-size:.72rem; font-weight:700; }
.preview-status { padding:5px 8px; border-radius:6px; background:#e4f5f1; color:#187667; font-size:.66rem; letter-spacing:.025em; }
.preview-job { padding:26px; border:1px solid #e3dee7; border-radius:14px; background:#fff; box-shadow:0 14px 36px rgba(45,29,75,.055); }
.preview-label { margin:0 0 10px; color:#5321e0; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.preview-job h2 { margin:0; font-size:1.45rem; letter-spacing:-.035em; }
.preview-location { margin:6px 0 22px; color:#716a76; font-size:.78rem; }
.preview-salary { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid #eeeaf0; border-bottom:1px solid #eeeaf0; }
.preview-salary span,.preview-facts dt { color:#817a85; font-size:.68rem; }
.preview-salary strong { color:#29222f; font-size:.95rem; }
.preview-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:17px 0 0; }
.preview-facts div { display:flex; flex-direction:column; gap:3px; }
.preview-facts dd { margin:0; font-size:.76rem; font-weight:700; }
.preview-progress { margin-top:12px; padding:22px 24px; border:1px solid #e3dee7; border-radius:14px; background:#fff; }
.preview-progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.preview-progress-head div { display:flex; flex-direction:column; gap:3px; }
.preview-progress-head span,.preview-progress-head small { color:#817a85; font-size:.68rem; }
.preview-progress-head strong { font-size:.9rem; }
.preview-progress-head small { padding:4px 7px; border-radius:6px; background:#f1edf8; color:#5321e0; font-weight:750; }
.preview-progress ol { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:20px 0 14px; padding:0; list-style:none; }
.preview-progress li { position:relative; padding-top:17px; color:#8a8490; font-size:.6rem; text-align:center; }
.preview-progress li::before { content:''; position:absolute; left:-50%; right:50%; top:5px; height:2px; background:#e5e0e8; }
.preview-progress li:first-child::before { display:none; }
.preview-progress li span { position:absolute; z-index:1; top:1px; left:50%; width:10px; height:10px; transform:translateX(-50%); border:2px solid #d8d2dc; border-radius:50%; background:#fff; }
.preview-progress li.is-done::before,.preview-progress li.is-active::before { background:#22a995; }
.preview-progress li.is-done span { border-color:#22a995; background:#22a995; }
.preview-progress li.is-active { color:#5321e0; font-weight:750; }
.preview-progress li.is-active span { border-color:#5321e0; background:#5321e0; box-shadow:0 0 0 4px #eee9f9; }
.preview-progress>p { margin:0; color:#746d79; font-size:.68rem; line-height:1.55; text-align:center; }
@media(max-width:980px){.home-product-preview{min-height:0}}
@media(max-width:700px){.home-product-preview{width:100%;min-width:0;padding:14px;border-radius:16px}.preview-job{padding:20px}.preview-progress{padding:20px 14px}.preview-progress li{font-size:.55rem}}

/* Auth public — editorial, fokus pada kepercayaan dan satu aksi utama. */
.auth-page { background:#f7f6f9; }
.auth-page .site-footer { background:#fff; }
.auth-shell { max-width:1120px; grid-template-columns:minmax(330px,.86fr) minmax(440px,1.14fr); gap:88px; padding-top:72px; padding-bottom:96px; }
.auth-brand { padding:30px 0 0; }
.auth-brand h1 { max-width:12ch; font-size:clamp(2.35rem,4.2vw,3.55rem); line-height:1.03; }
.auth-brand>p:last-of-type { max-width:42ch; }
.auth-benefits { display:grid; gap:0; margin:34px 0 0; padding:0; list-style:none; border-top:1px solid #ded9e2; }
.auth-benefits li { display:grid; grid-template-columns:34px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid #e7e3e9; }
.auth-benefits li>span { padding-top:2px; color:#5321e0; font-size:.68rem; font-weight:800; letter-spacing:.06em; }
.auth-benefits strong,.auth-benefits small { display:block; }
.auth-benefits strong { color:#332e38; font-size:.8rem; }
.auth-benefits small { margin-top:3px; color:#7a737f; font-size:.7rem; line-height:1.45; }
.auth-card { padding:38px; border-color:#ddd8e2; border-radius:14px; box-shadow:0 24px 60px rgba(45,29,75,.065); }
.auth-card #googleBox { margin-top:24px; }
.auth-card #googleRoleRow { padding:4px; border-radius:10px; background:#f5f3f7; }
.auth-card #googleRoleRow .chip { border:0; background:transparent; }
.auth-card #googleRoleRow .chip[aria-pressed=true] { background:#fff; color:#5321e0; box-shadow:0 1px 4px rgba(40,28,64,.11); }
.auth-card #googleBtn { min-height:50px; border-color:#d8d2dd; background:#fff; color:#28222f; }
.auth-card #googleBtn:hover { border-color:#aea3b8; background:#faf9fb; }
.auth-card #googleBtn.is-disabled { cursor:not-allowed; opacity:.58; box-shadow:none; }
.auth-card .btn-primary { box-shadow:0 8px 20px rgba(83,33,224,.16); }
.auth-card .btn-primary:hover { box-shadow:0 10px 24px rgba(83,33,224,.2); }
.auth-card .field label { color:#38323f; font-size:.78rem; }
.auth-card .help { color:#827b88; }
.auth-second-factor{margin-top:16px;padding-top:16px;border-top:1px solid #e4dfe8}.auth-second-factor .alert{margin-bottom:14px}.auth-second-factor .field{margin-bottom:14px}
@media(max-width:900px){.auth-shell{max-width:660px;gap:38px}.auth-brand{padding-top:0}.auth-brand h1{max-width:14ch}.auth-benefits{grid-template-columns:repeat(3,1fr);gap:10px;border:0}.auth-benefits li{display:block;padding:14px;border:1px solid #e3dee7;border-radius:10px;background:#fff}.auth-benefits li>span{display:block;margin-bottom:10px}}
@media(max-width:700px){.auth-shell{gap:28px;padding-top:38px}.auth-brand h1{font-size:2.25rem}.auth-benefits{grid-template-columns:1fr}.auth-benefits li{display:grid}.auth-card{padding:26px 20px}}

/* Trust sections — editorial, tanpa garis/tabel dan tanpa logo berulang. */
.auth-benefits { gap:9px; margin-top:30px; border:0; }
.auth-benefits li { position:relative; grid-template-columns:28px 1fr; gap:12px; padding:14px 15px; border:0; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px #e7e3ea; }
.auth-benefits li>span { display:grid; place-items:center; width:24px; height:24px; padding:0; overflow:hidden; color:transparent; font-size:0; border-radius:7px; background:#e8f7f3; }
.auth-benefits li>span::after { content:'✓'; color:#16806e; font-size:.7rem; font-weight:900; }
.auth-benefits strong { font-size:.78rem; }
.auth-benefits small { font-size:.68rem; }

.home-page .janji { display:block; padding:50px; border:0; border-radius:20px; background:#f7f6f9; }
.home-page .janji-intro { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(300px,1.1fr); column-gap:72px; align-items:end; padding-bottom:34px; }
.home-page .janji-intro h2 { max-width:15ch; margin-bottom:0; font-size:clamp(2rem,3.5vw,3rem); }
.home-page .janji-intro>p:last-child { align-self:end; max-width:43ch; margin:0 0 4px; font-size:.9rem; line-height:1.7; }
.home-page .janji-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.home-page .janji-list li,.home-page .janji-list li:first-child { position:relative; display:block; min-height:176px; padding:24px; border:1px solid #e5e1e8; border-radius:12px; background:#fff; }
.home-page .janji-list li>span { display:inline-flex; margin-bottom:28px; padding:5px 7px; border-radius:6px; background:#f0ebfa; color:#5321e0; font-size:.64rem; }
.home-page .janji-list strong { font-size:1rem; letter-spacing:-.015em; }
.home-page .janji-list p { max-width:42ch; margin-top:7px; font-size:.77rem; line-height:1.65; }

.home-page .ajakan { grid-template-columns:minmax(0,1fr) auto; gap:48px; padding:52px 56px; border-radius:16px; }
.home-page .ajakan>div:first-child { max-width:700px; }
.home-page .ajakan h2 { max-width:24ch; font-size:clamp(1.55rem,2.8vw,2.15rem); line-height:1.2; }
.home-page .ajakan p:not(.home-section-kicker) { max-width:60ch; font-size:.84rem; line-height:1.7; }
.ajakan-actions { flex-direction:row; align-items:center; gap:18px; }
.home-page .ajakan .btn { min-height:48px; padding-inline:24px; border-radius:9px; }
.home-page .ajakan .tautan-lihat { white-space:nowrap; }

@media(max-width:900px){
  .auth-benefits { grid-template-columns:1fr; }
  .auth-benefits li { display:grid; }
  .home-page .janji { padding:36px 28px; }
  .home-page .janji-intro { grid-template-columns:1fr; gap:14px; }
  .home-page .janji-intro>p:last-child { margin:0; }
  .home-page .ajakan { grid-template-columns:1fr; gap:26px; }
}
@media(max-width:700px){
  .home-page .janji { padding:28px 18px; border-radius:14px; }
  .home-page .janji-list { grid-template-columns:1fr; }
  .home-page .janji-list li,.home-page .janji-list li:first-child { min-height:0; padding:20px; }
  .home-page .janji-list li>span { margin-bottom:20px; }
  .home-page .ajakan { padding:32px 22px; }
  .ajakan-actions { flex-direction:column; align-items:stretch; }
}