*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  color-scheme: light;
  --color-erika: 30 99 174;
  --color-erika-link: 30 99 174;
  --color-erika-hover: 24 84 136;
  --color-erika-active: 20 69 111;
  --color-erika-soft: 234 242 250;
  --color-erika-line: 207 224 240;
  --color-erika-bright: 0 192 238;
  --color-success: 100 180 12;
  --color-danger: 203 0 0;
  --color-warning: 255 140 2;
  --color-ink: 17 24 39;
  --color-ink-muted: 107 114 128;
  --color-line: 229 231 235;
  --color-line-hover: 203 208 216;
  --color-shell: 245 248 252;
  --color-surface: 255 255 255;
  --color-success-ink: 61 122 0;
  --color-warning-ink: 146 74 0;
  --karir-brand: 30 99 174;
  --karir-brand-dark: 24 84 136;
  --karir-brand-tint: 234 242 250;
  --karir-brand-line: 207 224 240;
  --karir-ink: 26 26 26;
  --karir-body: 55 53 47;
  --karir-muted: 107 106 103;
  --karir-meta: 112 111 108;
  --karir-placeholder: 196 195 192;
  --karir-surface: 255 255 255;
  --karir-canvas: 250 250 250;
  --karir-shell: 247 247 245;
  --karir-line-hover: 217 216 213;
  --karir-line: 238 238 238;
  --karir-line-strong: 148 147 144;
  --karir-line-control: 183 183 183;
  --karir-bar-off: 229 228 226;
  --karir-watermark: 211 227 242;
  --karir-review: 180 83 9;
  --karir-review-bg: 255 251 235;
  --karir-offer: 4 120 87;
  --karir-offer-bg: 236 253 245;
  --karir-rejected: 200 30 30;
  --karir-rejected-bg: 254 242 242;
  --karir-premium: 212 160 23;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-erika: 53 104 159;
  --color-erika-link: 91 155 224;
  --color-erika-hover: 65 121 182;
  --color-erika-active: 76 136 201;
  --color-erika-soft: 27 43 68;
  --color-erika-line: 53 73 107;
  --color-erika-bright: 34 211 238;
  --color-success: 134 214 51;
  --color-danger: 255 82 82;
  --color-warning: 255 167 51;
  --color-ink: 232 235 242;
  --color-ink-muted: 139 150 172;
  --color-line: 38 48 74;
  --color-line-hover: 58 71 104;
  --color-shell: 12 18 32;
  --color-surface: 19 27 44;
  --color-success-ink: 134 214 51;
  --color-warning-ink: 255 167 51;
}

strong,
  b {
  font-weight: 500;
}

[x-cloak] {
  display: none !important;
}

