/* ============================================================================
   POIN-CENTER.CSS — Papan Peringkat Poin & Input Poin Massal
   Sistem Absensi & Pengasuhan Santri — Tahap 2
   ----------------------------------------------------------------------------
   Meneruskan token dari premium.css. Seluruh animasi memakai transform dan
   opacity saja, dan dikalikan --motion-scale sehingga otomatis mati saat
   prefers-reduced-motion aktif atau pengguna mematikannya dari modal Tema.
   ============================================================================ */

/* ==========================================================================
   1. PANEL
   ========================================================================== */
.pc-panel { position: relative; }

.pc-panel-head {
    position: relative;
    display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
    padding: 18px 20px;
    background: linear-gradient(135deg, #101A2B 0%, #16233A 46%, #1B2D49 100%);
    color: #fff;
    overflow: hidden;
}
/* Kilau brass sangat tipis di sudut — penanda, bukan hiasan. */
.pc-panel-head::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(52% 130% at 88% 0%, rgb(var(--brass-soft) / .16), transparent 68%),
        radial-gradient(40% 120% at 12% 100%, rgb(var(--c-primary-400) / .18), transparent 70%);
}
.pc-panel-head::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .30;
    background-image:
        linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(64% 90% at 76% 18%, #000, transparent 76%);
    -webkit-mask-image: radial-gradient(64% 90% at 76% 18%, #000, transparent 76%);
}
.pc-panel-head > * { position: relative; z-index: 1; }

.pc-panel-mark {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 17px; color: rgb(var(--brass-soft));
    background: rgb(255 255 255 / .09);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}
.pc-panel-eyebrow {
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgb(var(--brass-soft));
}
.pc-panel-title {
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 1.1875rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.2;
    margin-top: 3px; color: #fff;
}
.pc-panel-desc { font-size: .8125rem; color: rgb(255 255 255 / .60); margin-top: 4px; }
.pc-panel-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.pc-btn-glass {
    background: rgb(255 255 255 / .14) !important;
    border: 1px solid rgb(255 255 255 / .22) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
}
@media (hover: hover) {
    .pc-btn-glass:hover { background: rgb(255 255 255 / .22) !important; border-color: rgb(var(--brass-soft) / .5) !important; }
}

/* ==========================================================================
   2. FILTER
   ========================================================================== */
.pc-filters {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 14px 20px;
    background: rgb(var(--surface-sunken));
    border-bottom: 1px solid rgb(var(--hairline));
}
html.dark .pc-filters { border-bottom-color: rgb(var(--hairline) / .09); }

.pc-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pc-filter-label {
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--text-muted)); flex: none;
}

