/* ==========================================================================
   Achievement — prestasi sertifikasi bahasa santri (tab ketiga di halaman login)
   auth/login.php + assets/prestasi/prestasi.js + assets/prestasi/data.json

   Bahasa visual sama dengan Peta Alumni ("malam hutan", gading, Plus Jakarta Sans + Inter; token warna dari
   peta-login.css). Tiap ujian punya warna sendiri (--kc) dan aksara khas bahasanya sebagai latar kartu.
   Gerak hanya transform/opacity/clip-path (murah), semua berhenti bila "kurangi gerakan" aktif.
   ========================================================================== */

/* ---------- Tampilan (adegan) ---------- */
.pr {
    position: fixed; inset: 0; z-index: 5;
    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:
        radial-gradient(ellipse 55% 60% at 72% 42%, rgba(21, 128, 61, .30), transparent 72%),
        radial-gradient(ellipse 60% 50% at 4% 100%, rgba(16, 122, 70, .24), transparent 70%),
        linear-gradient(180deg, var(--malam) 0%, var(--malam-2) 58%, #03150d 100%);
}
html[data-scene="prestasi"] .pr { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .7s var(--ps-ease); }
body.split .pr { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s var(--ps-ease), visibility 0s linear .55s; }
html[data-scene="prestasi"] .landing {
    opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.97);
    transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.pr.pr-kunci { overflow: hidden; }                 /* panel nama terbuka: latar tak ikut tergulir */

.pr-grid {
    position: relative; z-index: 1; min-height: 100%;
    display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: center;
    padding: clamp(84px, 11vh, 104px) max(var(--gut), env(safe-area-inset-right, 0px)) clamp(20px, 4vh, 40px) max(var(--gut), env(safe-area-inset-left, 0px));
}

/* ---------- Kolom kiri ---------- */
.pr-copy { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 22px); min-width: 0; }
.pr-eyebrow {
    margin: 0; display: flex; align-items: center; gap: 12px;
    font: 600 11.5px/1.2 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-faint);
}
.pr-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--ps-line2), rgba(246, 243, 232, 0)); }
.pr-judul { margin: 0; font: 800 clamp(44px, min(5vw, 8vh), 84px)/.98 var(--f-disp); letter-spacing: -.045em; color: var(--gading); }
.pr-judul .w { display: inline-block; padding: 0 .05em .12em; margin: 0 -.05em -.12em; overflow: hidden; vertical-align: top; }
.pr-judul .w > i { display: inline-block; font-style: normal; }
.pr-judul em {                                      /* aksen: garis emas tipis yang "menggores" di bawah judul */
    display: block; width: 72px; height: 3px; margin-top: 18px; border-radius: 3px; font-style: normal;
    background: linear-gradient(90deg, var(--emas), rgba(217, 178, 95, 0)); transform-origin: left center;
}
.pr-lead { margin: 0; max-width: 40ch; font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.6; color: var(--ps-mut); }
.pr-lead b { font-weight: 700; color: var(--gading); white-space: nowrap; }