@media print {
  /* `footer` (elemen), bukan `.k-footer`: varian footer ringkas di
       shell-footer.ejs tidak membawa kelas itu. */

  body:has(.k-doc) .k-topbar,
    body:has(.k-doc) .k-navrow,
    body:has(.k-doc) footer,
    body:has(.k-doc) .k-skip {
    display: none !important;
  }
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ── Flash lintas-redirect (`packages/ui/views/partials/flash-messages.ejs`) ──
     Partialnya DIBAGI tiga app, jadi nama kelasnya netral (`ui-`), bukan
     ber-prefix app. Definisinya tetap per-app supaya warnanya ikut token app
     masing-masing.

     Sebelum 2026-09-21 partial itu merakit rupanya dari rantai ternary utility
     di dalam atribut `class` — satu baris 230 karakter yang harus dibaca ulang
     setiap kali seseorang menambah jenis pesan. */

.ui-alert {
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ui-alert-success {
  background-color: rgb(var(--color-success) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-ink) / var(--tw-text-opacity, 1));
}

.ui-alert-error {
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.ui-alert-warning {
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.ui-alert-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* ── layout ──────────────────────────────────────────────────────── */

/* Pedoman §3 menetapkan padding horizontal 32px. Itu dibuat untuk
     desktop: di layar 360px, 32px kiri+kanan memakan 18% lebar layar.
     Deviasi terukur & disengaja — 16px di mobile, 32px mulai md. */

.k-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1320px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .k-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.k-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.k-skip:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 50;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ── dua bar sticky bertumpuk ────────────────────────────────────── */

/* .k-navrow WAJIB top-navbar (60px), BUKAN top-0 — kalau tidak, baris
     menu menempel di 0 dan tumpang tindih dengan top nav. z-20 di bawah
     z-30 supaya baris menu menyelinap DI BAWAH top nav saat menggulir,
     bukan menutupinya. Semua target anchor butuh
     `scroll-margin-top: theme(spacing.navstack)` (100px) — tanpa itu klik
     menu mendaratkan judul seksi di balik kedua bar. */

.k-topbar {
  position: sticky;
  top: 0px;
  z-index: 30;
  height: 60px;
  flex: none;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
}

.k-navrow {
  position: sticky;
  top: 60px;
  z-index: 20;
  height: 40px;
  flex: none;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
}

/* Baris menu jadi strip gulir horizontal di mobile — TANPA hamburger /
     drawer. 6 label pendek muat, dan ini menghindari membangun drawer di
     increment fondasi. Deviasi dari karir-fe, yang menyembunyikan menu
     sepenuhnya di bawah 1366px. */

.k-navscroll {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.k-navscroll::-webkit-scrollbar {
  display: none;
}

.k-nav-item {
  display: flex;
  height: 40px;
  flex: none;
  align-items: center;
  white-space: nowrap;
  border-bottom-width: 2px;
  border-color: transparent;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-nav-item:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* aria-current="page" adalah SUMBER KEBENARAN state aktif — pembeda
     non-warna (pedoman §6 "aksesibilitas non-warna"), bukan sekadar kelas
     warna. Garis bawah 2px menyertainya. */

.k-nav-item[aria-current="page"] {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

/* `location`, BUKAN `page` — navigasi DI DALAM satu halaman (nav seksi
     /profile, /lowongan-detail). Nilai `page` berarti "ini halaman yang sedang
     dibuka"; memakainya untuk anchor seksi memberi tahu pembaca layar hal yang
     salah. Tampilannya sengaja identik: yang berbeda cuma artinya.

     ADA DI SINI, bukan sebagai `aria-[current=location]:*` di view — dua varian
     arbitrer yang diketik ulang tiap kali dipakai, dan `pnpm check:ui`
     menghitungnya sebagai atom tanpa sandaran komponen. */

.k-nav-item[aria-current="location"] {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

/* Item yang route-nya belum ter-mount. Ketersediaan DITURUNKAN dari
     router yang benar-benar dimount (app.locals.nav), bukan label
     hardcode di view — erika sudah pernah gagal persis di situ (catatan
     "Segera" yang basi mematikan aksi yang route-nya sudah hidup). */

.k-nav-item.is-soon {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-meta) / var(--tw-text-opacity, 1));
}

.k-nav-soon-tag {
  margin-left: 0.375rem;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Angka hitungan menempel di kanan label (§3). JANGAN dirender sebelum
     login — §4: "angka milik pengguna tidak boleh tampil sebelum login". */

.k-nav-count {
  margin-left: 0.375rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Slot flash-messages: padding atas HANYA kalau partialnya benar-benar
     merender elemen. Padding tanpa syarat menyisipkan 12px di atas setiap
     halaman walau tidak ada satu pun flash — itu sumber celah yang pernah
     terlihat di beranda (terukur 12px, persis token `stack`).

     ADA DI SINI, BUKAN DI VIEW. `layouts/main.ejs` menulisnya sebagai
     `has-[*]:pt-stack` langsung di view, dan itu nilai arbitrer — yang
     dilarang di view oleh audit-ui-atoms. Menyalinnya ke layout kedua berarti
     menambah pelanggaran kedua; dijadikan kelas komponen sekali di sini.
     `layouts/main.ejs` bisa ikut memakainya kelak (angka arbitrer di view
     turun satu), tapi itu perubahan tersendiri di luar cakupan mini app. */

.k-flash-slot:has(*) {
  padding-top: 12px;
}

/* ── sheet / modal formulir profil ────────────────────────────────
     BOTTOM SHEET di ponsel, modal terpusat mulai `sm`.

     TANPA CABANG isMiniApp, dan itu disengaja. Tujuh partial /profile
     memakai pembungkus yang sama, dan bentuk "menempel di dasar layar"
     adalah yang benar untuk SETIAP layar sempit — bukan khusus mini app.
     Web di ponsel mendapat perbaikan yang sama; kalau digerbangi kanal,
     karir.com mobile tetap memakai modal yang melayang di tengah dengan
     jempol harus menjangkau ke atas.

     KENAPA JADI KELAS KOMPONEN. Versi sebelumnya menulis rangkaian utility
     yang sama PERSIS di tujuh berkas, dua di antaranya nilai arbitrer
     (`pt-[8vh]` di pembungkus, `max-h-[85vh]` di panel) — 14 pelanggaran
     nilai arbitrer di view sekaligus. Dipindahkan ke sini, angkanya turun
     dan bentuknya tidak bisa lagi melenceng antar partial. */

.k-sheet {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .k-sheet {
    align-items: center;
    padding: 16px;
  }
}

.k-sheet-scrim {
  position: fixed;
  inset: 0px;
  z-index: 40;
  background-color: rgb(var(--karir-ink) / 0.4);
}

/* Sudut ATAS saja di ponsel: sheet menempel ke tepi bawah layar, jadi sudut
     bawah yang membulat akan menyisakan celah kanvas setebal radius di
     bawahnya. Mulai `sm` ia melayang lagi dan keempat sudutnya membulat. */

.k-sheet-panel {
  position: relative;
  z-index: 50;
  width: 100%;
  overflow-y: auto;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 12px 12px 0 0;
  max-height: 88vh;
  /* Gesture bar iOS menutupi ~34px terbawah; tanpa ini tombol simpan di
       dasar sheet tidak bisa ditekan. */
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 640px) {
  .k-sheet-panel {
    max-width: 42rem;
    border-radius: 8px;
    max-height: 85vh;
    padding-bottom: 0;
  }
}

/* Baris aksi (Simpan / Batal) di dasar sheet formulir profil — LENGKET.
     Panelnya `overflow-y-auto`, jadi `sticky bottom-0` menempel pada area gulir
     itu: pada formulir panjang (Preferensi punya empat `<select multiple>`)
     tombol Simpan tidak lagi harus dicari dengan menggulir sampai habis.

     `-mx-[18px] px-[18px]` mengembalikan padding `.k-pcard-body` DI DALAM bar,
     supaya latar dan garis atasnya membentang penuh sampai tepi panel — bar
     lengket yang berhenti di dalam padding menyisakan celah tempat isi terlihat
     menyelinap lewat di kirinya.

     `-mb-card` mencabut padding bawah panel supaya bar benar-benar duduk di
     tepi; padding bawahnya lalu dipasang sendiri BERSAMA safe-area. Itu bukan
     hiasan: `.k-sheet-panel` sudah menyediakan `env(safe-area-inset-bottom)`,
     tapi `.k-pcard-body` yang dipakai panel formulir profil menimpa
     `padding-bottom`-nya — jadi tanpa baris ini tombol Simpan berakhir di bawah
     gesture bar iPhone dan tidak bisa ditekan. */

.k-sheet-actions {
  position: sticky;
  bottom: 0px;
  z-index: 10;
  margin-left: -18px;
  margin-right: -18px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* Judul formulir di puncak sheet — LENGKET, pasangan dari `.k-sheet-actions`.
     Pada formulir panjang, judul yang ikut menggulir pergi membuat pengguna
     kehilangan tahu ia sedang menyunting apa; di sheet yang menutupi layar,
     itu satu-satunya penanda konteks yang tersisa. */

.k-sheet-title {
  position: sticky;
  top: 0px;
  z-index: 10;
  margin-left: -18px;
  margin-right: -18px;
  margin-bottom: 16px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ── PADDING ATAS-BAWAH PANEL DISERAHKAN KE KEDUA BAR ─────────────────────
     `.k-sheet-panel` dipakai bersama `.k-pcard-body`/`.k-pcard-pad`, yang
     menyetel `padding` SHORTHAND — jadi padding atas & bawah panel 16-18px.

     Itu merusak KEDUA bar lengket, dan bukan karena marginnya kurang: elemen
     `position: sticky` berhenti di PADDING BOX scrollport-nya, jadi `bottom: 0`
     selalu menyisakan celah setinggi padding bawah panel, dan `top: 0` selalu
     menyisakan celah di atas. Margin negatif menggeser posisi alirnya, bukan
     titik berhentinya. Dilaporkan pemilik 2026-08-15 sebagai "button belum di
     bottom, masih ada space".

     Jalan keluarnya menghapus padding itu di elemen panelnya (`pt-0 pb-0`,
     utility — lapisan utilities menang atas components), lalu membiarkan tiap
     bar membawa paddingnya sendiri. Bar bawah sekalian menambahkan
     `env(safe-area-inset-bottom)`, yang selama ini hilang karena shorthand tadi
     menimpanya. */

/* ── tab bar mini app MyTelkomsel ─────────────────────────────────
     SATU-SATUNYA navigasi yang dimiliki pengguna di mini app: shell web
     (.k-topbar + .k-navrow + footer) sengaja tidak dirender di sana karena
     ia cuma menduplikasi chrome aplikasi induk.

     `h-navbar` (60px) DIPAKAI ULANG, bukan token baru. Tingginya kebetulan
     tepat untuk tab bar dan sudah lolos target sentuh minimum; menambah
     token `tabbar` yang nilainya nyaris sama hanya menambah satu angka lagi
     yang bisa melenceng.

     `env(safe-area-inset-bottom)` ADA DI SINI, bukan di view: gesture bar
     iOS menutupi 34px terbawah, dan tanpa padding ini tab terakhir tidak
     bisa ditekan. Nilai arbitrer dilarang di view (audit-ui-atoms), jadi
     satu-satunya tempatnya memang berkas ini. */

.k-tabbar {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  display: flex;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-bottom: env(safe-area-inset-bottom);
}

.k-tabbar-item {
  position: relative;
  display: flex;
  height: 60px;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── JANGKAR PENANDA TAB, SATU UNTUK KEDUANYA ──────────────────────────
     Lencana hitungan (`.k-tabbar-count`) dan mahkota premium
     (`.k-tabbar-crown`) menempel di titik yang SAMA di kanan-atas ikon, jadi
     koordinatnya ditulis sekali di sini — bukan disalin ke dua aturan yang
     kelak bergeser sendiri-sendiri. Dua penanda di posisi berbeda terbaca
     sebagai dua mekanisme berbeda, padahal keduanya berarti "ada sesuatu di
     tab ini".

     `left: <persen>` + `margin-left`, BUKAN jangkar dari tepi kanan: lebar
     item bergantung jumlah tab (`flex-1`), jadi jangkar dari tepi akan
     bergeser sendiri kalau kelak jumlah tabnya berubah. Persentase tetap ikut
     lebar item, tapi ia diukur dari KIRI item — 38% menaruh penanda di
     kanan-atas ikon (ikon 20px berada di tengah item), sementara 50% membuatnya
     terlalu jauh ke kanan dan terlihat lepas dari ikonnya. Angkanya keputusan
     mata, 2026-08-18. */

.k-tabbar-count,
  .k-tabbar-crown {
  position: absolute;
  top: 6px;
  left: 38%;
  margin-left: 3px;
}

/* Lencana hitungan belum dibaca. `tabular-nums` supaya lebar lencana tidak
     berdenyut saat hitungannya berubah dari 8 ke 9. */

.k-tabbar-count {
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  min-width: 16px;
  line-height: 16px;
  text-align: center;
}

/* Mahkota premium di tab Profil.

     Ukuran ditulis eksplisit, bukan lewat token fontSize: ini IKON, dan ramp
     tipografi preset semuanya bersemantik teks (`badge` 10.5px dst). Memakai
     salah satunya berarti mahkota ikut berubah kalau ramp teks digeser. 12px
     dipilih supaya ia terbaca sebagai penanda, bukan ikon kedua yang bersaing
     dengan ikon tab (20px).

     TANPA latar: `.k-tabbar-count` berlatar brand karena angka putih butuh
     kontras terhadap apa pun di belakangnya; mahkota adalah bentuk yang sudah
     kenal sendiri, dan lingkaran brand di sekelilingnya membuatnya terbaca
     seperti lencana hitungan yang kebetulan bergambar. */

.k-tabbar-crown {
  /* Emas, bukan brand: mahkota berwarna brand terbaca sebagai bagian dari
       state tab aktif — warna yang sama dipakai `aria-current` di baris yang
       sama. Emas memisahkannya jadi penanda AKUN, bukan penanda navigasi.
       Tokennya `karir-premium` (tailwind-preset.js) — catatan kontras dan
       alasannya ada di sana. */
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-premium) / var(--tw-text-opacity, 1));
  font-size: 12px;
}

.k-tabbar-item:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* ── Tombol mengambang "Membership Erika" (mini app) ─────────────────
     Di atas tab bar, kanan bawah. `bottom` = tinggi tab bar (h-navbar 60px)
     + 12px jarak + area aman iOS — angka yang sama dengan `.k-tabbar`, jadi
     ditulis di sini, bukan di view. z-20: di bawah tab bar (z-30) dan sheet,
     supaya bottom sheet yang terbuka selalu menutupinya. */

.k-fab {
  position: fixed;
  right: 1rem;
  z-index: 20;
  display: inline-flex;
  height: 2.75rem;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-fab:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-dark) / var(--tw-bg-opacity, 1));
}

.k-fab {
  bottom: calc(60px + 12px + env(safe-area-inset-bottom));
}

.k-fab-icon {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
}

/* aria-current="page" adalah SUMBER KEBENARAN state aktif — sama dengan
     .k-nav-item, dan alasannya sama: pembeda non-warna (pedoman §6), bukan
     sekadar warna yang berubah. */

.k-tabbar-item[aria-current="page"] {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

/* Ikon di atas label. 20px: tidak ada token fontSize yang cocok — ramp
     preset berhenti di `section` (20px) yang semantiknya ukuran JUDUL, dan
     memakainya untuk ikon berarti ikon ikut berubah kalau ramp judul
     bergeser. Ditulis eksplisit di sini, sama seperti `.k-aside-icon`.
     Ukurannya di app.css, BUKAN di view: `text-*` pada elemen ikon terhitung
     utility RUPA oleh audit-ui-atoms. */

.k-tabbar-icon {
  line-height: 1;
  font-size: 20px;
}

/* Pengganjal setinggi tab bar di dasar halaman. Tab bar `fixed`, jadi ia
     menutupi konten terakhir; tanpa pengganjal, tombol/baris terbawah tiap
     halaman tidak pernah bisa dijangkau. */

.k-tabbar-gap {
  height: 60px;
  margin-bottom: env(safe-area-inset-bottom);
}

/* ── tombol: 36px; 40px CTA landing; 32px aksi baris (§3) ────────── */

.k-btn {
  display: inline-flex;
  height: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.k-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-dark) / var(--tw-bg-opacity, 1));
}

.k-btn-primary {
  /* 6.08:1 → 7.89:1 */
}

/* PENYIMPANGAN TERCATAT DARI §11, 2026-08-14. §11 menetapkan border dasar
     #eeeeee + hover #d9d8d5. Keduanya digeser ke `line-control` (#b7b7b7) dan
     `line-strong` (#949390) bersama seluruh kontrol lain — alasan lengkapnya
     di `packages/ui/src/tailwind-preset.js` pada token `line-control`.

     HOVER IKUT DIGESER, DAN ITU WAJIB, BUKAN PILIHAN: #d9d8d5 (1.43:1) LEBIH
     TERANG daripada #b7b7b7 (2.01:1). Menaikkan base saja akan membuat
     meng-hover input MEMUDARKAN border-nya — interaksi yang terbaca sebagai
     melemah, kebalikan dari maksudnya. */

.k-btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

.k-btn-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

.k-btn-text {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.k-btn-text:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

.k-btn-lg {
  height: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  /* CTA landing — karir-fe memakai 48px, pedoman 40px */
}

.k-btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  /* aksi baris — §4: selalu terlihat, tidak di balik menu tiga titik */
}

/* Penanda "sedang bekerja" — dipakai pada ikon di dalam tombol yang sudah
     `disabled`, mis. tombol "Baca CV" selama unggah + pembacaan berlangsung.
     Ada DI SINI dan bukan `animate-spin` di view: animasi termasuk rupa, dan
     batas utility di CLAUDE.md hanya mengizinkan tata letak di .ejs.

     Pedoman kandidat BELUM memuat keadaan memuat sama sekali (dicek
     2026-08-13: tidak ada "loading"/"spinner"/"memuat" di seluruh dokumen),
     jadi tidak ada nilai yang bisa disalin. Yang dipakai di sini karena itu
     sengaja nol nilai baru: ukuran & warnanya ikut ikon tombol induknya
     (`currentColor`, 1em), hanya putarannya yang ditambahkan.

     `motion-reduce:animate-none` bukan hiasan — putaran tanpa henti adalah
     bentuk yang diminta berhenti oleh prefers-reduced-motion. Tanpa animasi,
     ikonnya tetap tampil sebagai penanda diam dan teks tombol tetap berubah
     jadi "Membaca CV…", jadi keadaan sibuknya tidak hilang. */

.k-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.k-spinner {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .k-spinner {
    animation: none;
  }
}

/* ── tautan teks ─────────────────────────────────────────────────── */

/* Sebelum kelas ini ada, 12 tautan teks di 8 halaman merakit sendiri
     kombinasinya dan hasilnya EMPAT string berbeda:
       rounded-control font-medium text-brand hover:underline   (6x)
       rounded-control text-brand hover:underline               (4x)
       text-brand hover:underline                               (2x)  <- tanpa
       rounded-control text-meta font-medium ...                (1x)     radius
     Dua yang tanpa `rounded-control` bukan pilihan desain: itu bentuk
     outline fokus keyboard, jadi tautan di dalam modal lamar dulu
     mendapat kotak fokus persegi sementara tautan di layar masuk membulat.

     `font-medium` SENGAJA tidak masuk ke sini. Tautan aksi yang berdiri
     sendiri ("Lupa sandi?", "Daftar") memang lebih tebal, sedangkan tautan
     di tengah kalimat mengikuti berat teks sekitarnya — itu perbedaan yang
     nyata, jadi ia ditulis eksplisit di view sebagai utility, bukan
     disembunyikan jadi dua varian kelas yang gampang salah pilih. */

.k-link {
  border-radius: 6px;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-link:hover {
  text-decoration-line: underline;
}

/* Tautan sekunder (syarat & ketentuan, kebijakan privasi). Redup saat
     diam, menggelap saat disentuh — BUKAN biru brand, supaya tidak bersaing
     dengan tautan aksi di halaman yang sama. */

.k-link-muted {
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-link-muted:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

/* Judul di dalam kartu yang SELURUH kartunya klikabel (butuh `group` di
     pembungkusnya). Dipakai identik di 6 tempat — kartu lowongan, kartu
     perusahaan, baris lowongan dashboard, kartu tersimpan, dan dua daftar
     pemberitahuan — dan disatukan supaya tetap identik. */

.k-card-title-link {
  border-radius: 6px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-card-title-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.group:hover .k-card-title-link {
  text-decoration-line: underline;
}

/* ── paginasi ────────────────────────────────────────────────────── */

/* Tujuh halaman menyalin string yang PERSIS SAMA (14 salinan termasuk
     state aktif). Belum menyimpang — tapi tujuh salinan hanya menunggu
     giliran, dan penyatuannya sekalian memperbaiki satu cacat nyata:
     nomor halaman aktif dulu tidak punya kelas border sama sekali, dan
     preflight Tailwind menyetel `border-width: 0`, jadi kotaknya 2px lebih
     kecil daripada tetangganya dan barisnya terlihat bergoyang.
     `border-transparent` menyamakan kotaknya tanpa menambah garis.

     State aktif memakai `[aria-current="page"]`, bukan kelas terpisah —
     pola yang sama dengan `.k-nav-item`, dan artinya penanda aksesibilitas
     yang menjadi sumber kebenaran tampilannya. */

.k-page {
  display: inline-flex;
  height: 2rem;
  min-width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-page:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

.k-page[aria-current="page"] {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  /* 6,08:1 */
}

/* ── baris opsi klikabel di dalam kartu / modal ──────────────────── */

/* BUKAN `.k-menu-item`, walau mirip. Yang itu khusus isi popover shell
     (bahasa & akun) dan padatnya disengaja: py-1.5. Baris opsi di badan
     halaman — pilihan CV di modal lamar, tautan cepat di landing — adalah
     target sentuh utama dan memakai py-2. Dua kelas, dua konteks, masing-
     masing satu definisi; sebelumnya keduanya ditulis tangan dan sudah
     menghasilkan campuran px-1/px-2 dan py-1/py-2 di halaman yang sama. */

.k-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-option:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

/* ── tag statis (label, BUKAN kontrol) ───────────────────────────── */

/* Bedanya dengan `.k-chip`: chip bisa diklik/dihapus dan punya state
     aktif; tag hanya keterangan. Dulu ketiganya ditulis tangan dengan tiga
     padding berbeda (px-2 py-0.5, px-2 py-1, py-1.5 pl-3) sehingga tinggi
     "Utama" di daftar CV dan langkah di modal lamar tidak sama padahal
     perannya sama. */

.k-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Medali ikon 32px di kiri baris (mis. baris pemberitahuan di dashboard).
     Diberi nama supaya baris sejenis berikutnya tidak lahir dengan ukuran
     lain — sekarang baru satu pemakai, dan justru itu saat termurah untuk
     menguncinya. */

.k-medallion {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Penunjuk langkah (modal lamar). State aktif lewat `[aria-current="step"]`,
     seragam dengan `.k-nav-item` dan `.k-page` — sekaligus menghapus varian
     arbitrer `aria-[current=step]:` yang dulu ditulis tiga kali di view. */

.k-step {
  display: block;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-step[aria-current="step"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  /* 5,38:1 */
}

/* Banner halaman perusahaan — standar 1600 × 400 px (4:1), keputusan pemilik
     2026-10-21; rasio dikunci di sini supaya tata letak tidak meloncat
     sebelum gambar dimuat. */

.k-banner {
  display: block;
  aspect-ratio: 4/1;
  width: 100%;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── tahapan pengajuan employer (halaman status, 2026-10-21) ─────── */

/* Penanda alur "Dikirim → Verifikasi → (Penawaran) → Pembayaran → Aktif"
     di /employers/pengajuan/:token. Vertikal di ponsel, mendatar di layar
     lebar. Keadaan lewat `data-state` (done | current | todo) + `aria-current`
     di langkah aktif — warna bukan satu-satunya pembawa info (WCAG 1.4.1):
     langkah selesai bertanda centang, langkah aktif berteks tebal. */

.k-track {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .k-track {
    flex-direction: row;
    gap: 0.75rem;
  }
}

.k-track-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .k-track-step {
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.k-track-mark {
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-track-step[data-state="done"] .k-track-mark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-track-step[data-state="current"] {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-track-step[data-state="current"] .k-track-mark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

/* Tempo lewat jatuh tempo / akses dibatasi — ikon peringatan + warna. */

.k-track-step[data-tone="warn"] .k-track-mark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-review) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review-bg) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-review) / var(--tw-text-opacity, 1));
}

.k-track-note {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Ringkasan pengajuan: pasangan label–nilai, dua kolom di layar lebar. */

.k-keyval {
  display: grid;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 0.75rem;
}

@media (min-width: 640px) {
  .k-keyval {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.k-keyval dt {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-keyval dd {
  margin-top: 0.125rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* ── baris "kotak centang + label" ───────────────────────────────── */

/* Sepuluh formulir menulis `gap-2` (8px) sementara daftar filter menulis
     `gap-icongap` (7px) untuk baris yang perannya sama persis. Selisih 1px
     itu tidak disengaja siapa pun — ia hanya hasil dua orang mengetik dari
     ingatan. Satu nilai: `icongap`, token yang memang dibuat untuk jarak
     ikon/kontrol ke labelnya. */

.k-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

/* Daftar filter berisi RATUSAN baris, jadi ia memang lebih rapat daripada
     `.k-option` biasa. Ditulis sebagai modifier bernama, bukan px-1/py-1
     dadakan di view, supaya kerapatannya satu keputusan — bukan angka yang
     boleh ditawar per halaman. */

.k-option-dense {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* ── input 36px; fokus = border aksen, TANPA ring/shadow (§3) ────── */

/* Latar WAJIB surface (#ffffff): di atas ground #f7f7f5 border #949390
     turun ke 2.86:1 dan gagal. Lihat aturan cakupan di preset. */

.k-input,
  .k-select,
  .k-textarea {
  height: 2.25rem;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-input::-moz-placeholder, .k-select::-moz-placeholder, .k-textarea::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-placeholder) / var(--tw-text-opacity, 1));
}

.k-input::placeholder,
  .k-select::placeholder,
  .k-textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-placeholder) / var(--tw-text-opacity, 1));
}

.k-input:hover,
  .k-select:hover,
  .k-textarea:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.k-textarea {
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Kotak pencarian: `.k-input` + ruang kiri untuk ikon kaca pembesar yang
     dipasang absolut di atasnya. `pl-9` dulu diketik langsung di view — sekali
     di pita pencarian web, lalu sekali lagi saat mini app mendapat pita
     lengketnya sendiri, dan `pnpm audit:ui` menghitung keduanya sebagai kontrol
     yang membawa utility rupa. Satu kelas menutup keduanya dan mencegah salinan
     ketiga lahir di /cari-perusahaan. */

.k-input-search {
  padding-left: 2.25rem;
}

/* ── input berkas ─────────────────────────────────────────────────── */

/* TIDAK memakai `.k-input`: `<input type="file">` tidak punya tinggi
     kontrol yang bisa dipaksa 36px secara andal lintas browser, dan tombol
     bawaannya dirender lewat pseudo-element `::file-selector-button` yang
     tidak mewarisi apa pun dari kotaknya.

     Sebelum kelas ini ada, string `file:*` yang SAMA disalin di tiga view
     (profile/_cv, _bahasa, _sertifikasi) — ketiganya terhitung "kontrol
     membawa utility rupa" oleh `pnpm audit:ui`. Satu definisi menutup
     ketiganya sekaligus mencegah salinan keempat lahir di /onboarding.

     Tombolnya memakai bentuk pill + latar shell supaya terbaca sebagai
     kontrol sekunder, bukan bersaing dengan tombol kirim di sebelahnya. */

.k-file {
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-file::file-selector-button {
  margin-right: 0.5rem;
  border-radius: 99px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

/* Varian sempit untuk input berkas yang duduk DI DALAM baris formulir
     (unggah sertifikat, unggah bukti bahasa) — tanpa batas ini nama berkas
     panjang mendorong tombol kirim keluar baris.

     220px BUKAN nilai dari pedoman. Ia nilai warisan yang sudah dipakai
     `profile/_bahasa.ejs` dan `profile/_sertifikasi.ejs` sebagai
     `max-w-[220px]`; dipindahkan ke sini apa adanya supaya nilai arbitrer
     berhenti hidup di view (batas utility CLAUDE.md), bukan karena angkanya
     punya dasar desain. Kalau pedoman kelak menyebut angka resminya, ganti
     di SATU tempat ini. */

.k-file-narrow {
  max-width: 220px;
}

/* ── avatar profil ─────────────────────────────────────────────────── */

/* 52px dari template desain `Kandidat.dc.html` blok `isProfile` — nilainya
     sudah dipakai `profile/_identitas.ejs` sejak awal sebagai `h-[52px]
     w-[52px]`, dipindahkan ke sini supaya angkanya berhenti hidup di view
     (batas utility CLAUDE.md). */

.k-avatar {
  height: 52px;
  width: 52px;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── avatar yang bisa diklik untuk ganti foto ──────────────────────── */

/* SELURUH avatar adalah tautannya; badge kamera cuma penanda. Bentuk ini
     dipilih justru karena sasaran sentuhnya: badge 18px yang berdiri sendiri
     sebagai tombol berarti target 18px — di bawah ambang mana pun. Karena
     yang diklik avatarnya (52px), badge boleh sekecil ini.

     18px dan cincin 2px BUKAN nilai dari pedoman kandidat: pedoman tidak
     memuat avatar yang bisa disunting sama sekali (dicek 2026-08-19). Angkanya
     diturunkan dari avatar 52px yang sudah dipakai `profile/_identitas.ejs` —
     sepertiga diameter, ukuran terkecil yang masih terbaca sebagai ikon.
     Cincinnya sewarna latar kartu, bukan garis: badge yang menempel di tepi
     foto gelap tanpa pemisah terbaca sebagai bagian dari fotonya. Kalau
     pedoman kelak menyebut angka resminya, ganti di SATU tempat ini. */

.k-avatar-link {
  position: relative;
  display: inline-flex;
  border-radius: 99px;
}

.k-avatar-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: inline-flex;
  height: 18px;
  width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-surface) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  font-size: 11px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-avatar-link:hover .k-avatar-badge {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-dark) / var(--tw-bg-opacity, 1));
}

/* ── checkbox ─────────────────────────────────────────────────────── */

/* SATU definisi untuk SELURUH app. Sebelum ini tidak ada kelas komponen
     sama sekali, jadi tiap view merakit utility-nya sendiri dan hasilnya
     berbeda-beda: profile & login memakai
     `rounded-[3px] border-karir-line-strong accent-brand` (ada border),
     sedangkan filter pencarian & checkbox "pilih untuk dilamar" hanya
     `accent-brand` (TANPA border/radius) — dua bentuk kotak berbeda di satu
     halaman yang sama. Itu bukan pilihan desain, itu penyimpangan yang
     lolos karena tidak ada satu tempat yang mendefinisikannya.

     ── RIWAYAT NILAI, DAN SATU BUG YANG MENYAMAR JADI KEPUTUSAN ──────────
     2026-08-09 dipilih `border-karir-line` (#eeeeee, 1.16:1) demi keseragaman
     dengan `.k-input`/`.k-btn-secondary`, dengan konsekuensi yang ditulis
     eksplisit: "batas kotak centang kosong praktis tidak terlihat".

     KONSEKUENSI ITU TIDAK PERNAH TERJADI — dan bukan karena keputusannya
     salah, melainkan karena aturannya tidak pernah bekerja. Aturan lama
     menulis `border-karir-line` TANPA utility `border` (lebar), dan preflight
     Tailwind menyetel `border-width: 0` untuk semua elemen. Jadi tidak ada
     satu piksel border pun yang digambar: yang tampil selama ini adalah kotak
     centang BAWAAN browser dengan garis abu ~#767676 miliknya sendiri. CSS
     menyatakan niat yang tidak pernah dieksekusi.

     Ironinya, kotak bawaan itu JUSTRU lebih terbaca daripada niat aslinya.

     ── NILAI SEKARANG ───────────────────────────────────────────────────
     `border-karir-line-control` (#b7b7b7, 2.01:1) — KEPUTUSAN PEMILIK,
     2026-08-14, bersama lima aturan kontrol lain (`.k-input`/`.k-select`/
     `.k-textarea`, `.k-btn-secondary`, `.k-page`, `.k-choice`,
     `.k-slider-btn`). Alasan pemilihan nilainya di token `line-control`
     (`packages/ui/src/tailwind-preset.js`). Keenamnya HARUS bergerak bersama:
     campuran berat garis antar kontrol persis penyimpangan yang kelas ini
     lahir untuk menghentikan.

     ── KENAPA `appearance-none`, DAN APA YANG IA PAKSA IKUT BERUBAH ──────
     Border hanya bisa digambar sesudah rendering bawaan dimatikan. Begitu
     dimatikan, `accent-color` juga berhenti berlaku — jadi tanda centangnya
     wajib digambar sendiri. Itu `::after` di bawah: dua sisi border yang
     diputar 45°, memakai token `border-white`, TANPA data-URI/SVG (yang akan
     memasukkan hex mentah ke berkas ini, dilarang §14) dan tanpa berkas aset
     tambahan.

     Tidak ada `:indeterminate` di app ini (sudah dipindai) — kalau kelak ada,
     ia butuh cabangnya sendiri, karena `appearance-none` juga mematikan
     rendering bawaan keadaan itu. */

.k-checkbox {
  position: relative;
  height: 1rem;
  width: 1rem;
  flex: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 3px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-checkbox:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.k-checkbox:checked {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
}

/* Centang digambar sendiri: kotak 3×7px tanpa isi, hanya sisi kanan & bawah,
     lalu diputar 45°. Posisinya piksel-eksak untuk kotak 16px — kalau ukuran
     kotaknya kelak berubah, keduanya ikut. */

.k-checkbox:checked::after {
  position: absolute;
  left: 5px;
  top: 1.5px;
  height: 8px;
  width: 4px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 2px;
  border-right-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  content: "";
}

.k-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── radio ────────────────────────────────────────────────────────── */

/* Lahir dari alasan yang sama persis dengan `.k-checkbox` di atas: sebelum
     ini nol kelas komponen, jadi tiap view merakit sendiri dan bentuknya
     mulai bercabang (`lamar-modal.ejs:178` memakai
     `h-4 w-4 flex-none accent-brand`, sementara tabel pilihan TLD tidak
     memakai apa pun sama sekali).

     DUA CABANG MENULIS BLOK INI: `p2/tld` (tabel pilihan bagian 3) dan
     `p2/communication-style-test` (22 pasang pernyataan). Isi aturannya sama
     persis, jadi saat integrasi 2026-08-11 disimpan SATU — sesuai catatan
     integrator yang ditinggalkan kedua cabang. Yang dulu memakai
     `h-4 w-4 flex-none accent-brand` dari ingatan: `lamar-modal.ejs:178`
     (belum dipindahkan; milik unit lain).

     ── 2026-08-14: IKUT DIGAMBAR SENDIRI ────────────────────────────────
     Versi sebelumnya sengaja TANPA border, menyerahkan lingkarannya ke UA,
     dengan alasan "border sendiri di atas border bawaan menghasilkan dua
     lingkaran". Alasan itu benar HANYA selama rendering bawaannya dibiarkan
     hidup. Begitu `.k-checkbox` pindah ke `appearance-none` (lihat catatannya
     di atas), radio yang tetap bawaan menjadikan app ini punya DUA bahasa
     kontrol isian sekaligus: kotak centang gambar kita, radio gambar browser —
     dan keduanya sering berdiri di formulir yang sama.

     Jadi radio ikut. `appearance-none` mematikan lingkaran bawaan lebih dulu,
     jadi tidak ada lingkaran ganda; titik terpilihnya digambar `::after`
     sebagai lingkaran putih pejal di tengah. Berat garis, warna, dan hover-nya
     mengikuti `line-control`/`line-strong` yang sama dengan seluruh kontrol
     lain.

     BEDA SENGAJA dari kotak centang: saat terpilih, radio memakai TITIK di
     dalam lingkaran brand — bukan tanda centang. Bentuk itulah yang
     membedakan "pilih satu" dari "pilih beberapa" bagi pengguna, dan
     menyamakan keduanya justru menghapus informasi. */

.k-radio {
  position: relative;
  height: 1rem;
  width: 1rem;
  flex: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-radio:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.k-radio:checked {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
}

/* Titik 6px di tengah kotak 16px: (16 − 2×1px border − 6) / 2 = 4px dari
     tiap sisi dalam. Kalau ukuran radionya berubah, angka ini ikut. */

.k-radio:checked::after {
  position: absolute;
  left: 4px;
  top: 4px;
  height: 6px;
  width: 6px;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  content: "";
}

.k-radio:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── kartu pilihan bergambar ──────────────────────────────────────── */

/* Satu <label> membungkus radio/checkbox DAN gambarnya, sehingga seluruh
     kartu bisa diklik tanpa satu baris JS. Keadaan terpilih memakai `:has()`
     di sini, BUKAN varian `has-[:checked]:` yang diketik di view: rupa
     (border + latar) memang tempatnya berkas ini, dan menuliskannya sekali
     berarti kartu pilihan di halaman mana pun tidak bisa lagi berbeda-beda.

     `bg-brand-tint` + `border-brand` — pasangan yang sama yang dipakai
     `.k-chip.is-active` untuk arti yang sama ("ini yang sedang dipilih"),
     jadi penanda terpilih di app ini satu bahasa. */

.k-choice {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  padding: 0.5rem;
}

.k-choice:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

/* ── titik bullet daftar instruksi ────────────────────────────────── */

/* 5px TIDAK datang dari pedoman — tidak ada tingkat ramp sekecil itu, dan
     memang seharusnya tidak ada: ini bukan teks melainkan glyph ikon yang
     dipakai sebagai titik. Ia diketik di dua view unit TLD sebagai
     `text-[5px]`, yaitu persis bentuk yang dilarang muncul di view. Nilainya
     dipindahkan ke sini apa adanya — dengan asal-usulnya ditulis jujur,
     bukan dikarang berasal dari pedoman — supaya kalau kelak titik bullet
     dipakai halaman lain, ukurannya satu keputusan dan bukan angka yang
     diketik ulang dari ingatan. */

.k-bullet-dot {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  font-size: 5px;
}

/* ── ikon sebaris teks ────────────────────────────────────────────── */

/* Glyph Remix Icon duduk ~2px terlalu tinggi terhadap garis dasar teks di
     sebelahnya. Perbaikannya sudah dipakai di SELURUH app — 23 tempat — tapi
     selalu sebagai `align-[-2px]` yang diketik ulang di view, yaitu persis
     bentuk nilai arbitrer yang pedoman larang.

     Kelas ini rumah tunggalnya. Yang dipindahkan ke sini BARU 3 pemakaian
     milik unit `communication-style-test`; 20 sisanya tinggal di view milik
     unit lain dan SENGAJA tidak disentuh dari cabang ini — mengubahnya
     berarti menyentuh berkas milik cabang lain dan menukar satu utang dengan
     tujuh konflik merge. Pemindahan sisanya pekerjaan tersendiri, dan
     `pnpm audit:ui` yang akan menunjukkan angkanya turun. */

.k-icon-inline {
  vertical-align: -2px;
}

/* ── lebar kolom tunggal (funnel employer) ────────────────────────── */

/* 640px muncul DELAPAN kali sebagai `max-w-[640px]` di lima view
     `/employers/*` — lebar kolom formulir/teks terpusat di funnel akuisisi.
     Angka yang diketik ulang delapan kali adalah angka yang akan menyimpang;
     di sini ia satu keputusan. Ditambahkan saat integrasi 2026-08-11 —
     unit `employers` sendiri tidak pernah melewati audit disiplin UI. */

.k-col-narrow {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 640px;
}

/* ── form dua kolom (pengajuan membership employer) ──────────────── */

/* Isian di kiri, pilihan paket + tombol kirim di kolom kanan selebar
     "panel detail" pedoman kandidat §3 (420px). Bertumpuk satu kolom di
     bawah `lg`, urutannya tetap isian → paket → kirim. Tidak sticky: daftar
     sepuluh paket lebih tinggi dari layar laptop, dan panel sticky yang lebih
     tinggi dari viewport menyembunyikan tombol kirimnya. */

/* Penghitung digit NPWP/NIB di form pengajuan ("12/16"). Angka tabular
     supaya tidak bergoyang saat mengetik; hijau begitu panjangnya sah —
     warna status "offer" yang sudah lulus kontras (5.21:1), bukan warna baru.
     Keadaannya dibaca dari `data-state`, bukan nama kelas yang dirakit di
     JS (kelas yang hanya ada di .ts tidak digenerate Tailwind). */

.k-digit-counter {
  flex-shrink: 0;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-digit-counter[data-state="ok"] {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-offer) / var(--tw-text-opacity, 1));
}

.k-form-split {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .k-form-split {
    grid-template-columns: minmax(0,1fr) 420px;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ── tabel yang boleh lebih lebar dari layar ──────────────────────── */

/* Tabel perbandingan paket (`/employers/pricing`) dan rincian benchmark
     (`/salary/result`) sama-sama tidak terbaca kalau kolomnya dipaksa muat
     di layar sempit; keduanya dibungkus wadah ber-`overflow-x-auto` dan
     diberi lebar minimum supaya menggulir, bukan meremuk. Dua view menulis
     angka yang BERBEDA untuk maksud yang sama (640px dan 36rem = 576px);
     disatukan ke satu nilai di sini. */

.k-table-wide {
  width: 100%;
  min-width: 640px;
}

/* Pedoman menuntut "fokus = border aksen, tanpa ring/shadow", tapi
     perubahan border 1px adalah indikator terlemah yang mungkin (§6
     mencatat ini persis dan menuntut diuji nyata). Solusi: outline 1px
     dengan offset NEGATIF menempel rapat di atas border → secara visual
     border aksen 2px, bukan halo dan bukan ring. Memenuhi "tanpa
     ring/shadow" secara harfiah, tanpa layout shift, dua kali lebih kuat.
     box-shadow:none mematikan ring bawaan UA. */

/* §11: "cukup border aksen #1e63ae", dan eksplisit melarang ring/box-shadow
     tebal pada fokus input. Trik outline offset-negatif yang dulu dipakai di
     sini secara visual adalah border 2px — ia menyiasati larangan yang sama,
     jadi ikut dicabut. Konsekuensi yang diterima sadar: indikator fokusnya
     jadi perubahan warna border 1px, yang lemah untuk navigasi keyboard.
     Dicatat sebagai penyimpangan aksesibilitas di open-findings.md. */

.k-input:focus,
  .k-select:focus,
  .k-textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  outline: none;
  box-shadow: none;
}

/* WAJIB dipasangkan dengan <label for="..."> — coding-standard.md. */

/* `muted` (#6b6a67), BUKAN `meta` (#767573). Nilai meta dihitung 4.60:1 —
     tapi itu di atas PUTIH. Di atas kanvas #fafafa ia turun jadi 4.29:1 dan
     GAGAL ambang 4.5 (terukur di /cari-lowongan, label "Minimum (Rp)").
     Label formulir adalah teks fungsional, bukan meta dekoratif, jadi
     tingkat paling redup memang bukan tempatnya. */

/* Honeypot formulir publik (system/form-guard.ts): di luar layar, BUKAN
     `display:none` — sebagian skrip melewati input yang disembunyikan
     dengan display/visibility, tapi tetap mengisi yang hanya digeser keluar.
     Pembaca layar dilewatkan lewat `aria-hidden` di markup. */

.k-hp {
  position: absolute;
  left: -10000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.k-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* ── chip (§4: filter aktif jadi chip yang bisa dihapus) ─────────── */

.k-chip {
  /* text-caption (11.5px), BUKAN text-meta (12.5px). Chip/tag termasuk
       tingkat CAPTION di ramp §04; memakai tingkat meta membuatnya sebesar
       teks di sekitarnya padahal seharusnya satu tingkat lebih kecil. */
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-chip:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-chip.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  /* 5.38:1 */
}

/* 24px = ambang minimum WCAG 2.5.8. Jangan diperkecil lagi. */

.k-chip-remove {
  margin-right: -0.25rem;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Dulu kelas ini TIDAK punya state hover sama sekali — di chip filter itu
     tertutupi karena seluruh chipnya yang jadi tautan, tapi di chip skill
     (yang hanya tanda × -nya bisa diklik) hasilnya tombol hapus tanpa
     umpan balik apa pun. Warna `rejected` menandai bahwa yang terjadi
     adalah penghapusan, bukan sekadar tombol lain. */

.k-chip-remove:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-line) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-rejected) / var(--tw-text-opacity, 1));
}

/* ── badge status lamaran (§3) ───────────────────────────────────── */

/* Kelima varian sengaja didefinisikan lebih awal — belum ada halaman
     yang memakainya (semuanya ber-auth) — supaya urutan tetap Terkirim →
     Ditinjau → Wawancara → Penawaran dan tiga pengganti WCAG tercatat
     sekali di satu tempat. Biayanya nyaris nol: Tailwind v3 men-tree-shake
     @layer components yang selektornya tidak ditemukan di `content`; yang
     membuatnya tergenerasi sekarang hanyalah katalog /style-guide. */

.k-badge {
  display: inline-flex;
  height: 1.25rem;
  align-items: center;
  border-radius: 99px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.k-badge-sent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  /* 5.04:1 */
}

.k-badge-review {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review-bg) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-review) / var(--tw-text-opacity, 1));
  /* 4.84:1 */
}

.k-badge-interview {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  /* 5.38:1 */
}

.k-badge-offer {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-offer-bg) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-offer) / var(--tw-text-opacity, 1));
  /* 5.21:1 — pengganti #059669 3.58:1 */
}

.k-badge-rejected {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-rejected-bg) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-rejected) / var(--tw-text-opacity, 1));
  /* 5.24:1 — pengganti #dc2626 4.41:1 */
}

/* Bar tahapan mati saat "Tidak lanjut" (§3). */

.k-bar-off {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-bar-off) / var(--tw-bg-opacity, 1));
}

/* ── kartu — FLAT, tanpa shadow (§5) ─────────────────────────────── */

/* §11: transisi 150ms ease pada background, border-color, color, dan
     box-shadow. Tidak ada transisi pada layout. */

.k-card,
  .k-card-landing {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-card {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
  /* kartu daftar */
}

.k-card-landing {
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
  /* kartu landing */
}

/* §11 "Kartu klikabel": hover mengubah SHADOW saja — border dan background
     TETAP, "agar grid tidak terlihat bergeser". Kebalikan dari versi
     sebelumnya, yang justru menggelapkan border dan menolak shadow. */

.k-card:hover,
  .k-card-landing:hover {
  --tw-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.k-card:active,
  .k-card-landing:active {
  --tw-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── panel berkepala — dashboard (template Kandidat.dc.html, isHome) ─ */

/* Bedanya dengan `.k-card`: kartu memberi padding pada SELURUH isinya,
     panel tidak — ia wadah bergaris yang isinya baris-baris berpadding
     sendiri, jadi garis pemisah antar baris membentang penuh sampai tepi
     panel. Tanpa itu, daftar di dalam kartu punya garis yang berhenti 16px
     sebelum tepinya dan terlihat seperti garis yang salah pasang.
     `overflow-hidden` supaya baris pertama/terakhir tidak menonjol keluar
     dari sudut membulat. TANPA hover shadow: panel bukan elemen yang bisa
     diklik — yang bisa diklik adalah baris di dalamnya. */

.k-panel {
  overflow: hidden;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
}

.k-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Garis antar baris memakai `karir-shell` (#f7f7f5) — satu tingkat lebih
     redup dari garis panel (#eeeeee), persis seperti template. Keduanya
     dekoratif: pembeda antar baris bukan cuma garisnya, tapi juga jarak dan
     susunan isinya. */

.k-panel-row {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.k-panel-row:last-child {
  border-bottom-width: 0px;
}

.k-panel-body {
  padding: 16px;
}

.k-panel-foot {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ── panel seksi halaman Profil ──────────────────────────────────── */

/* KENAPA TERPISAH DARI `.k-panel`, dan kenapa 18px BUKAN 16px.
     Halaman Profil mengikuti blok `isProfile` di template `Kandidat.dc.html`,
     yang menetapkan padding 18px — sedangkan panel dashboard mengikuti blok
     lain dengan `p-card` (16px). Selisih 2px itu DISENGAJA dan sudah
     didokumentasikan di _identitas.ejs sejak awal; ia tidak diseragamkan
     di sini karena yang salah bukan nilainya.

     Yang salah adalah nilainya ditulis 48 kali sebagai `px-[18px]` di
     sepuluh berkas. Satu nilai mentah yang diketik ulang 48 kali bukan lagi
     keputusan desain — ia menunggu jadi 17px di berkas ke-49. Sekarang
     angkanya hidup di SATU tempat; view hanya menyebut namanya.

     `py-[15px]` pada `.k-pcard-item` juga dari template (baris daftar
     pengalaman/pendidikan), bukan langkah skala Tailwind. Sama alasannya. */

.k-pcard {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
}

.k-pcard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.k-pcard-body {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Padding 18px saja — untuk blok yang mengatur sendiri arah/besarnya
     (kartu identitas memakai keempat sisi; daftar memakai sisi kiri-kanan
     lalu menambah pb sendiri). Tetap satu sumber angka. */

.k-pcard-pad {
  padding: 18px;
}

.k-pcard-padx {
  padding-left: 18px;
  padding-right: 18px;
}

/* Baris isi berpadding penuh (mis. blok "Hapus?"). */

.k-pcard-row {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Baris daftar (pengalaman, pendidikan, sertifikasi, organisasi, bahasa). */

.k-pcard-item {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.k-pcard-item:last-child {
  border-width: 0px;
}

/* Baris keterangan redup di bawah kepala panel (mis. "Batas 6 skill
     sudah tercapai"). */

.k-pcard-note {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* ── dokumen cetak (invoice & bukti pembayaran membership, F4) ───────
     Kertas putih berpadding k-pcard; saat DICETAK bingkainya hilang dan
     chrome situs (top nav, menu, footer, tombol) disembunyikan — aturan
     `@media print` di bawah, dibatasi halaman yang memuat `.k-doc` supaya
     cetak halaman lain tidak berubah. Pengganti PDF selama image app tanpa
     Chromium. */

.k-doc {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 18px;
}

@media print {
  .k-doc {
    border-width: 0px;
    padding: 0px;
  }
}

.k-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media print {
  .k-doc-actions {
    display: none;
  }
}

/* ── bar proporsi (panel "Aktivitas lamaran") ────────────────────── */

/* Tinggi 4px + radius pill, sama dengan template. Isian aksen; baris yang
     mati memakai utility `bg-karir-bar-off` DI VIEW — utility menang atas
     kelas komponen tanpa perlu `!important` maupun urutan yang rapuh.
     Keduanya aria-hidden: angkanya sudah ada sebagai teks di sebelahnya
     (WCAG 1.4.1 — warna dan panjang bar tidak boleh jadi satu-satunya
     pembawa informasi). */

.k-bar-track {
  margin-top: 0.375rem;
  height: 0.25rem;
  width: 100%;
  overflow: hidden;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

.k-bar-fill {
  height: 100%;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
}

/* ── kotak pesan (notice) ────────────────────────────────────────── */

/* Dua puluh kotak pesan tersebar di 11 view, dan varian PERINGATAN saja
     punya DUA perlakuan garis yang berbeda:
       border-karir-review/30 + bg-karir-review-bg   (lupa-sandi, OTP)
       border-karir-line      + bg-karir-review-bg   (detail lowongan,
                                                      perusahaan, modal lamar)
     Yang kedua memakai garis netral di atas latar amber, sehingga kotak
     peringatan di satu halaman terlihat seperti kotak catatan biasa di
     halaman lain. Tidak ada yang memutuskan itu — keduanya hanya ditulis
     dari ingatan pada hari yang berbeda.

     Warna teksnya sengaja `karir-body`, bukan warna status. Latar status
     sudah membawa maknanya, dan teks berwarna di atas latar berwarna itulah
     yang paling sering jatuh di bawah ambang kontras. */

.k-notice {
  border-radius: 8px;
  border-width: 1px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

.k-notice-info {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

.k-notice-warn {
  border-color: rgb(var(--karir-review) / 0.3);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review-bg) / var(--tw-bg-opacity, 1));
}

.k-notice-error {
  border-color: rgb(var(--karir-rejected) / 0.3);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-rejected-bg) / var(--tw-bg-opacity, 1));
}

/* Catatan netral — keterangan, bukan status. Latar shell + garis biasa. */

.k-notice-neutral {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

/* ── empty state (§ style-guide: wajib di setiap daftar) ─────────── */

/* Delapan berkas _empty.ejs menulis rangkaian yang sama; tujuh identik,
     satu (lowongan-detail) memakai `items-start` tanpa `text-center`.
     Rata tengah dijadikan bawaan karena itulah yang dipakai tujuh dari
     delapan; yang butuh rata kiri menimpanya dengan utility di view,
     sehingga penyimpangannya terlihat sebagai keputusan, bukan kelalaian. */

.k-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding: 16px;
  text-align: center;
}

/* ── logo perusahaan tanpa lencana inisial ───────────────────────── */

/* Ada DUA perlakuan logo di app ini, dan bedanya bukan cuma gaya:
       `.k-logo` + `.k-logo-img`  — lencana inisial berwarna DI BELAKANG
          logo + `brokenImage`, jadi berkas yang hilang/diblokir CSP tetap
          menyisakan kotak inisial yang rapi. Dipakai /home, /cari-perusahaan,
          /status-lamaran, /lowongan-simpan.
       `.k-logo-plain`            — <img> polos bergaris. Kalau berkasnya
          gagal dimuat, yang tersisa ikon "gambar rusak" bawaan browser.
          Dipakai /cari-lowongan dan /lowongan-detail.
     Kelas ini menyatukan GAYA-nya (dulu lima salinan string yang sama dengan
     empat ukuran berbeda), tapi TIDAK menutup perbedaan perilakunya —
     itu butuh `companyId` yang belum diekspor opportunity-detail.ts.
     Ukuran tetap ditulis di view (h-12/h-16/h-20) karena memang berbeda
     per konteks. */

.k-logo-plain {
  flex: none;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
}

/* SATU-SATUNYA tempat shadow boleh muncul: elemen yang benar-benar
     mengapung di atas konten (dropdown/popover/drawer). */

.k-float {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── item di dalam popover shell (bahasa & akun) — pedoman §07 ────── */

/* Dipakai .k-float sebagai wadahnya; ini isinya. Lebar popover ditulis
     di view (200px bahasa, 268px akun) karena pedoman menyebut angkanya
     per-popover, bukan sebagai satu nilai global. */

.k-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-menu-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

/* Menu privat yang halamannya belum ada. Dirender sebagai <span>, bukan
     <a>, jadi tidak bisa difokus maupun diklik menuju 404 — sama seperti
     .k-nav-item.is-soon di baris menu. */

.k-menu-item.is-soon {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-meta) / var(--tw-text-opacity, 1));
}

.k-menu-icon {
  flex: none;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-meta) / var(--tw-text-opacity, 1));
}

.k-menu-sep {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
}

/* ── lencana perusahaan (§06) ────────────────────────────────────── */

/* Kotak radius 8px berwarna solid tetap + inisial 2 huruf, DI BELAKANG
     logo. Warna datang dari style inline (company-badge.ts) karena nilainya
     per-perusahaan, bukan token. */

.k-logo {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

.k-logo-initials {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Logo menutupi lencana. `object-contain` + latar putih supaya logo
     transparan tidak menumpuk di atas warna lencana dan jadi tak terbaca. */

.k-logo-img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
}

/* ── kolom layar auth di mini app ────────────────────────────────── */

/* Masuk, Daftar, verifikasi, dan lupa sandi menulis isinya TANPA pembungkus
     sendiri — di web kolomnya (368px, di samping panel brand 44%) datang dari
     `layouts/auth.ejs`.

     Mini app tidak memakai layout itu: `miniapp-context.ts` memaksa SETIAP
     render ke `layouts/miniapp`, dan layout itu menaruh `<%- body %>` tanpa
     container sama sekali (setiap halaman mini app lain membawa `.k-container`
     miliknya sendiri). Akibatnya keempat layar auth menempel ke tepi layar —
     judul, label, dan kotak isian semuanya mulai di 0px.

     Kelas ini kolom penggantinya. `max-w-gate` supaya di tablet ia tidak
     melebar jadi baris teks sepanjang layar; di 390px yang bekerja cuma
     padding-nya. */

.k-authpad {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 460px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 28px;
  padding-bottom: 28px;
}

/* ── kotak multi-pilih beringkas ─────────────────────────────────── */

/* Bentuknya DIAMBIL dari `_multi-select.ejs` erika (UI Guideline Erika §09):
     satu field setinggi kontrol berisi chip pilihan terpilih, dan panel berisi
     kotak cari + daftar checkbox. Dipakai di bottom sheet /cari-lowongan, di
     mana enam daftar checkbox yang terbentang penuh membuat sheet-nya jadi
     gulungan panjang tanpa bentuk.

     ── TIGA DEVIASI SADAR DARI ERIKA, DAN ALASANNYA ──────────────────────
     1. DISCLOSURE-nya `<details>`, BUKAN popover ber-`x-show`. Versi erika
        tidak bisa dibuka sama sekali tanpa JS — ia hanya menjaga nilai yang
        sudah terpilih. Filter /cari-lowongan berdiri di atas jaminan
        sebaliknya: setiap kotak dirender penuh dan tetap bisa dicentang &
        dikirim tanpa satu baris JS (lihat catatan panjang di
        `_filter-group.ejs` dan `cari-lowongan-filters.ts`). Menukarnya dengan
        popover berarti mencabut jaminan itu diam-diam; `<details>` memberi
        bentuk ringkas yang sama TANPA membayarnya.
     2. Panelnya DI ALUR, bukan mengapung. Di erika popover-nya `absolute`
        selebar 280px karena ia duduk di bar filter yang lapang. Di dalam bottom
        sheet selebar 390px, panel mengapung akan keluar dari sheet-nya sendiri.
     3. Chip di field TIDAK punya tombol silang. Di erika ia dihapus lewat JS;
        di sini field-nya adalah `<summary>`, dan elemen interaktif bersarang di
        dalam summary punya perilaku yang berbeda-beda antar peramban. Membatalkan
        satu pilihan tetap ada dua jalan: hapus centangnya di panel, atau chip
        filter aktif di halaman (yang memang tautan `<a>`).

     Warnanya mengikuti token KARIR, bukan disalin dari erika: batas field
     memakai `line-control` (#b7b7b7) seperti seluruh kontrol app ini sejak
     2026-08-14 — erika masih memakai `line` miliknya sendiri. */

/*  + penyembunyian penanda WebKit tinggal DI SINI, bukan diketik
     ulang di tiap view: kelas ini memang selalu dipakai pada <summary>, dan
     sebagai varian arbitrer di view ia terjaring . */

.k-ms-field {
  display: flex;
  min-height: 2.25rem;
  width: 100%;
  cursor: pointer;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-ms-field::-webkit-details-marker {
  display: none;
}

.k-ms-field:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

/* `<details>` terbuka: batasnya menguat jadi brand, sama seperti `.is-open`
     di erika — penanda bahwa panel di bawahnya milik field ini. */

details[open] > .k-ms-field {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
}

.k-ms-chip {
  display: flex;
  height: 1.5rem;
  max-width: 100%;
  align-items: center;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-ms-chip-label {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-ms-placeholder {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-ms-panel {
  margin-top: 12px;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
}

/* ── baris chip filter aktif, LENGKET ────────────────────────────── */

/* HANYA baris chip yang dipaku, bukan bar filter di bawahnya. Versi yang
     memaku keduanya pernah dicoba dan ditolak: halaman ini sudah punya dua
     bilah lengket (logo 60px + menu 40px), jadi menambah dua lagi membuat
     ~190px dari 900px jadi perabot tetap — terbaca seperti toolbar aplikasi,
     bukan halaman pencarian.

     ── ELEMENNYA SELEBAR LAYAR, `.k-container` ADA DI DALAMNYA ──────────
     Versi sebelumnya duduk DI DALAM `.k-container` dan memakai `box-shadow`
     selebar `100vmax` + `clip-path` untuk memalsukan latar yang membentang.
     Itu tidak lagi perlu — dan tidak pernah bisa membawa BORDER ikut
     membentang, karena bayangan bukan garis. Dengan pembungkusnya sendiri
     yang selebar layar, latar dan `border-b` sama-sama penuh tanpa satu pun
     trik, dan nol risiko gulir mendatar (`100vw` memuat lebar scrollbar).

     `top: navstack` (100px = 60 + 40), bukan `top: 0`: kedua bilah di atasnya
     juga sticky, jadi menempel di 0 berarti bersembunyi di bawah keduanya.

     ── Z-25, DAN Z-10 ADALAH BUG YANG SUDAH TERLIHAT ────────────────────
     Empat tingkat yang didokumentasikan di `cari-lowongan/index.ejs` — panel
     0, backdrop 10, permukaan filter 20, top nav 30 — mengurutkan elemen yang
     BEREBUT TEMPAT SAAT TERBUKA. Bilah ini beda urusan: ia DIPAKU, jadi
     apa pun yang tergulir melewatinya harus lewat di BAWAHNYA.

     Dengan z-10, pill filter (z-20) menang dan menutupi chip saat baris pill
     tergulir naik melewatinya — dilaporkan pemilik 2026-09-08 dengan
     tangkapan layar. Menyamakannya ke z-20 pun kalah: seri diputuskan urutan
     DOM, dan bar filter datang belakangan.

     25 menempatkannya di atas seluruh permukaan filter tapi tetap di bawah
     top nav (30) — syarat "nav tidak boleh tertutup apa pun" tetap utuh.
     Konsekuensi yang diterima: popover filter yang sedang terbuka lalu
     digulir naik akan tertutup bilah ini. Itu benar — pill-nya sendiri sudah
     lewat di bawah bilah pada saat itu.

     `pt-2 pb-3`: rapat ke pita pencarian di atasnya (permintaan pemilik),
     dengan napas lebih lebar di bawah supaya chip tidak menempel ke bar
     filter berikutnya. */

.k-chipbar-sticky {
  position: sticky;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-bottom: 0.75rem;
  padding-top: 0.5rem;
  /* Offset = TINGGI TUMPUKAN LENGKET DI ATASNYA, dan itu beda per kanal.
       `sticky` tidak hanya menahan elemen saat digulir — ia juga MENDORONGNYA
       TURUN kalau posisi alaminya lebih tinggi dari `top`. Web punya nav 100px
       jadi 100 pas; mini app cuma punya bilah pencarian 53px, dan `top: 100`
       di sana membuka celah kosong 47px yang tidak hilang saat digulir.
       Dilaporkan pemilik 2026-09-08 dengan tangkapan layar. */
  top: var(--k-chipbar-top, 100px);
  /* Antara permukaan filter (20) dan top nav (30) — lihat blok di atas.
       Tailwind tidak punya `z-25` bawaan, dan nilai arbitrer di view dilarang,
       jadi angkanya tinggal di sini. */
  z-index: 25;
}

/* Pasangan `.k-chipbar-sticky` di mini app: satu-satunya bilah lengket di
     atasnya adalah pita pencarian `top-0` setinggi `miniband`. Dipisah jadi
     modifier, bukan cabang di dalam kelas induk, karena kanal ditentukan
     per-proses (`MINIAPP_MODE`) dan tidak ada penanda kanal di `<html>` yang
     bisa jadi selektor. */

.k-chipbar-mini {
  --k-chipbar-top: 53px;
}

/* Deret chip yang menggulir mendatar di dalam bilah lengket.
     `min-w-0` WAJIB: anak flex bawaannya `min-width: auto`, jadi tanpa ini ia
     melebar mengikuti isinya dan mendorong tombol "Hapus semua filter" keluar
     layar alih-alih menggulir.

     ── PUDAR KANAN TANPA SEBARIS JS ────────────────────────────────────
     `mask-image` dipasang PERMANEN, bukan ditoggle saat overflow. Boleh
     begitu karena elemennya `flex-1`: kalau chipnya muat, 24px terakhir itu
     RUANG KOSONG dan topengnya tidak memudarkan apa pun. Ia baru terlihat
     tepat saat ada yang perlu ditandai. CSS tidak bisa mendeteksi overflow,
     dan alternatifnya adalah komponen Alpine + ResizeObserver untuk sesuatu
     yang sudah benar tanpa itu.

     ── PADDING/MARGIN VERTIKAL YANG SALING MENIADAKAN ──────────────────
     `overflow-x: auto` memaksa sumbu-Y jadi `auto` juga — spesifikasinya
     memang begitu, satu sumbu non-visible menular ke sumbu lain. Akibatnya
     cincin fokus chip terpotong atas-bawah. 3px padding memberi ruangnya,
     margin negatif mengembalikan tinggi barisnya seperti semula. */

.k-chipbar-scroll {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-block: 3px;
  margin-block: -3px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.k-chipbar-scroll::-webkit-scrollbar {
  display: none;
}

/* 15rem = sekitar separuh lebar layar mini app 390px. Batas ini yang membuat
     gulir mendatar tetap berguna: tanpa itu satu chip kata kunci panjang
     sendirian butuh beberapa layar gulir untuk dilewati. */

.k-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 15rem;
}

/* ── kartu hasil yang detailnya sedang dibaca ────────────────────── */

/* Hanya berarti di layar lebar: di bawah `lg` panel sampingnya tidak
     dirender, mengetuk kartu BERPINDAH halaman, dan "sedang terpilih" tidak
     punya arti apa pun. Karena itu seluruh aturannya di dalam `@screen lg` —
     bukan disembunyikan dengan `lg:` di view, supaya penandanya tidak pernah
     sempat berkedip di ponsel.

     Border aksen + latar `brand-tint`, BUKAN garis aksen di tepi kiri:
     pedoman kandidat §5 melarang "kartu dengan garis aksen di tepi kiri"
     secara eksplisit. `brand-tint` memang tokennya untuk keadaan aktif
     ("latar badge Wawancara & chip aktif"), dan teks kartu (`karir-ink` /
     `karir-body`) tetap jauh di atas ambang kontras di atasnya.

     Tanpa penanda ini, daftar 20 kartu di sebelah panel tidak punya satu pun
     petunjuk baris mana yang sedang terbuka — orang kehilangan tempatnya tiap
     kali menggulir. */

@media (min-width: 1024px) {
  .k-jobcard-aktif {
    --tw-border-opacity: 1;
    border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
  }
}

/* ── panel detail berdampingan (/cari-lowongan) ──────────────────── */

/* HANYA panel detailnya yang jadi wadah gulir sendiri. Kolom daftar di
     sebelahnya SENGAJA dibiarkan mengikuti gulir halaman.

     ── MASALAH ASLINYA ──────────────────────────────────────────────────
     Panel detail `sticky` tapi tidak ada satu pun kolom ber-`overflow-y-auto`,
     jadi halaman ini cuma punya SATU wadah gulir: dokumen. Roda mouse di atas
     detail menggulir dokumen — dan yang terlihat bergerak adalah daftarnya,
     karena detailnya sedang dipaku.

     ── DAN KENAPA DAFTARNYA TIDAK IKUT DIBATASI ─────────────────────────
     Percobaan pertama (2026-09-07) memasang aturan ini di KEDUA kolom.
     Akibatnya: tinggi dokumen ikut terpotong jadi kira-kira satu layar,
     halamannya nyaris tidak bisa digulir, `sticky` tidak pernah sempat
     mengunci — dan bagian bawah KEDUA kolom terdampar di luar layar tanpa
     cara mencapainya. Dilaporkan pemilik: "scroll tidak bisa sampai bawah".

     Yang membuat pola list+detail bekerja justru daftarnya TETAP menggulir
     halaman: tinggi dokumen datang dari sana, dan tinggi itulah yang memberi
     `sticky` ruang untuk mengunci.

     `max-height`, bukan `height`: detail pendek tidak boleh membentang
     setinggi layar dan menyisakan wadah gulir kosong.

     ── DAN KENAPA TIDAK ADA `overscroll-behavior: contain` ──────────────
     Sempat dipasang (2026-09-07) dengan alasan "menahan gulir bocor ke
     halaman saat panelnya mentok". Itu salah membaca masalahnya: bocor di
     BATAS justru yang orang harapkan dari wadah gulir bersarang. Yang
     dikeluhkan di awal adalah gulir yang bocor SEJAK GERAKAN PERTAMA, dan itu
     sudah selesai begitu panelnya punya wadah gulir sendiri.

     `contain` malah membuat panel jadi ZONA MATI. Dilaporkan pemilik: sesudah
     panel mentok di bawah, menggulir ke atas dengan kursor di atas panel tidak
     bisa melewati batasnya — pengguna harus memindahkan kursor ke kolom daftar
     dulu. Lebih buruk lagi untuk lowongan berdeskripsi PENDEK: panelnya tidak
     punya gulir internal sama sekali, dan `contain` menghentikan rangkaian
     gulir sejak gerakan pertama, jadi halaman terasa BEKU selama kursor ada di
     atas detail.

     Rangkaian gulir bawaan peramban sudah benar: gulir panelnya dulu, dan
     kalau sudah mentok, halamannya yang lanjut. */

.k-splitpane-detail {
  min-width: 0px;
}

@media (min-width: 1024px) {
  .k-splitpane-detail {
    position: sticky;
    /* `paneltop` = navstack 100 + 24 jarak. Nilainya token, bukan angka di
         view — `lg:top-[124px]` yang lama adalah salinan kedua token ini. */
    top: 124px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
  }
}

/* ── select tunggal ber-pencarian ────────────────────────────────── */

/* Dipakai partials/_select-cari.ejs; perilakunya di alpine/select-cari.ts.
     Dipisah dari `.k-ms-*` DENGAN SENGAJA walau rupanya bersaudara: yang itu
     adalah `<summary>` dari `<details>` berisi checkbox, yang ini `<button>`
     berpasangan dengan `<select>` tersembunyi. Menyatukan keduanya berarti
     satu aturan harus melayani dua struktur DOM yang berbeda, dan perubahan
     pada salah satunya diam-diam menggeser yang lain. */

/* Select native saat lapis pencarian aktif. `display:none`, bukan
     `visibility`/`opacity`: keduanya menyisakan kotak yang tetap bisa
     difokus keyboard, sehingga Tab singgah di kontrol tak terlihat.
     Kelas ini DIPASANG KOMPONEN saat init, tidak pernah dirender server —
     tanpa JS select-nya harus tetap terlihat. */

.k-sc-native-hidden {
  display: none;
}

/* SATU kotak: field dan kotak cari adalah `<input>` yang sama. Nilainya
     mengikuti `.k-input`/`.k-select` persis — kalau tingginya meleset 1px, ia
     terbaca sebagai kontrol jenis lain di formulir yang sama.

     `pr-14` menyisakan ruang untuk dua ikon yang duduk absolut di atasnya
     (silang penghapus + kepala panah); tanpa itu teks panjang menyelinap ke
     bawah keduanya. */

.k-sc-input {
  height: 2.25rem;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 3.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.k-sc-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-placeholder) / var(--tw-text-opacity, 1));
}

.k-sc-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-placeholder) / var(--tw-text-opacity, 1));
}

.k-sc-input:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.k-sc-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  outline: none;
  box-shadow: none;
}

/* Terbuka: border menguat jadi brand — penanda bahwa panel di bawahnya
     milik kotak ini. Aturan yang sama dipakai `details[open] > .k-ms-field`. */

.k-sc-input.is-open {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
}

/* Silang penghapus. Setinggi kontrol penuh, bukan ikon 16px telanjang:
     WCAG 2.5.8 menuntut target sentuh minimal 24px, dan ikon sekecil itu di
     ponsel praktis mustahil dikenai.

     `inset-y-0`, BUKAN `top-0 h-9`. Keduanya terlihat sama selama tinggi
     kontrolnya tepat 36px — dan berhenti sama begitu tingginya bergeser
     sedikit pun (border berubah, `text-row` naik satu langkah, atau peramban
     membulatkan beda). `inset-y-0` mengikat ke kotak induknya, jadi ia tidak
     bisa meleset. Inilah yang membuat chevron-nya sempat tidak sejajar. */

.k-sc-clear {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 1.75rem;
  display: flex;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-sc-clear:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* ── kepala panah, SATU gambar untuk dua kontrol ─────────────────── */

/* `<select>` native DAN kotak `selectCari` memakai kepala panah yang sama,
     di garis vertikal yang sama, dengan jarak kanan yang sama.

     ── KENAPA DIGAMBAR GRADIEN, BUKAN IKON <i> ──────────────────────────
     Versi pertama memakai `<i class="ri-arrow-down-s-line">` yang dipasang
     absolut. Ia TIDAK PERNAH sejajar di mini app, dan sebabnya bukan CSS ini:
     build ikon mini app menyetel `[class^="ri-"] { display:inline-block;
     width:1em; height:1em }` DAN dimuat SESUDAH app.css (layouts/miniapp.ejs).
     Jadi `display:flex` di sini kalah, `height:1em` mengalahkan `inset-y-0`,
     dan kotak ikonnya terkunci 16px di tepi ATAS kontrol setinggi 36px.
     Menaikkan spesifisitas cuma memindahkan perkelahiannya, tidak
     menyelesaikannya.

     ── DAN KENAPA `<select>` NATIVE IKUT ────────────────────────────────
     Panah bawaan peramban digambar menempel tepi kanan dan posisinya tidak
     bisa diatur CSS sama sekali. Hasilnya dua garis vertikal berbeda di satu
     formulir — terlihat jelas begitu select native dan `selectCari` ditumpuk
     (Jenjang di atas Jurusan di seksi Pendidikan). `appearance-none`
     mematikan panah bawaan itu, dan gambar di bawah menggantikannya.

     Dua gradien, BUKAN data-URI SVG: data-URI menuntut warna hex mentah
     ditulis di berkas ini (dilarang §14, alasan yang sama sudah dicatat di
     `.k-checkbox`). Gradien memakai `rgb(var(--karir-muted))` — token yang
     sama dengan kontrol lain, ikut berubah kalau tokennya berubah.

     Geometrinya: dua bujur sangkar 5px yang masing-masing terpotong diagonal,
     berdampingan membentuk "v" selebar 10px. Tepi kanannya 8px dari batas
     kontrol — 4px lebih ke kanan daripada `px-3` isi kontrolnya, karena
     dengan jarak yang persis sama panahnya terbaca terlalu masuk ke dalam
     kotak (permintaan pemilik 2026-09-07, dilihat dari layar). */

.k-select,
  .k-sc-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image:
      linear-gradient(45deg, transparent 50%, rgb(var(--karir-muted)) 50%),
      linear-gradient(135deg, rgb(var(--karir-muted)) 50%, transparent 50%);
  background-position:
      calc(100% - 18px) calc(50% - 1px),
      calc(100% - 13px) calc(50% - 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Ruang untuk panahnya. `.k-select` cuma perlu melewati panah (22px + napas);
     `.k-sc-input` juga harus melewati tombol silang di 32–56px. */

.k-select {
  padding-right: 2rem;
}

/* MENGAMBANG, bukan mendorong isi ke bawah seperti `.k-ms-panel`. Field ini
     duduk di tengah formulir; panel yang mendorong akan menggeser seluruh
     kontrol di bawahnya setiap kali dibuka. 232px adalah lebar popover
     pedoman kandidat §3, tapi di sini ia MINIMUM: field-nya sendiri bisa
     lebih lebar, dan panel yang lebih sempit dari field-nya terlihat seperti
     salah pasang. */

.k-sc-panel {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 20;
  margin-top: 0.25rem;
  min-width: 232px;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Tinggi dibatasi supaya daftar 191 negara tidak menjadi panel setinggi
     halaman; scroll di dalam panel, bukan di halaman. */

.k-sc-list {
  max-height: 16rem;
}

.k-sc-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.k-sc-list {
  overflow-y: auto;
  padding-right: 0.25rem;
}

.k-sc-row {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

.k-sc-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

/* Terpilih: latar shell + teks ink. TIDAK memakai warna aksen sebagai
     latar — pedoman §5 melarang warna semantik untuk dekorasi, dan "baris
     yang sedang terpilih" bukan status yang perlu berteriak. */

.k-sc-row.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* Sorotan PAPAN KETIK, dan ia sengaja berbeda dari `.is-on`.
     Keduanya bisa menyala bersamaan pada baris yang sama, jadi kalau rupanya
     identik pengguna papan ketik kehilangan satu-satunya petunjuk di mana
     panahnya berada. Border, bukan latar — latar sudah dipakai `.is-on`. */

.k-sc-row.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  box-shadow: inset 0 0 0 1px rgb(var(--karir-brand));
}

.k-sc-note {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Ikon pembuka di dalam notice/keterangan. Nilai -2px menyeimbangkannya
     secara optis terhadap teks di sebelahnya; ia diketik 23 kali sebagai
     align-[-2px] di view dan setiap salinannya terjaring 
     sebagai nilai arbitrer. Kelas ini tempat mendaratkannya — halaman baru
     memakai ini, dan 22 sisanya bisa menyusul di perubahan tersendiri. */

.k-notice-icon {
  margin-right: 0.25rem;
  vertical-align: -2px;
}

/* ── bilah aksi mengambang (mini app) ────────────────────────────── */

/* Muncul hanya saat ada yang dipilih — mis. "3 lowongan dipilih · Lamar
     sekaligus" di /cari-lowongan.

     DUDUK DI ATAS TAB BAR, BUKAN MENGGANTIKANNYA. `.k-tabbar` (z-30) adalah
     satu-satunya navigasi yang dimiliki pengguna di mini app; menyembunyikannya
     selama mode pilih membuat pengguna terasa terjebak di layar yang sedang ia
     kerjakan. Karena itu `bottom` = tinggi tab bar, dan z-20 DI BAWAH tab bar —
     kalau keduanya kebetulan bertemu, navigasi yang menang.

     `env(safe-area-inset-bottom)` ikut ditambahkan karena tab bar di bawahnya
     juga menyisakan ruang itu; tanpa ini bilah aksi menempel 34px terlalu
     rendah di iPhone ber-gesture bar dan menindih tepi atas tab bar. */

.k-actionbar {
  position: fixed;
  left: 0px;
  right: 0px;
  z-index: 20;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  bottom: 60px;
  margin-bottom: env(safe-area-inset-bottom);
}

/* ── ringkasan <details> ─────────────────────────────────────────── */

/* Baris yang diketuk untuk membentangkan isi (kartu "Kelengkapan profil"
     bentuk ringkas di mini app).

     DUA MESIN, DUA ATURAN, dan keduanya perlu: `list-style: none` mematikan
     segitiga bawaan di sebagian besar mesin, sementara Safari MENGABAIKANNYA
     dan hanya menurut pada `::-webkit-details-marker`. Mini app berjalan di
     WebKit, jadi melewatkan yang kedua berarti segitiga bawaan tetap muncul di
     sana — tepat di permukaan yang paling diperhatikan.

     Di view ini dulu ditulis sebagai `[&::-webkit-details-marker]:hidden`,
     nilai arbitrer yang dihitung `pnpm check:ui`. */

.k-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-summary::-webkit-details-marker {
  display: none;
}

/* ── slider kartu (§10) ──────────────────────────────────────────── */

/* Lebar kartu TETAP 236px + scroll-snap start. Scrollbar disembunyikan;
     panah wajib ada sebagai kendali yang terlihat. */

.k-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.125rem;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.k-slider::-webkit-scrollbar {
  display: none;
}

.k-slider > * {
  width: 236px;
  flex: none;
  scroll-snap-align: start;
}

.k-slider-btn {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-slider-btn:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-slider-btn:disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-meta) / var(--tw-text-opacity, 1));
  opacity: 0.5;
}

/* ── watermark dekoratif ─────────────────────────────────────────── */

/* 1.16:1 dan itu BENAR — dekoratif murni, dikecualikan dari ambang
     kontras. Wajib pointer-events:none + aria-hidden di view. */

.k-watermark {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-watermark) / var(--tw-text-opacity, 1));
}

/* ── footer ──────────────────────────────────────────────────────── */

/* Latar rata bg-brand-dark (#185488) — putih di atasnya 7.89:1.
     Menggantikan gambar latar Splashscreen.png milik karir-fe: §5 melarang
     gradient/latar berat dan menuntut flat. Tautan `text-white` PENUH,
     bukan text-white/70 (putih 70% di atas #185488 = 4.79:1, terlalu
     mepet); judul kolom dibedakan lewat BOBOT, bukan opasitas. */

.k-footer {
  margin-top: 40px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-dark) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-footer-col-title {
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-footer-link {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-footer-link:hover {
  text-decoration-line: underline;
}

.k-footer-link {
  /* 7.89:1 */
}

.k-footer-social {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.k-footer-social:hover {
  background-color: rgb(255 255 255 / 0.15);
}

/* ── fokus keyboard global (§6) ──────────────────────────────────── */

/* :focus-visible, bukan :focus — nol biaya visual untuk pengguna mouse.
     (Tidak dipakai untuk input teks: browser menganggap input teks selalu
     focus-visible, jadi outline-nya akan muncul saat diklik mouse juga dan
     estetika "tanpa ring" hilang. Input punya perlakuan sendiri di atas.)
     Telusuri halaman dengan Tab saja untuk memastikan setiap titik henti
     terlihat — pedoman menuntut diuji nyata, bukan diasumsikan. */

.k-btn:focus-visible,
  .k-nav-item:focus-visible,
  .k-chip:focus-visible,
  .k-card-action:focus-visible,
  a:focus-visible {
  outline: 2px solid rgb(var(--karir-brand));
  outline-offset: 2px;
}

/* Di atas footer biru, outline brand (#1e63ae vs #185488) praktis tak
     terlihat — 1.30:1. Fokus di footer memakai putih. */

.k-footer a:focus-visible,
  .k-footer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── meteran kekuatan sandi (layar auth, §08) ────────────────────── */

/* Tiga segmen; tingkatnya dibawa ATRIBUT `data-level` dari
     src/alpine/password-strength.ts, BUKAN nama kelas yang dirakit di .ts.
     Alasannya empiris: kelas yang hanya ada sebagai string di .ts tidak
     pernah dilihat scanner Tailwind (content hanya .ejs) sehingga tidak
     digenerate dan no-op diam-diam — dan `safelist` di tailwind.config.js
     tidak boleh disentuh dari modul ini.

     Warna memakai token status karir yang nilainya SUDAH diukur, bukan
     merah/kuning/hijau baru: masing-masing 5,24:1 / 4,84:1 / 5,21:1 di atas
     putih dan 4,17–4,49:1 di atas segmen netral #eeeeee — semuanya lolos
     ambang non-teks WCAG 2.2 §1.4.11 (3:1). "Kuning" pedoman diambil sebagai
     amber `karir-review`; kuning murni tidak mungkin lolos di atas putih.

     Bar ini aria-hidden di view — maknanya juga ditulis sebagai kalimat
     (WCAG 1.4.1: warna tidak boleh jadi satu-satunya pembawa informasi). */

.k-meter {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.375rem;
}

.k-meter-seg {
  height: 0.25rem;
  flex: 1 1 0%;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-line) / var(--tw-bg-opacity, 1));
  /* #eeeeee — belum tercapai */
}

.k-meter[data-level="1"] .k-meter-seg:nth-child(1) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-rejected) / var(--tw-bg-opacity, 1));
}

.k-meter[data-level="2"] .k-meter-seg:nth-child(-n + 2) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review) / var(--tw-bg-opacity, 1));
}

.k-meter[data-level="3"] .k-meter-seg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-offer) / var(--tw-bg-opacity, 1));
}

