/* Paket tema Lensa 1.1.0 untuk un-f.ac.id, pesanan INV-20261021-C2AN (#11). */
/* Lensa: cinematic campus photos carry the identity. Full-screen hero photos with a slow camera move and the rector's
   welcome inside the hero; colourful app-like service tiles; image news cards; sections that settle in as they are
   reached. Text over photos always sits on a measured scrim (white >= 6.4:1 on a plain white photo). Every animation
   is off under prefers-reduced-motion. Spec: spesifikasi-lensa.md (owner direction "Foto sinematik"). */

@font-face { font-family: "Jakarta Cadangan"; src: local("Arial"); size-adjust: 104%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }

/* admin colours: head() prints them on :root, which wins over these html fallbacks */
html {
  --warna-kampus: #1747c2; --warna-kampus-teks: #1747c2; --warna-kampus-di-atas: #ffffff;
  --warna-aksen: #ffb81c; --warna-aksen-teks: #996e11; --warna-aksen-di-atas: #16191d;
}
:root {
  --huruf: "Plus Jakarta Sans", "Jakarta Cadangan", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tinta: #0f1720; --tinta-2: #475467; --tinta-3: #5b6576;
  --latar: #ffffff; --kabut: #f4f6f9; --tint: #ecf0fa; --tint: color-mix(in srgb, var(--warna-kampus) 8%, #fff);
  --garis: #e3e7ee; --garis-kuat: #8a94a6;
  --malam: #0b1220; --teks-malam: #e6eaf0; --teks-malam-2: #a9b4c4;
  --radius-s: 8px; --radius: 12px; --radius-m: 16px; --radius-l: 20px; --radius-xl: 24px;
  --bayang-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --bayang-2: 0 12px 32px -12px rgba(16, 24, 40, .22);
  --bayang-3: 0 24px 60px -20px rgba(11, 18, 32, .45);
  --mulus: cubic-bezier(.2, .7, .2, 1); --keluar: cubic-bezier(.16, 1, .3, 1);
  --wadah: 1240px; --tepi: 16px;
  --tinggi-baris: 60px; --tinggi-utilitas: 0px;
  --kepala-tampak: calc(var(--tinggi-baris) + var(--tinggi-utilitas));
  --bagian: 64px;
}
@media (min-width: 400px) { :root { --tepi: 20px; } }
@media (min-width: 640px) { :root { --tinggi-baris: 64px; --bagian: 72px; } }
@media (min-width: 1024px) { :root { --tepi: 32px; --bagian: 96px; } }
@media (min-width: 1100px) { :root { --tinggi-baris: 72px; --tinggi-utilitas: 36px; } }
html.kepala-ringkas { --kepala-tampak: var(--tinggi-baris); }
html.kepala-sembunyi { --kepala-tampak: 0px; }