.pr-ring { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.pr-ring > div { padding: 14px 4px 13px 0; min-width: 0; }
.pr-ring > div + div { padding-left: 16px; border-left: 1px solid var(--ps-line); }
.pr-ring dt { order: 2; font: 500 12px/1.3 'Inter', sans-serif; color: var(--ps-faint); }
.pr-ring dd { margin: 0 0 4px; font: 800 clamp(26px, 2.4vw, 34px)/1 var(--f-disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--gading); }
.pr-ring > div { display: flex; flex-direction: column; }

/* pita salam: lima bahasa ujian + salam pesantren, bergerak pelan tanpa henti */
.pr-salam { position: relative; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pr-salam-j { display: flex; width: max-content; gap: 0; animation: pr-pita 38s linear infinite; }
.pr-salam-j span { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; white-space: nowrap; font: 600 15px/1.4 'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans SC', system-ui, sans-serif; color: rgba(246, 243, 232, .5); }
.pr-salam-j span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(217, 178, 95, .6); }
.pr-salam-j span:hover { color: var(--gading); }
@keyframes pr-pita { to { transform: translateX(-50%); } }
.pr-petunjuk { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ps-faint); }
.pr-petunjuk i { color: var(--emas); font-size: 12px; animation: pr-tunjuk 2.4s var(--ps-ease) infinite; }
@keyframes pr-tunjuk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---------- Kartu ujian (bento: 2 besar + 3 ringkas) ---------- */
.pr-kartu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.pr-card {
    --kc: 246, 243, 232; --mx: 70%; --my: 0%;
    grid-column: span 2; position: relative; isolation: isolate; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    min-height: 196px; padding: 18px 18px 16px; border-radius: 18px; text-align: left; cursor: pointer;
    border: 1px solid var(--ps-line); color: var(--gading); font: inherit;
    background: linear-gradient(160deg, rgba(var(--kc), .10) 0%, rgba(255, 255, 255, .02) 55%), rgba(3, 22, 14, .55);
    transition: transform .5s var(--ps-ease), border-color .35s ease, box-shadow .45s ease;
}
.pr-card.besar { grid-column: span 3; min-height: 300px; padding: 22px 22px 18px; }
/* sorotan cahaya yang mengikuti penunjuk */
.pr-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--kc), .20), transparent 60%);
}
.pr-card:hover::before, .pr-card:focus-visible::before { opacity: 1; }
.pr-card:hover { transform: translateY(-4px); border-color: rgba(var(--kc), .55); box-shadow: 0 24px 50px -28px rgba(var(--kc), .55), 0 0 0 1px rgba(var(--kc), .12); }
.pr-card:focus-visible { outline: 2px solid var(--gading); outline-offset: 3px; }
.pr-card:active { transform: translateY(-1px) scale(.995); }