/* ── perekam ORVI (wawancara rekaman video) ───────────────────────── */

/* SELURUH keadaan perekam disetir `data-state` pada `.k-rec`, BUKAN kelas
     yang dirakit di JavaScript. Alasannya tertulis di tailwind.config.js:
     scanner JIT hanya membaca .ejs, jadi kelas yang hanya ada sebagai string
     di src/alpine/*.ts tidak pernah digenerate dan no-op DIAM-DIAM. Pola
     `data-*` menghindari jebakan itu seluruhnya — dan ia pola yang sama
     dengan `.k-meter[data-level]` tepat di atas.

     Nilai `data-state` yang dikenal: idle | siap | rekam | kirim | tinjau |
     gagal. `tinjau` hanya muncul di mode LATIHAN — panggungnya memutar ulang
     rekaman, bukan menampilkan kamera. */

/* Lebar DIBATASI, dan angkanya tinggal di sini — bukan sebagai utility di
     view (pedoman UI melarang nilai arbitrer di .ejs).

     380px ≈ lebar kolom rancangan 390px. Tanpa batas ini, panggung 3:4
     merentang selebar `.k-container` di desktop: 1100px lebar berarti ~1470px
     TINGGI, satu kotak hitam yang mendorong tombol "Uji perangkat" dan
     indikator mikrofon keluar dari layar sepenuhnya. Terukur pada 1280px.

     Dibatasi lebarnya, bukan tingginya: yang direkam WAJAH, dan potret
     memang bentuk yang benar — di ponsel ia tetap selebar layar. */

