/*
 * Selaras: Tracer Study pages dressed in the website theme (Tema Website). head() prints the website's colours,
 * paper, ink, fonts and corner radius as --web-* variables; everything here is derived from them, so no rule names a
 * website theme. A dark website theme (Neuron) adds .sl-gelap to <body>. The motif is a dotted path: the hero's road
 * from graduation to work, the steps, the form's progress and the review all sit on one.
 * Mobile first: most graduates open their invitation on a phone.
 */

/* ------------------------------------------------------------------ tokens */

.sl {
    /* the website theme, with the values of a plain theme where a variable is missing */
    --sl-utama: var(--web-utama, #1d4ed8);
    --sl-utama-teks: var(--web-utama-teks, #1d4ed8);
    --sl-utama-di-atas: var(--web-utama-di-atas, #ffffff);
    --sl-aksen: var(--web-aksen, #f59e0b);
    --sl-aksen-teks: var(--web-aksen-teks, #92400e);
    --sl-aksen-di-atas: var(--web-aksen-di-atas, #16191d);
    --sl-kertas: var(--web-kertas, #f5f7fa);
    --sl-tinta: var(--web-tinta, #16191d);
    --sl-huruf-judul: var(--web-huruf-judul, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --sl-huruf-teks: var(--web-huruf-teks, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --sl-huruf-label: var(--sl-huruf-teks);
    /* small titles; header.php points it past a display cut, which is drawn for large sizes only */
    --sl-huruf-judul-kecil: var(--sl-huruf-judul);
    --sl-sudut: var(--web-sudut, 10px);

    /* corners follow the website: 0 stays square everywhere, larger radii round the nodes into circles */
    --sl-sudut-kecil: calc(var(--sl-sudut) * .75);
    --sl-sudut-lencana: calc(var(--sl-sudut) * 2);
    --sl-sudut-simpul: min(50%, calc(var(--sl-sudut) * 4));

    /* surfaces for browsers without color-mix(); the @supports block below derives them from the website */
    --sl-kartu: #ffffff;
    --sl-kartu-2: #f6f7f9;
    --sl-isian: #ffffff;
    --sl-garis: #dde1e6;
    --sl-garis-kuat: #a3a9b1;
    --sl-garis-isian: #80868f;
    --sl-redup: #4b5260;
    --sl-utama-muda: #f0f3f8;
    --sl-utama-sedang: #c7d1df;
    --sl-fokus: var(--sl-utama-teks);
    --sl-bayang: 0 1px 2px rgba(16, 24, 40, .05);
    --sl-bayang-besar: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px -18px rgba(16, 24, 40, .22);

    --sl-hero: var(--sl-utama);
    --sl-hero-teks: var(--sl-utama-di-atas);
    --sl-hero-tombol: var(--sl-utama-di-atas);
    --sl-hero-tombol-teks: var(--sl-utama);

    --sl-galat: #b42318;
    --sl-galat-muda: #fef3f2;
    --sl-galat-garis: #f3b7b0;
    --sl-sukses: #067647;
    --sl-sukses-muda: #ecfdf3;
    --sl-sukses-garis: #a6e3c3;
}

/* Maket, Neuron and Sirkuit bring their own face for labels and figures (header.php) */
.sl.sl-label-mono {
    --sl-huruf-label: var(--web-huruf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.sl.sl-gelap {
    --sl-kartu: rgba(255, 255, 255, .05);
    --sl-kartu-2: rgba(255, 255, 255, .08);
    --sl-isian: rgba(255, 255, 255, .06);
    --sl-garis: rgba(255, 255, 255, .14);
    --sl-garis-kuat: rgba(255, 255, 255, .38);
    --sl-garis-isian: rgba(255, 255, 255, .5);
    --sl-redup: rgba(238, 240, 248, .76);
    --sl-utama-muda: rgba(255, 255, 255, .07);
    --sl-utama-sedang: rgba(255, 255, 255, .22);
    --sl-bayang: none;
    --sl-bayang-besar: 0 18px 44px -20px rgba(0, 0, 0, .7);

    --sl-hero: rgba(255, 255, 255, .06);
    --sl-hero-teks: var(--sl-tinta);
    --sl-hero-tombol: var(--sl-utama);
    --sl-hero-tombol-teks: var(--sl-utama-di-atas);

    --sl-galat: #ff9e93;
    --sl-galat-muda: rgba(255, 110, 90, .12);
    --sl-galat-garis: rgba(255, 140, 120, .45);
    --sl-sukses: #74e0b0;
    --sl-sukses-muda: rgba(60, 210, 150, .12);
    --sl-sukses-garis: rgba(90, 220, 160, .4);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .sl {
        --sl-kartu: color-mix(in srgb, var(--sl-kertas) 20%, #ffffff);
        --sl-kartu-2: color-mix(in srgb, var(--sl-tinta) 3%, var(--sl-kertas));
        --sl-isian: var(--sl-kartu);
        --sl-garis: color-mix(in srgb, var(--sl-tinta) 12%, var(--sl-kertas));
        --sl-garis-kuat: color-mix(in srgb, var(--sl-tinta) 34%, var(--sl-kertas));
        /* input borders reach 3:1 against the card */
        --sl-garis-isian: color-mix(in srgb, var(--sl-tinta) 52%, var(--sl-kertas));
        --sl-redup: color-mix(in srgb, var(--sl-tinta) 74%, var(--sl-kertas));
        --sl-utama-muda: color-mix(in srgb, var(--sl-utama) 7%, var(--sl-kartu));
        --sl-utama-sedang: color-mix(in srgb, var(--sl-utama) 24%, var(--sl-kartu));
        --sl-hero-redup: color-mix(in srgb, var(--sl-hero-teks) 86%, var(--sl-hero));
    }

    .sl.sl-gelap {
        --sl-kartu: color-mix(in srgb, var(--sl-tinta) 6%, var(--sl-kertas));
        --sl-kartu-2: color-mix(in srgb, var(--sl-tinta) 9%, var(--sl-kertas));
        --sl-isian: color-mix(in srgb, var(--sl-tinta) 4%, var(--sl-kertas));
        --sl-garis: color-mix(in srgb, var(--sl-tinta) 15%, var(--sl-kertas));
        --sl-garis-kuat: color-mix(in srgb, var(--sl-tinta) 38%, var(--sl-kertas));
        --sl-garis-isian: color-mix(in srgb, var(--sl-tinta) 48%, var(--sl-kertas));
        --sl-redup: color-mix(in srgb, var(--sl-tinta) 76%, var(--sl-kertas));
        --sl-utama-muda: color-mix(in srgb, var(--sl-utama) 13%, var(--sl-kartu));
        --sl-utama-sedang: color-mix(in srgb, var(--sl-utama) 36%, var(--sl-kartu));
        /* on dark paper the hero is a deep shade of the campus colour, not a bright block */
        --sl-hero: color-mix(in srgb, var(--sl-utama) 24%, var(--sl-kertas));
    }
}

/* ------------------------------------------------------------------ base */

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

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

body.sl {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--sl-kertas);
    color: var(--sl-tinta);
    font-family: var(--sl-huruf-teks);
    font-size: 16px;
    line-height: 1.6;
    /* a display face with one weight (Libre Caslon Display) stays as drawn instead of a smeared fake bold */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

[hidden] {
    display: none !important;
}

.sl a {
    color: var(--sl-utama-teks);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.sl a:hover {
    text-decoration-thickness: 2px;
}

.sl :focus-visible {
    outline: 2px solid var(--sl-fokus);
    outline-offset: 2px;
}

.sl-utama:focus {
    outline: none;
}

.sl h1,
.sl h2,
.sl h3 {
    text-wrap: balance;
}

.sl-judul-sempit .sl-hero-judul,
.sl-judul-sempit .sl-bagian-judul,
.sl-judul-sempit .sl-judul,
.sl-judul-sempit .sl-kartu-judul,
.sl-judul-sempit .sl-periode-nama {
    font-stretch: 85%;
}

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

.sl-lompat {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 20;
    padding: 10px 16px;
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas) !important;
    font-weight: 600;
    text-decoration: none;
}

.sl-lompat:focus {
    top: 12px;
}

.sl-ikon {
    flex: none;
    width: 20px;
    height: 20px;
}

.sl-wadah {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 16px;
}

.sl-wadah-sempit {
    max-width: 800px;
}

.sl-utama {
    flex: 1 0 auto;
}

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

.sl-kecil {
    font-size: .875rem;
}

/* A small uppercase line above a title */
.sl-label {
    margin: 0;
    color: var(--sl-utama-teks);
    font-family: var(--sl-huruf-label);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sl-label-mono .sl-label {
    letter-spacing: .03em;
}

/* An icon on a soft tile of the campus colour */
.sl-ikon-bulat {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sl-sudut-simpul);
    background: var(--sl-utama-muda);
    color: var(--sl-utama-teks);
}

.sl-ikon-bulat .sl-ikon {
    width: 22px;
    height: 22px;
}

.sl-ikon-bulat-besar {
    width: 64px;
    height: 64px;
}

.sl-ikon-bulat-besar .sl-ikon {
    width: 30px;
    height: 30px;
}

.sl-kartu {
    background: var(--sl-kartu);
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut);
    box-shadow: var(--sl-bayang);
}

/* ------------------------------------------------------------------ buttons */

.sl-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 11px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--sl-sudut-kecil);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, filter .15s;
}

.sl .sl-tombol {
    text-decoration: none;
}

.sl-tombol .sl-ikon {
    width: 18px;
    height: 18px;
}

.sl-tombol-utama {
    background: var(--sl-utama);
    border-color: var(--sl-utama);
    color: var(--sl-utama-di-atas) !important;
}

.sl-tombol-utama:hover {
    filter: brightness(.92);
}

.sl-gelap .sl-tombol-utama:hover {
    filter: brightness(1.12);
}

.sl-tombol-garis {
    background: transparent;
    border-color: var(--sl-garis-isian);
    color: var(--sl-utama-teks) !important;
}

.sl-tombol-garis:hover {
    background: var(--sl-utama-muda);
    border-color: var(--sl-utama-teks);
}

.sl-tombol-kecil {
    min-height: 44px;
    padding: 8px 14px;
    font-size: .9375rem;
}

.sl-tautan-panah {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.sl-tautan-panah .sl-ikon {
    width: 18px;
    height: 18px;
    transition: transform .15s;
}

.sl-tautan-panah:hover .sl-ikon {
    transform: translateX(3px);
}

/* ------------------------------------------------------------------ header */

.sl-kepala {
    background: var(--sl-kartu);
    border-bottom: 1px solid var(--sl-garis);
}

.sl-kepala-isi {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    min-height: 64px;
    padding-block: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
}

.sl-merek {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-right: auto;
}

.sl-lambang {
    display: flex;
    flex: none;
}

.sl-logo {
    display: block;
    width: auto;
    max-width: 150px;
    height: 40px;
    object-fit: contain;
}

.sl-monogram {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.sl-merek-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sl-kampus {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.sl-merek-sub {
    overflow: hidden;
    color: var(--sl-redup);
    font-size: .8125rem;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sl-nav {
    display: none;
}

.sl .sl-nav a {
    padding: 8px 2px;
    color: var(--sl-redup);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.sl .sl-nav a:hover {
    color: var(--sl-utama-teks);
}

.sl .sl-ke-situs {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut-lencana);
    color: var(--sl-tinta);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.sl .sl-ke-situs:hover {
    border-color: var(--sl-utama-teks);
    color: var(--sl-utama-teks);
}

.sl-ke-situs .sl-ikon {
    width: 18px;
    height: 18px;
}

/* on a narrow phone the campus name keeps the room; the house alone leads back to the website */
@media (max-width: 479px) {
    .sl .sl-ke-situs {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .sl-ke-situs span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Notice under the header (the sample page says its figures are made up) */
.sl-kilat {
    border-bottom: 1px solid var(--sl-utama-sedang);
    background: var(--sl-utama-muda);
    font-size: .875rem;
}

.sl-kilat .sl-wadah {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
}

.sl-kilat .sl-ikon {
    width: 18px;
    height: 18px;
    color: var(--sl-utama-teks);
}

/* ------------------------------------------------------------------ boxes */

.sl-kotak {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--sl-utama-sedang);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama-muda);
    font-size: .9375rem;
    line-height: 1.55;
}

.sl-kotak > .sl-ikon {
    margin-top: 1px;
    color: var(--sl-utama-teks);
}

.sl-kotak p {
    margin: 4px 0 0;
}

.sl-kotak-galat {
    border-color: var(--sl-galat-garis);
    background: var(--sl-galat-muda);
}

.sl-kotak-galat > .sl-ikon,
.sl-kotak-galat strong {
    color: var(--sl-galat);
}

.sl-kotak-sukses {
    border-color: var(--sl-sukses-garis);
    background: var(--sl-sukses-muda);
}

.sl-kotak-sukses > .sl-ikon {
    color: var(--sl-sukses);
}

.sl-galat-judul {
    font-weight: 500;
}

.sl-galat-daftar {
    margin: 4px 0 0;
    padding-left: 1.2em;
}

.sl-galat-daftar li {
    margin-top: 2px;
}

.sl-catatan {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--sl-redup);
    font-size: .875rem;
    line-height: 1.5;
}

.sl-catatan .sl-ikon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.sl-lencana {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: var(--sl-sudut-lencana);
    background: var(--sl-utama-muda);
    color: var(--sl-utama-teks);
    font-family: var(--sl-huruf-teks);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    vertical-align: middle;
}

.sl-lencana-galat {
    background: var(--sl-galat-muda);
    color: var(--sl-galat);
}

/* ------------------------------------------------------------------ landing page: hero */

.sl-hero {
    position: relative;
    overflow: hidden;
    padding-block: 44px 96px;
    background: var(--sl-hero);
    color: var(--sl-hero-teks);
}

/* a soft light in one corner, the same over every campus colour */
.sl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 90% at 88% 0%, rgba(255, 255, 255, .14), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, rgba(0, 0, 0, .12), transparent 70%);
    pointer-events: none;
}

.sl-gelap .sl-hero::before {
    background: radial-gradient(55% 80% at 85% 0%, rgba(255, 255, 255, .08), transparent 70%);
}

.sl-hero-isi {
    position: relative;
    display: grid;
    gap: 32px;
    align-items: center;
}

.sl-hero .sl-label {
    color: inherit;
    opacity: .86;
}

.sl-hero-judul {
    margin: 10px 0 16px;
    font-family: var(--sl-huruf-judul);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
}

.sl-hero-pengantar {
    max-width: 62ch;
    margin: 0;
    color: var(--sl-hero-redup, var(--sl-hero-teks));
    font-size: 1.0625rem;
    line-height: 1.7;
}

.sl-hero-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.sl-hero :focus-visible {
    outline-color: var(--sl-hero-teks);
}

.sl-tombol-terang {
    background: var(--sl-hero-tombol);
    border-color: var(--sl-hero-tombol);
    color: var(--sl-hero-tombol-teks) !important;
}

.sl-tombol-terang:hover {
    filter: brightness(.95);
}

.sl-tombol-hantu {
    background: transparent;
    border-color: currentColor;
    color: var(--sl-hero-teks) !important;
}

.sl-tombol-hantu:hover {
    background: rgba(255, 255, 255, .1);
}

/* The road from graduation to the three outcomes (bagian/karier.php) */
.sl-karier {
    display: none;
}

.sl-garis-titik {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 0 9;
}

/* ------------------------------------------------------------------ landing page: open periods */

.sl-periode-wadah {
    position: relative;
    z-index: 1;
    margin-top: -56px;
}

.sl-periode {
    padding: 22px 18px;
    box-shadow: var(--sl-bayang-besar);
}

.sl-periode-daftar {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.sl-periode-butir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: start;
    padding-block: 14px 18px;
    border-bottom: 1px solid var(--sl-garis);
}

.sl-periode-info {
    min-width: 0;
}

/* under the name on phones; beside the days left from 640px */
.sl-periode-waktu {
    grid-row: 2;
    grid-column: 1 / -1;
    min-width: 0;
}

.sl-periode-nama {
    margin: 0;
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.sl-periode-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--sl-redup);
    font-size: .9375rem;
}

.sl-periode-meta .sl-ikon {
    width: 18px;
    height: 18px;
}

/* The period as a path: solid up to today, dotted to the closing day */
.sl-periode-jalur {
    position: relative;
    height: 14px;
    margin-inline: 6px;
    background: radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 0 50% / 8px 4px repeat-x;
}

.sl-periode-garis {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--sl-berjalan, 0%);
    height: 3px;
    border-radius: 2px;
    background: var(--sl-utama-teks);
    transform: translateY(-50%);
}

.sl-periode-jalur::before,
.sl-periode-jalur::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: var(--sl-sudut-simpul);
    transform: translate(-50%, -50%);
}

.sl-periode-jalur::before {
    left: 0;
    background: var(--sl-utama-teks);
}

.sl-periode-jalur::after {
    left: var(--sl-berjalan, 0%);
    width: 16px;
    height: 16px;
    border: 3px solid var(--sl-utama-teks);
    background: var(--sl-kartu);
}

.sl-periode-tanggal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 8px 0 0;
    color: var(--sl-redup);
    font-size: .8125rem;
}

.sl-periode-sisa {
    grid-row: 1;
    grid-column: 2;
    min-width: 92px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama-muda);
    text-align: center;
}

.sl-periode-sisa strong {
    display: block;
    color: var(--sl-utama-teks);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.sl-periode-sisa span {
    display: block;
    margin-top: 6px;
    color: var(--sl-redup);
    font-size: .8125rem;
    line-height: 1.3;
}

/* the last day reads in the accent colour, the one urgent note on the page */
.sl-periode-sisa .sl-hari-terakhir {
    color: var(--sl-aksen-teks);
    font-size: 1.125rem;
    line-height: 1.25;
}

.sl-periode-cta,
.sl-periode-kosong {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
}

.sl-periode-cta p,
.sl-periode-kosong p {
    margin: 0;
    color: var(--sl-redup);
}

.sl-periode-kosong p {
    padding-top: 10px;
}

.sl .sl-periode-cta-judul {
    margin-bottom: 2px;
    color: var(--sl-tinta);
    font-weight: 700;
}

/* ------------------------------------------------------------------ landing page: sections */

.sl-bagian {
    padding-block: 56px 8px;
}

.sl-bagian-rapat {
    padding-top: 40px;
}

/* the section mark: a node and the start of a dotted path */
.sl-bagian-kepala {
    max-width: 720px;
}

.sl-bagian-kepala::before {
    content: "";
    display: block;
    width: 52px;
    height: 10px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at 5px 50%, var(--sl-utama-teks) 4px, transparent 4.6px) no-repeat,
        radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 2px 50% / 8px 4px repeat-x;
}

.sl-bagian-judul {
    margin: 0;
    font-family: var(--sl-huruf-judul);
    font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.005em;
}

.sl-bagian-kepala p {
    margin: 10px 0 0;
}

.sl-kartu-judul {
    margin: 16px 0 8px;
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

/* How to fill it in: four nodes on one dotted path (down on phones, across from 900px) */
.sl-langkah {
    display: grid;
    gap: 28px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.sl-langkah-butir {
    position: relative;
    padding-left: 64px;
}

.sl-langkah-simpul {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--sl-sudut-simpul);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
    font-family: var(--sl-huruf-label);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 0 0 6px var(--sl-kertas);
}

.sl-langkah-butir:last-child .sl-langkah-simpul {
    background: var(--sl-aksen);
    color: var(--sl-aksen-di-atas);
}

.sl-langkah-butir:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 56px;
    bottom: -22px;
    left: 21px;
    width: 4px;
    background: radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 50% 0 / 4px 8px repeat-y;
}

.sl-langkah-judul {
    margin: 10px 0 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.sl-langkah-butir p {
    margin: 0;
    color: var(--sl-redup);
}

/* No link yet */
.sl-tautan {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
    margin-top: 40px;
    padding: 20px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut);
    background: var(--sl-kartu);
}

.sl-tautan-judul {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.sl-tautan-teks p {
    margin: 0;
    color: var(--sl-redup);
}

.sl-tautan .sl-tombol {
    grid-column: 1 / -1;
    justify-self: start;
}

/* ------------------------------------------------------------------ landing page: results */

.sl-angka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 16px;
    padding: 0;
    list-style: none;
}

.sl-angka-butir {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    border: 1px solid var(--sl-garis);
    border-top: 3px solid var(--sl-utama);
    border-radius: var(--sl-sudut);
    background: var(--sl-kartu);
}

.sl-angka-nilai {
    font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.sl-angka-label {
    color: var(--sl-redup);
    font-size: .875rem;
    line-height: 1.4;
}

.sl-angka-ket {
    color: var(--sl-redup);
    font-size: .75rem;
    line-height: 1.4;
}

.sl-grafik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 16px;
}

.sl-grafik {
    padding: 20px;
}

.sl-grafik-judul {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Bars: square at the baseline, a rounded data end, the value in text beside each */
.sl-batang {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-batang li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    font-size: .9375rem;
    line-height: 1.35;
}

.sl-batang-label,
.sl-legenda-label,
.sl-karier-label {
    display: block;
}

.sl-batang-label::first-letter,
.sl-legenda-label::first-letter,
.sl-karier-label::first-letter {
    text-transform: uppercase;
}

.sl-batang-nilai,
.sl-legenda-nilai,
.sl-provinsi-jumlah {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sl-batang-jalur {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 0 4px 4px 0;
    background: var(--sl-utama-muda);
}

.sl-batang-jalur span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--sl-utama-teks);
}

/* One whole in three ordered parts: a thin segmented bar and its legend with the figures. Data marks use the
   text-safe campus colour, so even a pale campus colour stays visible; the three steps (100, 74 and 52%) passed
   the ordinal ramp checks against the card of every website theme. */
.sl-ruas {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 999px;
}

.sl-ruas span {
    min-width: 3px;
}

.sl-ruas-1,
.sl-ruas-2,
.sl-ruas-3 {
    background: var(--sl-utama-teks);
}

.sl-ruas-2 {
    opacity: .74;
}

.sl-ruas-3 {
    opacity: .52;
}

.sl-legenda {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-legenda li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    font-size: .9375rem;
}

.sl-legenda-warna {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* The map of where graduates work (Tema_tracer::peta) and its list */
.sl-peta-kartu {
    margin-top: 16px;
    padding: 20px;
}

.sl-peta-kepala .sl-grafik-judul {
    margin-bottom: 2px;
}

.sl-peta-kepala p {
    margin: 0;
    font-size: .875rem;
}

.sl-peta-kepala + .sl-provinsi {
    margin-top: 12px;
}

.sl-peta {
    margin: 12px -4px 16px;
    color: var(--sl-utama-teks);
}

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

.sl-peta .tr-peta-darat {
    stroke: var(--sl-garis-kuat);
    stroke-opacity: .6;
}

.sl-peta .tr-peta-titik {
    fill: var(--sl-utama-teks);
    fill-opacity: .85;
    stroke: var(--sl-kartu);
    stroke-width: 2;
}

.sl-provinsi {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 4 210px;
    column-gap: 28px;
}

.sl-provinsi li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sl-garis);
    break-inside: avoid;
    font-size: .875rem;
    line-height: 1.35;
}

.sl-provinsi-batang {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 0 2px 2px 0;
    background: var(--sl-utama-muda);
}

.sl-provinsi-batang span {
    display: block;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: var(--sl-utama-teks);
}

.sl-provinsi-lain .sl-provinsi-nama {
    color: var(--sl-redup);
}

/* ------------------------------------------------------------------ landing page: why, employers, privacy */

.sl-manfaat-daftar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.sl-manfaat-butir {
    padding: 24px 22px;
}

.sl-manfaat-judul {
    margin: 16px 0 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.sl-manfaat-butir p {
    margin: 0;
    color: var(--sl-redup);
}

.sl-dua-kartu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.sl-pengguna,
.sl-privasi {
    padding: 24px 22px;
}

.sl-pengguna p,
.sl-privasi p {
    margin: 0;
}

.sl-pengguna > p + p {
    margin-top: 12px;
}

.sl-privasi {
    border-color: var(--sl-utama-sedang);
    background: var(--sl-utama-muda);
}

.sl-privasi .sl-ikon-bulat {
    background: var(--sl-kartu);
}

.sl-pengguna-periode {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--sl-garis);
    list-style: none;
    font-weight: 600;
}

.sl-pengguna-periode li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sl-pengguna-periode .sl-ikon {
    margin-top: 2px;
    color: var(--sl-utama-teks);
}

/* ------------------------------------------------------------------ landing page: questions and contact */

.sl-tanya-kontak {
    display: grid;
    gap: 36px;
    align-items: start;
}

.sl-faq-daftar {
    margin-top: 24px;
    border-top: 1px solid var(--sl-garis);
}

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

.sl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

.sl-faq summary::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--sl-garis-isian);
    border-radius: var(--sl-sudut-simpul);
    background:
        linear-gradient(var(--sl-utama-teks), var(--sl-utama-teks)) 50% 50% / 10px 2px no-repeat,
        linear-gradient(var(--sl-utama-teks), var(--sl-utama-teks)) 50% 50% / 2px 10px no-repeat;
}

.sl-faq[open] summary::after {
    border-color: var(--sl-utama-teks);
    background: linear-gradient(var(--sl-utama-teks), var(--sl-utama-teks)) 50% 50% / 10px 2px no-repeat;
}

.sl-faq summary:hover {
    color: var(--sl-utama-teks);
}

.sl-faq p {
    max-width: 66ch;
    margin: -2px 44px 18px 0;
    color: var(--sl-redup);
}

.sl-kontak {
    padding: 24px 22px;
}

.sl-kontak .sl-kartu-judul {
    margin-top: 0;
}

.sl-kontak > p {
    margin: 0;
}

.sl-kontak-daftar {
    display: grid;
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.sl-kontak-daftar li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sl-kontak-isi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sl-kontak-label {
    color: var(--sl-redup);
    font-size: .8125rem;
    line-height: 1.4;
}

.sl-kontak-isi a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sl-kontak-kosong {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 8px;
}

.sl-kontak-kosong p {
    margin: 0;
    padding-top: 10px;
    color: var(--sl-redup);
}

/* ------------------------------------------------------------------ footer */

.sl-kaki {
    margin-top: 48px;
    padding-block: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sl-garis);
    color: var(--sl-redup);
    font-size: .875rem;
}

.sl-kaki p {
    margin: 0;
}

.sl-kaki-isi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 32px;
}

.sl-kaki-aman {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-kaki-aman .sl-ikon {
    width: 16px;
    height: 16px;
    color: var(--sl-utama-teks);
}

.sl-kaki-beranda {
    margin-top: 64px;
    padding-block: 32px;
    background: var(--sl-kartu);
}

.sl-kaki-kampus {
    color: var(--sl-tinta);
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.sl .sl-kaki-slogan {
    margin-top: 2px;
}

.sl-kaki-kanan {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ------------------------------------------------------------------ form pages */

.sl-utama.sl-wadah {
    padding-top: 24px;
}

.sl-kemajuan {
    margin: 0 0 24px;
}

.sl-kemajuan-teks {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

.sl-kemajuan-persen {
    color: var(--sl-redup);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* The form's steps on one path */
.sl-jalur {
    display: flex;
    align-items: center;
    min-height: 24px;
}

.sl-jalur-titik {
    display: grid;
    flex: none;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 2px solid var(--sl-garis-kuat);
    border-radius: var(--sl-sudut-simpul);
    background: var(--sl-kertas);
}

.sl-jalur-titik.sl-lalu {
    width: 18px;
    height: 18px;
    border-color: var(--sl-utama);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
}

.sl-jalur-titik.sl-lalu .sl-ikon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.sl-jalur-titik.sl-kini {
    width: 24px;
    height: 24px;
    border: 2px solid var(--sl-utama-teks);
    background: var(--sl-utama-teks);
    box-shadow: inset 0 0 0 4px var(--sl-kertas);
}

.sl-jalur-garis {
    flex: 1 1 0;
    min-width: 4px;
    height: 4px;
    margin-inline: 3px;
    background: radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 0 50% / 7px 4px repeat-x;
}

.sl-jalur-garis.sl-lalu {
    height: 2px;
    border-radius: 1px;
    background: var(--sl-utama-teks);
}

.sl-kepala-halaman {
    margin: 0 0 20px;
}

.sl-kepala-halaman .sl-label {
    margin-bottom: 8px;
}

.sl-kepala-halaman > p:last-child {
    margin: 8px 0 0;
}

.sl-judul {
    margin: 0;
    font-family: var(--sl-huruf-judul);
    font-size: clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.sl-subjudul {
    margin: 0;
}

.sl-lembar {
    padding: 22px 18px;
}

.sl-lembar-sempit {
    max-width: 580px;
    margin-inline: auto;
}

.sl-lembar-ringkas {
    margin-bottom: 20px;
    padding-block: 4px;
}

/* the icon sits above the title on phones and beside it from 560px */
.sl-lembar-kepala {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.sl-lembar > p {
    margin: 0 0 12px;
}

.sl-sambutan {
    font-size: 1.0625rem;
}

.sl-persetujuan {
    max-height: 46vh;
    margin: 16px 0 20px;
    padding: 16px 18px;
    overflow-y: auto;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-kartu-2);
    font-size: .9375rem;
    line-height: 1.7;
}

.sl-form {
    margin: 0;
}

.sl-medan {
    margin: 14px 0 0;
}

.sl-label-medan {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
}

.sl-label-kecil {
    display: block;
    margin: 0 0 4px;
    color: var(--sl-redup);
    font-size: .875rem;
    font-weight: 500;
}

.sl-medan-dua {
    display: grid;
    gap: 0 16px;
}

/* 16px keeps iOS from zooming into the field */
.sl-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--sl-garis-isian);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-isian);
    color: var(--sl-tinta);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

.sl-input:hover {
    border-color: var(--sl-tinta);
}

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

select.sl-input {
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sl-redup) 50%),
        linear-gradient(135deg, var(--sl-redup) 50%, transparent 50%);
    background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.sl-input-pendek {
    max-width: 160px;
}

.sl-input-sedang {
    max-width: 240px;
}

.sl-uang {
    display: flex;
    align-items: stretch;
    max-width: 340px;
}

.sl-uang-rp {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--sl-garis-isian);
    border-right: 0;
    border-radius: var(--sl-sudut-kecil) 0 0 var(--sl-sudut-kecil);
    background: var(--sl-kartu-2);
    color: var(--sl-redup);
    font-weight: 600;
}

.sl-uang .sl-input {
    border-radius: 0 var(--sl-sudut-kecil) var(--sl-sudut-kecil) 0;
    font-variant-numeric: tabular-nums;
}

.sl-wilayah-dua {
    display: grid;
    gap: 12px 16px;
}

.sl-wilayah-dua .sl-medan {
    margin: 0;
}

/* One question: a calm card, its number on the left fills in once answered (tema.js) */
.sl-kuesioner {
    counter-reset: soal;
}

.sl-daftar-soal {
    display: grid;
    gap: 14px;
}

.sl-soal {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 18px 16px 20px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut);
    background: var(--sl-kartu);
    box-shadow: var(--sl-bayang);
}

.sl-soal:not([hidden]) {
    counter-increment: soal;
}

/* A floated legend lays out inside the card like any block */
.sl-soal > legend {
    float: left;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
}

.sl-soal > legend + * {
    clear: left;
}

.sl-nomor {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--sl-garis-kuat);
    border-radius: var(--sl-sudut-simpul);
    color: var(--sl-redup);
    font-family: var(--sl-huruf-label);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s, border-color .2s, color .2s;
}

.sl-nomor::before {
    content: counter(soal);
}

.sl-soal.sl-terjawab .sl-nomor {
    border-color: var(--sl-utama);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
}

.sl-soal-kalimat {
    padding-top: 2px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
}

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

.sl-bantuan {
    margin: 0 0 12px;
    color: var(--sl-redup);
    font-size: .9375rem;
    line-height: 1.5;
}

.sl-soal .tr-galat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    color: var(--sl-galat);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.sl-soal .tr-galat::before {
    content: "!";
    display: grid;
    flex: none;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--sl-galat);
    color: var(--sl-kartu);
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.sl-soal.tr-salah {
    border-color: var(--sl-galat-garis);
    box-shadow: inset 4px 0 0 var(--sl-galat), var(--sl-bayang);
}

/* once a marked question gets an answer, its number turns to the answered look */
.sl-soal.tr-salah:not(.sl-terjawab) .sl-nomor {
    border-color: var(--sl-galat);
    color: var(--sl-galat);
}

.sl-soal.tr-salah .sl-input {
    border-color: var(--sl-galat);
}

/* Choices: the whole row is the tap target. The checked look hangs on the input's sibling, so it needs no :has() */
.sl-daftar-pilih {
    display: grid;
    gap: 8px;
}

.sl-pilih {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-isian);
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .15s;
}

.sl-pilih:hover {
    border-color: var(--sl-garis-isian);
}

.sl-pilih-input {
    display: grid;
    flex: none;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1.5px solid var(--sl-garis-isian);
    background: var(--sl-isian);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.sl-pilih-input[type="radio"] {
    border-radius: 50%;
}

.sl-pilih-input[type="checkbox"] {
    border-radius: min(5px, var(--sl-sudut-kecil));
}

.sl-pilih-input::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--sl-utama-di-atas);
    transform: scale(0);
    transition: transform .12s;
}

.sl-pilih-input[type="radio"]::before {
    border-radius: 50%;
}

.sl-pilih-input[type="checkbox"]::before {
    width: 11px;
    height: 11px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

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

.sl-pilih-input:checked::before {
    transform: scale(1);
}

.sl-pilih-input:checked + .sl-pilih-teks::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1.5px solid var(--sl-utama-teks);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama-muda);
}