.pc-segs {
    display: inline-flex; gap: 2px; padding: 3px;
    border-radius: var(--r-md);
    background: rgb(var(--surface));
    border: 1px solid rgb(var(--hairline));
    max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.pc-segs::-webkit-scrollbar { display: none; }
html.dark .pc-segs { background: rgb(var(--surface-raised)); border-color: rgb(var(--hairline) / .12); }

.pc-seg {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
    background: transparent; cursor: pointer;
    font-size: .8125rem; font-weight: 650; color: rgb(var(--text-muted));
    transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.pc-seg i { font-size: .6875rem; }
@media (hover: hover) { .pc-seg:hover { color: rgb(var(--text-strong)); background: rgb(var(--c-primary-500) / .07); } }
.pc-seg.is-active {
    background: rgb(var(--c-primary-600)); color: #fff;
    box-shadow: var(--e1);
}
.pc-seg.is-active i { color: rgb(var(--brass-soft)); }
@media (pointer: coarse) { .pc-seg { min-height: 40px; } }

.pc-select { min-height: 36px; max-width: 250px; font-size: .8125rem; padding-top: 6px; padding-bottom: 6px; }
@media (pointer: coarse) { .pc-select { min-height: 44px; } }

/* ==========================================================================
   3. DUA PAPAN BERDAMPINGAN
   ========================================================================== */
.pc-boards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.pc-boards > .pc-board + .pc-board { border-left: 1px solid rgb(var(--hairline)); }
html.dark .pc-boards > .pc-board + .pc-board { border-left-color: rgb(var(--hairline) / .09); }
@media (max-width: 899px) {
    .pc-boards { grid-template-columns: 1fr; }
    .pc-boards > .pc-board + .pc-board {
        border-left: 0; border-top: 1px solid rgb(var(--hairline));
    }
    html.dark .pc-boards > .pc-board + .pc-board { border-top-color: rgb(var(--hairline) / .09); }
}

.pc-board { padding: 16px 18px 18px; min-width: 0; }
.pc-board-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.pc-board-icon {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    display: grid; place-items: center; font-size: 13px;
}
.pc-board--danger .pc-board-icon { background: rgb(var(--danger) / .12); color: rgb(var(--danger)); }
.pc-board--ok     .pc-board-icon { background: rgb(var(--ok) / .12);     color: rgb(var(--ok)); }
.pc-board-title { font-size: .9375rem; font-weight: 700; letter-spacing: -.015em; color: rgb(var(--text-strong)); }
.pc-board-sub   { font-size: .75rem; color: rgb(var(--text-muted)); margin-top: 2px; line-height: 1.4; }

/* ==========================================================================
   4. BARIS PERINGKAT
   ========================================================================== */
.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.pc-row {
    opacity: 0;
    transform: translateY(calc(10px * var(--motion-scale)));
}
.pc-row.is-in {
    animation: pcRowIn 380ms var(--ease-entrance) forwards;
    animation-delay: var(--pc-delay, 0ms);
}
@keyframes pcRowIn { to { opacity: 1; transform: none; } }

.pc-row-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: var(--r-md);
    border: 1px solid transparent; background: transparent; cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
    .pc-row-btn:hover {
        background: rgb(var(--surface-sunken));
        border-color: rgb(var(--hairline));
        transform: translateX(calc(2px * var(--motion-scale)));
    }
    html.dark .pc-row-btn:hover { background: rgb(var(--hairline) / .05); border-color: rgb(var(--hairline) / .10); }
}
.pc-row-btn:active { transform: none; }
@media (pointer: coarse) { .pc-row-btn { min-height: 56px; } }

/* --- Nomor peringkat: 1-3 mendapat medali, sisanya angka tenang ----------- */
.pc-rank {
    width: 28px; height: 28px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: .8125rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgb(var(--neutral) / .12); color: rgb(var(--text-muted));
    border: 1px solid transparent;
}
.pc-rank--satu {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #C9B385, #8F7846 62%, #6E5A34);
    color: #FFFBF0; border-color: rgb(var(--brass-soft) / .55);
    box-shadow: 0 1px 6px -2px rgb(143 120 70 / .55), inset 0 1px 0 rgb(255 255 255 / .28);
}
/* Kilau tunggal saat muncul — sekali jalan, tidak berulang. */
.pc-rank--satu::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .55) 50%, transparent 68%);
    transform: translateX(-140%);
    animation: pcSheen 1100ms var(--ease-out) 520ms 1 both;
}
@keyframes pcSheen { to { transform: translateX(140%); } }
.pc-rank--dua {
    background: linear-gradient(140deg, #D6DCE4, #A8B2C0 64%, #8D97A6);
    color: #1B2434; border-color: rgb(141 151 166 / .5);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .38);
}
.pc-rank--tiga {
    background: linear-gradient(140deg, #D8A87C, #B27F53 64%, #91653F);
    color: #FFF6EC; border-color: rgb(145 101 63 / .5);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24);
}

.pc-row-main { flex: 1; min-width: 0; }
.pc-row-name {
    display: block; font-size: .875rem; font-weight: 650; line-height: 1.3;
    color: rgb(var(--text-strong));
}
.pc-row-meta {
    display: block; font-size: .6875rem; color: rgb(var(--text-muted));
    margin-top: 2px; font-weight: 550;
}

/* --- Bar proporsi: tumbuh dari kiri, sekali saja --------------------------- */
.pc-bar {
    display: block; height: 4px; border-radius: 2px; margin-top: 7px;
    background: rgb(var(--text-faint) / .16); overflow: hidden;
}
.pc-bar-fill {
    display: block; height: 100%; border-radius: 2px;
    width: var(--pc-w, 0%);
    transform: scaleX(0); transform-origin: left center;
}
.pc-row.is-in .pc-bar-fill {
    animation: pcBarGrow 560ms var(--ease-entrance) forwards;
    animation-delay: calc(var(--pc-delay, 0ms) + 90ms);
}
@keyframes pcBarGrow { to { transform: scaleX(1); } }
.pc-board--danger .pc-bar-fill { background: linear-gradient(90deg, rgb(var(--danger) / .55), rgb(var(--danger))); }
.pc-board--ok     .pc-bar-fill { background: linear-gradient(90deg, rgb(var(--ok) / .55),     rgb(var(--ok))); }

.pc-row-score { flex: none; text-align: right; min-width: 52px; }
.pc-score {
    display: block; font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 1.1875rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em;
}
.pc-board--danger .pc-score { color: rgb(var(--danger)); }
.pc-board--ok     .pc-score { color: rgb(var(--ok)); }
.pc-score-unit {
    display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgb(var(--text-faint)); margin-top: 1px;
}

/* ==========================================================================
   5. INPUT POIN MASSAL
   ========================================================================== */
.pc-mass { min-height: 0; }

.pc-mass-hero {
    position: relative; overflow: hidden;
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 20px; color: #fff;
    background: linear-gradient(135deg, #101A2B 0%, #17253D 48%, #1D3050 100%);
}
.pc-mass-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28;
    background-image:
        linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(58% 92% at 82% 16%, #000, transparent 76%);
    -webkit-mask-image: radial-gradient(58% 92% at 82% 16%, #000, transparent 76%);
}
.pc-mass-hero > * { position: relative; z-index: 1; }
.pc-mass-title {
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 1.1875rem; font-weight: 700; letter-spacing: -.022em; margin-top: 3px; color: #fff;
}
.pc-mass-desc { font-size: .8125rem; color: rgb(255 255 255 / .60); margin-top: 5px; line-height: 1.55; max-width: 60ch; }

.pc-close {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); color: #fff;
    cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .pc-close:hover { background: rgb(255 255 255 / .22); } }

/* --- Tata letak dua kolom ------------------------------------------------- */
.pc-mass-grid {
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
}
.pc-mass-left {
    padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
    border-right: 1px solid rgb(var(--hairline));
}
html.dark .pc-mass-left { border-right-color: rgb(var(--hairline) / .09); }
.pc-mass-right { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 899px) {
    .pc-mass-grid { grid-template-columns: 1fr; }
    .pc-mass-left { border-right: 0; border-bottom: 1px solid rgb(var(--hairline)); }
    html.dark .pc-mass-left { border-bottom-color: rgb(var(--hairline) / .09); }
}

.pc-mass-left > div {
    opacity: 0; transform: translateY(calc(8px * var(--motion-scale)));
}
.pc-mass-left > div.is-in { animation: pcRowIn 300ms var(--ease-entrance) forwards; }
.pc-mass-left > div:nth-child(2).is-in { animation-delay: 40ms; }
.pc-mass-left > div:nth-child(3).is-in { animation-delay: 70ms; }
.pc-mass-left > div:nth-child(4).is-in { animation-delay: 100ms; }
.pc-mass-left > div:nth-child(5).is-in { animation-delay: 130ms; }

/* --- Pemilih jenis: dua kartu besar -------------------------------------- */
.pc-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-type {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 13px 14px; border-radius: var(--r-md); cursor: pointer;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--hairline-strong));
    transition: border-color var(--dur-micro) var(--ease-out),
                background-color var(--dur-micro) var(--ease-out),
                box-shadow var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
}
html.dark .pc-type { background: rgb(var(--surface-sunken)); border-color: rgb(var(--hairline) / .14); }
.pc-type i { font-size: 17px; flex: none; color: rgb(var(--text-faint)); transition: color var(--dur-micro) var(--ease-out); }
.pc-type strong { display: block; font-size: .875rem; font-weight: 700; color: rgb(var(--text-strong)); }
.pc-type small  { display: block; font-size: .6875rem; color: rgb(var(--text-muted)); margin-top: 2px; }
@media (hover: hover) { .pc-type:hover { border-color: rgb(var(--c-primary-300)); transform: translateY(calc(-1px * var(--motion-scale))); } }
@media (pointer: coarse) { .pc-type { min-height: 60px; } }

.pc-type--danger.is-active {
    background: rgb(var(--danger-wash)); border-color: rgb(var(--danger) / .45);
    box-shadow: 0 0 0 3px rgb(var(--danger) / .10);
}
.pc-type--danger.is-active i { color: rgb(var(--danger)); }
.pc-type--ok.is-active {
    background: rgb(var(--ok-wash)); border-color: rgb(var(--ok) / .45);
    box-shadow: 0 0 0 3px rgb(var(--ok) / .10);
}
.pc-type--ok.is-active i { color: rgb(var(--ok)); }

.pc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 400px) { .pc-field-row, .pc-type-picker { grid-template-columns: 1fr; } }

