/* ==========================================================================
   Awardee — penerima beasiswa (tab di sebelah Peta Alumni, halaman login).
   auth/login.php (markup + daftar pembaca layar dari data.json) + assets/awardee/awardee.js (kendali tayangan).

   Versi 2 "Cincin Kehormatan" (25 Okt 2026, atas permintaan: pergantian lebih cepat, semua kampus tampil, ruang kosong
   dirapatkan, gerak 3D): potret-potret lengkung berdiri melingkar di ruang 3D (CSS perspective, bukan WebGL); tiap
   pergantian cincin berputar membawa awardee berikutnya ke depan, tetangganya surut & meredup ke kedalaman, kamera bernapas
   pelan. Lambang kampus = koin 3D yang berbalik masuk di kaki potret (semua kampus tampil sekaligus). Bab BIB giok · BIM emas.
   Semua gerak transform/opacity (dikomposit GPU); tak ada animasi warna/gradien pada lapisan besar.
   ========================================================================== */
.aw {
    --aw-giok: #7dd3fc;
    --aw-emas: #e2bf6d;
    --aw-biru: #8fc4ff;                                /* bab Government */
    --ak: var(--aw-giok);                              /* aksen bab aktif */
    --ak-rgb: 125, 211, 252;
    --aw-ink2: rgba(246, 243, 232, .74);
    --aw-ink3: rgba(246, 243, 232, .56);
    --aw-hair: rgba(246, 243, 232, .14);
    --kw: 360px; --kh: 520px;                          /* ukuran kartu potret (diatur JS dari tinggi panggung) */
    --koin: 70px;
    --e-out: cubic-bezier(.16, 1, .3, 1);
    position: fixed; inset: 0; z-index: 5; isolation: isolate;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    color: var(--gading); font-family: 'Inter', system-ui, -apple-system, sans-serif;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .7s var(--ps-ease), visibility 0s linear .7s;
    background: linear-gradient(180deg, #0b2240 0%, #061326 55%, #030a16 100%);
}
.aw[data-bab="bim"] { --ak: var(--aw-emas); --ak-rgb: 226, 191, 109; }
.aw[data-bab="gov"] { --ak: var(--aw-biru); --ak-rgb: 143, 196, 255; }
.aw[data-bab="semua"] { --ak: #f6f3e8; --ak-rgb: 246, 243, 232; }       /* rekap: semua beasiswa */
html[data-scene="awardee"] .aw { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .7s var(--ps-ease); }
body.split .aw { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s var(--ps-ease), visibility 0s linear .55s; }
html[data-scene="awardee"] .landing {
    opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.97);
    transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.aw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none; }

/* ---------- latar (statis) ---------- */
.aw-latar { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aw-latar i { position: absolute; display: block; }
.aw-halo { right: -4vw; top: -6vh; width: min(110vh, 80vw); height: min(110vh, 90vw); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 236, 210, .075), rgba(246, 236, 210, .025) 55%, rgba(246, 236, 210, 0)); }
.aw-zamrud { left: -14vw; bottom: -30vh; width: 70vw; height: 70vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 116, 144, .20), rgba(14, 116, 144, 0)); }
.aw-butir { inset: 0; opacity: .035; background-image: var(--butir, none); background-size: 128px 128px; }

