/*
 * Sistem tampilan halaman mahasiswa: KRS dan Keuangan.
 *
 * Ditulis sebagai berkas terpisah, bukan <style> di dalam Blade, supaya kedua
 * halaman memakai bahasa rupa yang sama dan bisa di-cache peramban. Semua warna
 * lewat custom property agar penyesuaian cukup di satu tempat.
 *
 * Template dasarnya Bootstrap 4 (style.min.css). Kelas di sini sengaja
 * berawalan mu- (mahasiswa-ui) supaya tidak pernah bentrok dengan kelas
 * bawaan template, yang beberapa di antaranya dipakai skrip pihak ketiga.
 *
 * Animasi: seluruhnya dimatikan pada prefers-reduced-motion. Gerakan di sini
 * hanya pemanis; tidak ada informasi yang HANYA tersampaikan lewat gerak,
 * sehingga mematikannya tidak menghilangkan apa pun.
 */

:root {
    --mu-biru: #1e6fd9;
    --mu-biru-tua: #14508f;
    --mu-biru-muda: #eaf2fd;
    --mu-hijau: #12805c;
    --mu-hijau-muda: #e6f6f0;
    --mu-kuning: #a86a00;
    --mu-kuning-muda: #fdf3e2;
    --mu-merah: #c62828;
    --mu-merah-muda: #fdecec;
    --mu-teks: #1f2937;
    --mu-teks-lemah: #6b7280;
    --mu-garis: #e5e7eb;
    --mu-latar: #ffffff;
    --mu-latar-lembut: #f8fafc;
    --mu-bayang: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
    --mu-bayang-naik: 0 8px 24px rgba(16, 24, 40, .12);
    --mu-lengkung: 12px;

    /* --- Tambahan untuk kulit aplikasi (mahasiswa-shell.css) ---
     *
     * Ungu dan toska HANYA dipakai sebagai warna hiasan: aurora latar,
     * gradasi tombol, cincin foto. Keduanya tidak pernah menjadi satu-satunya
     * pembawa arti — status tetap disampaikan biru/hijau/kuning/merah yang
     * sudah ada di atas, sebab palet itulah yang punya pasangan warna muda
     * dengan rasio kontras teruji. */
    --mu-ungu: #6d5ae6;
    --mu-toska: #0e9aa7;
    --mu-kanvas: #f2f6fc;
    --mu-gradasi-utama: linear-gradient(135deg, #1e6fd9 0%, #2f8fe8 48%, #6d5ae6 100%);
    --mu-lengkung-besar: 18px;

    /* Lengkung waktu dijadikan token supaya seluruh gerak di portal memakai
       laju yang sama. --mu-lentur untuk perpindahan biasa, --mu-pantul untuk
       yang perlu terasa hidup (centang, ikon, tombol melayang). */
    --mu-lentur: cubic-bezier(.22, .61, .36, 1);
    --mu-pantul: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Kerangka ---------- */

.mu-panel {
    background: var(--mu-latar);
    border: 1px solid var(--mu-garis);
    border-radius: var(--mu-lengkung);
    box-shadow: var(--mu-bayang);
    overflow: hidden;
}

.mu-panel + .mu-panel {
    margin-top: 1rem;
}

/*
 * Varian untuk panel yang memuat .mu-lengket.
 *
 * overflow:hidden di atas dipakai supaya sudut .mu-panel__kepala ikut
 * terpangkas mengikuti lengkung panel. Tetapi overflow apa pun pada leluhur
 * menjadikannya kotak gulung terdekat bagi position:sticky di dalamnya —
 * dan kotak itu tidak pernah bergulir, sehingga bilahnya tidak pernah
 * menempel. Di sini pemangkasan dilepas, dan lengkung kepalanya diberikan
 * langsung sebagai ganti.
 */
.mu-panel--lengket {
    overflow: visible;
}

.mu-panel--lengket > .mu-panel__kepala {
    border-top-left-radius: var(--mu-lengkung);
    border-top-right-radius: var(--mu-lengkung);
}

.mu-panel__kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mu-garis);
    background: var(--mu-latar-lembut);
}

.mu-panel__judul {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mu-teks);
    letter-spacing: .01em;
}

.mu-panel__sub {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--mu-teks-lemah);
}

.mu-panel__isi {
    padding: 1.25rem;
}