/* --- Alat pemilihan ------------------------------------------------------- */
.pc-pick-head { display: flex; flex-direction: column; gap: 9px; }
.pc-pick-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-pick-count {
    font-size: .75rem; font-weight: 600; color: rgb(var(--text-muted));
    padding: 7px 11px; border-radius: var(--r-sm);
    background: rgb(var(--c-primary-500) / .07);
    border: 1px solid rgb(var(--c-primary-500) / .16);
}
.pc-pick-count strong { color: rgb(var(--c-primary-700)); font-weight: 800; }
html.dark .pc-pick-count strong { color: rgb(var(--c-primary-200)); }

/* --- Daftar santri -------------------------------------------------------- */
.pc-pick-list {
    flex: 1; min-height: 190px; max-height: 42vh; overflow-y: auto;
    border: 1px solid rgb(var(--hairline)); border-radius: var(--r-md);
    background: rgb(var(--surface-sunken));
    padding: 6px;
    scrollbar-width: thin;
}
html.dark .pc-pick-list { border-color: rgb(var(--hairline) / .10); }
@media (max-width: 899px) { .pc-pick-list { max-height: 300px; } }

.pc-stulist { display: flex; flex-direction: column; gap: 4px; }

.pc-stu {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
    background: rgb(var(--surface)); border: 1px solid transparent;
    opacity: 0; transform: translateY(calc(6px * var(--motion-scale)));
    transition: border-color var(--dur-micro) var(--ease-out),
                background-color var(--dur-micro) var(--ease-out);
}
.pc-stu.is-in { animation: pcRowIn 260ms var(--ease-entrance) forwards; animation-delay: var(--pc-delay, 0ms); }
html.dark .pc-stu { background: rgb(var(--surface-raised)); }
@media (hover: hover) { .pc-stu:hover { border-color: rgb(var(--c-primary-300)); } }
@media (pointer: coarse) { .pc-stu { min-height: 52px; } }