/* ---------- kisi: kiri teks (dirapatkan ke atas), kanan panggung 3D penuh ---------- */
.aw-grid {
    position: relative; z-index: 1; height: 100%; min-height: 540px; box-sizing: border-box; overflow-x: clip;   /* clip: kartu 3D tak melebarkan area gulir (tanpa ini kamera "bernapas" memaksa paint ulang tiap bingkai) */
    display: grid; grid-template-columns: minmax(360px, 38%) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 40px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "atas panggung" "profil panggung" "pita pita";
    padding: clamp(84px, 11vh, 108px) max(var(--gut), env(safe-area-inset-right, 0px)) clamp(14px, 2.4vh, 26px) max(var(--gut), env(safe-area-inset-left, 0px));
}
.aw-atas { grid-area: atas; position: relative; z-index: 3; }
.aw-profil { grid-area: profil; position: relative; z-index: 3; align-self: start; display: grid; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(22px, 4.4vh, 48px) 0 clamp(12px, 2vh, 24px); }
.aw-profil.kampus { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }   /* kartu bab: tinggi pasti, daftar kampus tahu sisa ruangnya (juga di layar tinggi) */
.aw-pita { grid-area: pita; position: relative; z-index: 3; }
/* tabir: potret di kiri (tetangga cincin) tenggelam ke gelap di belakang teks */
.aw-tabir { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; pointer-events: none;
    width: calc(var(--gut) + max(360px, (100% - 2 * var(--gut)) * .38) + clamp(16px, 2vw, 40px) + 180px);   /* kolom teks + celah, lalu pudaran 180 px (kisi dibatasi 1680 px di layar lebar) */
    background: linear-gradient(180deg, #0b2240 0%, #061326 55%, #030a16 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 180px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 180px), transparent 100%); }

/* ---------- kepala ---------- */
.aw-eyebrow { margin: 0 0 clamp(10px, 1.8vh, 18px); display: flex; align-items: center; gap: 12px; min-height: 26px;
    font: 600 11.5px/1.2 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--ak-rgb), .92); }
.aw-plat { display: inline-flex; gap: 6px; }
.aw-plat img { width: 26px; height: 26px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #f6f3e8; object-fit: contain; }
.aw-plat:empty { display: none; }
.aw-eyebrow-t { display: inline-block; }
.aw-judul { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.aw-kata { font: 800 clamp(40px, min(3.6vw, 6.4vh), 56px)/1 var(--f-disp); letter-spacing: -.035em; color: var(--gading); }
.aw-bab { display: block; min-height: 1.25em; overflow: hidden; font: 300 clamp(22px, min(2.2vw, 3.8vh), 32px)/1.25 var(--f-disp); letter-spacing: -.01em; color: var(--ak); }
.aw-bab > span { display: inline-block; }

/* ---------- panggung 3D ---------- */
.aw-panggung { grid-area: 1 / 2 / 3 / 3; position: relative; z-index: 0; min-height: 0; perspective: 1500px; perspective-origin: 50% 46%; touch-action: pan-y; }
.aw-sorot { position: absolute; left: 50%; top: -12%; width: calc(var(--kw) * 2.6); height: 118%; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(48% 62% at 50% 0%, rgba(255, 246, 222, .13), rgba(255, 246, 222, .04) 55%, rgba(255, 246, 222, 0) 75%); }
.aw-lantai { position: absolute; left: 50%; top: calc(50% + var(--kh) * .5 - 30px); width: calc(var(--kw) * 3.2); height: calc(var(--kh) * .34); transform: translateX(-50%); pointer-events: none;
    border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ak-rgb), .14), rgba(var(--ak-rgb), .05) 50%, rgba(var(--ak-rgb), 0)); transition: background 1s ease; }
.aw-kamera { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; animation: aw-kamera 18s ease-in-out infinite; animation-play-state: paused; }
html[data-scene="awardee"] body:not(.split) .aw-kamera { animation-play-state: running; }
@keyframes aw-kamera {                                  /* kamera "bernapas": goyang sangat pelan, komposit */
    0%, 100% { transform: rotateX(1.4deg) rotateY(-2.4deg); }
    50% { transform: rotateX(-.8deg) rotateY(2.4deg); }
}
.aw-cincin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.aw-k3 { position: absolute; left: calc(var(--kw) / -2); top: calc(var(--kh) / -2); width: var(--kw); height: var(--kh); box-sizing: border-box;
    border-radius: calc(var(--kw) / 2) calc(var(--kw) / 2) 16px 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--sl, #efe8d6); cursor: pointer; overflow: hidden; pointer-events: none;
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .85); }
.aw-k3[data-bab="bib"] { --ka: 159, 227, 180; }
.aw-k3[data-bab="bim"] { --ka: 226, 191, 109; }
.aw-k3[data-bab="gov"] { --ka: 143, 196, 255; }
.aw-k3[data-bab="semua"] { --ka: 246, 243, 232; }
.aw-k3 > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; user-select: none; -webkit-user-drag: none; }
.aw-k3.pas > img {             /* pas foto (BIB, Government): berdiri di relung (88% lebar, menapak lantai), tepi melebur ke warna latarnya */
    left: 6%; top: auto; bottom: 0; width: 88%; height: auto; aspect-ratio: 388 / 530; object-position: 50% 0;
    -webkit-mask-image: radial-gradient(118% 88% at 50% 60%, #000 62%, transparent 100%); mask-image: radial-gradient(118% 88% at 50% 60%, #000 62%, transparent 100%); }
.aw-k3::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;   /* cahaya atas, bayang lantai, garis aksen */
    background: linear-gradient(180deg, rgba(255, 252, 240, .12) 0%, rgba(255, 252, 240, 0) 24%, rgba(3, 24, 15, 0) 66%, rgba(3, 24, 15, .32) 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--ka), .55), inset 0 0 0 6px rgba(3, 24, 15, .0); }
