/* Tracer Study alumni form. Mobile first: most graduates open the invitation link on a phone. */

:root {
    --tr-latar: #f3f4f6;
    --tr-kartu: #ffffff;
    --tr-teks: #111827;
    --tr-redup: #4b5563;
    --tr-garis: #d1d5db;
    /* Warna utama comes from the theme option (Tema Formulir), as --warna-utama and its text pairings */
    --tr-utama: var(--warna-utama-teks, #1d4ed8);
    --tr-utama-latar: var(--warna-utama, #1d4ed8);
    --tr-utama-di-atas: var(--warna-utama-di-atas, #ffffff);
    --tr-utama-gelap: color-mix(in srgb, var(--tr-utama) 82%, #000000);
    --tr-utama-muda: color-mix(in srgb, var(--tr-utama-latar) 8%, #ffffff);
    --tr-galat: #b91c1c;
    --tr-galat-muda: #fef2f2;
    --tr-sukses: #15803d;
    --tr-radius: 10px;
}

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

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

body.tr {
    margin: 0;
    min-height: 100vh;
    background: var(--tr-latar);
    color: var(--tr-teks);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.tr-wadah {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 12px;
}

[hidden] {
    display: none !important;
}

/* Header */
.tr-kepala {
    background: var(--tr-kartu);
    border-bottom: 1px solid var(--tr-garis);
    padding: 10px 0;
    padding-top: max(10px, env(safe-area-inset-top));
}

.tr-kepala-isi {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tr-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: none;
}

.tr-kampus {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.tr-subjudul {
    margin: 0;
    font-size: 13px;
    color: var(--tr-redup);
}

.tr-utama {
    padding-top: 12px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Progress */
.tr-progres {
    margin-bottom: 12px;
}

.tr-progres-teks {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--tr-redup);
}

.tr-progres-batang {
    height: 6px;
    background: var(--tr-garis);
    border-radius: 3px;
    overflow: hidden;
}

.tr-progres-batang span {
    display: block;
    height: 100%;
    background: var(--tr-utama);
}

/* Cards and text */
.tr-kartu {
    background: var(--tr-kartu);
    border: 1px solid var(--tr-garis);
    border-radius: var(--tr-radius);
    padding: 16px;
}

.tr-tengah {
    text-align: center;
}

.tr-judul {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

.tr-subjudul-bagian {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
}

.tr-redup {
    color: var(--tr-redup);
}

.tr-kecil {
    font-size: 14px;
}

.tr-centang-besar {
    width: 56px;
    height: 56px;
    margin: 8px auto 12px;
    border-radius: 50%;
    background: var(--tr-sukses);
    color: #fff;
    font-size: 30px;
    line-height: 56px;
}

.tr-persetujuan {
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px;
    margin: 12px 0;
    border: 1px solid var(--tr-garis);
    border-radius: 8px;
    background: #fafafa;
    font-size: 15px;
}

.tr-kotak {
    padding: 10px 12px;
    margin: 0 0 12px;
    border-radius: 8px;
    font-size: 15px;
}

.tr-kotak-info {
    background: var(--tr-utama-muda);
    border: 1px solid #bfdbfe;
    color: var(--tr-utama-gelap);
}

.tr-kotak-galat {
    background: var(--tr-galat-muda);
    border: 1px solid #fecaca;
    color: var(--tr-galat);
}

/* Identity details and summary */
.tr-data {
    margin: 12px 0;
}

.tr-data > div {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.tr-data > div:last-child {
    border-bottom: 0;
}

.tr-data dt {
    font-size: 14px;
    color: var(--tr-redup);
}

.tr-data dd {
    margin: 2px 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.tr-ringkas {
    border: 1px solid var(--tr-garis);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.tr-ringkas.tr-salah {
    border-color: var(--tr-galat);
}

.tr-ringkas-kepala {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tr-lencana {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tr-galat-muda);
    color: var(--tr-galat);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

/* Questions */
.tr-form {
    margin: 0;
}

.tr-soal {
    margin: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    min-width: 0;
}

.tr-soal:last-of-type {
    border-bottom: 0;
}

.tr-soal-teks {
    padding: 0;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.4;
}

.tr-wajib {
    color: var(--tr-galat);
    margin-left: 2px;
}

.tr-bantuan {
    margin: -4px 0 8px;
    font-size: 14px;
    color: var(--tr-redup);
}

.tr-galat {
    margin: 6px 0 0;
    color: var(--tr-galat);
    font-size: 14px;
}

.tr-medan {
    margin: 12px 0;
}

.tr-label {
    display: block;
    margin: 8px 0 4px;
    font-weight: 500;
}

/* 16px keeps iOS from zooming into the field */
.tr-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    color: var(--tr-teks);
    background: #fff;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
}

select.tr-input {
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, #4b5563 50%), linear-gradient(135deg, #4b5563 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.tr-input:focus {
    outline: 2px solid var(--tr-utama);
    outline-offset: 1px;
    border-color: var(--tr-utama);
}

.tr-salah .tr-input,
.tr-input[aria-invalid="true"] {
    border-color: var(--tr-galat);
}

.tr-input-pendek {
    max-width: 140px;
}

.tr-input-sedang {
    max-width: 220px;
}

.tr-uang {
    display: flex;
    align-items: stretch;
}

.tr-uang-rp {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #9ca3af;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #f9fafb;
    color: var(--tr-redup);
}

.tr-uang .tr-input {
    border-radius: 0 8px 8px 0;
}

/* Radio and checkbox rows: the whole row is the tap target */
.tr-daftar-pilih {
    display: grid;
    gap: 8px;
}

.tr-pilih {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--tr-garis);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.tr-pilih input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--tr-utama);
}

.tr-pilih:has(input:checked) {
    border-color: var(--tr-utama);
    background: var(--tr-utama-muda);
}

.tr-pilih:focus-within {
    outline: 2px solid var(--tr-utama);
    outline-offset: 1px;
}

.tr-salah .tr-pilih {
    border-color: #fca5a5;
}

/* Scale: one row of equal buttons, labels under the numbers */
.tr-skala {
    display: grid;
    grid-template-columns: repeat(var(--tr-kolom, 5), minmax(0, 1fr));
    gap: 6px;
}

.tr-skala-butir {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 2px;
    border: 1px solid var(--tr-garis);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    cursor: pointer;
}

.tr-skala-butir input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tr-skala-nilai {
    font-weight: 600;
}

.tr-skala-label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--tr-redup);
    overflow-wrap: anywhere;
}

.tr-skala-butir:has(input:checked) {
    border-color: var(--tr-utama-latar);
    background: var(--tr-utama-latar);
}

.tr-skala-butir:has(input:checked) span {
    color: var(--tr-utama-di-atas);
}

.tr-skala-butir:focus-within {
    outline: 2px solid var(--tr-utama);
    outline-offset: 1px;
}

/* Buttons */
.tr-aksi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.tr-form-sebaris {
    margin: 0;
}

.tr-form-sebaris .tr-tombol {
    width: 100%;
}

.tr-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--tr-teks);
    background: #fff;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.tr-tombol:focus-visible {
    outline: 2px solid var(--tr-utama);
    outline-offset: 2px;
}

.tr-tombol-utama {
    color: var(--tr-utama-di-atas);
    background: var(--tr-utama-latar);
    border-color: var(--tr-utama-latar);
}

.tr-tombol-utama:hover {
    background: color-mix(in srgb, var(--tr-utama-latar) 85%, #000000);
}

.tr-tombol-kecil {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 14px;
    flex: none;
}

/* Wider screens: buttons side by side, primary on the right (it comes first in the form for the Enter key) */
@media (min-width: 560px) {
    .tr-wadah {
        padding: 0 16px;
    }

    .tr-utama {
        padding-top: 20px;
    }

    .tr-kartu {
        padding: 24px;
    }

    .tr-judul {
        font-size: 22px;
    }

    .tr-aksi-dua {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .tr-aksi .tr-tombol,
    .tr-form-sebaris .tr-tombol {
        width: auto;
        min-width: 140px;
    }

    .tr-skala-label {
        font-size: 12px;
    }
}

/* Landing page /tracer (beranda.php): the same cards, a hero, figures and bars. */
.tr-br-hero {
    border-top: 4px solid var(--tr-utama-latar);
}

.tr-br-label {
    margin: 0 0 4px;
    color: var(--tr-utama);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tr-br-judul {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
}

.tr-br-teks {
    color: var(--tr-redup);
}

.tr-br-subjudul {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

.tr-br-kecil-judul {
    margin: 20px 0 8px;
    font-size: 15px;
}

.tr-br-periode {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.tr-br-periode li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tr-garis);
}

.tr-br-periode li:last-child {
    border-bottom: 0;
}

.tr-br-periode p {
    margin: 0;
}

.tr-br-periode-nama {
    font-weight: 600;
}

.tr-br-periode .tr-lencana {
    flex: none;
    white-space: nowrap;
}

.tr-br-langkah {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: langkah;
}

.tr-br-langkah li {
    position: relative;
    padding: 0 0 14px 44px;
    counter-increment: langkah;
}

.tr-br-langkah li::before {
    content: counter(langkah);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tr-utama-latar);
    color: var(--tr-utama-di-atas);
    font-weight: 700;
    font-size: 14px;
}

.tr-br-langkah strong,
.tr-br-langkah span {
    display: block;
}

.tr-br-langkah span {
    color: var(--tr-redup);
    font-size: 15px;
}

.tr-br-angka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

.tr-br-angka div {
    padding: 12px;
    border-radius: var(--tr-radius);
    background: var(--tr-utama-muda);
}

.tr-br-angka strong {
    display: block;
    color: var(--tr-utama);
    font-size: 24px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tr-br-angka span {
    display: block;
    margin-top: 2px;
    color: var(--tr-redup);
    font-size: 13px;
    line-height: 1.35;
}

.tr-br-batang {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-br-batang li {
    display: grid;
    grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3.6em;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.tr-br-batang-isi {
    height: 10px;
    border-radius: 99px;
    background: var(--tr-latar);
    overflow: hidden;
}

.tr-br-batang-isi span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tr-utama-latar);
}

.tr-br-batang-nilai {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tr-br-peta {
    margin: 4px -4px 8px;
    color: var(--tr-utama-latar);
}

.tr-br-peta .tr-peta {
    display: block;
    width: 100%;
    height: auto;
}

.tr-br-peta .tr-peta-darat {
    stroke: var(--tr-redup);
    stroke-opacity: .22;
}

.tr-br-peta .tr-peta-titik {
    fill: var(--tr-utama-latar);
    fill-opacity: .78;
    stroke: var(--tr-kartu);
    stroke-width: 2;
}

.tr-br-provinsi {
    columns: 2;
    column-gap: 20px;
    margin: 0 0 12px;
    padding-left: 1.4em;
    font-size: 14px;
}

.tr-br-provinsi li span + span {
    float: right;
    font-variant-numeric: tabular-nums;
    color: var(--tr-redup);
}

.tr-br-manfaat {
    margin: 0 0 12px;
    padding-left: 1.2em;
}

.tr-br-manfaat li {
    margin-bottom: 6px;
}

.tr-br-faq {
    border-bottom: 1px solid var(--tr-garis);
}

.tr-br-faq summary {
    padding: 12px 0;
    font-weight: 600;
    cursor: pointer;
}

.tr-br-faq p {
    margin: 0 0 12px;
    color: var(--tr-redup);
}

.tr-br-kaki {
    margin: 8px 0 24px;
    text-align: center;
}

.tr-br-kaki a {
    color: var(--tr-utama);
}

@media (min-width: 560px) {
    .tr-br-angka {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Bursa Kerja (lowongan.php and lowongan/*): the same cards and fields as the forms. The accent colour marks the
   current place in the board's menu and the company line above each title; everything else stays neutral. */
.tr-lw > * + * {
    margin-top: 12px;
}

.tr-lw-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0 0 12px;
    font-size: 15px;
}

.tr-lw-nav a,
.tr-lw-nav button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    color: var(--tr-redup);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.tr-lw-nav a:hover,
.tr-lw-nav button:hover {
    color: var(--tr-teks);
    text-decoration: underline;
}

.tr-lw-nav a[aria-current="page"] {
    color: var(--tr-utama);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--tr-utama-latar);
}

.tr-lw-nav a:focus-visible,
.tr-lw-nav button:focus-visible,
.tr-lw-judul-butir a:focus-visible {
    outline: 2px solid var(--tr-utama);
    outline-offset: 2px;
}

.tr-lw-nav-keluar {
    margin: 0;
}

.tr-lw-saring {
    display: grid;
    gap: 0 12px;
    margin-top: 8px;
}

.tr-lw-saring-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tr-lw-jumlah {
    margin-bottom: 0;
}

.tr-lw-daftar,
.tr-lw-pelamar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-lw-daftar > li + li {
    margin-top: 10px;
}

.tr-lw-perusahaan {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tr-utama);
    overflow-wrap: anywhere;
}

.tr-lw-judul-butir {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tr-lw-judul-butir a {
    color: var(--tr-teks);
    text-decoration: none;
}

.tr-lw-judul-butir a:hover {
    text-decoration: underline;
}

.tr-lw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--tr-redup);
}

.tr-lw-meta span + span::before {
    content: "\00B7";
    padding: 0 6px;
}

.tr-lw-gaji {
    margin: 0 0 4px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tr-lw-tutup {
    margin: 0;
}

.tr-lw-segera,
.tr-lw-disimpan {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.tr-lw-segera {
    background: var(--tr-galat-muda);
    color: var(--tr-galat);
}

.tr-lw-disimpan {
    background: var(--tr-utama-muda);
    color: var(--tr-utama-gelap);
}

.tr-lw-halaman {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tr-lw-lamar {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.tr-lw-lamar .tr-tombol-utama {
    width: 100%;
}

.tr-lw-lamar .tr-form-sebaris {
    margin-top: 8px;
}

.tr-lw-teks {
    margin: 8px 0 16px;
    overflow-wrap: anywhere;
}

.tr-lw-teks p {
    margin: 0 0 10px;
}

.tr-lw-teks ul {
    margin: 0 0 10px;
    padding-left: 1.3em;
}

.tr-lw-teks li + li {
    margin-top: 4px;
}

.tr-lw-asal {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.tr-lw-asal a,
.tr-lw-kontak a {
    color: var(--tr-utama);
}

.tr-lw-status {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #e5e7eb;
    color: var(--tr-teks);
}

.tr-lw-status-tayang {
    background: #dcfce7;
    color: #14532d;
}

.tr-lw-status-ditolak {
    background: var(--tr-galat-muda);
    color: var(--tr-galat);
}

.tr-lw-pelamar > li {
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
}

.tr-lw-kontak {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.tr-lw-kontak a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.tr-lw-pesan {
    margin: 4px 0 8px;
    padding: 8px 10px;
    background: var(--tr-latar);
    border-radius: 8px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.tr-lw-status-form {
    margin-top: 4px;
}

/* Employer actions side by side, each as wide as its label, wrapping on a narrow phone */
.tr-lw-baris {
    flex-direction: row;
    flex-wrap: wrap;
}

.tr-lw-baris .tr-form-sebaris .tr-tombol {
    width: auto;
}

.tr-lw-hapus {
    margin-top: 8px;
}

.tr-lw-prodi {
    max-height: 280px;
    overflow-y: auto;
}

/* Honeypot of the employer form: off screen, never display:none, which some bots skip */
.tr-lw-jebakan {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

input[type="file"].tr-input {
    padding: 9px 12px;
}

@media (min-width: 560px) {
    .tr-lw-saring {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tr-lw-saring-cari,
    .tr-lw-saring-aksi {
        grid-column: 1 / -1;
    }

    .tr-lw-dua {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
    }

    .tr-lw-lamar .tr-tombol-utama {
        width: auto;
    }
}