/* aksara khas bahasa sebagai latar (Aa · あ · é · ß · 汉) — bergeser sedikit melawan penunjuk */
.pr-aksara {
    position: absolute; right: -2%; bottom: -14%; z-index: -1; pointer-events: none; user-select: none;
    font: 800 clamp(120px, 12vw, 200px)/1 'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans SC', 'Hiragino Sans', 'Microsoft YaHei', system-ui, sans-serif;
    letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.2px rgba(var(--kc), .32);
    transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .6s var(--ps-ease), -webkit-text-stroke-color .4s ease;
    animation: pr-apung 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.7s);
}
.pr-card.besar .pr-aksara { font-size: clamp(170px, 16vw, 280px); }
.pr-card:hover .pr-aksara { -webkit-text-stroke-color: rgba(var(--kc), .6); }
@keyframes pr-apung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.pr-atas { display: flex; align-items: center; gap: 10px; width: 100%; }
.pr-atas .fi { width: 26px; height: 19.5px; border-radius: 4px; background-size: cover; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 3px 8px rgba(0, 12, 6, .45); }
.pr-bhs { font: 600 12.5px/1.2 'Inter', sans-serif; color: var(--ps-mut); }
.pr-ikon { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: rgb(var(--kc)); background: rgba(var(--kc), .14); transition: transform .45s var(--ps-ease), background .3s ease, color .3s ease; }
.pr-card:hover .pr-ikon { transform: rotate(-45deg); background: rgb(var(--kc)); color: #06210f; }

.pr-nama { font: 800 clamp(26px, 2.4vw, 36px)/1 var(--f-disp); letter-spacing: -.035em; color: var(--gading); }
.pr-card.besar .pr-nama { font-size: clamp(34px, 3.2vw, 48px); }
.pr-lembaga { margin-top: -4px; font: 500 12px/1.35 'Inter', sans-serif; color: var(--ps-faint); }

.pr-angka { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.pr-angka b { font: 800 clamp(34px, 3vw, 46px)/1 var(--f-disp); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: rgb(var(--kc)); }
.pr-card.besar .pr-angka b { font-size: clamp(46px, 4.2vw, 64px); }
.pr-angka small { font: 600 13px/1.2 'Inter', sans-serif; color: var(--ps-mut); }
.pr-sorot { font: 500 12.5px/1.4 'Inter', sans-serif; color: var(--ps-mut); }
.pr-sorot b { font-weight: 700; color: var(--gading); }
.pr-tingkat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 12px/1 'Inter', sans-serif; color: #06210f; background: rgb(var(--kc)); }

/* visual mini: sebaran skor IELTS (batang) & komposisi level JLPT (pita bersegmen) */
.pr-viz { width: 100%; }
.pr-batang { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); align-items: end; gap: 6px; height: 80px; padding-top: 16px; box-sizing: border-box; }   /* 16 px di atas: ruang angka di puncak batang */
.pr-batang span { position: relative; display: block; height: var(--h, 0%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgb(var(--kc)), rgba(var(--kc), .35)); transform-origin: bottom; }
.pr-batang span[data-n="0"] { background: rgba(246, 243, 232, .12); }
.pr-batang span::after { content: attr(data-n); position: absolute; left: 0; right: 0; bottom: calc(100% + 3px); text-align: center; font: 700 10.5px/1 'Inter', sans-serif; color: var(--ps-mut); }
.pr-batang span[data-n="0"]::after { content: ""; }
.pr-sumbu { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; margin-top: 6px; font: 600 10.5px/1 'Inter', sans-serif; color: var(--ps-faint); text-align: center; font-variant-numeric: tabular-nums; }
.pr-pita { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(246, 243, 232, .08); gap: 2px; }
.pr-pita span { display: block; height: 100%; width: var(--w); background: rgba(var(--kc), var(--a, 1)); transform-origin: left; }
.pr-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font: 600 12px/1.2 'Inter', sans-serif; color: var(--ps-mut); }
.pr-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pr-legenda i { width: 9px; height: 9px; border-radius: 3px; background: rgba(var(--kc), var(--a, 1)); }
.pr-legenda b { color: var(--gading); font-variant-numeric: tabular-nums; }
.pr-lihat { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 'Inter', sans-serif; color: rgb(var(--kc)); }
.pr-lihat i { transition: transform .35s var(--ps-ease); }
.pr-card:hover .pr-lihat i { transform: translateX(4px); }

/* ---------- Gerak masuk (diputar ulang tiap tab dibuka) ---------- */
.pr.pr-masuk .pr-eyebrow, .pr.pr-masuk .pr-lead, .pr.pr-masuk .pr-ring, .pr.pr-masuk .pr-salam, .pr.pr-masuk .pr-petunjuk {
    animation: ps-naik .9s var(--ps-ease) both; animation-delay: calc(var(--d, 0) * 1ms);
}
.pr.pr-masuk .pr-eyebrow { --d: 60; } .pr.pr-masuk .pr-lead { --d: 380; } .pr.pr-masuk .pr-ring { --d: 480; } .pr.pr-masuk .pr-salam { --d: 580; } .pr.pr-masuk .pr-petunjuk { --d: 660; }
.pr.pr-masuk .pr-judul .w > i { animation: ps-kata 1s var(--ps-ease) both; animation-delay: 160ms; }
.pr.pr-masuk .pr-judul em { animation: pr-gores 1.1s var(--ps-ease) both; animation-delay: 520ms; }
@keyframes pr-gores { from { transform: scaleX(0); } }
.pr.pr-masuk .pr-card { animation: pr-kartu-masuk .95s var(--ps-ease) both; animation-delay: calc(var(--i, 0) * 85ms + 300ms); }
@keyframes pr-kartu-masuk { from { opacity: 0; transform: translateY(26px) scale(.985); clip-path: inset(18% 0 0 0 round 18px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 18px); } }
.pr.pr-masuk .pr-batang span { animation: pr-tumbuh .9s var(--ps-ease) both; animation-delay: calc(var(--j, 0) * 60ms + 760ms); }
@keyframes pr-tumbuh { from { transform: scaleY(0); } }
.pr.pr-masuk .pr-pita span { animation: pr-lebar 1s var(--ps-ease) both; animation-delay: calc(var(--j, 0) * 120ms + 820ms); }
@keyframes pr-lebar { from { transform: scaleX(0); } }