.mu-panel__isi--rapat {
    padding: .75rem;
}

/* ---------- Kop identitas ---------- */

.mu-kop {
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, var(--mu-biru) 0%, var(--mu-biru-tua) 100%);
    border-radius: var(--mu-lengkung);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--mu-bayang);
    overflow: hidden;
}

/* Lingkaran samar sebagai tekstur; murni hiasan sehingga disembunyikan
   dari pembaca layar lewat pseudo-element, bukan elemen sungguhan. */
.mu-kop::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

/* Baris sambutan di atas nama; hanya Dashboard yang mengirimnya. */
.mu-kop__sapa {
    margin: 0 0 .15rem;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.mu-kop__nama {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.mu-kop__meta {
    margin-top: .2rem;
    font-size: .85rem;
    opacity: .9;
}

.mu-kop__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .65rem 1.25rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.mu-kop__label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
}

.mu-kop__nilai {
    display: block;
    font-size: .92rem;
    font-weight: 600;
    margin-top: .1rem;
    word-break: break-word;
}

/* ---------- Lencana ---------- */

.mu-lencana {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.mu-lencana--biru   { background: var(--mu-biru-muda);   color: var(--mu-biru-tua); }
.mu-lencana--hijau  { background: var(--mu-hijau-muda);  color: var(--mu-hijau); }
.mu-lencana--kuning { background: var(--mu-kuning-muda); color: var(--mu-kuning); }
.mu-lencana--merah  { background: var(--mu-merah-muda);  color: var(--mu-merah); }
.mu-lencana--abu    { background: #f1f3f5;               color: var(--mu-teks-lemah); }

/* Titik berdenyut untuk keadaan yang masih menunggu tindakan. */
.mu-titik {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: mu-denyut 1.5s ease-in-out infinite;
}

@keyframes mu-denyut {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}

/* ---------- Kartu ringkasan angka ---------- */

.mu-ringkas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .85rem;
}

.mu-ringkas__item {
    background: var(--mu-latar);
    border: 1px solid var(--mu-garis);
    border-left: 4px solid var(--mu-biru);
    border-radius: 10px;
    padding: .85rem 1rem;
    box-shadow: var(--mu-bayang);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mu-ringkas__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--mu-bayang-naik);
}

.mu-ringkas__item--hijau { border-left-color: var(--mu-hijau); }
.mu-ringkas__item--merah { border-left-color: var(--mu-merah); }
.mu-ringkas__item--kuning { border-left-color: var(--mu-kuning); }

.mu-ringkas__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mu-teks-lemah);
}

.mu-ringkas__nilai {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mu-teks);
    line-height: 1.2;
    margin-top: .1rem;
}

.mu-ringkas__ket {
    font-size: .75rem;
    color: var(--mu-teks-lemah);
}

/* ---------- Bilah kemajuan ---------- */

.mu-bar {
    height: 8px;
    background: #eef1f5;
    border-radius: 999px;
    overflow: hidden;
    margin-top: .5rem;
}

.mu-bar__isi {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mu-biru), #3d92f5);
    /* Lebar akhir diberikan lewat inline style oleh Blade; animasinya
       mengembang dari nol saat halaman dibuka. */
    animation: mu-isi .5s cubic-bezier(.22, .61, .36, 1) both;
}

