/**
 * ==================================================
 * INDONESIA KERJA — MOBILE / RESPONSIVE PASS
 * ==================================================
 *
 * This file is loaded last on purpose. Desktop component styles remain the
 * source of truth; these rules only change layout/density at mobile widths.
 * Primary reference device: Oppo A5 (~360 CSS px viewport).
 */

html,
body {
  max-width: 100%;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 767px) {
  /* ==================================================
     Global mobile guardrails
  ================================================== */

  .ik-container {
    width: 100%;
    max-width: none;
    /* Match the 12px side gutter used by the mobile Jobs archive. */
    padding-inline: 12px;
  }

  .ik-section {
    padding-block: 8px;
  }

  /* Prevent accidental horizontal overflow from third-party/theme content. */
  .site-content,
  .ik-home-section,
  .ik-job-archive,
  .single_job_listing,
  #submit-job-form,
  #job_preview {
    min-width: 0;
    max-width: 100%;
  }

  /* ==================================================
     Homepage hero + search
  ================================================== */

  .ik-hero__content {
    max-width: 100%;
    padding-top: 32px;
    padding-bottom: 28px;
    gap: 10px;
  }

  .ik-hero__title {
    max-width: 340px;
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.08;
  }

  .ik-hero__description {
    max-width: 340px;
    font-size: 16px;
    line-height: 1.55;
  }

  .ik-search-form--full {
    gap: 10px;
  }

  .ik-search-form--full .ik-search-form__top {
    flex-direction: column;
    gap: 10px;
  }

  .ik-search-form--full .ik-search-form__top .ik-search-form__field,
  .ik-search-form--full .ik-search-form__top .ik-button {
    width: 100%;
  }

  .ik-search-form--full .ik-search-form__bottom {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ik-search-form--full .ik-search-form__field {
    min-height: 50px;
  }

  .ik-search-form--full .ik-search-form__field input,
  .ik-search-form--full .ik-search-form__field select,
  .ik-search-form--full .select2-container--default .select2-selection--single {
    font-size: 14px;
  }

  /* ==================================================
     Featured carousel
  ================================================== */

  .ik-carousel {
    width: 100%;
    margin: 24px 0;
  }

  .ik-carousel__header {
    align-items: flex-end;
    gap: 12px;
  }

  .ik-carousel__heading {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ik-carousel__controls {
    flex: 0 0 auto;
    gap: 6px;
  }

  .ik-carousel__prev,
  .ik-carousel__next {
    width: 34px;
    height: 34px;
  }

  .ik-carousel__prev svg,
  .ik-carousel__next svg {
    width: 16px;
    height: 16px;
  }

  .ik-carousel__viewport {
    overflow: hidden;
    padding: 12px 0;
    margin: -12px 0;
  }

  .ik-carousel__track {
    gap: 12px;
    touch-action: pan-y;
  }

  .ik-featured-card {
    /* Keep the carousel peek used by v1.0.85 on mobile. */
    flex: 0 0 min(88%, 340px);
    border-radius: 14px;
  }

  /* ==================================================
     Homepage latest jobs
  ================================================== */

  .ik-latest-jobs {
    /* .ik-container already supplies the mobile horizontal padding. */
    padding: 8px 0;
  }

  .ik-latest-jobs__header {
    margin-bottom: 14px;
  }

  .ik-latest-jobs__title {
    font-size: 24px;
  }

  .ik-latest-jobs__subtitle {
    font-size: 14px;
    line-height: 1.55;
  }

  .ik-latest-jobs .ik-job-list {
    gap: 10px;
  }

  .ik-latest-jobs__more {
    margin-top: 22px;
    margin-bottom: 28px;
    font-size: 16px;
  }

  /* ==================================================
     Job card — mobile-first compact variant
  ================================================== */

  .ik-job-card {
    padding: 12px;
    border-radius: 14px;
    box-shadow: var(--ik-shadow-sm);
  }

  .ik-job-card__link {
    gap: 9px;
  }

  .ik-job-card__top {
    gap: 10px;
  }

  .ik-job-card__logo,
  .ik-job-card__logo--initial,
  .ik-job-card__logo--image {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    border-radius: 10px;
  }

  .ik-job-card__logo--image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: none;
  }

  .ik-job-card__initial {
    font-size: 20px;
  }

  .ik-job-card__header {
    min-width: 0;
  }

  .ik-job-card__label {
    font-size: 11px;
    line-height: 1.2;
  }

  .ik-job-card__title,
  .ik-job-card h2.ik-job-card__title {
    display: -webkit-box;
    margin: 1px 0 2px;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ik-job-card__company {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ik-job-card__location {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  .ik-job-card__location span {
    white-space: nowrap;
  }

  .ik-job-card__summary {
    gap: 5px;
  }

  .ik-job-card__summary-item {
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.25;
  }

  .ik-job-card__summary-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ik-job-card__summary-icon,
  .ik-job-card__meta-icon {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .ik-job-card__footer {
    gap: 8px;
    padding-top: 8px;
  }

  .ik-job-card__salary {
    min-width: 0;
    font-size: 11px;
  }

  .ik-job-card__date {
    min-width: 0;
    font-size: 10px;
  }

  .ik-job-card__date span,
  .ik-job-card__salary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ==================================================
     Archive
  ================================================== */

  .ik-job-archive {
    width: calc(100% - 24px);
    padding-top: 8px;
  }

  .ik-archive {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ik-job-list {
    gap: 10px;
  }

  .ik-archive__sidebar {
    gap: 12px;
  }

  .ik-archive__sidebar > .ik-sidebar-card:first-child {
    position: static;
  }

  .ik-sidebar-card__body {
    gap: 10px;
  }

  /* ==================================================
     Single job / detail page
  ================================================== */

  .single_job_listing {
    padding-top: 8px;
  }

  .ik-job-hero {
    gap: 10px;
    margin-bottom: 16px;
  }

  .ik-job-hero__top {
    grid-template-columns: minmax(0, 1fr) 72px;
    column-gap: 12px;
  }

  .ik-job-hero__top > .ik-job-hero__logo,
  .ik-job-hero__top > .ik-job-hero__logo img {
    max-width: 72px;
    max-height: 72px;
  }

  .ik-job-hero__company {
    font-size: 18px;
  }

  .ik-job-hero__title {
    margin-bottom: 6px;
    font-size: 28px;
  }

  .ik-job-hero__intro,
  .ik-job-hero__address,
  .ik-job-hero__deadline {
    font-size: 14px;
    line-height: 1.5;
  }

  .ik-job-hero__meta {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 12px;
  }

  .ik-job-hero__meta-item + .ik-job-hero__meta-item::before {
    display: none;
  }

  .ik-single-job__layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ik-single-job__content,
  .ik-single-job__sidebar {
    gap: 10px;
  }

  .ik-summary-list {
    gap: 5px;
  }

  .ik-summary__item {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    padding: 4px 0;
  }

  .ik-summary__label,
  .ik-summary__value {
    grid-column: 2;
    font-size: 13px;
  }

  .ik-company .ik-card-body {
    gap: 14px;
  }

  .ik-company__logo,
  .ik-company__logo img {
    width: 72px;
    height: 72px;
  }

  .ik-company__job-title {
    font-size: 20px;
  }

  .ik-single-latest {
    margin: 8px 16px;
    padding-top: 20px;
  }


  /* ==================================================
     Submit form
  ================================================== */

  #submit-job-form {
    width: calc(100% - 24px);
    margin-inline: auto;
  }

  #submit-job-form .fieldset,
  #submit-job-form fieldset,
  #submit-job-form .job-manager-form-field {
    min-width: 0;
  }

  #submit-job-form label,
  #submit-job-form .fieldset-label {
    font-size: 13px;
    line-height: 1.35;
  }

  #submit-job-form input[type="text"],
  #submit-job-form input[type="email"],
  #submit-job-form input[type="url"],
  #submit-job-form input[type="number"],
  #submit-job-form input[type="tel"],
  #submit-job-form input[type="date"],
  #submit-job-form select,
  #submit-job-form textarea {
    max-width: 100%;
    font-size: 14px;
  }

  #submit-job-form input[type="text"],
  #submit-job-form input[type="email"],
  #submit-job-form input[type="url"],
  #submit-job-form input[type="number"],
  #submit-job-form input[type="tel"],
  #submit-job-form input[type="date"],
  #submit-job-form select {
    min-height: 46px;
  }

  #submit-job-form .wp-editor-wrap,
  #submit-job-form .wp-editor-container,
  #submit-job-form textarea.wp-editor-area {
    max-width: 100%;
  }

  #submit-job-form > p:last-of-type {
    align-items: stretch;
    flex-direction: column;
  }

  #submit-job-form > p:last-of-type input[type="submit"] {
    width: 100%;
    min-height: 46px;
  }

  /* ==================================================
     Preview + submitted page
  ================================================== */

  .ik-job-preview,
  .ik-job-preview__listing {
    width: calc(100% - 24px);
  }

  .ik-job-preview {
    margin: 20px auto;
  }

  .ik-job-preview__header {
    padding: 16px;
  }

  .ik-job-preview__actions {
    width: 100%;
    flex-direction: column;
  }

  .ik-job-preview__actions .button {
    width: 100%;
  }

  .ik-job-submitted {
    width: calc(100% - 24px);
    margin: 28px auto 56px;
    padding: 32px 18px;
    border-radius: 20px;
  }

  .ik-job-submitted__title {
    font-size: 30px;
  }

  .ik-job-submitted__message {
    font-size: 15px;
    line-height: 1.6;
  }

  .ik-job-submitted__job {
    margin-top: 22px;
    padding: 16px;
  }

  /* ==================================================
     Package prices
  ================================================== */

  .ik-package-prices {
    width: calc(100% - 24px);
    padding: 30px 0 48px;
  }

  .ik-package-prices__header {
    margin-bottom: 28px;
  }

  .ik-package-prices__title {
    font-size: 30px;
  }

  .ik-package-prices__description {
    font-size: 15px;
    line-height: 1.6;
  }

  .ik-public-package-card {
    padding: 22px 18px;
  }

  .ik-public-package-card h2 {
    font-size: 17px;
  }

  .ik-public-package-card strong,
  .ik-package-prices__featured strong {
    font-size: 23px;
  }

  .ik-package-prices__featured,
  .ik-package-prices__cta {
    padding: 20px 18px;
  }

  /* ==================================================
     Payment package selection
  ================================================== */

  .ik-payment-packages {
    width: calc(100% - 24px);
    margin-top: 28px;
    margin-bottom: 56px;
  }

  .ik-payment-packages__title {
    font-size: 30px;
  }

  .ik-payment-packages__description {
    font-size: 15px;
    line-height: 1.6;
  }

  .ik-payment-packages__job {
    margin: 24px auto 30px;
    padding: 16px 18px;
  }

  .ik-payment-packages__standard h2,
  .ik-payment-packages__featured h2 {
    font-size: 21px;
  }

  .ik-payment-packages__grid {
    gap: 12px;
  }

  .ik-package-card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .ik-package-card__duration {
    max-width: calc(100% - 30px);
    font-size: 15px;
    line-height: 1.2;
  }

  .ik-package-card__price {
    margin-top: 8px;
    font-size: 23px;
  }

  .ik-package-card__description {
    min-height: 0;
    margin: 8px 0 16px;
    font-size: 12px;
  }

  .ik-payment-packages__summary {
    gap: 8px;
    margin-top: 24px;
    padding: 16px 18px;
  }

  .ik-payment-packages__summary strong {
    font-size: 23px;
  }

  .ik-payment-packages__continue {
    width: 100%;
    margin-top: 16px;
  }

  .ik-payment-packages__note {
    margin-top: 18px;
    font-size: 12px;
  }

  /* ==================================================
     Payment / invoice
  ================================================== */

  .ik-payment-page {
    width: calc(100% - 24px);
    margin-top: 28px;
    margin-bottom: 56px;
  }

  .ik-payment-page__title {
    font-size: 30px;
  }

  .ik-payment-page__description {
    font-size: 14px;
    line-height: 1.6;
  }

  .ik-payment-page__card {
    padding: 18px;
    border-radius: 16px;
  }

  .ik-payment-page__job strong {
    font-size: 20px;
  }

  .ik-payment-page__details {
    gap: 12px;
    padding: 18px 0;
  }

  .ik-payment-page__details strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .ik-payment-page__total strong {
    font-size: 26px;
  }

  .ik-payment-page__qr-section,
  .ik-payment-page__confirm {
    margin-top: 20px;
    padding-top: 20px;
  }

  .ik-payment-page__qr-section h2,
  .ik-payment-page__confirm h2 {
    font-size: 19px;
  }

  .ik-payment-page__qr {
    width: min(100%, 320px);
    padding: 10px;
  }

  .ik-payment-page__invoice-share {
    margin-top: 20px;
    padding: 16px;
  }

  .ik-payment-page__invoice-whatsapp,
  .ik-payment-page__whatsapp {
    width: 100%;
    min-height: 48px;
  }

  .ik-payment-page__phone {
    padding: 14px;
  }

  .ik-payment-page__phone > div {
    gap: 8px;
  }

  .ik-payment-page__phone strong {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .ik-payment-page__copy {
    min-height: 40px;
    padding: 8px 14px;
  }

  .ik-payment-page__instruction {
    padding: 12px 14px;
  }
}