.k-rec-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-ink) / var(--tw-bg-opacity, 1));
}

/* Rasio 3:4 (potret) — kamera ponsel, dan wajah yang direkam. `aspect-video`
     lanskap membuat kepala terpotong di layar sempit. */

.k-rec-video {
  aspect-ratio: 3/4;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Lapisan di atas video: hitung mundur persiapan, sisa waktu, penanda
     merekam. `pointer-events-none` supaya tidak menghalangi kontrol di
     bawahnya. */

.k-rec-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.k-rec-count {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Penanda keadaan awal, hanya saat data-state="idle". */

.k-rec-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-line) / var(--tw-text-opacity, 1));
}

.k-rec[data-state="idle"] .k-rec-placeholder {
  display: flex;
}

/* Penanda "sedang merekam". Titik merah + label; hanya tampil saat
     `data-state="rekam"`, diatur aturan di bawah, bukan oleh JS. */

.k-rec-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-rejected) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.k-rec[data-state="rekam"] .k-rec-badge {
  display: flex;
}

.k-rec-dot {
  height: 0.5rem;
  width: 0.5rem;
  flex: none;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* Kartu "buka di browser" — jalur mundur ketika webview aplikasi induk
     tidak memberi izin kamera. Tersembunyi kecuali perekam menyerah. */

.k-rec-fallback {
  display: none;
}

.k-rec[data-state="gagal"] .k-rec-fallback {
  display: block;
}

.k-rec[data-state="gagal"] .k-rec-stage,
  .k-rec[data-state="gagal"] .k-rec-actions {
  display: none;
}

/* Latihan wawancara: langkah periksa transkrip sesudah merekam — kamera
     sudah dilepas, panggungnya disembunyikan. */

.k-rec[data-state="transkrip"] .k-rec-stage {
  display: none;
}

/* ── prosa: SEMUA HTML yang datang dari database ──────────────────── */

/* `.k-prose` dipasang pada PEMBUNGKUS, dan isinya boleh apa saja yang lolos
     sanitizer. Ia satu-satunya aturan prosa di app ini — sebelumnya ada dua
     yang tidak saling tahu, dan keduanya menambal kerusakan yang persis sama:

       1. blok `.b-markdown` di berkas ini, dipakai /info/* dan /tnc;
       2. string utility `richText` yang DISALIN ke `views/lowongan-detail/
          index.ejs` dan `views/perusahaan/index.ejs`, dengan alasan (tertulis
          di sana) bahwa app.css sedang dikerjakan paralel oleh increment lain.

     Alasan (2) sudah kedaluwarsa, dan duplikatnya membuat satu cacat yang
     terlihat pengunjung: kait `.b-markdown` hanya menempel pada HTML yang
     F1 bungkus, sedangkan 3 kunci `raw=true` — termasuk dokumen Syarat &
     Ketentuan Perusahaan — SENGAJA dirender tanpa pembungkus itu. Hasilnya
     nol jarak antar pasal dan penanda a,b,c yang menggantung di luar kotak
     isi. Kelas komponen bersama menyelesaikan keduanya sekaligus; pedoman
     UI juga melarang rupa (ukuran huruf, warna, border) hidup sebagai
     utility di view.

     Kenapa aturan TURUNAN (`.k-prose p`) dan bukan kelas per-elemen: HTML-nya
     datang dari DB dan dirakit markdown-it/sanitize-html, jadi tidak ada
     tempat untuk menempelkan kelas di tiap tag. Ini satu dari sedikit hal
     yang memang harus ditulis sebagai selector.

     Tailwind preflight menormalkan margin, list-style, dan ukuran heading
     sampai NOL, jadi tanpa blok ini paragraf dokumen hukum menempel tanpa
     jarak dan daftar bernomornya kehilangan angka — termasuk `<ol
     style="list-style-type: lower-alpha">` yang penomoran a,b,c-nya sengaja
     dipertahankan sanitizer. `list-style-position: inside` TIDAK dipakai:
     ia membuat baris kedua item panjang lurus ke bawah angka. `<strong>`
     dipetakan preflight ke `font-weight: bolder` (700); yang dikirim ke
     `public/vendor/fonts/` hanya 400 dan 500, jadi tanpa penurunan eksplisit
     browser akan mensintesis tebal palsu.

     Cakupan tag = gabungan dari semua sumber yang mengisinya: allowlist F1
     (p, br, em, strong, b, ul/ol/li, span, a, blockquote, h1-h3) dan
     `sanitizeOpportunityHtml` (yang juga meloloskan h4-h6). */

.k-prose {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

.k-prose > :first-child {
  margin-top: 0px;
}

.k-prose > :last-child {
  margin-bottom: 0px;
}

.k-prose p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.k-prose ul,
  .k-prose ol {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.k-prose ul {
  list-style-type: disc;
}

/* `list-decimal` HANYA sebagai bawaan. Atribut `style="list-style-type:
     lower-alpha"` yang lolos allowlist menang atasnya (inline > kelas), dan
     itu memang yang diinginkan — lihat catatan penomoran a,b,c. */

.k-prose ol {
  list-style-type: decimal;
}

.k-prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.k-prose h1,
  .k-prose h2,
  .k-prose h3,
  .k-prose h4,
  .k-prose h5,
  .k-prose h6 {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-prose a {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.k-prose a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand-dark) / var(--tw-text-opacity, 1));
}

.k-prose blockquote {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand-line) / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.k-prose b,
  .k-prose strong {
  /* 500, BUKAN 600. `<strong>` bawaan browser = 700, dan 600 pun tidak
       punya berkasnya sejak aset karir dipangkas ke 400/500 — meminta 600
       hanya memindahkan sintesis tebal palsu satu langkah, tidak
       menghilangkannya. Lihat catatan plafon di ui-guideline-kandidat.md §5. */
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

/* `.b-markdown` adalah SATU-SATUNYA nama kelas legacy yang dibawa ke repo
     ini, dan itu bukan pilihan gaya: F1 (`renderMarkdownBody`) SELALU
     memancarkan pembungkus `<div class="b-markdown">` — perilaku yang dikunci
     `spec/models/editable_content_spec.rb:49` dan tesnya sendiri. Kelasnya
     ada di HTML apa pun yang kita lakukan.

     Ia TIDAK lagi membawa gaya prosa sendiri; itu tugas `.k-prose` di
     pembungkusnya. Yang tersisa hanya perapian margin tepi, dan itu memang
     hanya bisa dikerjakan dari sini: pembungkus F1 menambah SATU tingkat,
     sehingga `.k-prose > :first-child` mengenai div-nya, bukan paragraf
     pertama di dalamnya.

     Efek sampingnya disengaja. Judul kartu /info/privacy-policy datang dari
     EditableContent (`_matte.ejs`, cabang `headerHtml`) dan berada DI LUAR
     `.k-prose`; selama `.b-markdown` masih menyetel `text-body`, judul itu
     tampil 13px sementara judul kartu lain di halaman yang sama tampil
     text-card. Sekarang ia mewarisi `text-card` dari wadahnya. */

.b-markdown > :first-child {
  margin-top: 0px;
}

.b-markdown > :last-child {
  margin-bottom: 0px;
}

/* ── tata letak halaman /info/* ───────────────────────────────────── */

/* Dua bentuk kolom, dan keduanya sebelumnya ditulis sebagai nilai arbitrer
     di TUJUH view (`lg:grid-cols-[220px_minmax(0,1fr)]` dan
     `lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]`). Grid memang tata letak —
     yang dilarang pedoman bukan `grid`-nya melainkan ANGKANYA hidup di view,
     tempat asal-usulnya hilang dan tujuh salinan bisa menyimpang satu per
     satu. Di sini angkanya satu keputusan.

     220px = lebar kolom ikon+judul di `advertise` dan `terms-conditions`;
     1fr/2fr = kolom penjelas + isi di empat halaman lainnya. Keduanya
     bertumpuk (satu kolom) di bawah `lg`, jadi tidak ada nilai lain yang
     perlu diingat. */

.k-info-split {
  display: grid;
  gap: 12px;
}

@media (min-width: 1024px) {
  .k-info-split {
    grid-template-columns: 220px minmax(0,1fr);
    gap: 1.5rem;
  }
}

.k-info-split-wide {
  display: grid;
  gap: 12px;
}

@media (min-width: 1024px) {
  .k-info-split-wide {
    grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    gap: 1.5rem;
  }
}

/* Ikon besar penanda seksi di kolom kiri /info/*. 32px bukan tingkat ramp
     teks — ia ukuran GLYPH ikon, alasan yang sama dengan `.k-bullet-dot`.
     Ditulis sekali di sini, bukan diketik ulang di dua view. */

.k-aside-icon {
  font-size: 32px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

/* Baris <summary> pada blok <details> T&C: penanda bawaan UA dimatikan
     (dua mekanisme berbeda — `marker:content-none` untuk mesin modern,
     `::-webkit-details-marker` untuk WebKit lama), sisanya kerangka baris
     yang bisa difokus keyboard. Chevron-nya dekoratif dan berputar lewat
     `group-open:` yang tetap boleh di view: itu STATE, bukan nilai. */

.k-disclosure-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  border-radius: 8px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.k-disclosure-summary *::marker {
  --tw-content: none;
  content: var(--tw-content);
}

.k-disclosure-summary::marker {
  --tw-content: none;
  content: var(--tw-content);
}

.k-disclosure-summary:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: rgb(var(--karir-brand) / 1);
}

.k-disclosure-summary::-webkit-details-marker {
  display: none;
}

.k-disclosure-chevron {
  font-size: 20px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.content-card {
  overflow: hidden;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.content-card-link {
  display: block;
  height: 100%;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.content-card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-card-copy > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.content-card-copy {
  padding: 1rem;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

.content-card-title {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.content-meta {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.content-link {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.content-card-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .content-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .content-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.content-page-title {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.content-section-title {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.content-detail {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
}

.content-lead {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.content-detail-cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-empty {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding: 1.25rem;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.content-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.content-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.content-carousel-item {
  width: 16rem;
  flex: none;
  scroll-snap-align: start;
}

.content-banner-track {
  display: flex;
  overflow-x: auto;
  border-radius: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.content-banner-slide {
  display: block;
  width: 100%;
  flex: none;
  scroll-snap-align: start;
}

.content-banner-slide img {
  aspect-ratio: 16 / 9;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .content-banner-slide img {
    aspect-ratio: auto;
  }
}

.content-banner-controls {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.content-banner-controls[hidden] {
  display: none;
}

.content-banner-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-line) / var(--tw-bg-opacity, 1));
}

.content-banner-dot[aria-current="true"] {
  width: 1.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
}

.content-banner-pause {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.content-banner-device-desktop {
  display: none;
}

@media (min-width: 768px) {
  .content-banner-device-desktop {
    display: block;
  }
}

.content-banner-device-mobile {
  display: block;
}

@media (min-width: 768px) {
  .content-banner-device-mobile {
    display: none;
  }
}

.content-body {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
  overflow-wrap: anywhere;
}

.content-body > * + *,
  .content-rich-text > * + * {
  margin-top: 1.25rem;
}

.content-body h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.content-body h3,
  .content-body h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.content-body strong {
  font-weight: 500;
}

.content-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.content-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.content-body a {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.content-body img {
  height: auto;
  width: 100%;
  border-radius: 0.375rem;
}

.content-body figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.content-body blockquote {
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding-left: 1rem;
}

.content-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.content-body td,
  .content-body th {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding: 0.5rem;
}

.content-gallery {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .content-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.content-gallery-stack {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.content-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-width: 0px;
}

.content-cta {
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  padding: 1.25rem;
}

/* ── Beranda aplikasi Android/iOS (cari-lowongan/_beranda-atas.ejs) ──
     Figma "Beranda": banner geser selebar layar, kartu Ekstrak CV. Banner
     memakai scroll-snap CSS, tanpa JavaScript (bundel mini app tetap). Rasio
     2:1 = banner `is_mobile` legacy (content_banners); lebar 88% supaya
     banner berikutnya mengintip (Figma). */

.k-app-banners {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  gap: 12px;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  scrollbar-width: none;
}

.k-app-banners::-webkit-scrollbar {
  display: none;
}

.k-app-banner {
  display: block;
  width: 88%;
  flex: none;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
  aspect-ratio: 2 / 1;
}

.k-app-banner img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.k-app-ekstrak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
}

.k-app-ekstrak-judul {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-app-ekstrak-sub {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* ── Detail Pekerjaan aplikasi (lowongan-detail/index.ejs, `isApp`) ──
     Figma "Detail Pekerjaan": kepala rata tengah di atas gelombang biru
     pucat, ringkasan tiga kolom, Simpan + Lamar di bar bawah. */

.k-app-jobhead {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 16px;
  padding-top: 28px;
  text-align: center;
  background: linear-gradient(
      180deg,
      rgb(var(--karir-brand-tint)) 0%,
      rgb(var(--karir-canvas)) 70%
    );
}

.k-app-jobhead ul {
  justify-content: center;
}

/* Kolom isi selebar kepala, supaya ringkasan tidak menyusut ke isinya. */

.k-app-jobhead > div {
  width: 100%;
}

.k-app-summary {
  margin-top: 16px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-app-summary > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  --tw-divide-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-divide-opacity, 1));
}

.k-app-summary {
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.k-app-summary dt {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.k-app-summary dd {
  margin-top: 0.125rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

/* Bar bawah menggantikan tab bar (disembunyikan native di halaman detail). */

.k-app-actionbar {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.k-app-actionbar > :last-child {
  flex: 1 1 0%;
}

.k-app-actionbar .k-btn {
  height: 2.75rem;
  border-radius: 99px;
}

.k-app-actionbar > :last-child .k-btn,
  .k-app-actionbar > .k-badge {
  width: 100%;
  justify-content: center;
}

/* ── Detail Perusahaan aplikasi (perusahaan/index.ejs, `isApp`) ──
     Figma "Detail Perusahaan": lembar putih selebar layar di bawah header,
     tombol bulat penuh (Ikuti/Lainnya). */

.k-app-companyhead {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 16px;
  padding-top: 16px;
}

.k-app-companyhead .k-btn {
  border-radius: 99px;
}

/* ── Pencarian aplikasi (cari-lowongan/_app-search-start.ejs) ──
     Figma "Pencarian": chip kata kunci putih bertepi biru, "Hapus Semua"
     merah, ilustrasi kosong 240px dari ekspor Figma. */

.k-app-keyword {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.k-app-hapus {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-rejected) / var(--tw-text-opacity, 1));
}

.k-empty-art {
  height: auto;
  width: 10rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-\[14px\] {
  bottom: -14px;
}

.-right-0\.5 {
  right: -0.125rem;
}

.-right-\[12px\] {
  right: -12px;
}

.-top-0\.5 {
  top: -0.125rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.right-0 {
  right: 0px;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-4 {
  top: 1rem;
}

.top-full {
  top: 100%;
}

.top-navstack {
  top: 100px;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[70\] {
  z-index: 70;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-ml-4 {
  margin-left: -1rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-card {
  margin-bottom: 16px;
}

.mb-stack {
  margin-bottom: 12px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.mt-band {
  margin-top: 40px;
}

.mt-card {
  margin-top: 16px;
}

.mt-chip {
  margin-top: 6px;
}

.mt-px {
  margin-top: 1px;
}

.mt-section {
  margin-top: 28px;
}

.mt-stack {
  margin-top: 12px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[104px\] {
  height: 104px;
}

.h-\[18px\] {
  height: 18px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-navmenu {
  height: 40px;
}

.h-px {
  height: 1px;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-20 {
  width: 5rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[\.\.\.\] {
  width: ...;
}

.w-\[200px\] {
  width: 200px;
}

.w-\[232px\] {
  width: 232px;
}

.w-\[268px\] {
  width: 268px;
}

.w-\[42\%\] {
  width: 42%;
}

.w-\[420px\] {
  width: 420px;
}

.w-\[44\%\] {
  width: 44%;
}

.w-\[calc\(100vw-32px\)\] {
  width: calc(100vw - 32px);
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-4 {
  min-width: 1rem;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-\[10rem\] {
  max-width: 10rem;
}

.max-w-\[16rem\] {
  max-width: 16rem;
}

.max-w-\[368px\] {
  max-width: 368px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-content {
  max-width: 1320px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-gate {
  max-width: 460px;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-prose {
  max-width: 65ch;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink-0 {
  flex-shrink: 0;
}

.basis-full {
  flex-basis: 100%;
}

.border-collapse {
  border-collapse: collapse;
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.scroll-mt-navstack {
  scroll-margin-top: 100px;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-band {
  gap: 40px;
}

.gap-card {
  gap: 16px;
}

.gap-chip {
  gap: 6px;
}

.gap-icongap {
  gap: 7px;
}

.gap-section {
  gap: 28px;
}

.gap-stack {
  gap: 12px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}

.gap-x-band {
  -moz-column-gap: 40px;
       column-gap: 40px;
}

.gap-x-card {
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-chip {
  row-gap: 6px;
}

.gap-y-stack {
  row-gap: 12px;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-band > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(40px * var(--tw-space-y-reverse));
}

.space-y-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.space-y-chip > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(6px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(6px * var(--tw-space-y-reverse));
}

.space-y-section > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(28px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(28px * var(--tw-space-y-reverse));
}

.space-y-stack > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(12px * var(--tw-space-y-reverse));
}

.self-start {
  align-self: flex-start;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-card {
  border-radius: 8px;
}

.rounded-control {
  border-radius: 6px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-pill {
  border-radius: 99px;
}

.rounded-r-control {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-t-panel {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-brand-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand-line) / var(--tw-border-opacity, 1));
}

.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}

.border-karir-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line) / var(--tw-border-opacity, 1));
}

.border-karir-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.border-karir-shell {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
}

.border-karir-surface {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-surface) / var(--tw-border-opacity, 1));
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
}

.bg-brand-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-dark) / var(--tw-bg-opacity, 1));
}

.bg-brand-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

.bg-danger\/10 {
  background-color: rgb(var(--color-danger) / 0.1);
}

.bg-karir-bar-off {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-bar-off) / var(--tw-bg-opacity, 1));
}

.bg-karir-body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-body) / var(--tw-bg-opacity, 1));
}

.bg-karir-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-canvas) / var(--tw-bg-opacity, 1));
}

.bg-karir-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-ink) / var(--tw-bg-opacity, 1));
}

.bg-karir-line {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-line) / var(--tw-bg-opacity, 1));
}

.bg-karir-line-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-line-strong) / var(--tw-bg-opacity, 1));
}

.bg-karir-meta {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-meta) / var(--tw-bg-opacity, 1));
}

.bg-karir-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-muted) / var(--tw-bg-opacity, 1));
}

.bg-karir-offer {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-offer) / var(--tw-bg-opacity, 1));
}

.bg-karir-offer-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-offer-bg) / var(--tw-bg-opacity, 1));
}

.bg-karir-placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-placeholder) / var(--tw-bg-opacity, 1));
}