.aw-k3 .redup { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #020e08; opacity: .7; pointer-events: none; }
.aw-k3.jauh { visibility: hidden; }
.aw-k3.dekat { pointer-events: auto; }                  /* hanya depan & tetangga langsung yang bisa diklik (yang lain di balik tabir/kedalaman) */
/* kartu bab & penutup di dalam cincin */
.aw-k3.gelap { background: radial-gradient(120% 70% at 50% 0%, #0d3a27 0%, #062619 55%, #031a10 100%); }
.aw-k3 .bk { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 12%; text-align: center; color: var(--gading); }
.aw-k3 .bk .r { font: 200 calc(var(--kh) * .17)/1 var(--f-disp); letter-spacing: .04em; color: rgb(var(--ka)); }
.aw-k3 .bk .n { font: 700 calc(var(--kh) * .044)/1.2 var(--f-disp); letter-spacing: -.01em; text-wrap: balance; }
.aw-k3 .bk .k { font: 500 calc(var(--kh) * .022)/1.5 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--aw-ink3); }
/* kartu rekap: mosaik wajah per beasiswa (ubin merakit diri dari kedalaman — perspective sendiri di dalam kartu) */
.aw-k3.rekap { overflow: visible; background: radial-gradient(120% 64% at 50% 0%, #11452c 0%, #072a1b 52%, #031a10 100%); }   /* tanpa klip: ubin bergerak tak memaksa permukaan bertopeng (mahal di GPU) */
.rk { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--kh) * .036); padding: calc(var(--kh) * .1) 9% calc(var(--kh) * .06); color: var(--gading); text-align: center; }
.rk-kepala { display: flex; flex-direction: column; align-items: center; gap: calc(var(--kh) * .008); }
.rk-k { font: 600 max(9px, calc(var(--kh) * .02))/1.2 'Inter', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--aw-ink3); }
.rk-r { font: 200 calc(var(--kh) * .14)/1 var(--f-disp); letter-spacing: .02em; color: var(--gading); }
.rk-n { font: 700 calc(var(--kh) * .036)/1.2 var(--f-disp); letter-spacing: -.01em; }
.rk-mosaik { width: 100%; display: flex; flex-direction: column; gap: calc(var(--kh) * .024); perspective: 760px; }
.rk-band { display: flex; flex-direction: column; align-items: center; gap: calc(var(--kh) * .012); transform-style: preserve-3d; }
.rk-band[data-bab="gov"] { --ka: 143, 196, 255; } .rk-band[data-bab="bib"] { --ka: 159, 227, 180; } .rk-band[data-bab="bim"] { --ka: 226, 191, 109; }
.rk-l { font: 600 max(8.5px, calc(var(--kh) * .018))/1.2 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--aw-ink3); }
.rk-l b { margin-left: .3em; font-weight: 700; color: rgb(var(--ka)); }
.rk-baris { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--kw) * .022); transform-style: preserve-3d; }
.rk-u { display: block; width: clamp(64px, 26%, 108px); aspect-ratio: 46 / 60; border-radius: 999px 999px 6px 6px; overflow: hidden; background: #0f2647;
    box-shadow: 0 0 0 1.5px rgba(var(--ka), .85), 0 12px 22px -10px rgba(0, 0, 0, .85); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.aw.kartu-pendek .rk-kepala { display: none; }                                    /* angka yang sama sudah ada di kolom kiri */
.aw.kartu-pendek .rk { gap: calc(var(--kh) * .03); padding: calc(var(--kh) * .16) 8% calc(var(--kh) * .05); }
.aw.kartu-pendek .rk-l { font-size: 7.5px; letter-spacing: .12em; }
.rk-u img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 18%; user-select: none; -webkit-user-drag: none; }
/* koin lambang kampus: berbalik masuk di kaki potret depan */
.aw-medali { position: absolute; left: 50%; top: 50%; z-index: 4; display: flex; gap: calc(var(--koin) * .16); transform-style: preserve-3d; pointer-events: none;
    transform: translate3d(-50%, calc(var(--kh) * .5 - var(--koin) * .62), 70px); }