.mu-bar__isi--penuh { background: linear-gradient(90deg, var(--mu-hijau), #1aa87a); }
.mu-bar__isi--lebih { background: linear-gradient(90deg, var(--mu-merah), #e05252); }

@keyframes mu-isi {
    from { width: 0 !important; }
}

/* ---------- Daftar matakuliah / tagihan sebagai kartu ---------- */

.mu-daftar {
    display: grid;
    gap: .7rem;
}

.mu-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .9rem 1rem;
    background: var(--mu-latar);
    border: 1px solid var(--mu-garis);
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mu-item:hover {
    border-color: #cfd9e6;
    box-shadow: var(--mu-bayang);
}

.mu-item__kode {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--mu-biru-muda);
    color: var(--mu-biru-tua);
    font-weight: 700;
    font-size: .95rem;
}

.mu-item__isi { flex: 1 1 auto; min-width: 0; }

.mu-item__nama {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mu-teks);
    line-height: 1.35;
}

.mu-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}

.mu-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: var(--mu-latar-lembut);
    border: 1px solid var(--mu-garis);
    font-size: .74rem;
    color: var(--mu-teks-lemah);
    /* nowrap supaya rentang jam "08.00 - 10.00" tidak terpotong di tengah,
       tetapi dibatasi lebar induknya supaya satu isi panjang tidak melebarkan
       kartunya melewati layar. */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Untuk isi yang memang boleh berbaris lebih dari satu — misalnya daftar
   pengajar, yang bisa memuat beberapa nama sekaligus. Tanpa ini, satu kelas
   berdosen dua membuat kartunya meluber keluar layar ponsel. */
.mu-chip--wrap {
    white-space: normal;
    overflow: visible;
    text-align: left;
}

.mu-item__aksi { flex: 0 0 auto; }

/* ---------- Panel bernuansa hijau: matakuliah yang sudah diambil ----------
 *
 * Di halaman tambah KRS ada dua daftar berdampingan — yang sudah diambil dan
 * yang bisa dipilih — dan keduanya dulu tampak serupa. Nuansa hijau memisahkan
 * keduanya sekali lihat.
 *
 * Warnanya sengaja sangat muda (#f2fbf7 / #eaf7f1). Hijau pekat dengan teks
 * gelap di atasnya melelahkan mata pada blok sebesar ini, dan rasio kontras
 * teks utama terhadap latar ini tetap di atas 12:1 sehingga tetap nyaman
 * dibaca lama.
 */

.mu-panel--hijau {
    border-color: #bfe6d5;
    background: #f7fdfa;
}

.mu-panel--hijau .mu-panel__kepala {
    background: #eaf7f1;
    border-bottom-color: #cdeade;
}

.mu-panel--hijau .mu-panel__judul { color: #0d6647; }
.mu-panel--hijau .mu-panel__sub { color: #3f7a65; }

.mu-panel--hijau .mu-item {
    background: #fff;
    border-color: #cdeade;
}

.mu-panel--hijau .mu-item:hover { border-color: #9fd8bf; }

.mu-panel--hijau .mu-item__kode {
    background: var(--mu-hijau-muda);
    color: var(--mu-hijau);
}

.mu-panel--hijau .mu-chip {
    background: #f2fbf7;
    border-color: #d7eee4;
    color: #3f7a65;
}

.mu-panel--hijau .mu-bar { background: #dcf0e7; }

/* ---------- Kartu pilihan (ambil KRS) ---------- */

.mu-pilih {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .9rem 1rem;
    background: var(--mu-latar);
    border: 2px solid var(--mu-garis);
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}

.mu-pilih:hover {
    border-color: #b9cdea;
    box-shadow: var(--mu-bayang);
}

.mu-pilih:active { transform: scale(.995); }

/* Kotak centang asli tetap ada dan tetap terfokus keyboard — hanya
   digeser ke belakang penanda buatan, bukan display:none, supaya tetap
   terbaca pembaca layar dan tetap bisa di-Tab. */
.mu-pilih__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mu-pilih__tanda {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: .1rem;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mu-pilih__tanda::after {
    content: "\2713";
    transform: scale(0);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.mu-pilih__input:checked ~ .mu-pilih__tanda {
    background: var(--mu-biru);
    border-color: var(--mu-biru);
}

.mu-pilih__input:checked ~ .mu-pilih__tanda::after { transform: scale(1); }

.mu-pilih__input:checked ~ .mu-item__isi .mu-item__nama { color: var(--mu-biru-tua); }

.mu-pilih:has(.mu-pilih__input:checked) {
    border-color: var(--mu-biru);
    background: var(--mu-biru-muda);
}

/* Cadangan untuk peramban tanpa :has() — kelas ditambahkan skrip. */
.mu-pilih.is-terpilih {
    border-color: var(--mu-biru);
    background: var(--mu-biru-muda);
}

.mu-pilih__input:focus-visible ~ .mu-pilih__tanda {
    outline: 3px solid rgba(30, 111, 217, .35);
    outline-offset: 2px;
}

/* ---------- Bilah simpan lengket ---------- */

.mu-lengket {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--mu-garis);
    border-radius: var(--mu-lengkung);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
}

.mu-lengket__info {
    font-size: .88rem;
    color: var(--mu-teks-lemah);
}

.mu-lengket__angka {
    font-weight: 700;
    color: var(--mu-teks);
}

/* ---------- Tombol ---------- */

.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease, color .18s ease;
}

.mu-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--mu-bayang); }
.mu-btn:active { transform: translateY(0); }
.mu-btn:disabled, .mu-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.mu-btn--utama   { background: var(--mu-biru); color: #fff; }
.mu-btn--utama:hover { background: var(--mu-biru-tua); color: #fff; }
.mu-btn--hijau   { background: var(--mu-hijau); color: #fff; }
.mu-btn--hijau:hover { background: #0d6647; color: #fff; }
.mu-btn--merah   { background: var(--mu-merah); color: #fff; }
.mu-btn--merah:hover { background: #a31f1f; color: #fff; }
.mu-btn--garis   { background: #fff; color: var(--mu-teks); border-color: #d5dbe3; }
.mu-btn--garis:hover { background: var(--mu-latar-lembut); color: var(--mu-teks); }
.mu-btn--kecil   { padding: .3rem .65rem; font-size: .78rem; }

/* ---------- Keadaan kosong ---------- */

.mu-kosong {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mu-teks-lemah);
}

.mu-kosong__ikon {
    font-size: 2.6rem;
    line-height: 1;
    color: #cbd5e1;
    margin-bottom: .6rem;
}

.mu-kosong__judul {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mu-teks);
    margin: 0 0 .25rem;
}

.mu-kosong__ket { font-size: .85rem; margin: 0; }

/* ---------- Tabel yang tetap terbaca di layar sempit ---------- */

.mu-tabel-bungkus { overflow-x: auto; }

.mu-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.mu-tabel th,
.mu-tabel td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--mu-garis);
    text-align: left;
    vertical-align: middle;
}

.mu-tabel thead th {
    background: var(--mu-latar-lembut);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mu-teks-lemah);
    font-weight: 700;
    white-space: nowrap;
}

.mu-tabel tbody tr { transition: background .15s ease; }
.mu-tabel tbody tr:hover { background: var(--mu-latar-lembut); }
.mu-tabel .mu-angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mu-tabel tfoot td { font-weight: 700; background: var(--mu-latar-lembut); border-bottom: 0; }

/* ---------- Titik status kehadiran ---------- */

/*
 * Rekap absensi sebelumnya berupa tabel 16 kolom pertemuan; di layar ponsel
 * kolomnya menyempit sampai hurufnya tak terbaca. Bentuk titik memuat
 * informasi yang sama dalam ruang jauh lebih kecil, dan tetap punya huruf di
 * dalamnya sehingga tidak bergantung warna semata.
 */
.mu-hadir {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mu-hadir__titik {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform .15s ease;
}

.mu-hadir__titik:hover { transform: scale(1.12); }

.mu-hadir__titik--h { background: var(--mu-hijau-muda);  color: var(--mu-hijau); }
.mu-hadir__titik--i { background: var(--mu-biru-muda);   color: var(--mu-biru-tua); }
.mu-hadir__titik--s { background: var(--mu-kuning-muda); color: var(--mu-kuning); }
.mu-hadir__titik--a { background: var(--mu-merah-muda);  color: var(--mu-merah); }

/* Pertemuan yang belum diabsen dosen: sengaja dibedakan tegas dari alpa. */
.mu-hadir__titik--kosong {
    background: #fff;
    border-color: var(--mu-garis);
    color: #cbd5e1;
}

.mu-hadir__ket {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .6rem;
    font-size: .74rem;
    color: var(--mu-teks-lemah);
}

.mu-hadir__ket span { display: inline-flex; align-items: center; gap: .3rem; }

.mu-hadir__contoh {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid transparent;
}

/* ---------- Lencana nilai huruf ---------- */

.mu-nilai {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    padding: .15rem .4rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .85rem;
}

.mu-nilai--a { background: var(--mu-hijau-muda);  color: var(--mu-hijau); }
.mu-nilai--b { background: var(--mu-biru-muda);   color: var(--mu-biru-tua); }
.mu-nilai--c { background: var(--mu-kuning-muda); color: var(--mu-kuning); }
.mu-nilai--d,
.mu-nilai--e { background: var(--mu-merah-muda);  color: var(--mu-merah); }
.mu-nilai--x { background: #f1f3f5;               color: var(--mu-teks-lemah); }

/* ---------- Kelompok hari pada jadwal ---------- */

.mu-hari {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .85rem;
    background: var(--mu-latar-lembut);
    border: 1px solid var(--mu-garis);
    border-radius: 8px;
    margin-bottom: .6rem;
}

.mu-hari--kini {
    background: var(--mu-biru-muda);
    border-color: #bcd6f7;
}

.mu-hari__nama {
    font-weight: 700;
    font-size: .92rem;
    color: var(--mu-teks);
}

.mu-hari__jml { font-size: .78rem; color: var(--mu-teks-lemah); }

/* Garis waktu tipis di kiri kartu kelas, memberi kesan urutan jam. */
.mu-jadwal { position: relative; padding-left: 1.1rem; }

.mu-jadwal::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--mu-garis);
    border-radius: 2px;
}

.mu-jadwal .mu-item { position: relative; }

.mu-jadwal .mu-item::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 1.4rem;
    width: 10px;
    height: 10px;
    margin-left: 1px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mu-biru);
}

/* ---------- Animasi masuk ---------- */

.mu-masuk {
    animation: mu-naik .28s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes mu-naik {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Bertahap: elemen berurutan masuk sedikit demi sedikit, memberi kesan
   daftar yang tersusun alih-alih muncul sekaligus. Dibatasi 10 supaya
   daftar panjang tidak membuat baris terakhir menunggu lama. */
.mu-tahap:nth-child(1)  { animation-delay: .01s; }
.mu-tahap:nth-child(2)  { animation-delay: .03s; }
.mu-tahap:nth-child(3)  { animation-delay: .05s; }
.mu-tahap:nth-child(4)  { animation-delay: .07s; }
.mu-tahap:nth-child(5)  { animation-delay: .09s; }
.mu-tahap:nth-child(6)  { animation-delay: .11s; }
.mu-tahap:nth-child(7)  { animation-delay: .13s; }
.mu-tahap:nth-child(8)  { animation-delay: .15s; }
.mu-tahap:nth-child(9)  { animation-delay: .17s; }
.mu-tahap:nth-child(n+10) { animation-delay: .19s; }

/* ---------- Penyesuaian layar sempit ---------- */

@media (max-width: 575.98px) {
    .mu-panel__isi { padding: .9rem; }
    .mu-kop { padding: 1.1rem; }
    .mu-kop__nama { font-size: 1.1rem; }
    .mu-item { flex-wrap: wrap; }
    .mu-item__aksi { width: 100%; }
    .mu-item__aksi .mu-btn { width: 100%; }
    .mu-ringkas__nilai { font-size: 1.25rem; }
    .mu-lengket { flex-direction: column; align-items: stretch; }
    .mu-lengket .mu-btn { width: 100%; }
}

/* ---------- Panel berlapis kaca ---------- *
 *
 * Varian .mu-panel untuk bagian yang berada tepat di atas latar beraurora dan
 * ingin membiarkan warnanya menembus sedikit. Dipakai hemat — hanya untuk
 * panel ringkasan, tidak untuk panel yang memuat tabel panjang, sebab teks
 * kecil di atas latar setengah tembus lebih sukar dibaca.
 */

.mu-panel--kaca {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-color: rgba(255, 255, 255, .75);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .08);
}

/* ---------- Kop dengan aurora sendiri ---------- *
 *
 * Kop identitas sudah bergradasi biru. Lapisan tambahan ini menaruh dua bercak
 * cahaya yang bergerak amat lambat di atasnya supaya bidang biru selebar
 * layar tidak terbaca datar. Ditaruh di ::before (::after sudah dipakai
 * lingkaran hiasan yang lama) dan tidak pernah menutupi teks karena
 * z-index isinya dinaikkan.
 */

.mu-kop::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    background:
        radial-gradient(30% 45% at 20% 20%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(28% 40% at 78% 70%, rgba(109, 90, 230, .28), transparent 62%);
    animation: mu-aurora-kop 18s ease-in-out infinite alternate;
}

.mu-kop > * { position: relative; z-index: 1; }

@keyframes mu-aurora-kop {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* ---------- Teks bergradasi ---------- */

/* Warna dasarnya tetap diisi lebih dulu, sehingga peramban tanpa
   background-clip:text menampilkan teks biru biasa, bukan teks tak terlihat. */
.mu-gradasi-teks {
    color: var(--mu-biru-tua);
    background: var(--mu-gradasi-utama);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Muncul saat digulung ke layar ---------- *
 *
 * Berbeda dengan .mu-masuk yang berjalan begitu halaman dibuka, kelas ini
 * menunggu elemennya benar-benar terlihat. Dipakai untuk bagian di paruh
 * bawah halaman panjang; kalau semuanya dianimasikan saat muat, bagian yang
 * jauh di bawah sudah selesai bergerak sebelum sempat dilihat.
 *
 * PENTING: keadaan tersembunyi HANYA dipasang setelah mahasiswa-ui.js
 * menambahkan .mu-js pada <html>. Tanpa JavaScript — atau bila skripnya gagal
 * dimuat — seluruh isi tetap tampak, bukan halaman kosong.
 */

.mu-js .mu-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--mu-lentur), transform .55s var(--mu-lentur);
    will-change: opacity, transform;
}

.mu-js .mu-reveal.is-tampil {
    opacity: 1;
    transform: none;
}

/* Jeda bertingkat untuk sekelompok elemen yang muncul bersamaan. */
.mu-js .mu-reveal--1 { transition-delay: .06s; }
.mu-js .mu-reveal--2 { transition-delay: .12s; }
.mu-js .mu-reveal--3 { transition-delay: .18s; }
.mu-js .mu-reveal--4 { transition-delay: .24s; }
.mu-js .mu-reveal--5 { transition-delay: .30s; }

/* ---------- Riak pada tombol ---------- */

/* Lingkaran riak dibuat mahasiswa-ui.js sebagai <span> di dalam tombol.
   Tombolnya perlu position:relative dan overflow:hidden agar riaknya
   terpotong rapi mengikuti lengkungan sudut. */
.mu-btn,
.mu-ke-atas {
    position: relative;
    overflow: hidden;
}

.mu-riak {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transform: scale(0);
    animation: mu-riak-tumbuh .55s var(--mu-lentur) forwards;
    pointer-events: none;
}

/* Tombol berlatar terang perlu riak gelap supaya terlihat. */
.mu-btn--garis .mu-riak { background: rgba(30, 111, 217, .22); }

@keyframes mu-riak-tumbuh {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------- Kilau pemuat ---------- */

/* Untuk bidang yang isinya belum ada — dipakai halaman Keuangan saat menunggu
   jawaban penyedia pembayaran. Lebih jujur daripada memutar pemintal di
   tengah kotak kosong, sebab bentuknya sudah menyerupai isi yang akan datang. */
.mu-kilau {
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafd 37%, #eef2f7 63%);
    background-size: 400% 100%;
    border-radius: 8px;
    animation: mu-kilau-jalan 1.4s ease-in-out infinite;
}

@keyframes mu-kilau-jalan {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* ---------- Penyempurnaan gerak komponen yang sudah ada ---------- */

/* Kartu ringkasan angka: selain terangkat, garis tepi kirinya melebar
   sedikit saat disentuh sehingga isyaratnya tetap terbaca tanpa warna. */
.mu-ringkas__item {
    position: relative;
    overflow: hidden;
    transition: transform .22s var(--mu-lentur), box-shadow .22s ease, border-left-width .18s ease;
}

.mu-ringkas__item:hover {
    transform: translateY(-3px);
    border-left-width: 6px;
}

/* Sapuan cahaya tipis melintas saat kartu disentuh. */
.mu-ringkas__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.mu-ringkas__item:hover::after {
    animation: mu-sapu .7s var(--mu-lentur) forwards;
}

@keyframes mu-sapu {
    from { left: -60%; opacity: 1; }
    to   { left: 120%; opacity: 0; }
}

.mu-item:hover {
    transform: translateY(-2px);
}

/* Angka yang dihitung naik oleh mahasiswa-ui.js. tabular-nums menahan lebarnya
   supaya kartunya tidak bergetar tiap kali angkanya berganti. */
.mu-angka-hidup {
    font-variant-numeric: tabular-nums;
}

/* ---------- Garis waktu jadwal: titik yang berdenyut pada hari ini ---------- */

.mu-jadwal--kini .mu-item::before {
    border-color: var(--mu-hijau);
    box-shadow: 0 0 0 0 rgba(18, 128, 92, .5);
    animation: mu-denyut-cincin 2.2s ease-out infinite;
}

@keyframes mu-denyut-cincin {
    0%   { box-shadow: 0 0 0 0 rgba(18, 128, 92, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(18, 128, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 128, 92, 0); }
}

/* ---------- Grafik SVG yang menggambar dirinya ---------- */

/* Panjang garis diberikan Blade lewat properti --mu-panjang (dihitung kasar
   dari jumlah titik); stroke-dasharray memakainya untuk menarik garis dari
   kiri ke kanan. Bila propertinya tidak ada, nilai cadangan 2000 tetap
   menghasilkan gambar utuh — hanya jedanya yang kurang pas. */
.mu-garis-gambar {
    stroke-dasharray: var(--mu-panjang, 2000);
    stroke-dashoffset: var(--mu-panjang, 2000);
    animation: mu-gambar 1.4s .2s var(--mu-lentur) forwards;
}

@keyframes mu-gambar { to { stroke-dashoffset: 0; } }

/* Titik data mengembang dari nol. transform-origin-nya diberikan Blade sebagai
   koordinat titik itu sendiri; tanpa itu, transform pada elemen SVG berporos
   di sudut kiri atas viewBox sehingga titiknya melesat masuk dari luar
   gambar alih-alih tumbuh di tempatnya. */
.mu-titik-gambar {
    opacity: 0;
    animation: mu-titik-muncul .3s var(--mu-pantul) forwards;
}

@keyframes mu-titik-muncul {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* Label angka di atas titik hanya memudar masuk — TIDAK diskalakan. Teks SVG
   yang diskalakan ikut menyeret posisinya, dan angka yang mendarat meleset
   dari titiknya lebih mengganggu daripada tidak dianimasikan sama sekali. */
.mu-teks-gambar {
    opacity: 0;
    animation: mu-pudar-masuk .35s ease-out forwards;
}

@keyframes mu-pudar-masuk {
    to { opacity: 1; }
}

/* ---------- Kotak peringatan ---------- *
 *
 * Dipakai peringatan tunggakan SPP yang tampil di setiap halaman portal.
 * Karena ia muncul di ATAS isi tiap halaman, bentuknya sengaja dibuat tegas
 * tetapi rendah: satu baris judul, satu paragraf, dan tombol jalan keluarnya
 * sejajar di kanan — bukan menumpuk ke bawah sampai mendorong isi halaman
 * keluar layar.
 */

.mu-peringatan {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--mu-merah-muda);
    border: 1px solid #f5c6c6;
    border-left: 4px solid var(--mu-merah);
    border-radius: var(--mu-lengkung);
    box-shadow: var(--mu-bayang);
}

.mu-peringatan__ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(198, 40, 40, .12);
    color: var(--mu-merah);
    font-size: 1.2rem;
    line-height: 1;
}

.mu-peringatan__isi { flex: 1 1 auto; min-width: 0; }

.mu-peringatan__judul {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #8f1f1f;
}

.mu-peringatan__ket {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    color: #7d2222;
}

.mu-peringatan__kaki {
    margin: .5rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: #96504f;
}

.mu-peringatan .mu-chip {
    background: rgba(255, 255, 255, .7);
    border-color: #f0c4c4;
    color: #8f1f1f;
}

.mu-peringatan__aksi { flex: 0 0 auto; align-self: center; }

@media (max-width: 767.98px) {
    .mu-peringatan { flex-wrap: wrap; }
    .mu-peringatan__aksi { width: 100%; }
    .mu-peringatan__aksi .mu-btn { width: 100%; }
}

/* ---------- Kartu tindakan ---------- *
 *
 * Dipakai Dashboard untuk tiga hal yang paling sering dicari: status KRS,
 * tagihan, dan kehadiran.
 *
 * SELURUH kartu adalah <a>, bukan kartu berisi tombol kecil di pojok. Sasaran
 * kliknya jadi seluas kartunya — jauh lebih mudah dikenai di layar sentuh —
 * dan hanya ada satu perhentian Tab per kartu alih-alih dua.
 */

.mu-petak {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .85rem;
}

.mu-aksi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.05rem 1.15rem;
    background: var(--mu-latar);
    border: 1px solid var(--mu-garis);
    border-radius: var(--mu-lengkung);
    box-shadow: var(--mu-bayang);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .22s var(--mu-lentur), box-shadow .22s ease, border-color .22s ease;
}

.mu-aksi:hover,
.mu-aksi:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--mu-bayang-naik);
    border-color: #cfd9e6;
    text-decoration: none;
    color: inherit;
}

.mu-aksi:focus-visible {
    outline: 3px solid rgba(30, 111, 217, .35);
    outline-offset: 2px;
}

/* Pita warna tipis di tepi atas: penanda jenis kartu yang tidak memakan
   ruang isi sama sekali. */
.mu-aksi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mu-gradasi-utama);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--mu-lentur);
}