.bg-karir-rejected {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-rejected) / var(--tw-bg-opacity, 1));
}

.bg-karir-review {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review) / var(--tw-bg-opacity, 1));
}

.bg-karir-review-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-review-bg) / var(--tw-bg-opacity, 1));
}

.bg-karir-shell {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

.bg-karir-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
}

.bg-karir-watermark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-watermark) / var(--tw-bg-opacity, 1));
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-card {
  padding: 16px;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.px-card {
  padding-left: 16px;
  padding-right: 16px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-band {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-card {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-section {
  padding-top: 28px;
  padding-bottom: 28px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-band {
  padding-bottom: 40px;
}

.pb-card {
  padding-bottom: 16px;
}

.pb-section {
  padding-bottom: 28px;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-card {
  padding-top: 16px;
}

.pt-section {
  padding-top: 28px;
}

.pt-stack {
  padding-top: 12px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.align-\[-2px\] {
  vertical-align: -2px;
}

.font-sans {
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[56px\] {
  font-size: 56px;
}

.text-\[76px\] {
  font-size: 76px;
}

.text-badge {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.text-body {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

.text-caption {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
}

.text-card {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
}

.text-hero {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 500;
}

.text-meta {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
}

.text-row {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}

.text-section {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.text-erika-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.text-karir-body {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-body) / var(--tw-text-opacity, 1));
}

.text-karir-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.text-karir-meta {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-meta) / var(--tw-text-opacity, 1));
}

.text-karir-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

.text-karir-offer {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-offer) / var(--tw-text-opacity, 1));
}

.text-karir-rejected {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-rejected) / var(--tw-text-opacity, 1));
}

.text-karir-review {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-review) / var(--tw-text-opacity, 1));
}

.text-karir-shell {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-shell) / var(--tw-text-opacity, 1));
}