/* ---------- Panel nama (dialog) ---------- */
.pr-latar { position: fixed; inset: 0; z-index: 20; background: rgba(1, 10, 6, .62); opacity: 0; transition: opacity .35s ease; }
.pr-latar.on { opacity: 1; }
.pr-panel {
    --kc: 246, 243, 232;
    position: fixed; z-index: 21; top: 16px; right: 16px; bottom: 16px; width: min(500px, calc(100vw - 32px));
    display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
    border: 1px solid rgba(var(--kc), .35); color: var(--gading);
    background: linear-gradient(170deg, rgba(var(--kc), .12) 0%, rgba(3, 22, 14, 0) 38%), #041a11;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03);
}
.pr-panel[hidden], .pr-latar[hidden] { display: none; }
.pr-panel > * { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s var(--ps-ease); }
.pr-panel.isi > * { opacity: 1; transform: none; }
.pr-panel.isi > :nth-child(2) { transition-delay: .05s; } .pr-panel.isi > :nth-child(3) { transition-delay: .1s; } .pr-panel.isi > :nth-child(4) { transition-delay: .14s; }
.pr-hantu { position: fixed; z-index: 22; pointer-events: none; border-radius: 22px; transform-origin: 0 0; border: 1px solid rgba(var(--kc), .5); background: linear-gradient(160deg, rgba(var(--kc), .22), rgba(3, 22, 14, .96) 55%), #041a11; }

.pr-p-kepala { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; }
.pr-p-aksara { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; font: 800 26px/1 'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans SC', system-ui, sans-serif; color: #06210f; background: rgb(var(--kc)); box-shadow: 0 12px 26px -12px rgba(var(--kc), .9); }
.pr-p-kepala h2 { margin: 0; font: 800 26px/1.05 var(--f-disp); letter-spacing: -.035em; }
.pr-p-kepala p { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ps-mut); }
.pr-p-kepala .fi { width: 20px; height: 15px; border-radius: 3px; background-size: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.pr-tutup { margin-left: auto; align-self: flex-start; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid var(--ps-line); background: rgba(255, 255, 255, .05); color: var(--gading); font-size: 15px; transition: background .25s ease, transform .35s var(--ps-ease); }
.pr-tutup:hover { background: rgba(246, 243, 232, .14); transform: rotate(90deg); }
.pr-tutup:focus-visible, .pr-filter button:focus-visible, .pr-cari input:focus-visible { outline: 2px solid var(--gading); outline-offset: 2px; }

.pr-p-ringkas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.pr-p-ringkas span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: 10px; font: 500 12px/1 'Inter', sans-serif; color: var(--ps-mut); background: rgba(255, 255, 255, .045); border: 1px solid var(--ps-line); }
.pr-p-ringkas b { font: 800 15px/1 var(--f-disp); letter-spacing: -.02em; color: rgb(var(--kc)); }

.pr-p-alat { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 12px; border-bottom: 1px solid var(--ps-line); }
.pr-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-filter button { min-height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--ps-line); background: transparent; color: var(--ps-mut); font: 600 12.5px/1 'Inter', sans-serif; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.pr-filter button:hover { border-color: var(--ps-line2); color: var(--gading); }
.pr-filter button[aria-pressed="true"] { background: rgb(var(--kc)); border-color: rgb(var(--kc)); color: #06210f; }
.pr-cari { position: relative; }
.pr-cari i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ps-faint); pointer-events: none; }
.pr-cari input { width: 100%; min-height: 40px; padding: 0 12px 0 36px; border-radius: 11px; border: 1px solid var(--ps-line); background: rgba(255, 255, 255, .04); color: var(--gading); font: 500 14px/1 'Inter', sans-serif; }
.pr-cari input::placeholder { color: rgba(246, 243, 232, .4); }