@media (max-width: 360px) {
  /* Extra-small screens: keep the same information, reduce density only. */
  .ik-container {
    padding-inline: 12px;
  }

  .ik-job-card {
    padding: 10px;
  }

  .ik-job-card__logo,
  .ik-job-card__logo--initial,
  .ik-job-card__logo--image {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }

  .ik-job-card__title,
  .ik-job-card h2.ik-job-card__title {
    font-size: 16px;
  }

  .ik-job-card__summary-item {
    padding-inline: 7px;
    font-size: 10px;
  }

  .ik-hero__content {
    padding-top: 26px;
  }

  .ik-hero__title {
    font-size: 30px;
  }

  .ik-featured-card {
    /* Keep the carousel peek used by v1.0.85 on extra-small screens. */
    flex-basis: 92%;
  }
}


/* ==================================================
   v1.0.72 — Mobile search/filter refinement
   Reference: Oppo A5 / ~360 CSS px
   ================================================== */

@media (max-width: 767px) {
  /* Homepage search: one compact stack in the natural user flow.
     Keyword first, filters next, search action last. */
  .ik-search-form--full {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .ik-search-form--full .ik-search-form__top,
  .ik-search-form--full .ik-search-form__bottom {
    display: contents;
  }

  .ik-search-form--full .ik-search-form__field--position { order: 1; }
  .ik-search-form--full .ik-search-form__field--location { order: 2; }
  .ik-search-form--full .ik-search-form__field--education { order: 3; }
  .ik-search-form--full .ik-search-form__field--experience { order: 4; }
  .ik-search-form--full .ik-button { order: 5; }

  .ik-search-form--full .ik-search-form__field {
    min-height: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    background: var(--ik-color-white);
    box-shadow: none;
  }

  .ik-search-form--full .ik-search-form__field input,
  .ik-search-form--full .ik-search-form__field select,
  .ik-search-form--full .select2-container--default .select2-selection--single {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .ik-search-form--full .ik-search-form__field input {
    min-height: 44px;
    padding: 0 14px 0 40px !important;
    font-size: 13px;
  }

  .ik-search-form--full .ik-search-form__field select {
    height: 44px;
    padding: 0 40px 0 40px;
    font-size: 13px;
  }

  .ik-search-form--full .select2-container--default .select2-selection--single {
    height: 44px;
  }

  .ik-search-form--full .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 40px 0 40px !important;
    font-size: 13px;
  }

  .ik-search-form--full .ik-search-form__field .ik-search-form__icon {
    left: 12px;
  }

  .ik-search-form--full .ik-search-form__field .ik-search-form__icon svg {
    width: 18px;
    height: 18px;
  }

  .ik-search-form--full .ik-search-form__field .ik-search-form__chevron {
    right: 12px;
  }

  .ik-search-form--full .ik-search-form__field .ik-search-form__chevron svg {
    width: 15px;
    height: 15px;
  }

  .ik-search-form--full > .ik-button {
    width: 100%;
    min-height: 44px;
    margin: 0;
    border-radius: 10px;
  }

  /* Archive search: keep it compact while preserving all four filters.
     Keyword spans the full row; the remaining filters share rows. */
  .ik-archive__sidebar {
    order: 1;
    width: 100%;
  }

  .ik-archive__jobs {
    order: 2;
  }

  .ik-archive {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ik-sidebar-card {
    padding: 14px;
    border-radius: 14px;
  }

  .ik-sidebar-card__header {
    margin-bottom: 8px;
  }

  .ik-sidebar-card__title {
    font-size: 18px;
  }

  .ik-sidebar-card__body {
    gap: 8px;
  }

  .ik-search-form--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .ik-search-form--compact .ik-search-form__field,
  .ik-search-form--compact .ik-search-form__actions {
    min-width: 0;
  }

  .ik-search-form--compact .ik-search-form__field:first-child,
  .ik-search-form--compact .ik-search-form__actions {
    grid-column: 1 / -1;
  }

  .ik-search-form--compact .ik-search-form__field {
    height: 44px;
    min-height: 44px;
    border-radius: 9px;
  }

  .ik-search-form--compact .ik-search-form__field input,
  .ik-search-form--compact .ik-search-form__field select,
  .ik-search-form--compact .select2-container--default .select2-selection--single {
    font-size: 12px;
  }

  .ik-search-form--compact .ik-search-form__actions {
    margin-top: 0;
  }

  .ik-search-form--compact .ik-search-form__actions .ik-button {
    min-height: 44px;
    border-radius: 9px;
  }
}

@media (max-width: 360px) {
  .ik-search-form--full,
  .ik-search-form--compact {
    gap: 7px;
  }

  .ik-search-form--full .ik-search-form__field,
  .ik-search-form--full .ik-search-form__field input,
  .ik-search-form--full .ik-search-form__field select,
  .ik-search-form--full .select2-container--default .select2-selection--single,
  .ik-search-form--compact .ik-search-form__field,
  .ik-search-form--compact .ik-search-form__actions .ik-button {
    min-height: 42px;
    height: 42px;
  }
}


/* ==================================================
   v1.0.73 — Search/filter consistency
   - Match archive search fields to homepage mobile fields.
   - Keep keyword placeholder typography consistent.
   - Remove archive search title (markup already removed).
   ================================================== */

@media (max-width: 767px) {
  /* Use the same single-column field rhythm as the homepage. */
  .ik-search-form--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }

  .ik-search-form--compact .ik-search-form__field,
  .ik-search-form--compact .ik-search-form__actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .ik-search-form--compact .ik-search-form__field {
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 10px;
    background: var(--ik-color-white);
    box-shadow: none;
  }

  /* Keep keyword placeholder and select text at the homepage size. */
  .ik-search-form--compact .ik-search-form__field input,
  .ik-search-form--compact .ik-search-form__field select,
  .ik-search-form--compact .select2-container--default .select2-selection--single,
  .ik-search-form--compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
  }

  .ik-search-form--compact .ik-search-form__field input {
    min-height: 44px;
    padding: 0 14px 0 40px !important;
  }

  .ik-search-form--compact .ik-search-form__field select {
    height: 44px;
    padding: 0 40px;
  }

  .ik-search-form--compact .select2-container--default .select2-selection--single {
    height: 44px;
  }

  .ik-search-form--compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding: 0 40px !important;
  }

  .ik-search-form--compact .ik-search-form__field .ik-search-form__icon {
    left: 12px;
  }

  .ik-search-form--compact .ik-search-form__field .ik-search-form__icon svg {
    width: 18px;
    height: 18px;
  }

  .ik-search-form--compact .ik-search-form__field .ik-search-form__chevron {
    right: 12px;
  }

  .ik-search-form--compact .ik-search-form__field .ik-search-form__chevron svg {
    width: 15px;
    height: 15px;
  }

  .ik-search-form--compact .ik-search-form__actions {
    margin-top: 0;
  }

  .ik-search-form--compact .ik-search-form__actions .ik-button {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border-radius: 10px;
  }

  /* Remove extra sidebar-card spacing now that its heading is gone. */
  .ik-archive__sidebar .ik-sidebar-card {
    padding: 14px;
  }

  .ik-archive__sidebar .ik-sidebar-card__body {
    gap: 0;
  }
}