.text-karir-watermark {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-watermark) / var(--tw-text-opacity, 1));
}

.text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.underline {
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-70 {
  opacity: 0.7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-float {
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/* `<strong>`/`<b>` DEFAULTNYA 700 (preflight Tailwind: `font-weight: bolder`).
   Kedua pedoman melarang bobot >=700, jadi larangan itu bocor lewat tag HTML
   biasa — bukan cuma lewat kelas. Diturunkan ke 500, bobot terberat yang
   benar-benar kita kirim.
   INI PRASYARAT untuk mencabut 700.css dari assets:fonts: tanpa aturan ini,
   menghapus berkas fontnya membuat browser MEMALSUKAN tebal (synthetic bold)
   pada tiap <strong> — hasilnya lebih buruk daripada 700 asli. */

/*
 * Kelas komponen shell + kontrol untuk apps/karir.
 * Acuan: docs/architecture/ui-guideline-kandidat.md.
 *
 * PREFIX `.k-*`, BUKAN `.shell-*` milik erika. Alasannya bukan selera:
 * partial di packages/ui/views/ dipakai bertiga (karir/erika/backoffice),
 * jadi kalau karir mendefinisikan `.shell-card` dengan nilai berbeda
 * (karir flat tanpa shadow, radius 8, bobot maks 600) ia akan diam-diam
 * mengubah tampilan erika di partial bersama itu. Deviasi tercatat dari
 * brief, yang menyebut `.shell-*`.
 *
 * Semua nilai lewat token preset (`@apply`) — NOL hex mentah, sesuai
 * coding-standard.md §14. Pengecualian `outline:` di bawah memakai
 * `rgb(var(--karir-brand))` langsung karena Tailwind v3 tidak punya
 * utility outline-color yang bisa di-@apply bersama outline-offset
 * negatif; itu tetap TOKEN, bukan hex.
 */

/* Alpine TIDAK membawa CSS untuk x-cloak — atribut itu hanya dihapus setelah
   komponennya diinisialisasi, dan tanpa aturan di bawah elemen ber-x-cloak
   TERLIHAT lebih dulu lalu berkedip hilang. Di layar Daftar ia menjalankan
   tugas kedua yang lebih penting: kalau JavaScript mati, tombol "Tampilkan"
   dan meteran kekuatan TIDAK PERNAH muncul, jadi tidak ada kontrol mati di
   layar. @layer base, bukan components: aturan berbasis atribut tidak punya
   nama kelas yang bisa ditemukan scanner Tailwind di `content`, dan aturan
   components yang tidak ditemukan akan dipangkas. */

/* Cetak dokumen membership (`.k-doc`): chrome situs disembunyikan HANYA di
   halaman yang memuat dokumen, supaya mencetak halaman lain tidak berubah.
   @layer base: pemilihnya berbasis struktur (`:has`), bukan nama kelas
   komponen yang dicari scanner. */

/* ── Aplikasi Android/iOS: token warna Figma "TCMPP Karir Hi-Fi" ─────────
   Hanya saat layouts/miniapp.ejs memasang `data-app="mobile"` (proses
   MOBILE_APP_MODE, app.karir.com) — web karir.com tidak terpengaruh.
   Rencana desain apps/mobile-apps/DESIGN-PLAN.md §3, keputusan D1 (isi web
   tetap flat; gradien hanya di header native). Nilai diambil dari piksel
   ekspor Figma. Kontras: #005AAB di putih 7.0:1, di #E5F0FA 6.2:1. */

[data-app="mobile"] {
  --karir-brand: 0 90 171;
  /* #005AAB primary */
  --karir-brand-dark: 0 72 140;
  /* #00488C hover */
  --karir-brand-tint: 214 230 247;
  /* #D6E6F7 chip/badge aktif */
  --karir-canvas: 229 240 250;
  /* #E5F0FA latar halaman */
}

/* Navigasi bagian Detail Pekerjaan sebagai chip (Figma "Detail Pekerjaan"):
   biru penuh = bagian aktif. Kait `.k-section-nav` dipasang di
   lowongan-detail/index.ejs; spesifisitas [data-app] mengalahkan utility. */

[data-app="mobile"] .k-section-nav {
  margin-top: 16px;
  border-width: 0px;
  background-color: transparent;
}

[data-app="mobile"] .k-section-nav ul {
  gap: 6px;
  padding-left: 1rem;
  padding-right: 1rem;
}

[data-app="mobile"] .k-section-nav a {
  height: 2rem;
  border-radius: 99px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-muted) / var(--tw-text-opacity, 1));
}

[data-app="mobile"] .k-section-nav a[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Stepper modal Lamar sebagai titik (Figma "Apply Pekerjaan"): titik terisi =
   langkah aktif, titik bercentang = langkah yang sudah lewat (`:has`, WebView
   Chrome 105+/iOS 15.4+; tanpa dukungan, titiknya sekadar kosong). Hanya CSS:
   keadaan tetap dari `aria-current` (apply-modal.ts). */

[data-app="mobile"] .k-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
}

[data-app="mobile"] .k-step::before {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-control) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  content: "";
}