.aw-medali.satu { transform: translate3d(calc(var(--kw) * -.5 - var(--koin) * .22), calc(var(--kh) * .5 - var(--koin) * 1.05), 70px); }
.aw-koin { position: relative; width: var(--koin); height: var(--koin); flex: none; border-radius: 50%; background: #f6f3e8; display: grid; place-items: center; backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgba(var(--ak-rgb), .95), 0 0 0 calc(var(--koin) * .07) #04200f, 0 0 0 calc(var(--koin) * .085) rgba(var(--ak-rgb), .4), 0 16px 30px -10px rgba(0, 0, 0, .75); }
.aw-koin img { width: 74%; height: 74%; object-fit: contain; }
.aw-cadangan { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.aw-cadangan .r { font: 200 88px/1 var(--f-disp); color: var(--aw-giok); letter-spacing: .04em; }
.aw-cadangan .n { font: 700 22px/1.2 var(--f-disp); }
.aw-cadangan .k { font: 500 12px/1.5 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--aw-ink3); }
.aw-jamd { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- profil (dua kartu bertumpuk, isi diatur JS) ---------- */
.aw-kartu { grid-area: 1 / 1; min-width: 0; align-self: start; }
.aw-kartu.mati { visibility: hidden; }
.aw-kartu.isi-kampus.mati { display: none; }                                       /* kartu bab lama (daftar panjang) keluar dari aliran: tak membesarkan .aw-profil untuk kartu berikutnya */
.l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.l > i { display: inline-block; font-style: normal; }
.aw-prog { margin: 0 0 clamp(8px, 1.4vh, 14px); font: 600 12px/1.45 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ak-rgb), .95); }
.aw-prog .no { color: var(--aw-ink3); margin-right: 10px; letter-spacing: .12em; }
.aw-nama { margin: 0; }
.aw-depan { font: 800 clamp(42px, min(5vw, 8.2vh), 82px)/1 var(--f-disp); letter-spacing: -.04em; color: var(--gading); white-space: nowrap; }
.aw-depan.rapat { font-size: clamp(36px, min(4.3vw, 7.2vh), 68px); }
.aw-depan.rapat2 { font-size: clamp(30px, min(3.6vw, 6vh), 56px); }
.aw-tanda { margin: 12px 0 0; display: inline-block; padding: 5px 11px; border-radius: 999px; font: 600 10.5px/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: rgb(var(--ak-rgb)); background: rgba(var(--ak-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--ak-rgb), .45); }
.aw-belakang { margin-top: 4px; font: 300 clamp(20px, min(2.3vw, 3.9vh), 36px)/1.15 var(--f-disp); letter-spacing: -.015em; color: rgba(246, 243, 232, .78); text-wrap: balance; }
.aw-sekat { width: 64px; height: 1px; margin: clamp(12px, 2.2vh, 22px) 0; background: rgba(var(--ak-rgb), .7); transform-origin: left; }
.aw-pt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.aw-lambang { width: 52px; height: 52px; border-radius: 50%; background: #f6f3e8; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(var(--ak-rgb), .45); flex: none; }
.aw-lambang img { width: 76%; height: 76%; object-fit: contain; }
.aw-pt-n { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aw-pt-n b { font: 600 clamp(15px, 1.25vw, 18px)/1.3 var(--f-disp); color: var(--gading); text-wrap: balance; }
.aw-pt-n small { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.3 'Inter', sans-serif; color: var(--aw-ink3); }
.aw-bendera { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(246, 243, 232, .18); overflow: hidden; }
.aw-rank { margin: clamp(14px, 2.4vh, 22px) 0 0; display: flex; gap: clamp(22px, 2.6vw, 40px); }
.aw-rank > div { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 1px solid var(--aw-hair); min-width: 0; }
.aw-rank > div:first-child { padding-left: 0; border-left: 0; }
.aw-rank dt { font: 600 10.5px/1.2 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--aw-ink3); white-space: nowrap; }
.aw-rank dd { margin: 0; font: 700 clamp(28px, min(2.6vw, 4.6vh), 40px)/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gading); white-space: nowrap; }
.aw-rank dd .h, .aw-mini b .h { font-weight: 300; color: rgba(var(--ak-rgb), .95); margin-right: .04em; }
.aw-rank dd.teks { font: 600 clamp(15px, 1.3vw, 18px)/1.3 var(--f-disp); letter-spacing: 0; color: var(--aw-ink2); white-space: normal; }
/* odometer */
.od { display: inline-flex; }
.od-d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.od-r { display: flex; flex-direction: column; }
.od-r > span { display: block; height: 1em; line-height: 1; }
/* semua kampus (awardee multi-kampus) — satu tampilan */
.aw-jumlah { margin: 0 0 10px; font: 600 11.5px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ak-rgb), .95); }
.aw-daftar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.aw-daftar li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: clamp(7px, 1.1vh, 11px) 0; border-top: 1px solid var(--aw-hair); }
.aw-daftar li:last-child { border-bottom: 1px solid var(--aw-hair); }
.aw-daftar .aw-lambang { width: 40px; height: 40px; }
.aw-daftar .aw-pt-n b { font-size: clamp(14px, 1.1vw, 15.5px); }
.aw-daftar .aw-pt-n small { font-size: 12px; }
.aw-mini { display: flex; gap: 14px; text-align: right; }
.aw-mini > span { display: flex; flex-direction: column; gap: 3px; min-width: 50px; }
.aw-mini em { font: 600 9.5px/1.2 'Inter', sans-serif; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--aw-ink3); }
.aw-mini b { font: 700 18px/1 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--gading); white-space: nowrap; }
/* ringkasan bab & penutup */
.aw-ring { margin: 0; display: flex; gap: clamp(26px, 3vw, 48px); }
.aw-ring > div { display: flex; flex-direction: column; gap: 6px; }
.aw-ring dd { margin: 0; font: 700 clamp(40px, min(4.2vw, 7vh), 66px)/1 var(--f-disp); letter-spacing: -.03em; color: var(--gading); font-variant-numeric: tabular-nums; }
.aw-ring dt { font: 600 11px/1.2 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--aw-ink3); }
.aw-babjudul { margin: 0 0 clamp(18px, 3vh, 28px); font: 300 clamp(30px, min(3.4vw, 5.6vh), 52px)/1.12 var(--f-disp); letter-spacing: -.02em; color: var(--gading); text-wrap: balance; }
.aw-babjudul b { font-weight: 800; color: var(--ak); }
.aw-ring dd .h { font-weight: 300; color: rgba(var(--ak-rgb), .7); margin-right: .04em; }
/* rekap: komposisi per beasiswa */
.aw-komposisi { display: flex; gap: 4px; height: 6px; max-width: 440px; margin: 0 0 clamp(10px, 1.8vh, 16px); }
.aw-komposisi i { display: block; height: 100%; border-radius: 3px; background: rgb(var(--ka)); transform-origin: left; }
.aw-komposisi [data-bab="gov"], .aw-jalur [data-bab="gov"] { --ka: 143, 196, 255; }
.aw-komposisi [data-bab="bib"], .aw-jalur [data-bab="bib"] { --ka: 159, 227, 180; }
.aw-komposisi [data-bab="bim"], .aw-jalur [data-bab="bim"] { --ka: 226, 191, 109; }
.aw-jalur { max-width: 440px; margin: 0 0 clamp(16px, 2.8vh, 28px); padding: 0; list-style: none; }
.aw-jalur li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: clamp(5px, .9vh, 9px) 0; border-top: 1px solid var(--aw-hair); }
.aw-jalur li:last-child { border-bottom: 1px solid var(--aw-hair); }
.aw-jalur .tt { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ka)); box-shadow: 0 0 0 3px rgba(var(--ka), .16); }
.aw-jalur .aw-pt-n { gap: 2px; }
.aw-jalur .aw-pt-n b { font-size: clamp(14px, 1.1vw, 15.5px); }
.aw-jalur .aw-pt-n small { font-size: 11.5px; }
.aw-jalur .v { font: 700 clamp(22px, min(2vw, 3.4vh), 30px)/1 var(--f-disp); letter-spacing: -.02em; color: rgb(var(--ka)); font-variant-numeric: tabular-nums; }
.aw-kartu.isi-kampus { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
/* kartu bab: daftar kampus tujuan (lambang + nama) di bawah angka */
.aw-kampus { flex: 1 1 auto; min-height: 0; overflow: hidden; max-width: 580px; margin-top: clamp(14px, 2.6vh, 26px); }
.aw-kampus.lebih { -webkit-mask-image: linear-gradient(180deg, transparent, #000 10px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, transparent, #000 10px, #000 calc(100% - 24px), transparent); }
.aw-kampus.lebih ul { padding: 10px 0 24px; }                                      /* awal & akhir gulir: baris pertama/terakhir berada di luar pudaran (juga gulir manual RM) */
.aw-kampus ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 22px; }
.aw-kampus li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; align-items: center; padding: clamp(5px, .85vh, 8px) 0; border-top: 1px solid var(--aw-hair); }
.aw-kampus .aw-lambang { width: 32px; height: 32px; }
.aw-kampus .aw-pt-n { gap: 3px; }
.aw-kampus .aw-pt-n b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 13.5px/1.25 var(--f-disp); text-wrap: pretty; }
.aw-kampus .aw-pt-n small { gap: 6px; font-size: 11.5px; }
.aw-kampus .aw-bendera { width: 15px; height: 10px; }
.aw-kampus.besar li { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: clamp(7px, 1.2vh, 11px) 0; }      /* daftar pendek (≤ 6): lebih besar, mengisi ruang */
.aw-kampus.besar .aw-lambang { width: 42px; height: 42px; }
.aw-kampus.besar .aw-pt-n b { font-size: clamp(14px, 1.1vw, 15.5px); }
.aw-kampus.besar .aw-pt-n small { font-size: 12px; }
.aw-kampus.rapat ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }   /* daftar jauh lebih tinggi dari ruangnya (BIM di laptop) */
.aw-kampus.rapat li { padding: 4px 0; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
.aw-kampus.rapat .aw-lambang { width: 24px; height: 24px; }
.aw-kampus.rapat .aw-pt-n b { font-size: 13px; }
.aw-kampus.rapat .aw-pt-n small { display: none; }
.aw-catatan { grid-area: 2 / 1; margin: 16px 0 0; font: 500 10.5px/1.4 'Inter', sans-serif; letter-spacing: .04em; color: rgba(246, 243, 232, .42); }

/* ---------- pita wajah ---------- */
.aw-pita { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); padding-top: clamp(10px, 1.8vh, 18px); border-top: 1px solid var(--aw-hair); }
.aw-pita-gulir { flex: 1 1 auto; min-width: 0; display: flex; gap: clamp(18px, 2.2vw, 36px); overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
.aw-pita-gulir::-webkit-scrollbar { display: none; }
.aw-kelompok { display: flex; flex-direction: column; gap: 8px; flex: none; }
.aw-kel-j { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font: 600 10.5px/1.2 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--aw-ink3); transition: color .4s ease; }
.aw-kel-j:hover, .aw-kelompok.on .aw-kel-j { color: var(--gading); }
.aw-kelompok[data-bab="bib"].on .aw-kel-j b { color: var(--aw-giok); }
.aw-kelompok[data-bab="bim"].on .aw-kel-j b { color: var(--aw-emas); }
.aw-kelompok[data-bab="gov"].on .aw-kel-j b { color: var(--aw-biru); }
.aw-kel-j b { font-weight: 700; margin-right: 6px; }
.aw-wajah-baris { display: flex; gap: 7px; }
.aw-wajah { position: relative; flex: none; width: clamp(32px, 2.5vw, 42px); aspect-ratio: 46 / 60; padding: 0; border: 0; cursor: pointer; background: #e9e3d3;
    border-radius: 999px 999px 6px 6px; overflow: visible; opacity: .44; transform: translateY(0); transition: opacity .3s ease, transform .3s var(--e-out); }