.pr-daftar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(246, 243, 232, .3) transparent; }
.pr-kelompok { margin: 0; padding: 0; }
.pr-kelompok h3 {
    position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font: 700 11.5px/1.2 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-faint);
    background: linear-gradient(180deg, #041a11 70%, rgba(4, 26, 17, 0));
}
.pr-kelompok h3 b { color: var(--gading); letter-spacing: .06em; }
.pr-kelompok ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pr-orang {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 9px 10px 9px 8px; border-radius: 12px; transition: background .2s ease;
    animation: pr-orang .55s var(--ps-ease) both; animation-delay: calc(var(--j, 0) * 28ms + 120ms);
}
.pr-orang:hover { background: rgba(255, 255, 255, .045); }
@keyframes pr-orang { from { opacity: 0; transform: translateX(14px); } }
.pr-no { font: 700 11.5px/1 'Inter', sans-serif; color: var(--ps-faint); font-variant-numeric: tabular-nums; text-align: right; }
.pr-orang-n { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pr-orang-n span { font: 600 14px/1.25 'Inter', sans-serif; color: var(--gading); }
.pr-orang-n .pr-ket { margin-top: -2px; font: 500 12px/1.4 'Inter', sans-serif; color: var(--ps-faint); overflow-wrap: anywhere; }
.pr-skala { display: block; height: 3px; border-radius: 3px; background: rgba(246, 243, 232, .08); overflow: hidden; }
.pr-skala i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgba(var(--kc), .5), rgb(var(--kc))); transform-origin: left; animation: pr-lebar .9s var(--ps-ease) both; animation-delay: calc(var(--j, 0) * 28ms + 260ms); }
.pr-lencana { min-width: 46px; padding: 6px 9px; border-radius: 9px; text-align: center; font: 800 13.5px/1 var(--f-disp); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: rgb(var(--kc)); background: rgba(var(--kc), .13); border: 1px solid rgba(var(--kc), .3); }
.pr-orang.puncak .pr-lencana { color: #06210f; background: rgb(var(--kc)); border-color: rgb(var(--kc)); }
.pr-orang.puncak .pr-orang-n span::after { content: "\f005"; font: 900 10px/1 "Font Awesome 6 Free"; margin-left: 7px; color: var(--emas); vertical-align: 1px; }
.pr-kosong { padding: 28px 8px; text-align: center; font-size: 13.5px; color: var(--ps-faint); }
.pr-p-kaki { padding: 12px 20px 16px; border-top: 1px solid var(--ps-line); font-size: 11.5px; line-height: 1.5; color: var(--ps-faint); }

/* ---------- Layar menengah & besar ---------- */
@media (min-width: 1001px) {
    .pr-grid { height: 100%; min-height: 0; }
}
@media (min-width: 1001px) and (max-height: 760px) {
    .pr-grid { padding-top: 76px; padding-bottom: 16px; }
    .pr-copy { gap: 12px; }
    .pr-judul { font-size: clamp(40px, 7.4vh, 60px); }
    .pr-judul em { margin-top: 12px; }
    .pr-card { min-height: 160px; padding: 14px 15px 13px; gap: 7px; }
    .pr-card.besar { min-height: 238px; padding: 16px 18px 14px; }
    .pr-batang { height: 62px; }
    .pr-ring > div { padding-top: 10px; padding-bottom: 9px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
    .pr-grid { grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); }
    .pr-card { padding: 15px; } .pr-card.besar { padding: 18px; }
}
@media (min-width: 1680px) {
    .pr-grid { grid-template-columns: minmax(400px, 560px) minmax(0, 1fr); }
    .pr-card { min-height: 230px; } .pr-card.besar { min-height: 340px; }
}

/* ---------- Layar sempit: tumpuk ---------- */
@media (max-width: 1000px) {
    .pr-grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 26px; padding-top: 84px; padding-bottom: 32px; }
}
@media (max-width: 640px) {
    .pr-grid { padding-top: 78px; gap: 22px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
    .pr-judul { font-size: clamp(38px, 12vw, 52px); }
    .pr-judul em { margin-top: 12px; width: 56px; }
    .pr-lead { font-size: 14px; }
    .pr-ring dd { font-size: 24px; }
    .pr-ring > div + div { padding-left: 12px; }
    .pr-kartu { gap: 10px; }
    .pr-card.besar { grid-column: 1 / -1; min-height: 0; padding: 18px 18px 16px; }
    .pr-card { min-height: 0; padding: 13px 12px 12px; gap: 6px; border-radius: 16px; }
    .pr-card:not(.besar) .pr-atas .pr-bhs, .pr-card:not(.besar) .pr-lembaga, .pr-card:not(.besar) .pr-lihat, .pr-card:not(.besar) .pr-ikon { display: none; }
    .pr-card:not(.besar) .pr-nama { font-size: 20px; }
    .pr-card:not(.besar) .pr-angka b { font-size: 32px; }
    .pr-card:not(.besar) .pr-angka small { font-size: 11.5px; }
    .pr-card:not(.besar) .pr-aksara { font-size: 110px; }
    .pr-card.besar .pr-aksara { font-size: 190px; }
    .pr-tingkat { padding: 4px 8px; font-size: 11px; }
    /* panel nama = lembar dari bawah */
    .pr-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0; }
    .pr-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(246, 243, 232, .25); }
    .pr-p-kepala { padding-top: 24px; }
    .pr-p-aksara { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
    .pr-p-kepala h2 { font-size: 22px; }
}