[data-app="mobile"] .k-step[aria-current="step"] {
  background-color: transparent;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

[data-app="mobile"] .k-step[aria-current="step"]::before {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  box-shadow: inset 0 0 0 3px #fff;
}

[data-app="mobile"] li:has(~ li .k-step[aria-current="step"]) .k-step::before {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  content: "✓";
}

[data-app="mobile"] [role="dialog"] .k-btn {
  border-radius: 99px;
}

/* ── Aplikasi Android/iOS, F5 (Figma "Profil" + form) — RUPA saja ─────────
   Keputusan pemilik 2026-10-22: kata-kata & struktur tetap; hanya gaya.
   Tombol bulat penuh di seluruh aplikasi (semua frame Figma). */

[data-app="mobile"] .k-btn {
  border-radius: 99px;
}

/* Kartu profil tanpa garis tepi di atas latar biru pucat (Figma). */

[data-app="mobile"] .k-pcard {
  border-radius: 8px;
  border-width: 0px;
}

[data-app="mobile"] .k-pcard-head {
  border-bottom-width: 0px;
  padding-bottom: 0px;
}

/* The WebView ends above the native tab bar already. The 60px offset belongs
   to MyTelkomsel's fixed HTML tab bar and must not be reserved twice. */

[data-app="mobile"] .k-actionbar {
  bottom: 0;
  margin-bottom: 0;
}

/* Profile records expose identity and actions immediately. Longer details and
   extra records use native <details>: accessible with keyboard and without JS. */

[data-app="mobile"] .k-profile-record-heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-app="mobile"] .k-profile-record-period {
  margin-left: 0px;
}