@media (max-width: 360px) {
  .ik-search-form--compact {
    gap: 7px;
  }

  .ik-search-form--compact .ik-search-form__field,
  .ik-search-form--compact .ik-search-form__field input,
  .ik-search-form--compact .ik-search-form__field select,
  .ik-search-form--compact .select2-container--default .select2-selection--single,
  .ik-search-form--compact .ik-search-form__actions .ik-button {
    min-height: 42px;
    height: 42px;
  }

  .ik-search-form--compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
  }
}

/* ==================================================
 * TABLET — DESKTOP-LIKE SEARCH + SIDEBAR
 * Target: 768px–1199px
 * Keep the desktop information hierarchy, but adapt
 * widths/gaps so the layout remains comfortable on tablets.
 * ==================================================
 */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Shared page width */
  .ik-container {
    width: 100%;
    max-width: none;
    padding-inline: 24px;
    box-sizing: border-box;
  }

  /* Homepage search: use the desktop hierarchy.
     The search component sits inside a centered flex column, so
     explicitly give it the available width on tablet. */
  .ik-hero__search {
    width: 100%;
    max-width: 760px;
  }

  .ik-search-form--full {
    width: 100%;
    gap: 10px;
  }

  .ik-search-form--full .ik-search-form__top {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .ik-search-form--full .ik-search-form__top .ik-search-form__field--position {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .ik-search-form--full .ik-search-form__top > .ik-button {
    flex: 0 0 190px;
    width: auto;
    min-height: 54px;
  }

  .ik-search-form--full .ik-search-form__bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .ik-search-form--full .ik-search-form__field {
    min-height: 54px;
  }

  .ik-search-form--full .ik-search-form__field input,
  .ik-search-form--full .ik-search-form__field select,
  .ik-search-form--full .select2-container--default .select2-selection--single {
    font-size: 14px;
  }

  /* Archive: keep the desktop two-column layout on tablet.
     Jobs remain the main column; filters stay in a right sidebar. */
  .ik-job-archive {
    width: calc(100% - 40px);
    max-width: 1200px;
    padding-top: 20px;
  }

  .ik-archive {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
  }

  .ik-archive__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ik-archive__sidebar > .ik-sidebar-card:first-child {
    position: sticky;
    top: 24px;
    z-index: 5;
  }

  /* Compact sidebar filter, still visually consistent with desktop. */
  .ik-sidebar-card__body {
    gap: 12px;
  }

  .ik-search-form--compact {
    gap: 10px;
  }

  .ik-search-form--compact .ik-search-form__field {
    height: 48px;
    min-height: 48px;
  }

  .ik-search-form--compact .ik-search-form__field input,
  .ik-search-form--compact .ik-search-form__field select,
  .ik-search-form--compact .select2-container--default .select2-selection--single {
    font-size: 13px;
  }

  .ik-search-form--compact .ik-search-form__actions {
    margin-top: 2px;
  }

  .ik-search-form--compact .ik-search-form__actions .ik-button {
    min-height: 46px;
  }

  /* Featured carousel: 3 columns is too tight on tablet widths (a
     768px-wide card row leaves ~190px per card once margins/gaps are
     subtracted) and forced the title/logo sizing to blow past what the
     card could actually hold. Show 2 cards instead so each one has
     room to breathe, matching the proportions of the desktop card. */
  .ik-featured-card {
    flex: 0 0 calc((100% - var(--ik-carousel-gap)) / 2);
  }
}

/**
 * Some tablets (and browsers/devices reporting a narrower CSS viewport,
 * e.g. some Android tablets in portrait) fall just under the 768px
 * tablet breakpoint above and would otherwise drop into the stacked
 * mobile search layout. The homepage search should keep the desktop
 * two-row hierarchy (keyword + button on top, filters below in a row)
 * all the way down to 600px — only the homepage hero search is in
 * scope here; the archive sidebar keeps its 768px minimum since a
 * 280px sidebar doesn't have room to breathe below that.
 */
@media (min-width: 600px) and (max-width: 767px) {

  .ik-hero__search {
    width: 100%;
    max-width: 760px;
  }

  .ik-search-form--full {
    width: 100%;
    gap: 10px;
  }

  .ik-search-form--full .ik-search-form__top {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .ik-search-form--full .ik-search-form__top .ik-search-form__field--position {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .ik-search-form--full .ik-search-form__top > .ik-button {
    flex: 0 0 190px;
    width: auto;
    min-height: 54px;
  }

  .ik-search-form--full .ik-search-form__bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .ik-search-form--full .ik-search-form__field {
    min-height: 54px;
  }

  .ik-search-form--full .ik-search-form__field input,
  .ik-search-form--full .ik-search-form__field select,
  .ik-search-form--full .select2-container--default .select2-selection--single {
    font-size: 14px;
  }
}

/* ==================================================
   v1.0.87 — Mobile spacing polish
   - Homepage latest/recommendation cards use the same 12px side gutter
     as the mobile Jobs archive.
   - Single-job cards use compact internal spacing.
   - Summary rows stay in a compact icon/label/value layout on mobile.
   ================================================== */
@media (max-width: 767px) {
  .ik-job-hero {
    gap: 8px;
    margin-bottom: 12px;
  }

  .ik-job-hero__title {
    font-size: 26px;
  }

  .single_job_listing .ik-card {
    padding: 14px;
    border-radius: 14px;
  }

  .single_job_listing .ik-card .ik-card-header,
  .single_job_listing .ik-card:hover .ik-card-header {
    margin-bottom: 12px;
  }

  .single_job_listing .ik-card .ik-card-body {
    gap: 14px;
  }

  .ik-summary__item {
    grid-template-columns: 24px minmax(88px, 0.8fr) minmax(0, 1fr);
    gap: 7px;
    padding: 4px 0;
    min-width: 0;
  }

  .ik-summary__label,
  .ik-summary__value {
    grid-column: auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
  }

  .ik-summary__label {
    justify-content: flex-start;
  }

  .ik-summary__label::after {
    display: inline;
    margin-left: 2px;
  }

  .ik-summary__value {
    overflow-wrap: anywhere;
  }

  .ik-description-content,
  .ik-requirements-content {
    font-size: 14px;
    line-height: 1.55;
  }

  .ik-description-content h3,
  .ik-requirements-content h3 {
    margin-top: 18px;
    margin-bottom: 10px;
  }

  .ik-contact-item {
    padding: 10px 0;
  }

  .ik-contact-item__heading {
    margin-bottom: 6px;
  }

  .ik-contact-item__detail {
    gap: 8px;
    padding-left: 30px;
  }

  .ik-contact__button {
    min-width: 68px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .ik-single-latest {
    /* Astra's single-job article adds a wider mobile gutter. Break this
       section out of the theme container entirely and re-align it to
       the exact 12px viewport gutter used by the Homepage and Jobs
       archive cards, instead of guessing Astra's padding with a fixed
       negative margin. */
    box-sizing: border-box;
    width: calc(100vw - 24px);
    max-width: none;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: calc(50% - 50vw + 12px);
    margin-right: 0;
    padding-top: 16px;
  }

  /* Keep the single-job latest cards visually identical to the shared
     mobile job-card used by Homepage and the Jobs archive. */
  .ik-single-latest .ik-job-card__label {
    font-size: 11px;
    line-height: 1.2;
  }

  .ik-single-latest .ik-job-card__title,
  .ik-single-latest .ik-job-card h2.ik-job-card__title {
    font-size: 17px;
    line-height: 1.18;
  }

  .ik-single-latest .ik-job-card__company {
    font-size: 12px;
    line-height: 1.3;
  }

  .ik-single-latest .ik-job-card__location {
    font-size: 11px;
    line-height: 1.25;
  }

  .ik-single-latest .ik-job-card__summary-item {
    font-size: 11px;
    line-height: 1.25;
  }

  .ik-single-latest .ik-job-card__salary {
    font-size: 11px;
  }

  .ik-single-latest .ik-job-card__date {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  /* Match the shared job-card extra-small breakpoint exactly. */
  .ik-single-latest .ik-job-card__title,
  .ik-single-latest .ik-job-card h2.ik-job-card__title {
    font-size: 16px;
  }
}


/* ==================================================
   v1.0.88 — Single Job mobile hierarchy & alignment
   ================================================== */
@media (max-width: 767px) {
  /* Match the visual 12px mobile gutter used by Homepage/Archive cards.
     Break these sections out of Astra's article container completely
     (instead of guessing its padding with a fixed negative margin) so
     Company, Deskripsi, Kualifikasi and Cara Melamar always end up
     exactly as wide as the job cards on the Jobs archive, regardless
     of the theme's own content padding. */
  .single_job_listing > .ik-job-hero,
  .single_job_listing > .ik-single-job__layout {
    box-sizing: border-box;
    width: calc(100vw - 24px);
    max-width: none;
    margin-left: calc(50% - 50vw + 12px);
    margin-right: 0;
  }

  /* Company: logo first, then company/job information. */
  .ik-job-hero__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .ik-job-hero__top > .ik-job-hero__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .ik-job-hero__top > .ik-job-hero__content {
    grid-column: 1;
    grid-row: 2;
  }

  /* Published Single Job order:
     Company → Summary → Description → Requirements → Application. */
  .ik-single-job__layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "content"
      "contact";
    gap: 10px;
    padding-bottom: 8px;
  }

  .ik-single-job__summary {
    grid-area: summary;
  }

  .ik-single-job__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ik-single-job__contact {
    grid-area: contact;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Latest Jobs keeps the exact same outer alignment as the cards above. */
  .ik-single-latest {
    box-sizing: border-box;
    width: calc(100vw - 24px);
    max-width: none;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: calc(50% - 50vw + 12px);
    margin-right: 0;
    padding-top: 16px;
  }
}