.sl-pilih-input:checked + .sl-pilih-teks {
    font-weight: 600;
}

.sl-pilih-input:focus-visible {
    outline: 2px solid var(--sl-fokus);
    outline-offset: 2px;
}

.tr-salah .sl-pilih {
    border-color: var(--sl-galat-garis);
}

.sl-setuju {
    margin-top: 4px;
    padding: 16px;
    background: var(--sl-kartu-2);
    font-weight: 500;
}

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

.sl-setuju + .tr-galat {
    margin: 8px 0 0;
    color: var(--sl-galat);
    font-size: .9375rem;
    font-weight: 600;
}

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

.sl-skala-butir {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 10px 3px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-isian);
    text-align: center;
    cursor: pointer;
}

.sl-skala-butir:hover {
    border-color: var(--sl-garis-isian);
}

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

.sl-skala-nilai {
    font-family: var(--sl-huruf-label);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
}

.sl-skala-label {
    color: var(--sl-redup);
    font-size: .6875rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sl-skala-butir input:checked + .sl-skala-nilai::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--sl-sudut-kecil);
    background: var(--sl-utama);
}

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

.sl-skala-butir input:focus-visible + .sl-skala-nilai::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--sl-fokus);
    border-radius: calc(var(--sl-sudut-kecil) + 3px);
}