/* Base ------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kepala-tampak) + 16px); overflow-x: clip; -webkit-tap-highlight-color: rgba(15, 23, 32, .08); }
body { margin: 0; background: #fff; color: var(--tinta); font: 400 1rem/1.65 var(--huruf); overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
[hidden] { display: none !important; }
html:not(.js) .butuh-js { display: none !important; }
.sr { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tabular { font-variant-numeric: tabular-nums lining-nums; }
.wadah { width: 100%; max-width: calc(var(--wadah) + 2 * var(--tepi)); margin-inline: auto; padding-inline: var(--tepi); }
main { display: block; }
body:not(.kepala-transparan) main { padding-top: var(--kepala-tampak); }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.gelap :focus-visible, body.kepala-transparan .kepala:not(.padat) :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #0b1220; }
.blok-kampus :focus-visible { outline-color: var(--warna-kampus-di-atas); box-shadow: 0 0 0 6px var(--warna-kampus); }
.gelap .kartu-sambutan :focus-visible, .gelap .link-cepat-kartu :focus-visible { outline-color: var(--tinta); box-shadow: 0 0 0 6px #fff; }

.lewati { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-150%); }
.lewati:focus { transform: none; }
.penanda-gulir { position: absolute; top: 80px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Buttons, eyebrows, chips ---------------------------------------------------------------------------------- */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1.5px solid transparent; font: 700 15px/1.2 var(--huruf); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 160ms, border-color 160ms, color 160ms, transform 160ms var(--mulus), box-shadow 160ms; }
.tombol svg { flex-shrink: 0; width: 18px; height: 18px; }
.tombol:active { transform: translateY(1px); }
.tombol-aksen { background: var(--warna-aksen); color: var(--warna-aksen-di-atas); }
.tombol-utama { background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
@media (hover: hover) { .tombol-aksen:hover, .tombol-utama:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } }
.aksen-gelap .gelap .tombol-aksen, .aksen-gelap .blok-kampus .tombol-aksen { border-color: rgba(255, 255, 255, .7); }
.aksen-terang .tombol-aksen { border-color: var(--garis-kuat); }
.aksen-terang .gelap .tombol-aksen { border-color: transparent; }
.tombol-putih { background: #fff; color: var(--tinta); }
.tombol-putih:hover { background: #f4f6f9; }
.tombol-kaca { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .72); color: #fff; }
.tombol-kaca:hover { background: rgba(255, 255, 255, .24); }
@supports (backdrop-filter: blur(6px)) { .tombol-kaca { backdrop-filter: blur(6px); } }
.tombol-garis { background: #fff; border-color: var(--garis-kuat); color: var(--tinta); }
.tombol-garis:hover { border-color: var(--warna-kampus); color: var(--warna-kampus-teks); }
.tombol-garis-arus { background: transparent; border-color: currentColor; color: inherit; }
.tombol-garis-arus:hover { background: rgba(255, 255, 255, .12); }
.tombol-ikon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.tombol-ikon:hover { background: rgba(15, 23, 32, .06); }

.bagian { padding: var(--bagian) 0; }
.bagian-kabut { background: var(--kabut); }
.kepala-bagian { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 40px; }
.kepala-bagian h2, .info-kolom h3 + * { }
.kepala-bagian h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.kalimat-fakta { margin-top: 10px; color: var(--tinta-2); font-size: 1.0625rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 13px/1.2 var(--huruf); letter-spacing: .12em; text-transform: uppercase; color: var(--warna-kampus-teks); }
.eyebrow::before { content: ""; flex: 0 0 24px; width: 24px; height: 3px; border-radius: 2px; background: var(--warna-aksen); transform-origin: left; transition: transform 400ms var(--mulus); }
.eyebrow-terang, .gelap .eyebrow { color: #fff; }
.eyebrow-arus { color: inherit; }
.tautan-panah { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--warna-kampus-teks); font: 700 15px/1.2 var(--huruf); text-decoration: none; }
.tautan-panah svg { width: 16px; height: 16px; transition: transform 160ms var(--mulus); }
.tautan-panah:hover svg { transform: translateX(4px); }
.tautan-panah:hover span { text-decoration: underline; text-underline-offset: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: #fff; color: var(--tinta); font: 600 14px/1 var(--huruf); white-space: nowrap; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--tinta-3); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--warna-kampus); border-color: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.kampus-terang .chip[aria-pressed="true"], .kampus-terang .chip[aria-current="page"], .kampus-terang .paginasi .active a, .kampus-terang .paginasi [aria-current] { background: var(--warna-kampus-teks); border-color: var(--warna-kampus-teks); color: #fff; }
.kampus-terang .kepala.padat .nav-tautan::after, .kampus-terang .kartu-prodi::before { background: var(--warna-kampus-teks); }
.chip .jumlah { font: 700 13px/1 var(--huruf); font-variant-numeric: tabular-nums; }
.kosong { padding: 40px 24px; border-radius: 20px; background: var(--kabut); text-align: center; }
.kosong h2 { margin-bottom: 16px; font-size: 1.375rem; }

/* Header ------------------------------------------------------------------------------------------------ */
.kepala { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--tinta); transition: transform 240ms var(--mulus), background-color 240ms, box-shadow 240ms, color 240ms; }
.kepala.padat { background: #fff; box-shadow: 0 1px 0 var(--garis), 0 8px 24px -12px rgba(16, 24, 40, .18); transform: translateY(calc(-1 * var(--tinggi-utilitas))); }
.kepala.padat.tetap { transform: none; }
body.kepala-transparan .kepala:not(.padat) { color: #fff; }
html.kepala-sembunyi .kepala, html.kepala-sembunyi .kepala.padat.tetap { transform: translateY(-100%); }
.kepala-utilitas { display: none; }
@media (min-width: 1100px) {
  .kepala-utilitas { display: block; height: var(--tinggi-utilitas); font: 500 13px/1 var(--huruf); border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .kepala.padat .kepala-utilitas { background: var(--warna-kampus); color: var(--warna-kampus-di-atas); border-bottom: 0; }
  .utilitas-baris { display: flex; align-items: center; justify-content: space-between; height: 100%; }
  .utilitas-kontak { display: flex; }
  .utilitas-aksi { display: flex; align-items: center; gap: 8px; }
  .kepala-utilitas #google_translate_element .goog-te-combo, .kepala-utilitas .terjemah-asli { min-height: 26px; padding: 2px 8px; }
  .kepala-utilitas a { display: inline-flex; align-items: center; gap: 6px; height: var(--tinggi-utilitas); padding: 0 8px; text-decoration: none; }
  .kepala-utilitas a:hover span, .utilitas-baris > a:hover { text-decoration: underline; }
  .kepala-utilitas :focus-visible { outline: 2px solid currentColor; outline-offset: -2px; box-shadow: none; }
}
.kepala-baris { display: flex; align-items: center; gap: 24px; height: var(--tinggi-baris); }
.merek { display: flex; align-items: center; min-height: 44px; margin-right: auto; min-width: 0; color: inherit; text-decoration: none; }
.merek img { width: auto; max-height: 44px; max-width: 220px; }
.merek .logo-terang { display: none; }
body.kepala-transparan .kepala:not(.padat) .logo-terang { display: block; }
body.kepala-transparan .kepala:not(.padat) .logo-terang + .logo-gelap { display: none; }
body.kepala-transparan .kepala:not(.padat) .merek-pelat { padding: 6px 10px; border-radius: 10px; background: #fff; }
.merek-nama { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; font: 800 16px/1.2 var(--huruf); }
.nav-desktop { display: none; }
@media (min-width: 1100px) {
  .nav-desktop { display: flex; align-self: stretch; }
  .kepala.nav-padat .nav-desktop { display: none; }
}
/* items fill the header row, so the pointer never leaves an item on its way down into the panel */
.nav-daftar { display: flex; align-items: stretch; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-tautan, .nav-tombol { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: 600 15px/1.2 var(--huruf); text-decoration: none; white-space: nowrap; cursor: pointer; }
.nav-tautan::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--warna-aksen); transform: scaleX(0); transition: transform 200ms var(--mulus); }
.kepala.padat .nav-tautan::after { background: var(--warna-kampus); }
.nav-tautan:hover::after { transform: scaleX(1); }
.nav-tautan[aria-current="page"]::after { height: 3px; transform: scaleX(1); }
.kepala.padat .nav-tautan[aria-current="page"] { color: var(--warna-kampus-teks); }
.nav-item.punya-anak > .nav-tautan { padding-right: 2px; }
.nav-item.punya-anak > .nav-tombol:not(.nav-tombol-label) { padding: 10px 8px 10px 4px; }
.nav-panah { flex: 0 0 auto; transition: transform 200ms var(--mulus); }
.nav-item.terbuka > .nav-tombol .nav-panah { transform: rotate(180deg); }
.nav-teks { cursor: default; }
.nav-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 260px; max-width: 340px; padding: 8px; border: 1px solid var(--garis); border-radius: 16px; background: #fff; color: var(--tinta); box-shadow: var(--bayang-2); }
/* an invisible bridge above the panel keeps the hover while the pointer crosses into it */
.nav-panel:not(.nav-mega)::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item.terbuka > .nav-panel, .nav-item.hover-buka > .nav-panel { display: block; animation: panel-masuk 180ms var(--mulus); }
/* tema.js opens panels on hover with a short intent delay; this plain :hover only applies when scripts do not run */
@media (min-width: 1100px) and (hover: hover) {
  html:not(.js) .nav-item:hover > .nav-panel { display: block; }
}
.nav-sub-tautan { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: 10px; color: var(--tinta); font: 500 15px/1.35 var(--huruf); text-decoration: none; }
.nav-sub-tautan:hover { background: var(--kabut); }
.nav-sub { margin-left: 14px !important; border-left: 1px solid var(--garis); }
/* a menu nested deeper than one level (often an item dragged one step too far right in Web Utama > Menu) stays at one indent instead of a staircase */
.nav-sub .nav-sub { margin-left: 0 !important; border-left: 0; }
.nav-jumlah { padding: 2px 8px; border-radius: 999px; background: var(--kabut); color: var(--tinta-3); font: 600 13px/1.4 var(--huruf); }
.nav-semua { display: flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 14px; border-top: 1px solid var(--garis); color: var(--warna-kampus-teks); font-weight: 600; text-decoration: none; }
.nav-item.mega { position: static; }
.nav-mega { position: absolute; top: 100%; left: 0; right: 0; max-width: none; min-width: 0; max-height: calc(100vh - 120px); overflow: auto; padding: 32px 0 40px; border: 0; border-top: 3px solid var(--warna-kampus); border-radius: 0; }
.mega-isi { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
.mega-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 32px; }
.mega-judul { margin-bottom: 6px; color: var(--tinta-3); font: 700 13px/1.3 var(--huruf); letter-spacing: .08em; text-transform: uppercase; }
.mega-kolom .nav-sub-tautan { justify-content: flex-start; padding-left: 0; }
.mega-kolom .nav-sub-tautan:hover { background: none; text-decoration: underline; }
.jenjang-mini { flex: 0 0 auto; padding: 1px 6px; border: 1px solid var(--garis-kuat); border-radius: 6px; color: var(--warna-kampus-teks); font: 700 13px/1.4 var(--huruf); }
.mega-ringkas { align-self: start; padding: 24px; border-radius: 16px; background: var(--kabut); }
.mega-ringkas p { margin-bottom: 16px; font: 700 17px/1.4 var(--huruf); }
.kepala-aksi { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
body.kepala-transparan .kepala:not(.padat) .tombol-ikon:hover { background: rgba(255, 255, 255, .14); }
.tombol-daftar { display: none; min-height: 44px; padding: 0 18px; }
.tombol-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 12px; background: none; font: 700 15px/1 var(--huruf); cursor: pointer; }
.tombol-menu span { display: none; }
@media (min-width: 400px) { .tombol-menu span { display: inline; } }
@media (min-width: 1100px) {
  .tombol-daftar { display: inline-flex; }
  .kepala:not(.nav-padat) .tombol-menu { display: none; }
}
.panel-cari { position: absolute; top: 100%; left: 0; right: 0; padding: 20px 0; border-radius: 0 0 20px 20px; background: #fff; color: var(--tinta); box-shadow: var(--bayang-2); animation: panel-masuk 180ms var(--mulus); }
.form-cari { display: flex; gap: 8px; align-items: center; }
.kotak-input { position: relative; flex: 1 1 auto; min-width: 0; }
.kotak-input input { width: 100%; min-height: 56px; padding: 0 16px 0 48px; border: 1.5px solid var(--garis-kuat); border-radius: 12px; background: #fff; font-size: 17px; }
.kotak-input input:focus-visible { border-color: var(--warna-kampus); }
.ikon-input { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.form-cari .tombol { min-height: 56px; }
input::placeholder { color: var(--tinta-3); opacity: 1; }

/* Drawer ------------------------------------------------------------------------------------------------ */
.laci { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.laci.terbuka { visibility: visible; }
.laci-latar { position: absolute; inset: 0; background: rgba(8, 12, 20, .5); opacity: 0; transition: opacity 200ms; }
.laci.terbuka .laci-latar { opacity: 1; }
.laci-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100vw); height: 100vh; height: 100dvh; overflow-y: auto; background: #fff; color: var(--tinta); box-shadow: var(--bayang-3); transform: translateX(100%); transition: transform 280ms var(--keluar); }
.laci.terbuka .laci-panel { transform: none; }
html.laci-terbuka { overflow: hidden; }
.laci-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--garis); }
.laci-kepala img { max-height: 36px; width: auto; }
.laci-daftar { flex: 1 0 auto; padding: 8px 0; }
.laci-daftar > li { border-bottom: 1px solid var(--garis); }
.laci-tautan, .laci-tombol { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; background: none; color: var(--tinta); font: 600 17px/1.3 var(--huruf); text-align: left; text-decoration: none; cursor: pointer; }
.laci-baris { display: flex; align-items: stretch; }
.laci-baris .laci-tautan { flex: 1 1 auto; }
.laci-tombol-kecil { flex: 0 0 52px; width: 52px; justify-content: center; padding: 0; }
.laci-tombol[aria-expanded="true"] .nav-panah { transform: rotate(180deg); }
.laci-sub { display: none; padding: 4px 0 8px; background: var(--kabut); }
.laci-tombol[aria-expanded="true"] + .laci-sub, .laci-terbuka > .laci-sub, html:not(.js) .laci-sub { display: block; }
.laci-sub .laci-tautan { min-height: 48px; padding-left: 36px; font-size: 16px; font-weight: 500; }
.laci-sub .laci-tombol { padding-left: 36px; color: var(--tinta-3); font: 700 13px/1.3 var(--huruf); letter-spacing: .08em; text-transform: uppercase; min-height: 44px; cursor: default; }
.laci-sub-dalam .laci-tautan { padding-left: 52px; }
.laci-kaki { position: sticky; bottom: 0; display: grid; gap: 10px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--garis); background: #fff; }
.laci-kaki .kotak-input input { min-height: 48px; }
.laci-kaki .tombol { width: 100%; min-height: 50px; }
.laci-terjemah { display: flex; align-items: center; gap: 8px; min-height: 48px; }
/* stays empty on a SIAKAD whose shared foot does not move the list yet */
.laci-terjemah:empty { display: none; }
.laci-terjemah #google_translate_element { flex: 1; min-width: 0; }
.laci-terjemah #google_translate_element .goog-te-combo, .laci-terjemah .terjemah-asli { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--garis-kuat); border-radius: 12px; font: 600 15px/1.2 var(--huruf); color: var(--tinta); }
.laci-terjemah #google_translate_element .goog-te-combo { width: 100%; }
.laci-terjemah .terjemah-asli { margin-left: 0; }

/* Hero --------------------------------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: clamp(640px, 100svh, 980px); background: var(--malam); color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease-in-out; }
.hero-slide.aktif { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
html:not(.js) .hero-slide:not(:first-child) { display: none; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(8 12 20 / .66) 0, rgb(8 12 20 / .66) 112px, rgb(8 12 20 / 0) 240px); }
.hero-isi { position: relative; z-index: 2; padding: 160px 0 120px; background: linear-gradient(to top, rgb(8 12 20 / .72) 0, rgb(8 12 20 / .72) calc(100% - 160px), rgb(8 12 20 / 0) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
.hero-grid--lebar { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.hero-teks { min-width: 0; }
.hero h1 { margin-top: 12px; font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem); line-height: 1.06; letter-spacing: -.025em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.hero h1.h1-pendek { font-size: clamp(2.5rem, 1.25rem + 5.2vw, 4.75rem); }
.hero h1.h1-panjang { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.hero h1.h1-sangat-panjang { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em; }
.hero-label { margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/1.4 var(--huruf); letter-spacing: .14em; text-transform: uppercase; }
.pmb-pil + .hero-label { margin-top: 20px; }
.hero-teks > .hero-label:first-child { margin-top: 0; }
.hero-lead { max-width: 56ch; margin-top: 20px; color: #e6eaf0; font: 500 20px/1.5 var(--huruf); }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .tombol { min-height: 52px; padding: 0 26px; }
.hero-pmb { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: #e6eaf0; font-size: 15px; line-height: 1.5; }
.hero-pmb svg { flex: 0 0 16px; margin-top: 3px; }
.pmb-pil::before { content: ""; position: absolute; inset: -5px 0; }
.pmb-pil { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-block: 5px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--warna-aksen); color: var(--warna-aksen-di-atas); font: 700 13px/1 var(--huruf); text-decoration: none; }
.titik { position: relative; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.titik::after { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; opacity: 0; }
.hero-sisi { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; min-width: 0; justify-self: end; width: 100%; max-width: 420px; }
.hero-kontrol { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: 100%; }
.hero-keterangan { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; color: #fff; font: 500 14px/1.3 var(--huruf); text-decoration: none; }
.hero-keterangan span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-keterangan:hover span { text-decoration: underline; }
.hero-keterangan svg { flex: 0 0 16px; }
.hero-tombol { display: flex; align-items: center; gap: 6px; }
.hero-hitung { min-width: 44px; margin-right: 4px; font: 600 14px/1 var(--huruf); text-align: center; }
.hero-segmen { display: flex; }
.segmen { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.segmen span { position: relative; display: block; width: 40px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .38); }
.segmen span::after { content: ""; position: absolute; inset: 0; background: var(--warna-aksen); transform: scaleX(0); transform-origin: left; }
.segmen.lewat span::after { transform: scaleX(1); background: rgba(255, 255, 255, .85); }
.segmen.aktif span::after { transform: scaleX(0); }
.hero.dijeda .segmen.aktif span::after, .segmen.aktif.penuh span::after { transform: scaleX(1); }
.aksen-gelap .segmen.aktif span::after { background: #fff; }
.aksen-gelap .segmen.lewat span::after { transform: scaleX(0); }
.segmen:hover span { background: rgba(255, 255, 255, .6); }
.tombol-bulat { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color 160ms; }
.tombol-bulat:hover { background: rgba(255, 255, 255, .26); }
.hero-jeda .ikon-putar, .hero-jeda.dijeda .ikon-jeda { display: none; }
.hero-jeda.dijeda .ikon-putar { display: block; }

/* the colour-only hero (no photos at all) */
.hero--warna { min-height: clamp(560px, 80svh, 820px); background: var(--warna-kampus); color: var(--warna-kampus-di-atas); overflow: hidden; }
.hero--warna .hero-isi { padding-bottom: 72px; background: none; }
.hero--warna h1, .hero--warna .hero-lead, .hero--warna .hero-pmb { color: currentColor; text-shadow: none; }
.hero-angka { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 40px; }
.hero-angka div { display: flex; flex-direction: column-reverse; }
.hero-angka dt { font: 600 14px/1.3 var(--huruf); }
.hero-angka dd { font: 800 32px/1.1 var(--huruf); }

/* decorative rings on campus-colour blocks: currentColor, so they suit any colour */
.hero--warna::before, .hero--warna::after, .kepala-halaman.blok-kampus::before, .kepala-halaman.blok-kampus::after, .kartu-ajakan::before, .pita-pmb.blok-kampus::before, .pita-pmb.blok-kampus::after, .kartu-sorot.tanpa-gambar::before, .kartu-gambar.tanpa-gambar::before {
  content: ""; position: absolute; border: 1.5px solid currentColor; border-radius: 50%; pointer-events: none; z-index: 0;
}
.hero--warna::before, .kepala-halaman.blok-kampus::before, .pita-pmb.blok-kampus::before { width: 560px; height: 560px; right: -160px; top: -220px; opacity: .14; }
.hero--warna::after, .kepala-halaman.blok-kampus::after, .pita-pmb.blok-kampus::after { width: 360px; height: 360px; right: -40px; top: -80px; opacity: .10; }
.kartu-sorot.tanpa-gambar::before, .kartu-gambar.tanpa-gambar::before, .kartu-ajakan::before { width: 320px; height: 320px; right: -110px; top: -140px; opacity: .14; }

/* Rector's welcome (owner rule: always at the top, inside the hero) ------------------------------------- */
.kartu-sambutan { position: relative; z-index: 3; width: 100%; padding: 24px 24px 22px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: var(--bayang-3); }
.hero--warna .kartu-sambutan { box-shadow: var(--bayang-2); }
.sambutan-atas { display: flex; align-items: center; gap: 16px; }
.sambutan-atas .eyebrow { margin-bottom: 6px; color: var(--warna-kampus-teks); }
.kartu-sambutan h2 { font: 800 17px/1.3 var(--huruf); letter-spacing: -.01em; }
.foto-pimpinan { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--warna-kampus); }
.foto-ganti { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.kutipan-sambutan { margin-top: 14px; color: var(--tinta-2); font: italic 500 16px/1.6 var(--huruf); }
.kutipan-sambutan p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tanda-kutip { float: left; width: 20px; height: 20px; margin: 3px 6px 0 0; color: var(--warna-kampus-teks); }
.kartu-sambutan .tautan-panah { margin-top: 6px; }

/* Link cepat: app-like tiles, fixed colours per service type --------------------------------------------- */
.link-cepat { position: relative; z-index: 3; padding-bottom: 56px; }
.link-cepat-kartu { margin-top: -64px; padding: 20px 24px; border-radius: 24px; background: #fff; box-shadow: var(--bayang-3); }
.link-cepat--datar .link-cepat-kartu { margin-top: 48px; }
.ubin-daftar { display: grid; grid-template-columns: repeat(min(var(--n), 8), minmax(0, 1fr)); gap: 4px; }
.ubin-daftar.dua { grid-template-columns: repeat(2, 132px); }
.ubin { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-height: 120px; padding: 14px 6px 12px; border: 0; border-radius: 14px; background: none; color: var(--tinta); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 200ms; }
.ubin:hover, .ubin:focus-visible { background: var(--kabut); }
.ubin-ikon { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; transition: transform 200ms var(--mulus), box-shadow 200ms; }
.ubin-ikon svg { width: 26px; height: 26px; }
.ubin-gambar { border: 1px solid var(--garis); background: #fff; }
.ubin-gambar img { width: 36px; height: 36px; object-fit: contain; }
.ubin-nama { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 14ch; font: 600 14px/1.3 var(--huruf); overflow-wrap: break-word; }
.ikon-luar { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; color: var(--tinta-3); }
.u-biru { background: linear-gradient(135deg, #3b82f6, #1d4ed8); --bayang-ubin: rgba(29, 78, 216, .45); }
.u-hijau { background: linear-gradient(135deg, #059669, #065f46); --bayang-ubin: rgba(6, 95, 70, .45); }
.u-oranye { background: linear-gradient(135deg, #ea580c, #9a3412); --bayang-ubin: rgba(154, 52, 18, .45); }
.u-ungu { background: linear-gradient(135deg, #8b5cf6, #6d28d9); --bayang-ubin: rgba(109, 40, 217, .45); }
.u-merahmuda { background: linear-gradient(135deg, #db2777, #9d174d); --bayang-ubin: rgba(157, 23, 77, .45); }
.u-toska { background: linear-gradient(135deg, #0891b2, #155e75); --bayang-ubin: rgba(21, 94, 117, .45); }
.u-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); --bayang-ubin: rgba(67, 56, 202, .45); }
.u-merah { background: linear-gradient(135deg, #e5484d, #b91c1c); --bayang-ubin: rgba(185, 28, 28, .45); }
.u-amber { background: linear-gradient(135deg, #c2770a, #92400e); --bayang-ubin: rgba(146, 64, 14, .45); }
.u-batu { background: linear-gradient(135deg, #64748b, #334155); --bayang-ubin: rgba(51, 65, 85, .40); }
.ubin-ikon[class*="u-"] { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 14px -6px var(--bayang-ubin); }
.ubin:hover .ubin-ikon[class*="u-"], .ubin:focus-visible .ubin-ikon[class*="u-"] { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 14px 22px -8px var(--bayang-ubin); }

/* News ------------------------------------------------------------------------------------------------- */
.kabar-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; }
.kartu-sorot { grid-column: 1 / span 7; grid-row: 1 / span 3; }
.kabar-lain { display: contents; }
.kabar-lain > .kartu-ringkas { grid-column: 8 / span 5; }
.kabar-lain > .kartu-berita:not(.kartu-ringkas) { grid-column: span 4; margin-top: 48px; }
.kabar-grid.tunggal .kartu-sorot { grid-column: 1 / -1; grid-row: auto; min-height: 440px; aspect-ratio: 21 / 9; }
.kartu-sorot { position: relative; display: grid; align-content: end; min-height: 520px; overflow: hidden; border-radius: 20px; background: var(--malam); color: #fff; }
.kartu-sorot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mulus); }
.kartu-sorot .isi { position: relative; z-index: 1; display: grid; justify-items: start; gap: 12px; padding: 160px 32px 32px; background: linear-gradient(to top, rgb(8 12 20 / .80) 0, rgb(8 12 20 / .80) calc(100% - 160px), rgb(8 12 20 / 0) 100%); }
.kartu-sorot.tanpa-gambar { min-height: 360px; background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.kartu-sorot.tanpa-gambar .isi { background: none; }
.kartu-sorot time { color: #e6eaf0; font: 500 14px/1.4 var(--huruf); }
.kartu-sorot.tanpa-gambar time, .kartu-sorot.tanpa-gambar .cuplikan { color: inherit; }
.kartu-sorot .kartu-judul { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.2; }
.kartu-sorot .cuplikan { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60ch; color: #e6eaf0; font-size: 16px; line-height: 1.6; }
.chip-gelap { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(255, 255, 255, .16); font: 700 13px/1 var(--huruf); letter-spacing: .04em; text-transform: uppercase; }
@media (hover: hover) { .kartu-sorot:hover > img { transform: scale(1.04); } }
.kartu-sorot:focus-within > img { transform: scale(1.04); }

.kartu { position: relative; }
.tautan-kartu { color: inherit; text-decoration: none; }
.tautan-kartu::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.kartu:hover .tautan-kartu, .kartu:focus-within .tautan-kartu { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kartu:focus-within { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 16px; }
.tautan-kartu:focus-visible { outline: none; box-shadow: none; }
.kartu-berita { display: flex; flex-direction: column; border-radius: 16px; }
.kartu-gambar { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--kabut); }
.kartu-gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mulus); }
.kartu-gambar.tanpa-gambar { display: flex; align-items: flex-end; padding: 20px; background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.tanggal-besar { position: relative; z-index: 1; display: grid; gap: 4px; }
.tanggal-besar .hari { font: 800 56px/1 var(--huruf); }
.tanggal-besar .bulan { font: 600 15px/1.2 var(--huruf); }
.chip-gambar { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--warna-kampus-teks); box-shadow: var(--bayang-1); font: 700 13px/1 var(--huruf); letter-spacing: .06em; text-transform: uppercase; }
.kartu-teks { display: flex; flex-direction: column; }
.kartu-berita time { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--tinta-3); font: 500 14px/1.4 var(--huruf); }
.kartu-berita .kartu-judul { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font: 700 19px/1.35 var(--huruf); letter-spacing: -.01em; }
.kartu-berita .cuplikan { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; color: var(--tinta-2); font-size: 15px; line-height: 1.6; }
@media (hover: hover) { .kartu-berita:hover .kartu-gambar img { transform: scale(1.06); } }
.kartu-berita:focus-within .kartu-gambar img { transform: scale(1.06); }
/* the compact rows beside the lead story (desktop); the same cards become ordinary cards on smaller screens */
@media (min-width: 1024px) {
  .kartu-ringkas { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--garis); border-radius: 0; }
  .kabar-lain > .kartu-ringkas:first-child { padding-top: 0; border-top: 0; }
  .kartu-ringkas .kartu-gambar { aspect-ratio: 16 / 10; border-radius: 12px; }
  .kartu-ringkas .chip-gambar, .kartu-ringkas .tanggal-besar .bulan { display: none; }
  .kartu-ringkas .tanggal-besar .hari { font-size: 32px; }
  .kartu-ringkas .kartu-gambar.tanpa-gambar { padding: 12px; }
  .kartu-ringkas time { margin-top: 0; }
  .kartu-ringkas .kartu-judul { font-size: 17px; line-height: 1.4; }
  .kartu-ringkas .cuplikan { display: none; }
  .kartu-ringkas:focus-within { border-radius: 12px; }
}
/* desktop shows a second row of news only when it can be a full row of three */
@media (min-width: 1024px) { .hanya-layar-kecil { display: none !important; } }
.tombol-ponsel { display: none; }

/* Announcements and events ------------------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.info-grid.tunggal { grid-template-columns: minmax(0, 1fr); }
.info-grid.tunggal .daftar-tanggal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.info-kepala h3 { font-size: 22px; }
.daftar-tanggal { display: grid; gap: 12px; }
.baris-tanggal { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--garis); border-radius: 16px; background: #fff; color: var(--tinta); text-decoration: none; transition: border-color 160ms, transform 160ms var(--mulus); }
.baris-tanggal:hover { border-color: var(--warna-kampus); transform: translateX(4px); }
.baris-teks { display: grid; gap: 2px; min-width: 0; }
.baris-judul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 16px/1.4 var(--huruf); }
.baris-tanggal:hover .baris-judul { text-decoration: underline; text-underline-offset: 3px; }
.baris-meta { color: var(--tinta-3); font-size: 13px; }
.lencana-tanggal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 60px; border-radius: 12px; background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.lencana-tanggal .hari { font: 800 22px/1 var(--huruf); font-variant-numeric: tabular-nums; }
.lencana-tanggal .bulan { margin-top: 4px; font: 700 12px/1 var(--huruf); letter-spacing: .06em; text-transform: uppercase; }
.lencana-tanggal.garis { border: 2px solid var(--warna-kampus); background: #fff; color: var(--warna-kampus-teks); }

/* Study programmes -------------------------------------------------------------------------------------- */
.chip-baris { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px; }
.grid-prodi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kartu-prodi { position: relative; display: flex; flex-direction: column; min-height: 176px; height: 100%; padding: 20px 20px 18px; overflow: hidden; border: 1px solid var(--garis); border-radius: 16px; background: #fff; color: var(--tinta); text-decoration: none; transition: transform 200ms var(--mulus), box-shadow 200ms, border-color 200ms; }
.kartu-prodi::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--warna-kampus); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--mulus); }
.kartu-prodi-atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kartu-prodi-atas img { width: 40px; height: 40px; object-fit: contain; }
.lencana-jenjang { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--warna-kampus); color: var(--warna-kampus-di-atas); font: 800 13px/1 var(--huruf); }
.kartu-prodi .nama { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 16px; font: 700 18px/1.3 var(--huruf); }
.kartu-prodi .fakultas { margin-top: 4px; color: var(--tinta-2); font: 500 14px/1.4 var(--huruf); }
.kartu-prodi .bawah { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.kartu-prodi .akreditasi { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font: 600 13px/1.3 var(--huruf); }
.kartu-prodi .akreditasi svg { flex: 0 0 16px; color: var(--warna-kampus-teks); }
.panah-bulat { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kabut); color: var(--tinta); transition: background-color 200ms, color 200ms; }
.panah-bulat svg { transition: transform 200ms var(--mulus); }
@media (hover: hover) { .kartu-prodi:hover { transform: translateY(-4px); box-shadow: var(--bayang-2); border-color: transparent; } }
.kartu-prodi:hover::before, .kartu-prodi:focus-visible::before { transform: scaleX(1); }
.kartu-prodi:hover .panah-bulat, .kartu-prodi:focus-visible .panah-bulat { background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.kartu-prodi:hover .panah-bulat svg { transform: translateX(2px); }
.kartu-prodi:hover .nama { text-decoration: underline; text-underline-offset: 4px; }
.tombol-semua-prodi { margin-top: 28px; }

/* Campus in numbers: a darkened campus photo band, the only parallax ------------------------------------- */
.pita-angka { position: relative; isolation: isolate; overflow: hidden; min-height: 360px; padding: var(--bagian) 0; background: var(--malam); color: #fff; }
.pita-angka.tanpa-foto { border-top: 4px solid var(--warna-kampus); }
.pita-foto { position: absolute; left: 0; right: 0; top: -12%; z-index: -3; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.pita-warna { position: absolute; inset: 0; z-index: -2; background: var(--warna-kampus); mix-blend-mode: multiply; opacity: .55; }
.pita-gelap { position: absolute; inset: 0; z-index: -1; background: rgb(8 12 20 / .72); }
.angka-daftar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 32px; }
.angka-daftar > div { display: flex; flex-direction: column-reverse; padding: 8px 24px; border-left: 1px solid rgba(255, 255, 255, .2); }
.angka-daftar > div:first-child { padding-left: 0; border-left: 0; }
.angka-daftar dd { position: relative; padding-bottom: 20px; margin-bottom: 14px; font: 800 64px/1 var(--huruf); letter-spacing: -.02em; }
.angka-daftar dd::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 4px; border-radius: 2px; background: var(--warna-aksen); }
.angka-daftar dt { font: 600 16px/1.3 var(--huruf); }
.angka-sumber { margin-top: 32px; color: #e6eaf0; font-size: 14px; }

/* Why study here: text with a two-photo mosaic --------------------------------------------------------- */
.tentang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.tentang.tanpa-foto { grid-template-columns: minmax(0, 760px); }
.tentang-teks h2 { margin-bottom: 20px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.tentang-teks .isi-artikel { max-width: 60ch; color: var(--tinta-2); font-size: 17px; }
.tentang-teks .tombol { margin-top: 28px; }
.mozaik { position: relative; padding-bottom: 32px; }
.mozaik-besar { display: block; width: 78%; margin-left: auto; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; box-shadow: var(--bayang-2); }
.mozaik-kecil { position: absolute; left: 0; bottom: 0; display: block; width: 46%; overflow: hidden; aspect-ratio: 1 / 1; border: 8px solid #fff; border-radius: 20px; box-shadow: var(--bayang-2); }
.mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mulus); }
.mozaik a:hover img { transform: scale(1.04); }

/* Partners --------------------------------------------------------------------------------------------- */
.bagian-mitra { padding: 72px 0; }
.judul-mitra { margin-bottom: 28px; font-size: 28px; }
.mitra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mitra { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 112px; padding: 16px; border: 1px solid var(--garis); border-radius: 16px; background: #fff; color: var(--tinta-2); text-align: center; text-decoration: none; }
.mitra img { max-width: 120px; max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter 200ms, opacity 200ms; }
.mitra:hover img, .mitra:focus-visible img { filter: none; opacity: 1; }
.mitra-nama { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 13px/1.3 var(--huruf); }
.mitra:not(:has(img)) .mitra-nama { color: var(--tinta); font: 700 15px/1.3 var(--huruf); }

/* PMB call to action --------------------------------------------------------------------------------------- */
.bagian-pmb { padding-top: 0; }
.pita-pmb { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; min-height: 360px; padding: 56px 64px; overflow: hidden; border-radius: 24px; color: #fff; }
.pita-pmb > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pita-pmb .pita-gelap { z-index: -1; }
.pita-pmb.blok-kampus { background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.pita-pmb-teks, .pita-pmb-aksi { position: relative; z-index: 1; }
.pil-garis { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 999px; font: 700 13px/1 var(--huruf); }
.pil-garis .titik { background: var(--warna-aksen); }
.pita-pmb h2 { margin-top: 16px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.2; }
.pita-pmb-tanggal { margin-top: 12px; font-size: 17px; }
.pita-pmb.gelap .pita-pmb-tanggal { color: #e6eaf0; }
.pita-pmb-aksi { display: grid; gap: 12px; }
.pita-pmb-aksi .tombol { min-height: 52px; }

/* Inner pages ------------------------------------------------------------------------------------------ */
.blok-kampus { background: var(--warna-kampus); color: var(--warna-kampus-di-atas); }
.kepala-halaman { position: relative; overflow: hidden; padding: 48px 0 64px; border-bottom: 4px solid var(--warna-aksen); }
.kepala-halaman.menindih { padding-bottom: 96px; }
.kepala-halaman-isi { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.kepala-halaman h1 { max-width: 24ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.12; }
.keterangan-halaman { max-width: 60ch; margin-top: 12px; font-size: 18px; line-height: 1.55; }
/* photo head (albums): the photo under the transparent header, text bottom-aligned on a scrim that is >= .66 everywhere */
.kepala-foto { display: flex; align-items: flex-end; min-height: 380px; padding: calc(var(--kepala-tampak) + 48px) 0 48px; background: var(--malam); color: #fff; }
.kepala-foto .kepala-gambar { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.kepala-foto::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgb(8 12 20 / .88) 0, rgb(8 12 20 / .66) 55%, rgb(8 12 20 / .66) 100%); }
.kepala-foto .kepala-halaman-isi { width: 100%; }
.jejak ol { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font: 500 14px/1.4 var(--huruf); }
.jejak li { display: inline-flex; align-items: center; min-width: 0; }
.jejak a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.jejak a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jejak-pisah { flex: 0 0 12px; margin: 0 8px; }
.jejak [aria-current] { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 40ch; }
.jejak-kertas ol { color: var(--tinta-3); }
.kepala-tekstur { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); mix-blend-mode: multiply; opacity: .3; pointer-events: none; }
.kepala-slot { margin-top: 28px; max-width: 640px; }
.form-cari-kepala .kotak-input input { min-height: 52px; border: 0; }
.form-cari-kepala .tombol { min-height: 52px; }
.bilah-kategori { padding: 20px 0 0; }
.bilah-kategori .chip-baris { margin: 0; }
.pelat-logo { display: grid; place-items: center; width: 112px; height: 112px; padding: 12px; border-radius: 20px; background: #fff; }
.pelat-logo img { width: 100%; height: 100%; object-fit: contain; }
/* the first card after a head overlaps it */
.kartu-menindih { position: relative; z-index: 2; margin-top: -40px; padding: 20px 24px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: var(--bayang-3); }
.halaman-isi { padding-top: 56px; padding-bottom: 96px; }
.kosong { display: grid; justify-items: center; gap: 12px; }
.kosong-ikon { width: 40px; height: 40px; color: var(--tinta-3); }
.kosong h2 { margin: 0; }

/* news lists with a sidebar */
.tata-sisi { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.kolom-sisi, .artikel-sisi, .prodi-sisi { position: sticky; top: calc(var(--kepala-tampak) + 16px); display: grid; gap: 20px; align-self: start; }
.sisi-kartu { padding: 20px; border: 1px solid var(--garis); border-radius: 20px; background: #fff; }
.sisi-kartu h2 { margin-bottom: 14px; font-size: 18px; letter-spacing: -.01em; }
.sisi-kartu .kotak-input input { min-height: 48px; }
.chip-sisi { display: flex; flex-wrap: wrap; gap: 8px; }
.daftar-tanggal.ringkas { gap: 8px; }
.daftar-tanggal.ringkas .baris-tanggal { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 10px; border: 0; background: var(--kabut); }
.daftar-tanggal.ringkas .lencana-tanggal { width: 48px; height: 52px; }
.daftar-tanggal.ringkas .baris-judul { font-size: 15px; }
.sisi-banner img { width: 100%; border-radius: 16px; }
.grid-berita { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
.grid-berita.grid-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartu-mendatar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; margin-bottom: 48px; border-radius: 20px; }
.kartu-mendatar .kartu-gambar { border-radius: 20px; }
.kartu-mendatar time { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font: 500 14px/1.4 var(--huruf); }
.kartu-mendatar .kartu-judul { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 28px; line-height: 1.25; }
.kartu-mendatar .cuplikan { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; color: var(--tinta-2); font-size: 16px; line-height: 1.6; }
@media (hover: hover) { .kartu-mendatar:hover .kartu-gambar img { transform: scale(1.04); } }
.daftar-kategori { max-width: 880px; }
h2.baris-judul { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.baris-cuplikan { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tinta-2); font-size: 15px; line-height: 1.55; }
.paginasi ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.paginasi a { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--garis-kuat); border-radius: 12px; color: var(--tinta); font: 600 15px/1 var(--huruf); font-variant-numeric: tabular-nums; text-decoration: none; }
.paginasi a:hover { border-color: var(--warna-kampus); }
.paginasi .active a, .paginasi [aria-current] { background: var(--warna-kampus); border-color: var(--warna-kampus); color: var(--warna-kampus-di-atas); }

/* article */
.progres-baca { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; background: var(--warna-aksen); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.wadah.artikel-kepala { max-width: calc(880px + 2 * var(--tepi)); padding-top: 40px; }
.chip-kategori { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 16px; padding: 10px 14px; border: 1px solid var(--garis-kuat); border-radius: 8px; color: var(--warna-kampus-teks); font: 700 13px/1 var(--huruf); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.chip-kategori:hover { border-color: var(--warna-kampus); }
.artikel-kepala h1 { max-width: 28ch; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); line-height: 1.15; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; color: var(--tinta-3); font: 500 14px/1.4 var(--huruf); }
.artikel-meta span { display: inline-flex; align-items: center; gap: 6px; }
.bagikan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 32px; }
.bagikan a, .bagikan button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--garis); border-radius: 50%; background: #fff; color: var(--tinta); text-decoration: none; cursor: pointer; transition: border-color 160ms, color 160ms; }
.bagikan a:hover, .bagikan button:hover { border-color: var(--warna-kampus); color: var(--warna-kampus-teks); }
.bagikan-berlabel { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--garis); }
.bagikan-berlabel .eyebrow { flex: 1 0 100%; margin-bottom: 4px; }
.bagikan-berlabel a, .bagikan-berlabel button { display: inline-flex; gap: 8px; width: auto; padding: 0 16px; border-radius: 12px; font: 600 14px/1 var(--huruf); }
.bagikan [hidden] { display: none !important; }
.wadah.gambar-utama { max-width: calc(1120px + 2 * var(--tepi)); margin-bottom: 48px; }
.gambar-utama img { width: 100%; height: auto; border-radius: 20px; }
.artikel-tubuh { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 64px; justify-content: center; padding-bottom: 72px; }
.daftar-isi { padding: 20px; border: 1px solid var(--garis); border-radius: 20px; background: #fff; }
.daftar-isi summary { display: flex; align-items: center; min-height: 44px; color: var(--tinta-3); font: 700 13px/1.3 var(--huruf); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.daftar-isi ol { margin-top: 8px; }
.daftar-isi a { display: flex; align-items: center; min-height: 44px; padding: 6px 0 6px 14px; border-left: 3px solid var(--garis); color: var(--tinta-2); font-size: 15px; line-height: 1.4; text-decoration: none; }
.daftar-isi a:hover { color: var(--tinta); }
.daftar-isi a.aktif { border-left-color: var(--warna-kampus); color: var(--tinta); font-weight: 600; }
.daftar-isi-wadah, .halaman-sisi { display: block; }
.isi-artikel { font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
.isi-artikel > * + * { margin-top: 1.25em; }
.isi-artikel h2 { margin: 48px 0 16px; font-size: 26px; line-height: 1.25; scroll-margin-top: calc(var(--kepala-tampak) + 24px); }
.isi-artikel h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.3; }
.isi-artikel a { color: var(--warna-kampus-teks); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.isi-artikel ul, .isi-artikel ol { padding-left: 1.4em; list-style: revert; }
.isi-artikel blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--warna-kampus); color: var(--tinta-2); font-style: italic; }
.isi-artikel img { height: auto; border-radius: 12px; }
.isi-artikel figcaption { margin-top: 8px; color: var(--tinta-3); font-size: 14px; }
.isi-artikel iframe { max-width: 100%; border: 0; border-radius: 12px; }
.gulir-tabel { overflow-x: auto; border: 1px solid var(--garis); border-radius: 16px; }
.isi-artikel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.isi-artikel th { padding: 12px 16px; background: var(--kabut); color: var(--tinta-2); font: 700 13px/1.3 var(--huruf); letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.isi-artikel td { padding: 12px 16px; border-top: 1px solid var(--garis); vertical-align: top; }
.tentang-teks .isi-artikel { font-size: 17px; }

/* static page: contents list on the left when the page has three or more headings */
.halaman-statis { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }
.halaman-statis.ada-daftar-isi { grid-template-columns: 240px minmax(0, 760px); gap: 56px; }
.halaman-sisi { position: sticky; top: calc(var(--kepala-tampak) + 16px); align-self: start; }
.gambar-halaman img { width: auto; max-width: 100%; max-height: 560px; margin: 0 0 32px; border-radius: 20px; }

/* study programmes */
.saring-prodi, .saring-berkas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; }
.saring-prodi .kotak-input input, .saring-berkas .kotak-input input { min-height: 52px; }
.chip-jenjang { margin: 0; }
.saring-hasil { grid-column: 1 / -1; color: var(--tinta-2); font-size: 14px; }
/* empty, the live region stays in the page (not display:none) so its first message is announced */
.saring-hasil:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.indeks-fakultas { position: sticky; top: var(--kepala-tampak); z-index: 1; margin-top: 24px; padding: 12px 0; border-bottom: 1px solid var(--garis); background: rgba(255, 255, 255, .92); }
@supports (backdrop-filter: blur(8px)) { .indeks-fakultas { backdrop-filter: blur(8px); } }
.indeks-fakultas .chip-baris { margin: 0; }
.indeks-fakultas a[hidden] { display: none; }
.halaman-prodi { padding-top: 8px; }
.kelompok-prodi { scroll-margin-top: calc(var(--kepala-tampak) + 80px); }
.kelompok-prodi h2 { margin: 48px 0 20px; font-size: 24px; }
.jumlah-kecil { margin-left: 8px; color: var(--tinta-3); font: 500 14px/1 var(--huruf); letter-spacing: 0; }
.kartu-fakta { padding: 28px; }
.fakta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakta div { padding: 0 20px; border-left: 1px solid var(--garis); }
.fakta div:first-child { padding-left: 0; border-left: 0; }
.fakta dt { color: var(--tinta-3); font: 600 13px/1.3 var(--huruf); letter-spacing: .06em; text-transform: uppercase; }
.fakta dd { margin-top: 6px; font: 700 18px/1.4 var(--huruf); }
.prodi-tubuh { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.chip-bagian { position: sticky; top: var(--kepala-tampak); z-index: 1; margin: 0 0 24px; padding: 12px 0; background: rgba(255, 255, 255, .94); }
.prodi-bagian { scroll-margin-top: calc(var(--kepala-tampak) + 80px); }
.prodi-bagian + .prodi-bagian { margin-top: 48px; }
.prodi-bagian h2 { margin-bottom: 16px; padding-left: 16px; border-left: 4px solid var(--warna-kampus); font-size: 26px; }
.kartu-ajakan { position: relative; overflow: hidden; padding: 28px; border-radius: 20px; }
.kartu-ajakan h2 { margin-bottom: 18px; font-size: 22px; }
.kartu-ajakan .tombol { width: 100%; }
.ajakan-judul { margin-top: 20px; font: 700 13px/1.3 var(--huruf); letter-spacing: .1em; text-transform: uppercase; }
.ajakan-kontak { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.ajakan-kontak:hover span { text-decoration: underline; text-underline-offset: 3px; }
.prodi-lain a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--garis); color: var(--tinta); text-decoration: none; }
.prodi-lain li:first-child a { border-top: 0; }
.prodi-lain a:hover .prodi-lain-nama { text-decoration: underline; text-underline-offset: 3px; }

/* albums */
.grid-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.kartu-album { position: relative; display: grid; align-content: end; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--malam); color: #fff; }
.kartu-album > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mulus); }
/* the scrim covers the card from the bottom up to 70%, so the title and caption always sit on alpha >= .72 */
.kartu-album::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgb(8 12 20 / .88) 0, rgb(8 12 20 / .72) 45%, rgb(8 12 20 / 0) 75%); pointer-events: none; }
.kartu-album .isi { position: relative; z-index: 1; padding: 20px; }
.kartu-album .kartu-judul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; line-height: 1.3; }
.kartu-album p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: #e6eaf0; font-size: 14px; }
@media (hover: hover) { .kartu-album:hover > img { transform: scale(1.06); } }
.tautan-kembali { margin-bottom: 20px; }
.galeri { columns: 3 280px; column-gap: 12px; }
.galeri li { margin-bottom: 12px; break-inside: avoid; }
/* four photos or fewer balance as two columns */
.galeri-sedikit { columns: 2; }
.galeri-foto { display: block; overflow: hidden; border-radius: 12px; background: var(--kabut); }
.galeri-foto img { width: 100%; height: auto; transition: transform 300ms var(--mulus); }
@media (hover: hover) { .galeri-foto:hover img { transform: scale(1.03); } }
.kotak-cahaya { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
.kotak-cahaya[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.kotak-cahaya::backdrop { background: rgb(8 12 20 / .94); }
.kotak-cahaya img { width: auto; height: auto; max-width: 90vw; max-height: 100%; margin: auto; object-fit: contain; border-radius: 8px; }
.kotak-cahaya-atas, .kotak-cahaya-bawah { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.kotak-cahaya-bawah { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.kotak-cahaya [data-hitung] { font: 600 15px/1 var(--huruf); }
.kotak-cahaya .tombol-bulat { width: 52px; height: 52px; background: rgba(255, 255, 255, .12); }
.kotak-cahaya a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
.kotak-cahaya :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #0b1220; }

/* downloads */
.tabel-unduhan { width: 100%; border-collapse: collapse; }
.tabel-unduhan th { padding: 12px 16px; background: var(--kabut); color: var(--tinta-2); font: 700 13px/1.3 var(--huruf); letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.tabel-unduhan td { padding: 14px 16px; border-top: 1px solid var(--garis); vertical-align: middle; }
.tabel-unduhan .aksi { text-align: right; }
.berkas-nama { display: inline-flex; align-items: center; gap: 12px; }
.berkas-keterangan { color: var(--tinta-2); font-size: 15px; }
.berkas-tanggal { white-space: nowrap; color: var(--tinta-3); font-size: 15px; }
.lencana-berkas { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 48px; height: 32px; padding: 0 8px; border-radius: 8px; background: #eef0f3; color: #344054; font: 800 13px/1 var(--huruf); }
.jenis-pdf { background: #fdecea; color: #b42318; }
.jenis-doc { background: #e8effd; color: #1d4ed8; }
.jenis-xls { background: #e6f6ee; color: #067647; }
.jenis-ppt { background: #fff1e6; color: #b54708; }
.jenis-zip { background: #f1ebff; color: #6d28d9; }
.jenis-gambar { background: #e3f7f7; color: #0f766e; }
.tabel-unduhan .tombol { min-height: 44px; white-space: nowrap; }

/* not found */
.galat { position: relative; display: grid; place-items: center; min-height: 70vh; padding: 64px 0 96px; overflow: hidden; text-align: center; }
.galat::before { content: ""; position: absolute; width: 640px; height: 640px; top: -260px; right: -200px; border: 1.5px solid var(--kabut); border-radius: 50%; }
.galat-isi { position: relative; display: grid; justify-items: center; gap: 16px; }
.galat-kode { color: var(--warna-kampus-teks); font: 800 160px/1 var(--huruf); letter-spacing: -.04em; }
.galat h1 { font-size: 40px; }
.galat-teks { max-width: 52ch; color: var(--tinta-2); font-size: 17px; }
.form-cari-galat { width: 100%; max-width: 520px; }
.form-cari-galat .kotak-input input { min-height: 52px; }
.form-cari-galat .tombol { min-height: 52px; }
.galat-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
/* Footer, bottom bar, toast -------------------------------------------------------------------------- */
.kaki { padding: 80px 0 0; border-top: 4px solid var(--warna-aksen); background: var(--malam); color: var(--teks-malam); }
.kaki-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.kaki-logo { max-height: 56px; width: auto; margin-bottom: 14px; }
.kaki-nama { color: #fff; font: 800 20px/1.3 var(--huruf); }
.kaki address { display: grid; gap: 4px; margin-top: 16px; font-style: normal; }
.kaki-alamat { display: flex; gap: 10px; color: var(--teks-malam-2); font-size: 15px; line-height: 1.7; }
.kaki-alamat svg { flex: 0 0 16px; margin-top: 5px; }
.kaki address a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--teks-malam); font-size: 15px; text-decoration: none; }
.kaki address a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.kaki-sosial { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.kaki-sosial a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; transition: background-color 160ms, color 160ms; }
.kaki-sosial a:hover { background: var(--warna-aksen); color: var(--warna-aksen-di-atas); }
.kaki h2 { margin-bottom: 12px; color: #fff; font: 700 13px/1.3 var(--huruf); letter-spacing: .12em; text-transform: uppercase; }
.kaki nav li a, .kaki nav li > span { display: inline-flex; align-items: center; min-height: 44px; color: var(--teks-malam); font-size: 15px; line-height: 1.4; text-decoration: none; }
.kaki nav li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.kaki nav li ul { margin-left: 12px; }
.kaki .ikon-luar { color: var(--teks-malam-2); }
.kaki-semua { font-weight: 700; }
.kaki-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); color: var(--teks-malam-2); font-size: 14px; }
.ke-atas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--teks-malam); font-weight: 600; text-decoration: none; }
.ke-atas:hover span { text-decoration: underline; }
.bilah-daftar { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 12px 20px; border-radius: 999px; background: var(--malam); color: #fff; box-shadow: var(--bayang-3); font: 600 14px/1.3 var(--huruf); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 200ms, transform 200ms; }
.toast.tampil { opacity: 1; transform: translate(-50%, 0); }

/* Motion ------------------------------------------------------------------------------------------------- */
@keyframes panel-masuk { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes masuk { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes isi-segmen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes denyut { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@keyframes kb1 { from { transform: scale(1); } to { transform: scale(var(--kb, 1.08)) translate(-1%, -1%); } }
@keyframes kb2 { from { transform: scale(var(--kb, 1.08)) translate(1%, 0); } to { transform: scale(1); } }
@keyframes kb3 { from { transform: scale(1); } to { transform: scale(var(--kb, 1.08)) translate(1.2%, .8%); } }
@keyframes kb4 { from { transform: scale(calc(var(--kb, 1.08) - .02)) translate(0, -1%); } to { transform: scale(1); } }
@keyframes kb-sekali { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-masuk { animation: masuk 600ms var(--keluar) both; animation-delay: calc(80ms * var(--i, 0)); }
  .js .kartu-sambutan { animation: masuk 600ms var(--keluar) 320ms both; }
  .titik::after { animation: denyut 1600ms ease-out 3; }
  .hero-slide.gerak img { animation: kb1 7900ms linear both; will-change: transform; }
  .hero-slide.gerak[data-kb="2"] img { animation-name: kb2; }
  .hero-slide.gerak[data-kb="3"] img { animation-name: kb3; }
  .hero-slide.gerak[data-kb="4"] img { animation-name: kb4; }
  .hero--foto .hero-slide.gerak img { animation: kb-sekali 20000ms ease-out forwards; }
  .hero.dijeda .hero-slide.gerak img { animation-play-state: paused; }
  .segmen.aktif.jalan span::after { animation: isi-segmen 7000ms linear forwards; }
  .hero.dijeda .segmen.aktif.jalan span::after { animation-play-state: paused; }
  html.gerak-siap [data-muncul] { transition: opacity 640ms var(--mulus), transform 640ms var(--mulus); transition-delay: calc(var(--i, 0) * 70ms); }
  html.gerak-siap [data-muncul]:not(.tampak) { opacity: 0; transform: translateY(24px); }
  html.gerak-siap .bagian:not(.tampak) .eyebrow::before, html.gerak-siap .pita-angka:not(.tampak) .eyebrow::before { transform: scaleX(0); }
  @media (hover: hover) { .ubin:hover .ubin-ikon { transform: translateY(-4px) rotate(-4deg); } }
  .mozaik.tampak .mozaik-besar { animation: bingkai 700ms var(--mulus) both; }
}
@keyframes bingkai { from { clip-path: inset(8% 8% 8% 8% round 24px); } to { clip-path: inset(0 round 24px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .segmen.aktif span::after { transform: scaleX(1); }
  .kartu-berita:hover .kartu-gambar img, .kartu-sorot:hover > img, .kartu-album:hover > img, .grid-foto a:hover img, .mozaik a:hover img { transform: none; }
}

/* Responsive -------------------------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .tata-sisi, .artikel-tubuh, .prodi-tubuh { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kolom-sisi, .artikel-sisi, .prodi-sisi { position: static; }
  .mega-isi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .halaman-statis.ada-daftar-isi { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .halaman-sisi { position: static; }
  .fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .fakta div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .grid-berita.grid-tiga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu-mendatar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kartu-mendatar .kartu-judul { font-size: 22px; }
  .hero { min-height: clamp(560px, 92svh, 780px); --kb: 1.05; }
  .hero-scrim { background: linear-gradient(180deg, rgb(8 12 20 / .66) 0, rgb(8 12 20 / .66) 64px, rgb(8 12 20 / 0) 180px); }
  .hero-isi { padding-top: calc(var(--kepala-tampak) + 72px); padding-bottom: 48px; background: linear-gradient(to top, rgb(8 12 20 / .72) 0, rgb(8 12 20 / .72) calc(100% - 120px), rgb(8 12 20 / 0) 100%); }
  .ada-sambutan .hero-isi { padding-bottom: 0; }
  .hero-grid, .hero-grid--lebar { grid-template-columns: minmax(0, 1fr); }
  .hero-sisi { justify-self: stretch; align-items: stretch; max-width: none; gap: 24px; margin-top: 28px; }
  .hero-kontrol { align-items: stretch; }
  .hero-keterangan { align-self: flex-start; }
  .hero-tombol { justify-content: space-between; }
  .hero-segmen { flex: 1 1 auto; }
  .segmen { flex: 1 1 0; width: auto; }
  .segmen span { width: 100%; max-width: 40px; }
  .ada-sambutan .kartu-sambutan { margin-bottom: -56px; }
  .kartu-sambutan { padding: 20px; }
  .foto-pimpinan { flex-basis: 64px; width: 64px; height: 64px; }
  .kutipan-sambutan { font-size: 15.5px; }
  .kutipan-sambutan p { -webkit-line-clamp: 5; }
  .link-cepat-kartu { margin-top: 24px; padding: 12px 8px; border: 1px solid var(--garis); border-radius: 20px; box-shadow: var(--bayang-1); }
  .ada-sambutan .link-cepat { padding-top: 56px; }
  body:not(.ada-sambutan) .hero--sorot ~ .link-cepat .link-cepat-kartu, body:not(.ada-sambutan) .hero--foto ~ .link-cepat .link-cepat-kartu { margin-top: -40px; }
  .ubin-daftar { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .kabar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .kartu-sorot, .kabar-grid.tunggal .kartu-sorot { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .kabar-lain > .kartu-ringkas, .kabar-lain > .kartu-berita:not(.kartu-ringkas) { grid-column: auto; margin-top: 0; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .tentang, .tentang.tanpa-foto { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mozaik-besar { width: 86%; }
  .mozaik-kecil { width: 44%; }
  .pita-pmb { grid-template-columns: minmax(0, 1fr); }
  .kaki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilah-daftar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 8px var(--tepi) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--garis); background: #fff; box-shadow: var(--bayang-3); transform: translateY(110%); transition: transform 240ms var(--mulus); }
  .bilah-daftar.tampil { transform: none; }
  .bilah-daftar .tombol { width: 100%; min-height: 48px; }
  body.ada-bilah .kaki { padding-bottom: 72px; }
  html.ada-bilah { scroll-padding-bottom: 80px; }
  body.ada-bilah .toast { bottom: 96px; }
}
@media (max-width: 767px) {
  .kepala-halaman-isi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kepala-aksesori { order: -1; }
  .pelat-logo { width: 72px; height: 72px; padding: 8px; border-radius: 14px; }
  .saring-prodi, .saring-berkas { grid-template-columns: minmax(0, 1fr); }
  .chip-jenjang { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* the download table becomes one card per file */
  .tabel-unduhan thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabel-unduhan, .tabel-unduhan tbody { display: block; }
  .tabel-unduhan tr { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--garis); }
  .tabel-unduhan td { display: block; padding: 0; border: 0; text-align: left; }
  .tabel-unduhan td[data-label]::before { content: attr(data-label); display: block; color: var(--tinta-2); font: 600 13px/1.4 var(--huruf); }
  .tabel-unduhan td:first-child::before { content: none; }
  .tabel-unduhan td:empty { display: none; }
  .tabel-unduhan .aksi { margin-top: 6px; text-align: left; }
  .tabel-unduhan .tombol { width: 100%; }
  .pita-pmb-aksi .tombol { width: 100%; }
}
@media (max-width: 639px) {
  .kepala-bagian { margin-bottom: 28px; }
  .merek img { max-height: 36px; max-width: 160px; }
  .hero-label { font-size: 13px; }
  .hero-lead { font-size: 17px; }
  .hero-aksi .tombol { flex: 1 1 220px; }
  .link-cepat { padding-bottom: 40px; }
  .ubin-daftar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ubin { min-height: 96px; padding: 10px 2px; gap: 8px; }
  .ubin-ikon { width: 52px; height: 52px; border-radius: 15px; }
  .ubin-ikon svg { width: 24px; height: 24px; }
  .ubin-nama { font-size: 13px; line-height: 1.25; }
  .ubin-daftar.dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kabar-grid { grid-template-columns: minmax(0, 1fr); }
  .kartu-sorot { aspect-ratio: 4 / 5; }
  .kartu-sorot .isi { padding: 120px 20px 20px; background: linear-gradient(to top, rgb(8 12 20 / .80) 0, rgb(8 12 20 / .80) calc(100% - 120px), rgb(8 12 20 / 0) 100%); }
  .kartu-sorot .cuplikan, .kartu-berita .cuplikan { display: none; }
  /* the other news become a sideways strip of cards, the next one peeking in */
  .kabar-lain { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 300px); gap: 12px; margin-inline: calc(-1 * var(--tepi)); padding: 4px var(--tepi) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tepi); overscroll-behavior-x: contain; scrollbar-width: thin; }
  .kabar-lain > * { scroll-snap-align: start; }
  .kartu-berita .kartu-judul { font-size: 17px; }
  .tombol-ponsel { display: flex; width: 100%; margin-top: 12px; }
  .info-grid.tunggal .daftar-tanggal { grid-template-columns: minmax(0, 1fr); }
  .chip-baris { flex-wrap: nowrap; margin-inline: calc(-1 * var(--tepi)); padding: 0 var(--tepi) 4px; overflow-x: auto; scrollbar-width: none; }
  .chip { min-height: 44px; }
  .bilah-kategori .chip-baris { flex-wrap: nowrap; margin-inline: calc(-1 * var(--tepi)); padding: 0 var(--tepi) 4px; overflow-x: auto; scrollbar-width: none; }
  .form-cari-kepala .tombol { padding: 0 16px; }
  .grid-prodi { grid-template-columns: minmax(0, 1fr); }
  .kartu-prodi { min-height: 140px; }
  .pita-angka { min-height: 0; }
  .angka-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angka-daftar > div, .angka-daftar > div:first-child { padding: 20px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  .angka-daftar > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .2); }
  .angka-daftar dd { font-size: 40px; }
  .bagian-mitra { padding: 48px 0; }
  .pita-pmb { min-height: 0; padding: 32px 24px; }
  .kaki { padding-top: 56px; }
  .kaki-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kepala-halaman { padding: 32px 0 44px; }
  .kepala-halaman.menindih { padding-bottom: 64px; }
  .kepala-foto { min-height: 280px; padding: calc(var(--kepala-tampak) + 32px) 0 32px; }
  .kartu-menindih { margin-top: -24px; padding: 16px; }
  .grid-berita.grid-tiga { grid-template-columns: minmax(0, 1fr); }
  .geser-ponsel { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 300px); grid-template-columns: none !important; gap: 12px; margin-inline: calc(-1 * var(--tepi)); padding: 4px var(--tepi) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tepi); overscroll-behavior-x: contain; }
  .geser-ponsel > * { scroll-snap-align: start; }
  .fakta { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fakta div, .fakta div:first-child { padding: 0; border-left: 0; }
  .galeri { columns: 2; column-gap: 8px; }
  .galeri li { margin-bottom: 8px; }
  .grid-album { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .galat-kode { font-size: 96px; }
  .galat h1 { font-size: 28px; }
  .kotak-cahaya-bawah { justify-content: center; }
  .hero--warna::before, .kepala-halaman.blok-kampus::before, .pita-pmb.blok-kampus::before, .hero--warna::after, .kepala-halaman.blok-kampus::after, .pita-pmb.blok-kampus::after { transform: scale(.6); transform-origin: top right; }
  .grid-berita { grid-template-columns: minmax(0, 1fr); }
  .isi-artikel { font-size: 17px; line-height: 1.7; }
}
@media (max-width: 479px) {
  .hero-tombol { flex-wrap: wrap; row-gap: 8px; }
  .hero-segmen { flex-basis: 100%; }
  .segmen { min-width: 44px; }
  .hero-keterangan, .hero-hitung { display: none; }
}
@media (max-width: 419px) {
  /* three columns keep long one-word labels such as "Perpustakaan" whole */
  .ubin-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .mozaik-kecil { display: none; }
}
@media print {
  .kepala, .laci, .bilah-daftar, .hero-kontrol, .toast, .link-cepat, .chip-baris, .tombol-semua-prodi, #tema-pratinjau { display: none !important; }
  body:not(.kepala-transparan) main { padding-top: 0; }
  .hero, .pita-angka, .kepala-halaman, .pita-pmb, .kaki { background: #fff !important; color: #000 !important; min-height: 0; }
  .hero-media, .hero-scrim, .pita-foto, .pita-warna, .pita-gelap { display: none !important; }
  .hero *, .pita-angka *, .kepala-halaman *, .pita-pmb *, .kaki * { color: #000 !important; text-shadow: none !important; }
  .hero-isi { background: none; padding: 24px 0; }
}