.aw-wajah img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 18%; border-radius: inherit; }
.aw-wajah:hover { opacity: .8; }
.aw-wajah[aria-current="true"] { opacity: 1; transform: translateY(-4px); }
.aw-wajah[aria-current="true"]::before { content: ""; position: absolute; inset: -4px; border-radius: 999px 999px 9px 9px; box-shadow: 0 0 0 1px rgba(var(--ak-rgb), .85); pointer-events: none; }
.aw-wajah .jam { position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--ak); transform: scaleX(0); transform-origin: left; opacity: 0; }
.aw-wajah[aria-current="true"] .jam { opacity: 1; }
.aw-kendali { flex: none; display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.aw-ico { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--gading);
    background: transparent; box-shadow: inset 0 0 0 1px rgba(246, 243, 232, .22); transition: background .25s, box-shadow .25s; }
.aw-ico:hover { background: rgba(246, 243, 232, .08); box-shadow: inset 0 0 0 1px rgba(246, 243, 232, .4); }
.aw-ico i { font-size: 13px; }
.aw-wajah:focus-visible, .aw-ico:focus-visible, .aw-kel-j:focus-visible { outline: 2px solid var(--gading); outline-offset: 4px; }

/* ---------- desktop: daftar kampus ringkas bila tinggi terbatas (4 kampus tetap muat, pita tak terdorong ke bawah) ---------- */
@media (max-height: 860px), (max-width: 1180px) {
    .aw-daftar li { padding: 5px 0; grid-template-columns: 34px minmax(0, 1fr) auto; }
    .aw-daftar .aw-lambang { width: 34px; height: 34px; }
    .aw-daftar .aw-pt-n b, .aw-daftar .aw-pt-n small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .aw-daftar .aw-bendera { display: none; }
}
/* layar tinggi: profil di tengah kolom (tanpa pita kosong besar di bawahnya) */
@media (min-height: 1100px) and (min-width: 861px) {
    .aw-profil { align-self: center; }
    .aw-profil.kampus .aw-kartu:not(.isi-kampus) { align-self: center; }           /* kartu orang di dalam profil lentur: posisinya sama dengan profil yang ditengahkan (tanpa lompatan saat beralih) */
}
/* ---------- desktop pendek ---------- */
@media (min-width: 861px) and (max-height: 760px) {
    .aw-grid { padding-top: 80px; }
    .aw-jalur .aw-pt-n small { display: none; }
    .aw-catatan { display: none; }
    .aw-profil { padding-top: 16px; }
}
/* ---------- tablet & HP tegak: panggung 3D di atas (lebar penuh), teks di bawah — tak ada panel di atas foto ---------- */
@media (max-width: 900px) and (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 768px) {
    .aw-grid { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "atas" "pita" "panggung" "profil";
        padding-top: clamp(86px, 11.5vh, 106px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); row-gap: 12px; }
    .aw-panggung { grid-area: panggung; height: clamp(270px, 45svh, 500px); margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); perspective: 1100px; }
    .aw-tabir { display: none; }
    .aw-kata { font-size: clamp(28px, 7.5vw, 36px); }
    .aw-bab { font-size: clamp(16px, 4.5vw, 22px); }
    .aw-judul { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .aw-eyebrow { margin-bottom: 6px; font-size: 10.5px; letter-spacing: .16em; }
    .aw-pita { border-top: 0; padding-top: 0; align-items: center; gap: 10px; }
    .aw-kendali { padding-bottom: 6px; gap: 6px; }
    .aw-ico { width: 36px; height: 36px; }
    .aw-profil { padding: 4px 0 32px; overflow: visible; }
    .aw-kartu.mati, .aw-kartu.isi-kampus.mati { display: none; }                      /* kartu lama yang tersembunyi keluar dari aliran: tak ada ruang kosong di bawah kartu berikutnya */
    .aw-depan { font-size: clamp(30px, 8.8vw, 48px); white-space: normal; }
    .aw-depan.rapat, .aw-depan.rapat2 { font-size: clamp(26px, 7.6vw, 42px); }
    .aw-belakang { font-size: clamp(17px, 4.6vw, 24px); }
    .aw-rank dd { font-size: 26px; }
    .aw-daftar li { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
    .aw-daftar .aw-lambang { width: 36px; height: 36px; }
    .aw-daftar .aw-pt-n b, .aw-daftar .aw-pt-n small { white-space: normal; overflow: visible; text-overflow: clip; }
    .aw-mini { grid-column: 2; justify-content: flex-start; text-align: left; }
    .aw-mini b { font-size: 15px; }
    .aw-ring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .aw-ring dd { font-size: clamp(28px, 8vw, 38px); }
    .aw-ring dt { font-size: 10px; letter-spacing: .14em; }
    .aw-kampus { overflow: visible; max-width: none; }                                 /* HP tegak: daftar tampil penuh, halaman yang digulir */
}
/* layar pendek mendatar (HP miring, jendela rendah): dua kolom ringkas */
@media (orientation: landscape) and (max-height: 560px) {
    .aw-grid { padding-top: 64px; row-gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); min-height: 0; }
    .aw-tabir { width: calc(var(--gut) + (100% - 2 * var(--gut)) * .54 + 140px); }
    .aw-eyebrow { display: none; }
    .aw-judul { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .aw-kata { font-size: 26px; } .aw-bab { font-size: 16px; }
    .aw-profil { padding: 6px 0; }
    .aw-prog { margin-bottom: 6px; font-size: 10.5px; }
    .aw-depan, .aw-depan.rapat, .aw-depan.rapat2 { font-size: clamp(26px, 7.4vh, 40px); }
    .aw-belakang { font-size: clamp(15px, 4.2vh, 22px); }
    .aw-sekat { margin: 8px 0; }
    .aw-lambang { width: 40px; height: 40px; }
    .aw-rank { margin-top: 8px; } .aw-rank dd { font-size: 22px; }
    .aw-daftar li { padding: 3px 0; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; } .aw-mini b { font-size: 14px; } .aw-mini em { font-size: 8.5px; }
    .aw-daftar .aw-lambang { width: 28px; height: 28px; }
    .aw-daftar .aw-pt-n b, .aw-daftar .aw-pt-n small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
    .aw-daftar .aw-pt-n small { font-size: 10.5px; } .aw-daftar .aw-bendera { display: none; }
    .aw-ring dd { font-size: 30px; } .aw-babjudul { font-size: 24px; margin-bottom: 10px; }
    .aw-kampus { margin-top: 8px; } .aw-kampus li { padding: 3px 0; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; } .aw-kampus .aw-lambang { width: 24px; height: 24px; }
    .aw-kampus .aw-pt-n b { -webkit-line-clamp: 1; font-size: 12px; } .aw-kampus .aw-pt-n small { display: none; }
    .aw-kampus.lebih { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(180deg, transparent, #000 6px, #000 calc(100% - 16px), transparent); }
    .aw-kampus.lebih ul { padding: 6px 0 16px; }                                       /* kotak pendek: pudaran tipis agar pita terbaca tetap lebar */
    .aw-komposisi { margin-bottom: 6px; } .aw-jalur { margin-bottom: 8px; } .aw-jalur li { padding: 2px 0; } .aw-jalur .aw-pt-n small { display: none; } .aw-jalur .v { font-size: 17px; }
    .aw-babjudul .l { display: inline-block; margin-right: .26em; }                  /* judul rekap/bab satu baris: hemat tinggi */
    .aw-catatan { display: none; }
    .aw-pita { padding-top: 4px; } .aw-wajah { width: 26px; } .aw-ico { width: 32px; height: 32px; }
    .aw-kel-j { display: none; } .aw-pita-gulir { padding-bottom: 6px; } .aw-kendali { padding-bottom: 4px; }
}
@media (max-width: 400px) {
    .aw-wajah { width: 34px; }
    .aw-wajah-baris { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .aw-kampus { overflow-y: auto; scrollbar-width: thin; }                            /* tanpa gulir otomatis: bisa digulir sendiri */
    .aw-kampus, .aw-kampus * { transition: none !important; }                          /* transisi .01ms global RM membuat offsetHeight tepat setelah ganti kelas membaca ukuran lama */
    .aw-wajah { transition: none; }
    .aw-kamera { animation: none; }
}
@media (forced-colors: active) {
    .aw-latar, .aw-sorot, .aw-lantai, .aw-tabir { display: none; }
    .aw-k3 { outline: 1px solid CanvasText; }
    .aw-wajah[aria-current="true"]::before { box-shadow: none; outline: 2px solid Highlight; }
}