/* =====================================================================
   Tema "Clean Neutral" untuk situs karir — sama dengan Dashboard HR.
   Dimuat setelah gaya bawaan halaman; hanya mengubah tampilan, bukan isi/struktur.
   ===================================================================== */
:root{
  --ink:#18181B; --ink-2:#3F3F46; --muted:#71717A; --muted-2:#71717A; --faint:#A1A1AA;
  --line:#E7E7EA; --line-strong:#E4E4E7; --bg:#F7F7F8; --chip:#F4F4F5; --paper:#fff;
  --blue:#1A73E8; --blue-2:#0B63D8; --blue-soft:#EEF5FF; --blue-50:#EEF5FF;
  --shadow-card:0 1px 2px rgba(24,24,27,.04); --shadow:0 1px 2px rgba(24,24,27,.04);
  --nest:#F4F4F5; --sans:Inter,Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);letter-spacing:-.005em}
/* latar: pola titik halus di bagian atas, tanpa gradasi biru */
body::before{background:radial-gradient(circle at 1px 1px,rgba(24,24,27,.07) 1px,transparent 0) 0 0/18px 18px!important;
  mask-image:linear-gradient(180deg,#000 0%,transparent 520px);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 520px)}
::selection{background:#DCEBFF}

/* ---------- navigasi ---------- */
.nav{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(24,24,27,.04),0 8px 24px -16px rgba(24,24,27,.18)!important}
.nav-links a{color:var(--ink-2);font-weight:500}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:#F4F4F5}
.nav-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.04)}
.nav-ghost:hover{background:#FAFAFA}
.nav-cta{background:#18181B;font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.nav-cta:hover{background:#27272A}
.burger{border-color:var(--line)}
.mobile-menu{border-color:var(--line);box-shadow:0 20px 40px -20px rgba(24,24,27,.3)}
.mobile-menu a{font-weight:500}

/* ---------- hero & pencarian ---------- */
.hero p.lead{color:#52525B}
.hsearch{background:var(--nest);border:1px solid var(--line);border-radius:22px;padding:6px;gap:6px}
.hs-field{border-color:var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(24,24,27,.04);color:var(--faint)}
.hs-field:focus-within{border-color:#A1C8FF;box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.hs-btn{background:#18181B;border-radius:16px;font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.hs-btn:hover{background:#27272A}
.hero-note{color:var(--muted)}
.hero-note b{color:var(--ink)}
.hero-note a{color:var(--blue)}

/* ---------- daftar lowongan ---------- */
.jobs-head h3{font-weight:600;letter-spacing:-.02em}
.jobs-head h3 small{color:var(--muted)}
.sort{border-color:var(--line);font-weight:500;box-shadow:0 1px 2px rgba(24,24,27,.04)}
.active-filter{border-radius:10px}
.grid .card,.jc{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:none}
.grid .card:hover,.jc:hover{transform:none;border-color:#D4D4D8;box-shadow:0 0 0 5px var(--nest),0 0 0 6px var(--line),0 10px 24px -14px rgba(24,24,27,.25)}
.card-logo,.jc-logo{background:#FAFAFA;border-color:var(--line);border-radius:12px}
.grid .card h5,.jc h3{font-weight:600;letter-spacing:-.01em}
.grid .card .meta,.jc .meta{color:var(--muted)}
.tag{font-weight:500;border-radius:8px;border:1px solid rgba(24,24,27,.06)}
.t-loc{background:#F4F4F5;color:var(--ink-2)}
.card-foot,.jc-foot{border-top-color:var(--line-2,#F0F0F2)}
.card-foot .go,.jc-foot .go{color:var(--ink);font-weight:600}
.grid .card:hover .go,.jc:hover .go{color:var(--blue)}
.fav{color:var(--faint)}
.empty{color:var(--muted)}

/* ---------- life at tempatbelajar ---------- */
.pill{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.04)}
.pill i{background:var(--blue)}
.office-head p{color:#52525B}
.btn-ghost,.reel-toggle{border-color:var(--line);font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.04)}
.btn-ghost:hover,.reel-toggle:hover{border-color:#D4D4D8;color:var(--ink)}
.frame{border-radius:20px}
.join{background:#fff;border:1px solid var(--line);box-shadow:0 0 0 6px var(--nest),0 0 0 7px var(--line);margin-left:7px;margin-right:7px}
.join a{background:#18181B;font-weight:600}
.join a:hover{background:#27272A}

/* ---------- footer ---------- */
footer{background:#18181B}
.socials a{border-color:rgba(255,255,255,.14)}

/* ---------- halaman detail lowongan ---------- */
.layout .card,.head.card,.card.head,.related .card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:none}
.card h2,.card-head h2,.related-head h2{font-weight:600;letter-spacing:-.015em}
.head h1{font-weight:600;letter-spacing:-.025em}
.company,.sub{color:var(--muted)}
.head-logo{border-color:#fff;box-shadow:0 0 0 1px var(--line)}
.btn{font-weight:600;border-radius:12px}
.btn-primary{background:#18181B;box-shadow:0 1px 2px rgba(24,24,27,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{background:#27272A}
.btn-primary:disabled{background:#D4D4D8}
.btn-soft,.btn-line,.btn-light{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.04)}
.btn-soft:hover,.btn-line:hover{background:#FAFAFA;border-color:#D4D4D8}
.btn-soft.on{background:#FFF1F2;border-color:#FECDD3;color:#E11D48}
.btn-ink{background:#18181B}
.jsec li::before{background:var(--blue)}
.chip{background:#F4F4F5;border:1px solid var(--line);color:var(--ink-2);font-weight:500;border-radius:9px}
.link{color:var(--blue)}
.facts .fi{background:var(--nest);color:var(--ink);border:1px solid var(--line)}
.facts b{font-weight:600}
.bar{background:#F1F1F3}
.bar i{background:linear-gradient(90deg,#5AB2FF,#1A7BFF)}
.dl-date{font-weight:600;letter-spacing:-.02em}
.mobile-apply{background:rgba(255,255,255,.92);border-color:var(--line)}

/* form lamaran (drawer) */
.drawer{border:1px solid var(--line);box-shadow:0 30px 80px -24px rgba(24,24,27,.35)}
.d-top h2,.pane h3,.success h2{font-weight:600;letter-spacing:-.02em}
.input{border-color:var(--line-strong);border-radius:12px}
.input:focus{border-color:#A1C8FF;box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.phone{border-color:var(--line-strong);border-radius:12px}
.drop{border-radius:16px;border-color:#D4D4D8;background:#FAFAFA}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-soft)}
.file{border-color:var(--line);border-radius:14px}
.seg{background:#F4F4F5;border-radius:12px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.08),0 0 0 1px var(--line)}
.chips span{border-color:var(--line-strong);font-weight:500}
.review{border-color:var(--line);border-radius:16px}
.toast{background:#18181B;border-radius:12px}