/* ---------- Preferensi sistem ---------- */
@media (prefers-reduced-motion: reduce) {
    .pr-salam-j, .pr-aksara, .pr-petunjuk i { animation: none !important; }
    .pr-card, .pr-card:hover { transform: none; }
}
.pr.pr-diam .pr-salam-j, .pr.pr-diam .pr-aksara, .pr.pr-diam .pr-petunjuk i { animation-play-state: paused; }   /* tab tersembunyi / bukan adegan aktif */
@media (forced-colors: active) { .pr-card { border: 1px solid CanvasText; } .pr-filter button[aria-pressed="true"] { outline: 2px solid Highlight; } }

/* ---------- Sorotan peraih OTOMATIS (berganti tiap 4,5 dtk; kartu ujiannya menyala) ---------- */
.pr-pamer {
    --kc: 217, 178, 95;
    position: relative; overflow: hidden; border-radius: 16px;
    border: 1px solid rgba(var(--kc), .38);
    background: linear-gradient(150deg, rgba(var(--kc), .13) 0%, rgba(255, 255, 255, .02) 62%), rgba(3, 22, 14, .6);
    transition: border-color .6s ease, background .6s ease;
}
.pr-pamer[hidden] { display: none; }
.pr-pamer-kepala { display: flex; align-items: center; gap: 9px; padding: 11px 11px 0 14px; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-faint); }
.pr-pamer-titik { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgb(var(--kc)); animation: pr-denyut 1.8s ease-out infinite; transition: background .6s ease; }
@keyframes pr-denyut { 0% { box-shadow: 0 0 0 0 rgba(var(--kc), .6); } 100% { box-shadow: 0 0 0 9px rgba(var(--kc), 0); } }
.pr-pamer.dijeda .pr-pamer-titik { animation: none; opacity: .5; }
.pr-pamer-hit { margin-left: auto; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pr-pamer-jeda { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid var(--ps-line); background: rgba(255, 255, 255, .04); color: var(--gading); font-size: 10px; transition: background .25s ease; }
.pr-pamer-jeda:hover { background: rgba(246, 243, 232, .12); }
.pr-pamer-isi { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 10px 14px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr-pamer-lencana {
    flex: none; min-width: 60px; height: 60px; padding: 0 9px; display: grid; place-items: center; border-radius: 15px;
    font: 800 22px/1 var(--f-disp); letter-spacing: -.03em; white-space: nowrap; color: #06210f; background: rgb(var(--kc));
    box-shadow: 0 12px 26px -12px rgba(var(--kc), .9); transition: background .6s ease, box-shadow .6s ease;
}
.pr-pamer-teks { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-pamer-teks b { font: 800 19px/1.2 var(--f-disp); letter-spacing: -.02em; color: var(--gading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-pamer-teks small { font: 600 12px/1.2 'Inter', sans-serif; color: rgb(var(--kc)); transition: color .6s ease; }
.pr-pamer-panah { margin-left: auto; flex: none; font-size: 13px; color: var(--ps-faint); transition: transform .35s var(--ps-ease), color .3s ease; }
.pr-pamer-isi:hover .pr-pamer-panah { transform: translateX(4px); color: rgb(var(--kc)); }
.pr-pamer-isi:focus-visible, .pr-pamer-jeda:focus-visible { outline: 2px solid var(--gading); outline-offset: -2px; border-radius: 14px; }
.pr-pamer-maju { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(246, 243, 232, .08); }
.pr-pamer-maju i { display: block; height: 100%; background: rgb(var(--kc)); transform-origin: left center; transform: scaleX(0); transition: background .6s ease; }
.pr.pr-masuk .pr-pamer { animation: ps-naik .9s var(--ps-ease) both; animation-delay: 540ms; }

/* kartu yang sedang disorot otomatis: menyala + kilau menyapu sekali tiap giliran */
.pr-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit;
    background: linear-gradient(105deg, transparent 34%, rgba(var(--kc), .18) 47%, rgba(255, 255, 255, .08) 50%, rgba(var(--kc), .18) 53%, transparent 66%);
    background-size: 260% 100%; background-position: 130% 0;
}
.pr-card.sorot { border-color: rgba(var(--kc), .72); box-shadow: 0 24px 50px -28px rgba(var(--kc), .65), 0 0 0 1px rgba(var(--kc), .18); }
.pr-card.sorot::after { animation: pr-kilap 1.7s var(--ps-ease) both; }
.pr-card.sorot .pr-aksara { -webkit-text-stroke-color: rgba(var(--kc), .62); }
.pr-card.sorot .pr-ikon { background: rgb(var(--kc)); color: #06210f; }
@keyframes pr-kilap { 0% { opacity: 1; background-position: 130% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }

@media (min-width: 1001px) and (max-height: 860px) { .pr-petunjuk { display: none; } }
@media (min-width: 1001px) and (max-height: 760px) {
    .pr-lead { display: none; }
    .pr-pamer-isi { min-height: 74px; padding: 8px 12px 11px; }
    .pr-pamer-lencana { min-width: 50px; height: 50px; font-size: 19px; border-radius: 13px; }
    .pr-pamer-teks b { font-size: 17px; }
}
@media (max-width: 640px) { .pr-pamer-teks b { font-size: 17px; } .pr-pamer-lencana { min-width: 52px; height: 52px; font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .pr-card.sorot::after, .pr-pamer-titik { animation: none !important; } }
.pr.pr-diam .pr-pamer-titik { animation-play-state: paused; }
/* tombol "Jeda tayangan" di dalam sidebar — hanya saat sidebar dibuka tayangan otomatis */
.pr-p-jeda { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; white-space: nowrap; border-radius: 999px; cursor: pointer; border: 1px solid rgba(var(--kc), .45); background: rgba(var(--kc), .12); color: var(--gading); font: 600 12.5px/1 'Inter', sans-serif; transition: background .25s ease; }
.pr-p-jeda:hover { background: rgba(var(--kc), .24); }
.pr-p-jeda i { font-size: 10px; color: rgb(var(--kc)); }
.pr-p-jeda:focus-visible { outline: 2px solid var(--gading); outline-offset: 2px; }
.pr-p-jeda[hidden] { display: none; }
@media (max-width: 640px) { .pr-p-jeda { padding: 0 10px; } }