.pc-stu input[type="checkbox"] {
    width: 19px; height: 19px; flex: none;
    accent-color: rgb(var(--c-primary-600)); cursor: pointer;
}
.pc-stu:has(input:focus-visible) { outline: 2px solid rgb(var(--c-primary-500)); outline-offset: 2px; }

.pc-stu-av {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    background: rgb(var(--c-primary-500) / .12); color: rgb(var(--c-primary-700));
    font-size: .8125rem; font-weight: 700;
    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
html.dark .pc-stu-av { color: rgb(var(--c-primary-200)); }
.pc-stu-main { flex: 1; min-width: 0; }
.pc-stu-name { display: block; font-size: .8125rem; font-weight: 650; color: rgb(var(--text-strong)); line-height: 1.3; }
.pc-stu-meta { display: block; font-size: .6875rem; color: rgb(var(--text-muted)); margin-top: 1px; }

.pc-stu-tick {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: .625rem;
    background: rgb(var(--ok)); color: #fff;
    opacity: 0; transform: scale(calc(1 - .35 * var(--motion-scale)));
    transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.pc-stu.is-on {
    background: rgb(var(--c-primary-500) / .09);
    border-color: rgb(var(--c-primary-500) / .38);
}
.pc-stu.is-on .pc-stu-av { background: rgb(var(--c-primary-600)); color: #fff; }
.pc-stu.is-on .pc-stu-tick { opacity: 1; transform: scale(1); }

/* ==========================================================================
   6. KAKI: ringkasan dampak & kemajuan penyimpanan
   ========================================================================== */
.pc-mass-foot { align-items: center; }
.pc-sum-wrap { min-width: 0; flex: 1; }
.pc-sum { font-size: .8125rem; color: rgb(var(--text)); font-weight: 550; }
.pc-sum strong { color: rgb(var(--text-strong)); font-weight: 800; }
.pc-sum-empty {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8125rem; font-weight: 600; color: rgb(var(--text-muted));
}

.pc-progress-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-progress {
    display: block; width: 160px; height: 6px; border-radius: 3px;
    background: rgb(var(--text-faint) / .18); overflow: hidden;
}
.pc-progress > span {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, rgb(var(--c-primary-500)), rgb(var(--brass-soft)));
    transition: width 220ms var(--ease-out);
}
.pc-progress-txt { font-size: .75rem; font-weight: 650; color: rgb(var(--text-muted)); }

/* ==========================================================================
   7. RESPONSIF
   ========================================================================== */
@media (max-width: 519px) {
    .pc-panel-head, .pc-mass-hero { padding: 16px; }
    .pc-filters { padding: 12px 16px; gap: 14px; flex-direction: column; align-items: stretch; }
    .pc-filter-group { flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; }
    /* PERBAIKAN — layar sempit: dulu baris "Cakupan" mengandalkan geser sentuh
       (overflow-x:auto) dan opsi terakhir (mis. "Per Kamar") bisa terpotong di luar
       layar tanpa jalan untuk menjangkaunya. Sekarang disusun melipat ke beberapa
       baris (flex-wrap) supaya SELURUH opsi selalu langsung terlihat, tidak lagi
       bergantung pada gestur geser yang tidak konsisten di semua perangkat. */
    .pc-segs { flex-wrap: wrap; overflow-x: visible; width: 100%; }
    .pc-segs .pc-seg { flex: 1 1 calc(50% - 2px); justify-content: center; }
    .pc-select { max-width: 100%; width: 100%; }
    .pc-board { padding: 14px 16px 16px; }
    .pc-mass-left, .pc-mass-right { padding: 16px; }
    .pc-panel-actions { width: 100%; }
    .pc-panel-actions .pbtn { width: 100%; }
    .pc-row-score { min-width: 46px; }
    .pc-score { font-size: 1.0625rem; }
}
@media (max-width: 359px) {
    .pc-panel-head, .pc-mass-hero, .pc-filters, .pc-board, .pc-mass-left, .pc-mass-right { padding-left: 14px; padding-right: 14px; }
    .pc-rank { width: 25px; height: 25px; font-size: .75rem; }
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pc-row, .pc-stu, .pc-mass-left > div { opacity: 1 !important; transform: none !important; animation: none !important; }
    .pc-bar-fill { transform: scaleX(1) !important; animation: none !important; }
    .pc-rank--satu::after { display: none; }
}
body[data-motion="off"] .pc-row,
body[data-motion="off"] .pc-stu,
body[data-motion="off"] .pc-mass-left > div { opacity: 1 !important; transform: none !important; animation: none !important; }
body[data-motion="off"] .pc-bar-fill { transform: scaleX(1) !important; animation: none !important; }
body[data-motion="off"] .pc-rank--satu::after { display: none; }

/* ==========================================================================
   9. CETAK
   ========================================================================== */
@media print {
    .pc-panel-actions, .pc-filters, .pc-close { display: none !important; }
    .pc-panel-head, .pc-mass-hero { background: #F3F2EF !important; color: #111 !important; }
    .pc-panel-head::before, .pc-panel-head::after, .pc-mass-hero::after { display: none !important; }
    .pc-panel-title, .pc-mass-title { color: #111 !important; }
    .pc-panel-eyebrow { color: #6E5A34 !important; }
    .pc-panel-desc, .pc-mass-desc { color: #4A5568 !important; }
    .pc-panel-mark { background: #E3E6EB !important; color: #6E5A34 !important; border-color: #C9CDD4 !important; }
    .pc-boards { grid-template-columns: 1fr 1fr !important; }
    .pc-row { opacity: 1 !important; transform: none !important; }
    .pc-bar-fill { transform: scaleX(1) !important; }
}