.k-profile-more,
.k-profile-record-details {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-shell) / var(--tw-border-opacity, 1));
}

.k-profile-more-summary,
.k-profile-record-summary {
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.k-profile-more-summary {
  padding-left: 18px;
  padding-right: 18px;
}

.k-profile-more-summary::-webkit-details-marker,
.k-profile-record-summary::-webkit-details-marker {
  display: none;
}

.k-profile-more-open,
.k-profile-record-open,
.k-profile-more[open] > summary > .k-profile-more-closed,
.k-profile-record-details[open] > summary > .k-profile-record-closed {
  display: none;
}

.k-profile-more[open] > summary > .k-profile-more-open,
.k-profile-record-details[open] > summary > .k-profile-record-open {
  display: inline;
}

.k-profile-more[open] > summary > i,
.k-profile-record-details[open] > summary > i {
  transform: rotate(180deg);
}

.k-profile-record-details {
  margin-top: 0.5rem;
}

.k-profile-record-details > :last-child:not(summary) {
  padding-bottom: 0.5rem;
}

.k-profile-bio-summary {
  cursor: pointer;
  list-style-type: none;
}

.k-profile-bio-summary::-webkit-details-marker {
  display: none;
}

.k-profile-bio[open] .k-profile-bio-preview,
.k-profile-bio[open] .k-profile-record-closed {
  display: none;
}

.k-profile-bio[open] .k-profile-record-open {
  display: inline;
}

/* Kartu kelengkapan: latar merah-muda lembut Figma ("Profilmu N% lengkap"). */

[data-app="mobile"] .k-kelengkapan {
  background: linear-gradient(120deg, #fbe9e7 0%, #f6e3ee 50%, #e9eaf8 100%);
}

/* Bagian kosong dipadatkan: ikon dekoratif disembunyikan, teks tetap. */

[data-app="mobile"] .k-pempty {
  gap: 6px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

[data-app="mobile"] .k-pempty > i {
  display: none;
}

[data-app="mobile"] .k-pempty > p:first-of-type {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}

/* Navigasi bagian /profile sebagai chip, sama dengan Detail Pekerjaan. */

[data-app="mobile"] [data-profil-akar] .k-navscroll {
  gap: 6px;
  border-bottom-width: 0px;
}

[data-app="mobile"] [data-profil-akar] .k-nav-item {
  height: 2rem;
  border-radius: 99px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
}

[data-app="mobile"] [data-profil-akar] .k-nav-item[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Form profil (bottom sheet): sudut atas lebih bulat, Simpan selebar baris. */

[data-app="mobile"] .k-sheet-panel {
  border-radius: 20px 20px 0 0;
}

[data-app="mobile"] .k-sheet-actions .k-btn-primary {
  flex: 1 1 0%;
}

/* Label field lebih tegas seperti Figma (bobot ≤ 500, plafon pemilik). */

[data-app="mobile"] .k-label {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.empty\:hidden:empty {
  display: none;
}

.hover\:border-karir-line-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-line-strong) / var(--tw-border-opacity, 1));
}

.hover\:bg-brand-tint:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

.hover\:bg-karir-rejected\/90:hover {
  background-color: rgb(var(--karir-rejected) / 0.9);
}

.hover\:bg-karir-shell:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-shell) / var(--tw-bg-opacity, 1));
}

.hover\:text-karir-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-ink) / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.has-\[\*\]\:pt-stack:has(*) {
  padding-top: 12px;
}

.aria-\[current\=location\]\:border-brand[aria-current="location"] {
  --tw-border-opacity: 1;
  border-color: rgb(var(--karir-brand) / var(--tw-border-opacity, 1));
}

.aria-\[current\=true\]\:bg-brand-tint[aria-current="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--karir-brand-tint) / var(--tw-bg-opacity, 1));
}

.aria-\[current\=location\]\:text-brand[aria-current="location"] {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

.aria-\[current\=true\]\:text-brand[aria-current="true"] {
  --tw-text-opacity: 1;
  color: rgb(var(--karir-brand) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:p-card {
    padding: 16px;
  }
}

@media (min-width: 768px) {
  .md\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-\[40\%\] {
    width: 40%;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.55fr_1fr\] {
    grid-template-columns: 1.55fr 1fr;
  }

  .lg\:grid-cols-\[1fr_2\.2fr\] {
    grid-template-columns: 1fr 2.2fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-section {
    gap: 28px;
  }
}

@media (min-width: 1280px) {
  .xl\:hidden {
    display: none;
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1\.5fr_1fr\] {
    grid-template-columns: 1.5fr 1fr;
  }
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

.\[\&_p\]\:mb-2 p {
  margin-bottom: 0.5rem;
}