.mu-aksi:hover::before,
.mu-aksi:focus-visible::before { transform: scaleX(1); }

.mu-aksi--hijau::before { background: linear-gradient(90deg, var(--mu-hijau), #1aa87a); }
.mu-aksi--merah::before { background: linear-gradient(90deg, var(--mu-merah), #e05252); }
.mu-aksi--kuning::before { background: linear-gradient(90deg, var(--mu-kuning), #d99524); }

.mu-aksi__ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--mu-biru-muda);
    color: var(--mu-biru-tua);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .25s var(--mu-pantul);
}

.mu-aksi:hover .mu-aksi__ikon { transform: scale(1.08) rotate(-5deg); }

.mu-aksi--hijau .mu-aksi__ikon  { background: var(--mu-hijau-muda);  color: var(--mu-hijau); }
.mu-aksi--merah .mu-aksi__ikon  { background: var(--mu-merah-muda);  color: var(--mu-merah); }
.mu-aksi--kuning .mu-aksi__ikon { background: var(--mu-kuning-muda); color: var(--mu-kuning); }

.mu-aksi__isi { flex: 1 1 auto; min-width: 0; }

.mu-aksi__judul {
    margin: 0 0 .35rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mu-teks-lemah);
}

.mu-aksi__nilai {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mu-teks);
}

.mu-aksi__ket {
    margin: .3rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--mu-teks-lemah);
}

/* Panah bergeser sedikit saat kartu disorot — isyarat "ini membawa Anda ke
   suatu tempat" yang tidak bergantung warna. */
.mu-aksi__panah {
    flex: 0 0 auto;
    align-self: center;
    color: #c3ceda;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .25s var(--mu-lentur), color .25s ease;
}

.mu-aksi:hover .mu-aksi__panah {
    transform: translateX(4px);
    color: var(--mu-biru);
}

/* ---------- Hormati pengaturan kurangi gerak ---------- */

@media (prefers-reduced-motion: reduce) {
    .mu-masuk,
    .mu-bar__isi,
    .mu-titik,
    .mu-kop::before,
    .mu-riak,
    .mu-kilau,
    .mu-ringkas__item:hover::after,
    .mu-jadwal--kini .mu-item::before {
        animation: none !important;
    }

    /* Grafik tetap tergambar — kalau animasinya dimatikan begitu saja,
       stroke-dashoffset berhenti di nilai awal dan garisnya HILANG sama
       sekali. Karena itu keadaan akhirnya dipaksa, bukan animasinya. */
    .mu-garis-gambar {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }

    .mu-titik-gambar,
    .mu-teks-gambar {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Hal yang sama berlaku untuk isi yang menunggu digulung ke layar:
       tanpa transisi, .is-tampil tidak pernah membuatnya terlihat. */
    .mu-js .mu-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mu-panel,
    .mu-item,
    .mu-pilih,
    .mu-btn,
    .mu-ringkas__item,
    .mu-hadir__titik,
    .mu-pilih__tanda::after,
    .mu-aksi,
    .mu-aksi__ikon,
    .mu-aksi__panah {
        transition: none !important;
    }

    /* Pita warna di tepi atas kartu tindakan dibuat tetap terlihat, bukan
       dihilangkan: ia penanda jenis kartu, bukan sekadar hiasan gerak. */
    .mu-aksi::before {
        transition: none !important;
        transform: scaleX(1) !important;
    }

    .mu-btn:hover,
    .mu-ringkas__item:hover,
    .mu-item:hover,
    .mu-hadir__titik:hover,
    .mu-pilih:active,
    .mu-aksi:hover,
    .mu-aksi:hover .mu-aksi__ikon,
    .mu-aksi:hover .mu-aksi__panah {
        transform: none !important;
    }
}