/* Buttons at the end of a form: primary first in the markup (Enter submits it), on the right on wider screens */
.sl-aksi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.sl-aksi .sl-tombol {
    width: 100%;
}

.sl-aksi-bilah {
    padding: 14px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut);
    background: var(--sl-kartu);
}

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

/* Data lists: identity, the review */
.sl-data {
    margin: 0;
}

.sl-data dt {
    color: var(--sl-redup);
    font-size: .875rem;
    line-height: 1.4;
}

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

.sl-alumni {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 20px 0 28px;
    padding: 18px;
    border: 1px solid var(--sl-utama-sedang);
    border-radius: var(--sl-sudut);
    background: var(--sl-utama-muda);
}

.sl-alumni-inisial {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--sl-sudut-simpul);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.125rem;
    font-weight: 700;
}

.sl-data-alumni {
    display: grid;
    flex: 1;
    gap: 12px 20px;
    min-width: 0;
}

.sl-data-alumni .sl-data-nama dd {
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.sl-form-kontak {
    padding-top: 22px;
    border-top: 1px solid var(--sl-garis);
}

.sl-form-kontak .sl-subjudul {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.sl-form-kontak > p {
    margin: 4px 0 4px;
}

/* The review: sections on one route */
.sl-rute {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-rute-butir {
    position: relative;
    padding: 0 0 16px 42px;
}

.sl-rute-butir:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50px;
    bottom: 4px;
    left: 13px;
    width: 4px;
    background: radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 50% 0 / 4px 8px repeat-y;
}

.sl-rute-simpul {
    position: absolute;
    top: 18px;
    left: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sl-sudut-simpul);
    background: var(--sl-utama);
    color: var(--sl-utama-di-atas);
    font-weight: 700;
}

.sl-rute-simpul .sl-ikon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.sl-rute-butir.sl-belum .sl-rute-simpul {
    background: var(--sl-galat);
    color: var(--sl-kartu);
}

.sl-ringkas {
    padding: 16px 16px 6px;
}

.sl-belum .sl-ringkas {
    border-color: var(--sl-galat-garis);
}

.sl-ringkas-kepala {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sl-ringkas-kepala .sl-subjudul {
    padding-top: 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.sl-ringkas-kepala form {
    flex: none;
    margin: 0;
}

.sl-data-ringkas > div {
    display: grid;
    gap: 2px 24px;
    padding: 10px 0;
    border-top: 1px solid var(--sl-garis);
}

.sl-data-ringkas dd.tr-galat {
    color: var(--sl-galat);
}

.sl-kirim {
    margin-top: 8px;
    padding: 20px;
}

.sl-kirim-siap {
    border-color: var(--sl-utama-sedang);
    background: var(--sl-utama-muda);
}

.sl-kirim-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 600;
}

.sl-kirim-status .sl-ikon {
    margin-top: 2px;
    color: var(--sl-utama-teks);
}

.sl-kirim .sl-aksi {
    margin-top: 16px;
}

/* Employers: whom they rate */
.sl-dinilai {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--sl-garis);
    border-radius: var(--sl-sudut);
    background: var(--sl-kartu-2);
}

.sl-dinilai-isi {
    min-width: 0;
}

.sl-dinilai .sl-label {
    margin-bottom: 4px;
}

.sl-dinilai-data {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 0;
}

.sl-dinilai-data div {
    font-size: .875rem;
}

.sl-dinilai-data dt,
.sl-dinilai-data dd {
    display: inline;
}

.sl-dinilai-data dt {
    margin-right: 6px;
    color: var(--sl-redup);
}

.sl-dinilai-data dd {
    margin: 0;
    font-weight: 600;
}

.sl-dinilai-data .sl-dinilai-nama {
    flex-basis: 100%;
}

.sl-dinilai-nama dd {
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.sl-dinilai-umum p {
    margin: 0;
}

.sl-lembar-ringkas .sl-dinilai {
    margin: 14px 0;
    padding: 0;
    border: 0;
    background: none;
}

.sl-penilai {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sl-garis);
    color: var(--sl-redup);
    font-size: .875rem;
}

.sl-bagian-judul + .sl-daftar-soal,
h2.sl-bagian-judul {
    margin-top: 0;
}

.sl-kuesioner h2.sl-bagian-judul {
    margin: 32px 0 14px;
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.375rem;
}

.sl-kuesioner h2.sl-bagian-judul:first-child {
    margin-top: 8px;
}

/* Thank you: the form's path arrives at a check and goes on */
.sl-selesai {
    padding: 32px 20px 28px;
    text-align: center;
}

.sl-selesai-jalur {
    display: block;
    width: min(100%, 360px);
    height: auto;
    margin: 0 auto 16px;
    overflow: visible;
}

.sl-selesai .sl-garis-titik {
    stroke: var(--sl-garis-kuat);
    stroke-width: 3;
}

.sl-selesai .sl-garis-lanjut {
    stroke: var(--sl-utama);
    stroke-opacity: .55;
}

/* the nodes take the website's corners like every other node (an SVG rect clamps rx to half its width) */
.sl-simpul-awal {
    fill: var(--sl-kartu);
    stroke: var(--sl-garis-kuat);
    stroke-width: 2.5;
    rx: calc(var(--sl-sudut) * 2);
}

.sl-simpul-kecil {
    fill: var(--sl-garis-kuat);
}

.sl-simpul-tanda {
    fill: var(--sl-utama);
    rx: calc(var(--sl-sudut) * 4);
}

.sl-simpul-centang {
    fill: none;
    stroke: var(--sl-utama-di-atas);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sl-selesai .sl-selesai-teks {
    max-width: 46ch;
    margin: 12px auto 0;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.sl-selesai .sl-selesai-salam {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 340px;
    margin: 28px auto 22px;
    padding-top: 20px;
    border-top: 1px solid var(--sl-garis);
    color: var(--sl-redup);
}

.sl-selesai-salam strong {
    color: var(--sl-tinta);
    font-family: var(--sl-huruf-judul-kecil);
    font-size: 1.125rem;
}

/* Short notices */
.sl-pesan {
    padding: 32px 22px;
    text-align: center;
}

.sl-pesan .sl-ikon-bulat {
    margin-bottom: 16px;
}

.sl-pesan .sl-pesan-teks {
    max-width: 48ch;
    margin: 12px auto 0;
    color: var(--sl-redup);
}

.sl-pesan .sl-tautan-panah {
    margin-top: 20px;
}

/* ------------------------------------------------------------------ wider screens */

@media (min-width: 560px) {
    .sl-skala-label {
        font-size: .75rem;
    }

    .sl-lembar-kepala {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .sl-medan-dua,
    .sl-wilayah-dua {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .sl-data-alumni .sl-data-nama {
        grid-column: 1 / -1;
    }
}

@media (min-width: 640px) {
    .sl-wadah {
        padding-inline: 24px;
    }

    .sl-utama.sl-wadah {
        padding-top: 32px;
    }

    .sl-lembar {
        padding: 34px 40px;
    }

    .sl-lembar-ringkas {
        padding-block: 6px;
    }

    .sl-soal {
        padding: 22px 24px 24px;
    }

    /* answers line up with the question text, past its number */
    .sl-soal > :not(legend) {
        margin-left: 40px;
    }

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

    .sl-aksi {
        flex-direction: row;
        align-items: center;
    }

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

    .sl-aksi .sl-tombol {
        width: auto;
        min-width: 150px;
    }

    .sl-data-ringkas > div {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .sl-ringkas {
        padding: 18px 22px 8px;
    }

    .sl-periode {
        padding: 28px 32px;
    }

    .sl-periode-butir {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px 32px;
    }

    .sl-periode-sisa {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .sl-periode-waktu {
        grid-column: 1;
    }

    .sl-periode-sisa {
        min-width: 120px;
        padding: 16px 20px;
    }

    .sl-periode-sisa strong {
        font-size: 2.75rem;
    }

    .sl-angka {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .sl-grafik,
    .sl-peta-kartu {
        padding: 24px 26px;
    }

    .sl-pengguna,
    .sl-privasi,
    .sl-kontak {
        padding: 28px 30px;
    }

    .sl-tautan {
        padding: 24px 28px;
    }

    .sl-selesai {
        padding: 44px 40px 36px;
    }
}

@media (min-width: 900px) {
    .sl-hero {
        padding-block: 72px 132px;
    }

    .sl-hero-isi {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 56px;
    }

    .sl-karier {
        position: relative;
        display: block;
        justify-self: end;
        width: 100%;
        max-width: 470px;
        aspect-ratio: 480 / 300;
    }

    .sl-karier-gambar {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .sl-karier .sl-garis-titik {
        stroke-opacity: .6;
    }

    .sl-karier-cabang {
        fill: currentColor;
    }

    .sl-karier-simpul {
        position: absolute;
        display: grid;
        place-items: center;
        border-radius: var(--sl-sudut-simpul);
        transform: translate(-50%, -50%);
    }

    .sl-karier-awal {
        width: 64px;
        height: 64px;
        border: 2px solid currentColor;
        background: rgba(255, 255, 255, .1);
    }

    .sl-karier-awal .sl-ikon {
        width: 30px;
        height: 30px;
    }

    .sl-karier-akhir {
        width: 50px;
        height: 50px;
        background: var(--sl-aksen);
        color: var(--sl-aksen-di-atas);
        box-shadow: 0 0 0 4px var(--sl-hero), 0 0 0 5.5px var(--sl-hero-teks);
    }

    .sl-karier-akhir .sl-ikon {
        width: 24px;
        height: 24px;
    }

    .sl-karier-label {
        position: absolute;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        transform: translateY(-50%);
    }

    .sl-karier-label-awal {
        font-family: var(--sl-huruf-label);
        font-size: .8125rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        transform: translateX(-50%);
    }

    .sl-periode-wadah {
        margin-top: -76px;
    }

    .sl-periode {
        padding: 30px 36px;
    }

    .sl-periode-cta,
    .sl-periode-kosong {
        max-width: 760px;
    }

    .sl-bagian {
        padding-top: 80px;
    }

    .sl-bagian-rapat {
        padding-top: 56px;
    }

    .sl-langkah {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;
        margin-top: 40px;
    }

    .sl-langkah-butir {
        padding: 66px 8px 0 0;
    }

    .sl-langkah-butir:not(:last-child)::before {
        top: 21px;
        right: -24px;
        bottom: auto;
        left: 60px;
        width: auto;
        height: 4px;
        background: radial-gradient(circle, var(--sl-garis-kuat) 1.3px, transparent 1.8px) 0 50% / 8px 4px repeat-x;
    }

    .sl-langkah-judul {
        margin-top: 0;
    }

    .sl-tautan {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px 24px;
    }

    .sl-tautan .sl-tombol {
        grid-column: auto;
    }

    .sl-tanya-kontak {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
        gap: 56px;
    }

    .sl-tanpa-faq {
        grid-template-columns: minmax(0, 680px);
    }

    .sl-kontak {
        position: sticky;
        top: 24px;
        margin-top: 24px;
    }

    .sl-tanpa-faq .sl-kontak {
        position: static;
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .sl-wadah {
        padding-inline: 32px;
    }
}

/* the section links only where they fit on one line beside the campus name */
@media (min-width: 1120px) {
    .sl-nav {
        display: flex;
        gap: 22px;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------ preferences and print */

@media (prefers-reduced-motion: reduce) {
    .sl *,
    .sl *::before,
    .sl *::after {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .sl-pilih-input:checked,
    .sl-jalur-titik.sl-lalu,
    .sl-jalur-titik.sl-kini {
        background: Highlight;
    }

    .sl-skala-butir input:checked + .sl-skala-nilai::before {
        background: Highlight;
    }
}

@media print {
    .sl-kepala,
    .sl-nav,
    .sl-ke-situs,
    .sl-aksi,
    .sl-kaki,
    .sl-lompat {
        display: none !important;
    }

    .sl-hero {
        padding-block: 24px;
        background: none;
        color: inherit;
    }

    .sl-hero::before,
    .sl-karier {
        display: none;
    }

    .sl-periode-wadah {
        margin-top: 0;
    }

    .sl-kartu {
        box-shadow: none;
    }
}