/* =============================================================================
 *  gamifikasi.css — BAHASA VISUAL GAMIFIKASI
 *
 *  Dipakai tiga permukaan yang harus terasa satu produk:
 *    · halaman Gamifikasi dalam aplikasi (papan peringkat + setelan admin)
 *    · profil santri dalam aplikasi
 *    · kartu.php — halaman hasil pindai QR (berdiri sendiri, memuat berkas ini)
 *
 *  ---------------------------------------------------------------------------
 *  GARIS YANG TIDAK DILEWATI
 *  ---------------------------------------------------------------------------
 *  Ini profil santri pesantren, bukan papan skor permainan. Perbedaannya bukan
 *  soal selera; ia menentukan bagaimana anak memandang capaiannya sendiri.
 *  Maka: tidak ada confetti, tidak ada ledakan partikel, tidak ada warna neon
 *  jenuh, tidak ada getaran atau denyut terus-menerus yang menuntut perhatian.
 *
 *  Yang dipakai sebagai gantinya: kedalaman lewat lapisan dan bayangan,
 *  kuningan tua sebagai penanda capaian tertinggi, cincin kemajuan yang
 *  mengisi sekali lalu diam, dan angka yang berhitung naik satu kali saat
 *  pertama terlihat. Semuanya berhenti setelah selesai — hidup, bukan gelisah.
 * ========================================================================== */

:root {
    --g-navy:     #101827;
    --g-navy-2:   #1B2B44;
    --g-kuningan: #B0965F;
    --g-kuningan-t:#E0D2B0;
    --g-hijau:    #047857;
    --g-merah:    #B91C1C;
    --g-safir:    #2B6CB5;
    --g-redup:    #64748B;
    --g-garis:    rgba(148,163,184,.26);
    --g-kartu:    #FFFEFC;
    --g-kanvas:   #F3F2EF;
    --g-lembut:   cubic-bezier(.22,1,.36,1);
}
.dark {
    --g-garis:  rgba(255,255,255,.09);
    --g-kartu:  #141D2E;
    --g-kanvas: #0A101B;
    --g-redup:  #94A3B8;
}

/* ==========================================================================
   1. PANEL DASAR
   ========================================================================== */

.v12-panel {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--g-garis);
    background: var(--g-kartu);
    padding: 16px;
    overflow: hidden;
    transition: border-color .3s var(--g-lembut), box-shadow .3s var(--g-lembut), transform .3s var(--g-lembut);
}
.v12-panel--angkat:hover {
    transform: translateY(-2px);
    border-color: rgba(176,150,95,.42);
    box-shadow: 0 16px 34px -22px rgba(16,24,39,.5);
}
.v12-panel-judul {
    margin: 0 0 2px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .015em;
    display: flex; align-items: center; gap: 8px;
}
.v12-panel-judul i { color: var(--g-kuningan); }
.v12-panel-ket { margin: 0; font-size: 11.5px; color: var(--g-redup); line-height: 1.5; }

/* ==========================================================================
   2. HERO PROFIL SANTRI
   --------------------------------------------------------------------------
   Medan identitas gelap dengan cincin level di sebelah foto. Inilah bagian
   yang pertama dilihat setelah QR dipindai, jadi seluruh informasi penentu
   (nama, kelas, level, XP, rank) harus selesai terbaca tanpa menggulir.
   ========================================================================== */

.v12-hero {
    position: relative; overflow: hidden;
    border-radius: 20px; padding: 20px 18px 18px;
    color: #fff;
    background: linear-gradient(155deg, var(--g-navy-2) 0%, var(--g-navy) 60%, #0A101B 100%);
    box-shadow: 0 20px 44px -28px rgba(10,16,27,.8);
}
.v12-hero::before {
    content: ''; position: absolute; inset: 0; opacity: .055; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M22 4 L28 16 L40 22 L28 28 L22 40 L16 28 L4 22 L16 16 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Cahaya lembut yang bergeser sangat pelan. 18 detik: cukup untuk memberi
   kesan hidup, terlalu lambat untuk menarik perhatian dari isi. */
.v12-hero::after {
    content: ''; position: absolute; inset: -40%;
    background: radial-gradient(circle at 30% 20%, rgba(176,150,95,.2), transparent 46%);
    animation: v12-hanyut 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes v12-hanyut {
    from { transform: translate3d(-4%, -3%, 0); }
    to   { transform: translate3d(6%, 4%, 0); }
}

.v12-hero-kop { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.v12-hero-logo {
    width: 38px; height: 38px; flex: none; border-radius: 11px; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(224,210,176,.4);
}
.v12-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.v12-hero-logo span {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: var(--g-navy);
    background: linear-gradient(140deg, #E8DCBE, #C2A360);
}
.v12-hero-lembaga { min-width: 0; }
.v12-hero-lembaga p { margin: 0; }
.v12-hero-nama-lembaga {
    font-size: 10.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
    color: rgba(255,255,255,.93); line-height: 1.3;
}
.v12-hero-sub {
    font-size: 10px; font-weight: 500; color: var(--g-kuningan-t); opacity: .82;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.v12-hero-sosok { position: relative; z-index: 2; display: flex; gap: 16px; align-items: center; }

/* --- cincin level --- */
.v12-cincin { position: relative; width: 96px; height: 96px; flex: none; }
.v12-cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.v12-cincin .v12-cincin-alur { stroke: rgba(255,255,255,.14); }
.v12-cincin .v12-cincin-isi {
    stroke: url(#v12-grad-cincin);
    stroke-linecap: round;
    /* Mengisi sekali lalu berhenti. stroke-dashoffset dipasang inline oleh JS. */
    transition: stroke-dashoffset 1.5s var(--g-lembut);
}
.v12-cincin-foto {
    position: absolute; inset: 9px;
    border-radius: 50%; overflow: hidden;
    background: #223049;
    box-shadow: inset 0 0 0 1px rgba(224,210,176,.3);
}
.v12-cincin-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.v12-cincin-foto .v12-inisial {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800; color: rgba(255,255,255,.3);
}
/* Lencana level menempel di tepi bawah cincin. */
.v12-cincin-level {
    position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 99px; white-space: nowrap;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(135deg, var(--g-kuningan-t), var(--g-kuningan));
    color: var(--g-navy);
    box-shadow: 0 4px 12px -5px rgba(0,0,0,.6);
}

.v12-hero-teks { min-width: 0; flex: 1; }
.v12-hero-nama {
    margin: 0 0 5px; font-size: 21px; font-weight: 700;
    letter-spacing: -.02em; line-height: 1.15; word-break: break-word;
}
.v12-hero-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; color: rgba(255,255,255,.64); }
.v12-hero-meta b { color: rgba(255,255,255,.94); font-weight: 600; }

.v12-hero-lencana {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
    background: rgba(81,134,194,.2); border: 1px solid rgba(81,134,194,.4); color: #BBD3EE;
}
.v12-hero-lencana[data-s="nonaktif"] {
    background: rgba(220,38,38,.16); border-color: rgba(220,38,38,.4); color: #FCA5A5;
}

/* --- bilah XP di kaki hero --- */
.v12-xp-blok { position: relative; z-index: 2; margin-top: 16px; }
.v12-xp-baris {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 11.5px; color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.v12-xp-baris b { color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v12-xp-alur {
    position: relative; height: 9px; border-radius: 99px; overflow: hidden;
    background: rgba(255,255,255,.12);
}
.v12-xp-isi {
    position: absolute; inset: 0 auto 0 0; width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--g-safir), var(--g-kuningan-t) 78%, #fff);
    box-shadow: 0 0 14px -2px rgba(224,210,176,.65);
    transition: width 1.5s var(--g-lembut);
}
/* Kilau menyapu sekali saat bilah selesai terisi — penanda "tercatat",
   bukan animasi berulang yang menuntut perhatian terus-menerus. */
.v12-xp-isi::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
    transform: translateX(-100%);
    animation: v12-sapu 1.6s var(--g-lembut) 1.5s 1 forwards;
}
@keyframes v12-sapu { to { transform: translateX(100%); } }

/* ==========================================================================
   3. STATISTIK
   ========================================================================== */

.v12-stat-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
.v12-stat {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 12px 10px; text-align: center;
    background: var(--g-kartu); border: 1px solid var(--g-garis);
    transition: transform .28s var(--g-lembut), box-shadow .28s var(--g-lembut);
}
.v12-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(16,24,39,.5); }
.v12-stat::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--v12-stat-warna, var(--g-safir)), transparent);
}
.v12-stat-n {
    font-size: 21px; font-weight: 800; line-height: 1.05;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    color: var(--v12-stat-warna, inherit);
}
.v12-stat-l { font-size: 10.5px; color: var(--g-redup); margin-top: 3px; font-weight: 600; }
.v12-stat-i { font-size: 12px; opacity: .55; margin-bottom: 4px; color: var(--v12-stat-warna, inherit); }

/* Kartu rank — disorot karena inilah angka yang paling sering dicari. */
.v12-rank-kartu {
    display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.v12-rank-sel {
    border-radius: 14px; padding: 12px 8px; text-align: center;
    border: 1px solid var(--g-garis); background: var(--g-kartu);
    transition: transform .28s var(--g-lembut), border-color .28s var(--g-lembut);
}
.v12-rank-sel:hover { transform: translateY(-2px); border-color: rgba(176,150,95,.45); }
.v12-rank-n {
    font-size: 24px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.v12-rank-n small { font-size: 12px; font-weight: 600; color: var(--g-redup); letter-spacing: 0; }
.v12-rank-l { font-size: 10px; color: var(--g-redup); margin-top: 4px; font-weight: 700;
              letter-spacing: .07em; text-transform: uppercase; }
/* Tiga teratas ditandai warna medali, tidak lebih dari itu. */
.v12-rank-sel[data-medali="1"] { background: linear-gradient(150deg, rgba(224,210,176,.3), var(--g-kartu) 62%); border-color: rgba(176,150,95,.6); }
.v12-rank-sel[data-medali="2"] { background: linear-gradient(150deg, rgba(203,213,225,.34), var(--g-kartu) 62%); }
.v12-rank-sel[data-medali="3"] { background: linear-gradient(150deg, rgba(180,131,90,.24), var(--g-kartu) 62%); }

/* ==========================================================================
   4. LENCANA
   ========================================================================== */

.v12-badge-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.v12-badge {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 13px 8px 11px; text-align: center;
    border: 1px solid var(--g-garis); background: var(--g-kartu);
    transition: transform .3s var(--g-lembut), box-shadow .3s var(--g-lembut);
}
.v12-badge-ikon {
    width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: rgba(148,163,184,.14); color: #94A3B8;
    transition: transform .34s var(--g-lembut);
}
.v12-badge-nama { font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.v12-badge-ket  { font-size: 9.5px; color: var(--g-redup); margin-top: 2px; line-height: 1.3; }

.v12-badge[data-raih="1"] { border-color: rgba(176,150,95,.5); }
.v12-badge[data-raih="1"]::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(145deg, rgba(224,210,176,.2), transparent 58%);
    pointer-events: none;
}
.v12-badge[data-raih="1"] .v12-badge-ikon {
    background: linear-gradient(140deg, var(--v12-badge-warna, var(--g-kuningan)), rgba(255,255,255,.32));
    color: #fff;
    box-shadow: 0 6px 16px -8px var(--v12-badge-warna, var(--g-kuningan));
}
.v12-badge[data-raih="1"]:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(16,24,39,.55); }
.v12-badge[data-raih="1"]:hover .v12-badge-ikon { transform: scale(1.09) rotate(-4deg); }

/* Lencana yang belum diraih: redup, tapi kemajuannya terlihat. Menyembunyikan
   jaraknya justru membuat lencana terasa mustahil, bukan menantang. */
.v12-badge[data-raih="0"] { opacity: .62; }
.v12-badge[data-raih="0"]:hover { opacity: .88; }
.v12-badge-maju {
    margin-top: 7px; height: 3px; border-radius: 99px; overflow: hidden;
    background: rgba(148,163,184,.2);
}
.v12-badge-maju span {
    display: block; height: 100%; width: 0; border-radius: 99px;
    background: var(--v12-badge-warna, var(--g-safir));
    transition: width 1.2s var(--g-lembut);
}

/* ==========================================================================
   5. PAPAN PERINGKAT
   ========================================================================== */

.v12-papan { display: flex; flex-direction: column; gap: 7px; }
.v12-papan-baris {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 13px;
    border: 1px solid var(--g-garis); background: var(--g-kartu);
    transition: transform .26s var(--g-lembut), border-color .26s var(--g-lembut), box-shadow .26s var(--g-lembut);
    /* Muncul berurutan saat papan digambar; --i dipasang inline oleh JS. */
    animation: v12-naik .44s var(--g-lembut) both;
    animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes v12-naik { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.v12-papan-baris:hover { transform: translateX(3px); border-color: rgba(176,150,95,.45); box-shadow: 0 10px 22px -18px rgba(16,24,39,.55); }

.v12-papan-rank {
    width: 30px; flex: none; text-align: center;
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--g-redup);
}
.v12-papan-baris[data-medali] .v12-papan-rank { color: var(--g-navy); }
.dark .v12-papan-baris[data-medali] .v12-papan-rank { color: #fff; }
.v12-papan-baris[data-medali="1"] { background: linear-gradient(100deg, rgba(224,210,176,.26), var(--g-kartu) 46%); border-color: rgba(176,150,95,.55); }
.v12-papan-baris[data-medali="2"] { background: linear-gradient(100deg, rgba(203,213,225,.3), var(--g-kartu) 46%); }
.v12-papan-baris[data-medali="3"] { background: linear-gradient(100deg, rgba(180,131,90,.22), var(--g-kartu) 46%); }
.v12-papan-baris[data-aku="1"] {
    border-color: var(--g-safir);
    box-shadow: 0 0 0 1px rgba(43,108,181,.3), 0 10px 24px -18px rgba(43,108,181,.7);
}

.v12-papan-foto {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    object-fit: cover; object-position: center top; background: rgba(148,163,184,.18);
}
.v30-papan-foto { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; color: var(--g-redup, #64748b); background: #e2e8f0; }
.v30-papan-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: inherit; }
.v30-papan-foto > i { font-size: 20px; }
.v17-podium-foto > .v30-papan-foto { position: relative; }
.v12-papan-inisial {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--g-redup);
    background: rgba(148,163,184,.18);
}
.v12-papan-teks { min-width: 0; flex: 1; }
.v12-papan-nama { font-size: 12.5px; font-weight: 700; line-height: 1.25;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v12-papan-ket  { font-size: 10.5px; color: var(--g-redup); margin-top: 1px;
                  display: flex; flex-wrap: wrap; gap: 2px 8px; }
.v12-papan-lv {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800;
    background: rgba(43,108,181,.12); color: var(--g-safir);
}
.dark .v12-papan-lv { background: rgba(43,108,181,.24); color: #93C0EE; }
.v12-papan-poin {
    text-align: right; flex: none;
    font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.v12-papan-poin small { display: block; font-size: 9.5px; font-weight: 600;
                        color: var(--g-redup); letter-spacing: .05em; text-transform: uppercase; }

/* ==========================================================================
   6. SARINGAN (segmented control)
   ========================================================================== */

.v12-saring {
    display: inline-flex; padding: 3px; border-radius: 12px; gap: 2px;
    background: rgba(148,163,184,.14); border: 1px solid var(--g-garis);
}
.v12-saring button {
    position: relative;
    padding: 7px 14px; border-radius: 9px; border: 0; cursor: pointer;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    background: transparent; color: var(--g-redup);
    transition: color .24s var(--g-lembut), background .24s var(--g-lembut), transform .2s var(--g-lembut);
}
.v12-saring button:hover { color: inherit; }
.v12-saring button:active { transform: scale(.96); }
.v12-saring button[aria-selected="true"] {
    background: var(--g-kartu); color: inherit;
    box-shadow: 0 2px 8px -3px rgba(16,24,39,.32);
}

/* ==========================================================================
   7. LINI MASA PEMBINAAN — tanggal + kategori + poin + CATATAN
   --------------------------------------------------------------------------
   Catatan pembina adalah bagian yang paling sering hilang di tampilan lama
   (tabelnya hanya punya tiga kolom). Di sini ia punya tempat sendiri yang
   tidak bisa terlewat: blok kutipan di bawah barisnya.
   ========================================================================== */

.v12-lini { position: relative; padding-left: 20px; }
.v12-lini::before {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--g-garis), transparent);
}
.v12-lini-item {
    position: relative; padding: 0 0 15px;
    animation: v12-naik .4s var(--g-lembut) both;
    animation-delay: calc(var(--i, 0) * 34ms);
}
.v12-lini-item::before {
    content: ''; position: absolute; left: -18px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--v12-lini-warna, var(--g-safir));
    box-shadow: 0 0 0 3px var(--g-kanvas), 0 0 0 4px var(--v12-lini-warna, var(--g-safir));
}
.v12-lini-kepala {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.v12-lini-kategori { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.v12-lini-poin {
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v12-lini-poin[data-t="prestasi"]    { color: var(--g-hijau); }
.v12-lini-poin[data-t="pelanggaran"] { color: var(--g-merah); }
.v12-lini-tanggal {
    font-size: 10.5px; color: var(--g-redup); margin-top: 2px;
    display: flex; flex-wrap: wrap; gap: 2px 10px;
}
.v12-lini-note {
    margin-top: 7px; padding: 8px 11px; border-radius: 10px;
    font-size: 11.5px; line-height: 1.55; color: #475569;
    background: rgba(148,163,184,.1);
    border-left: 2px solid var(--v12-lini-warna, var(--g-safir));
}
.dark .v12-lini-note { color: #CBD5E1; background: rgba(255,255,255,.05); }
.v12-lini-kosong { font-size: 11.5px; color: var(--g-redup); font-style: italic; }

/* ==========================================================================
   8. KEADAAN: MEMUAT, KOSONG
   ========================================================================== */

.v12-skeleton {
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(148,163,184,.14) 30%, rgba(148,163,184,.25) 46%, rgba(148,163,184,.14) 62%);
    background-size: 280% 100%;
    animation: v12-kilau-u 1.35s ease-in-out infinite;
}
@keyframes v12-kilau-u { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.v12-skeleton-baris { height: 54px; margin-bottom: 8px; }
.v12-skeleton-hero  { height: 190px; border-radius: 20px; }

.v12-kosong { padding: 44px 16px; text-align: center; }
.v12-kosong i { font-size: 30px; color: rgba(148,163,184,.5); }
.v12-kosong p { margin: 11px 0 0; font-size: 12.5px; color: var(--g-redup); }
.v12-kosong b { display: block; font-size: 14px; color: inherit; margin-bottom: 3px; }

/* ==========================================================================
   9. FORMULIR ADMIN (aturan XP, level, lencana)
   ========================================================================== */

.v12-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.v12-tabel th, .v12-tabel td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--g-garis); vertical-align: middle; }
.v12-tabel th { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--g-redup); }
.v12-tabel tbody tr { transition: background .2s var(--g-lembut); }
.v12-tabel tbody tr:hover { background: rgba(148,163,184,.07); }
.v12-tabel tr:last-child td { border-bottom: 0; }
.v12-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.v12-pil {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 99px;
    font-size: 10px; font-weight: 800; letter-spacing: .03em;
}
.v12-pil[data-s="on"]  { background: rgba(4,120,87,.13);  color: var(--g-hijau); }
.v12-pil[data-s="off"] { background: rgba(100,116,139,.15); color: var(--g-redup); }
.v12-pil[data-s="minus"] { background: rgba(185,28,28,.12); color: var(--g-merah); }

/* Sakelar. Dibuat sendiri, bukan checkbox bawaan, karena sakelar ini menyalakan
   dan mematikan hal yang terlihat seluruh pesantren — ia perlu terbaca jelas
   dalam keadaan mati maupun hidup. */
.v12-sakelar { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; cursor: pointer; }
.v12-sakelar input { position: absolute; opacity: 0; pointer-events: none; }
.v12-sakelar-rel {
    position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px;
    background: rgba(148,163,184,.34);
    transition: background .28s var(--g-lembut);
}
.v12-sakelar-rel::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 5px rgba(16,24,39,.32);
    transition: transform .28s var(--g-lembut);
}
.v12-sakelar input:checked + .v12-sakelar-rel { background: linear-gradient(135deg, var(--g-safir), var(--g-navy-2)); }
.v12-sakelar input:checked + .v12-sakelar-rel::after { transform: translateX(18px); }
.v12-sakelar input:focus-visible + .v12-sakelar-rel { box-shadow: 0 0 0 3px rgba(43,108,181,.35); }
.v12-sakelar-teks b { display: block; font-size: 12.5px; font-weight: 700; }
.v12-sakelar-teks small { display: block; font-size: 11px; color: var(--g-redup); line-height: 1.5; margin-top: 2px; }

/* Panel unggah logo — umpan balik visual yang jelas di setiap tahap. */
.v12-logo-kotak {
    width: 104px; height: 104px; flex: none; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 2px dashed rgba(148,163,184,.42);
    background: rgba(148,163,184,.07);
    position: relative;
    transition: border-color .28s var(--g-lembut), background .28s var(--g-lembut);
}
.v12-logo-kotak.is-seret { border-color: var(--g-safir); background: rgba(43,108,181,.09); }
.v12-logo-kotak img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.v12-logo-kotak span { font-size: 10.5px; color: var(--g-redup); text-align: center; padding: 8px; line-height: 1.4; }
.v12-logo-kotak[data-keadaan="memuat"]::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%232B6CB5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E") center/26px no-repeat;
    animation: v12-putar .85s linear infinite;
}
@keyframes v12-putar { to { transform: rotate(360deg); } }
.v12-logo-kotak[data-keadaan="sukses"] { border-color: rgba(4,120,87,.6); border-style: solid; }
.v12-logo-kotak[data-keadaan="galat"]  { border-color: rgba(185,28,28,.6); }

.v12-pesan { font-size: 11.5px; line-height: 1.5; margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; }
.v12-pesan[data-j="sukses"] { color: var(--g-hijau); }
.v12-pesan[data-j="galat"]  { color: var(--g-merah); }
.v12-pesan[data-j="info"]   { color: var(--g-redup); }

/* ==========================================================================
   10. AKSESIBILITAS GERAK
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .v12-hero::after, .v12-xp-isi::after, .v12-logo-kotak[data-keadaan="memuat"]::after { animation: none; }
    .v12-papan-baris, .v12-lini-item { animation: none; }
    .v12-xp-isi, .v12-cincin .v12-cincin-isi, .v12-badge-maju span { transition: none; }
    .v12-panel--angkat:hover, .v12-stat:hover, .v12-papan-baris:hover, .v12-badge:hover { transform: none; }
}

/* ==========================================================================
   11. KOSMETIK v12.1 — BINGKAI (BORDER), GELAR, IKON PROFIL
   --------------------------------------------------------------------------
   Satu sumber tampilan untuk kartu.php, modal profil aplikasi, portal orang
   tua, dan pratinjau admin. Seluruh tampilan berasal dari metadata `visual`
   item di basis data — tidak ada nama atau warna yang ditulis di JavaScript.

   Anggaran gerak: hanya transform & opacity (murah untuk GPU). Tidak ada
   animasi yang mengubah tata letak. Semua berhenti pada reduced-motion.
   ========================================================================== */

.gb-av {
    position: relative; flex: none; isolation: isolate;
    width: var(--gb-sz, 96px); height: var(--gb-sz, 96px); border-radius: 50%;
}
.gb-ring, .gb-cahaya { position: absolute; border-radius: 50%; pointer-events: none; }
.gb-ring {
    inset: 0; z-index: 1; --tb: 17%;
    background: var(--c1);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--tb)), #000 calc(100% - var(--tb) + .6px));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--tb)), #000 calc(100% - var(--tb) + .6px));
}
.gb-isi {
    position: absolute; inset: 8.5%; z-index: 2; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #1B2B44; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.gb-isi > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gb-inisial { font-weight: 800; color: #E0D2B0; font-size: calc(var(--gb-sz, 96px) * .34); line-height: 1; }
.gb-cahaya { inset: -5%; z-index: 0; opacity: 0; box-shadow: 0 0 calc(var(--gb-sz, 96px) * .18) calc(var(--gb-sz, 96px) * .03) var(--c1); }

/* --- pola ---------------------------------------------------------------- */
.gb-av[data-pola="nihil"]   .gb-ring { --tb: 6%; background: rgba(148,163,184,.3); }
.gb-av[data-pola="gradasi"] .gb-ring { background: linear-gradient(135deg, var(--c1), var(--c2) 52%, var(--c3)); }
.gb-av[data-pola="kerucut"] .gb-ring { background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c2), var(--c1)); }
.gb-av[data-pola="ganda"]   .gb-ring {
    background: radial-gradient(farthest-side, var(--c3) calc(100% - var(--tb)), var(--c3) calc(100% - var(--tb) * .66),
                var(--c2) calc(100% - var(--tb) * .66), var(--c2) calc(100% - var(--tb) * .4), var(--c1) calc(100% - var(--tb) * .4));
}
.gb-av[data-pola="putus"]   .gb-ring { background: repeating-conic-gradient(var(--c1) 0 9deg, var(--c3) 9deg 15deg); }
.gb-av[data-pola="permata"] .gb-ring {
    background: repeating-conic-gradient(from 6deg, var(--c1) 0 26deg, var(--c2) 26deg 30deg, var(--c3) 30deg 34deg, var(--c1) 34deg 45deg);
}
.gb-av[data-pola="kelopak"] .gb-ring { --tb: 21%; background: repeating-conic-gradient(var(--c1) 0 15deg, var(--c2) 15deg 30deg); }
/* Bintang segi delapan (rub el hizb) di belakang lingkar — ornamen khas masjid. */
.gb-av[data-pola="bintang8"] .gb-ring { background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3)); }
.gb-av[data-pola="bintang8"]::before,
.gb-av[data-pola="bintang8"]::after {
    content: ''; position: absolute; inset: 7%; z-index: 0; border-radius: 14%;
    background: linear-gradient(135deg, var(--c1), var(--c3));
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.gb-av[data-pola="bintang8"]::after { transform: rotate(45deg); }

/* --- animasi (ringan: rotasi & opasitas) --------------------------------- */
@keyframes gb-putar  { to { transform: rotate(360deg); } }
@keyframes gb-denyut { 0%, 100% { opacity: .2; transform: scale(.98); } 50% { opacity: .75; transform: scale(1.03); } }
@keyframes gb-kedip  { 0% { opacity: .5; } 20% { opacity: .85; } 40% { opacity: .45; } 60% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: .5; } }
@keyframes gb-petir  { 0%, 84%, 100% { opacity: 0; } 86% { opacity: 1; } 88% { opacity: .15; } 90% { opacity: .95; } 93% { opacity: 0; } }

.gb-av[data-anim="putar"]   .gb-ring,
.gb-av[data-anim="api"]     .gb-ring,
.gb-av[data-anim="es"]      .gb-ring,
.gb-av[data-anim="kosmik"]  .gb-ring,
.gb-av[data-anim="bayang"]  .gb-ring,
.gb-av[data-anim="pelangi"] .gb-ring { animation: gb-putar 7s linear infinite; }
.gb-av[data-anim="api"]     .gb-ring { animation-duration: 2.8s; }
.gb-av[data-anim="kosmik"]  .gb-ring { animation-duration: 14s; }
.gb-av[data-anim="bayang"]  .gb-ring { animation-duration: 9s; }
.gb-av[data-anim="pelangi"] .gb-ring {
    animation-duration: 6s;
    background: conic-gradient(#EF4444, #F59E0B, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #EF4444);
}
/* Kilau: seberkas cahaya yang menyapu lingkar (ikut ter-mask pada cincin). */
.gb-av[data-anim="kilau"] .gb-ring::after,
.gb-av[data-anim="es"]    .gb-ring::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,255,255,.92) 79%, transparent 90%);
    animation: gb-putar 3.2s linear infinite;
}
.gb-av[data-anim="kosmik"] .gb-ring::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 22% 30%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 70% 18%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 84% 66%, #fff 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 30% 82%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 52% 6%,  #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 8% 58%,  #fff 0 1px, transparent 1.6px);
    animation: gb-putar 9s linear infinite reverse;
}
.gb-av[data-anim="denyut"] .gb-cahaya { animation: gb-denyut 3.2s ease-in-out infinite; }
.gb-av[data-anim="api"]    .gb-cahaya { box-shadow: 0 0 calc(var(--gb-sz, 96px) * .2) calc(var(--gb-sz, 96px) * .04) var(--c1); animation: gb-kedip 1.6s steps(6, end) infinite; }
.gb-av[data-anim="petir"]  .gb-cahaya { box-shadow: 0 0 calc(var(--gb-sz, 96px) * .24) calc(var(--gb-sz, 96px) * .05) var(--c2); animation: gb-petir 4.5s linear infinite; }
.gb-av[data-anim="bayang"] .gb-cahaya { box-shadow: 0 0 calc(var(--gb-sz, 96px) * .22) calc(var(--gb-sz, 96px) * .05) var(--c2); animation: gb-denyut 5s ease-in-out infinite; }
.gb-av[data-anim="es"] .gb-cahaya, .gb-av[data-anim="kosmik"] .gb-cahaya,
.gb-av[data-anim="kilau"] .gb-cahaya, .gb-av[data-anim="pelangi"] .gb-cahaya, .gb-av[data-anim="putar"] .gb-cahaya { opacity: .32; }

/* --- ornamen di puncak bingkai ------------------------------------------ */
.gb-orn {
    position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -34%);
    width: calc(var(--gb-sz, 96px) * .3); height: calc(var(--gb-sz, 96px) * .3);
    min-width: 18px; min-height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: max(9px, calc(var(--gb-sz, 96px) * .14));
    background: radial-gradient(circle at 35% 30%, var(--c1), var(--c3));
    box-shadow: 0 0 0 2px rgba(10,16,27,.85), 0 4px 10px -4px rgba(0,0,0,.6);
}
.gb-orn i { color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* --- ikon profil --------------------------------------------------------- */
.gb-ikon {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff;
    background: radial-gradient(circle at 30% 24%, var(--i2), var(--i1) 74%);
    font-size: calc(var(--gb-sz, 96px) * .36);
}
.gb-ikon i { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.gb-ikon-kotak {
    --gb-sz: 56px; width: 56px; height: 56px; flex: none; border-radius: 16px; overflow: hidden;
    display: inline-flex; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.gb-ikon-kotak > img { width: 100%; height: 100%; object-fit: cover; }

/* --- gelar --------------------------------------------------------------- */
@keyframes gb-teks { to { background-position: 200% 0; } }
@keyframes gb-gelar-denyut { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 14px -1px var(--t1); } }
.gb-gelar {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 4px 11px 4px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 11.5px; font-weight: 800; letter-spacing: .015em; line-height: 1.25;
    color: var(--t1);
    background: rgba(255,255,255,.08); background: color-mix(in srgb, var(--t1) 15%, transparent);
    border: 1px solid rgba(255,255,255,.18); border-color: color-mix(in srgb, var(--t1) 42%, transparent);
}
.gb-gelar i { font-size: 10.5px; }
.gb-gelar span { overflow: hidden; text-overflow: ellipsis; }
.gb-gelar:not([data-efek="none"]) span {
    background: linear-gradient(90deg, var(--t1), var(--t2), var(--t1)); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gb-teks 3.6s linear infinite;
}
.gb-gelar[data-efek="pelangi"] span { background-image: linear-gradient(90deg, #F87171, #FBBF24, #34D399, #60A5FA, #A78BFA, #F87171); }
.gb-gelar[data-efek="api"]    { box-shadow: 0 0 12px -3px var(--t1); }
.gb-gelar[data-efek="denyut"] { animation: gb-gelar-denyut 2.8s ease-in-out infinite; }
/* Gelar di atas latar terang (panel admin, mode terang) — perlu kontras. */
.gb-gelar--terang { color: #1E293B; }
.gb-gelar--terang[data-efek="none"] span { color: #1E293B; }

/* --- kelangkaan ---------------------------------------------------------- */
.gb-langka {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .02em;
    color: var(--gl, #94A3B8); background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.25);
}
.gb-langka[data-l="biasa"]      { --gl: #94A3B8; }
.gb-langka[data-l="langka"]     { --gl: #60A5FA; background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3); }
.gb-langka[data-l="epik"]       { --gl: #C084FC; background: rgba(168,85,247,.12);  border-color: rgba(168,85,247,.32); }
.gb-langka[data-l="legendaris"] { --gl: #E0B24A; background: rgba(224,178,74,.14);  border-color: rgba(224,178,74,.38); }
.gb-langka[data-l="eksklusif"]  { --gl: #FB7185; background: rgba(244,63,94,.12);   border-color: rgba(244,63,94,.34); }

/* --- integrasi hero v12 (profil aplikasi & portal ortu) ------------------ */
.v12-cincin-berbingkai { overflow: visible !important; background: transparent !important; inset: 6px !important; }
.v12-cincin-berbingkai > .gb-av { width: 100%; height: 100%; }
.v12-hero-gelar { margin: 3px 0 4px; }

@media (prefers-reduced-motion: reduce) {
    .gb-ring, .gb-ring::after, .gb-cahaya, .gb-gelar, .gb-gelar span { animation: none !important; }
}

/* ==========================================================================
   v1.7 — PAPAN PERINGKAT TIGA CAKUPAN (Rombel · Kelas · Seluruh Kelas) + PODIUM
   ========================================================================== */
.v17-papan-tab { display: flex; gap: 4px; padding: 4px; margin-top: 12px; border-radius: 14px; background: rgba(148,163,184,.14); }
.v17-papan-tab button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 6px; border: 0; border-radius: 11px;
    background: transparent; color: var(--g-redup); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.v17-papan-tab button small { font-size: 10px; font-weight: 700; opacity: .8; }
.v17-papan-tab button[aria-selected="true"] { background: var(--g-kartu); color: var(--g-navy); box-shadow: 0 6px 16px -10px rgba(16,24,39,.5); }
.dark .v17-papan-tab button[aria-selected="true"] { color: #fff; }
.v17-papan-tab button[aria-selected="true"] small { color: var(--g-kuningan); opacity: 1; }
.v17-papan-isi { animation: v12-naik .38s var(--g-lembut) both; }
.v17-posisi { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
    background: linear-gradient(110deg, rgba(43,108,181,.12), rgba(176,150,95,.12)); border: 1px solid rgba(43,108,181,.22); font-size: 12px; line-height: 1.45; }
.v17-posisi-angka { flex: none; min-width: 52px; padding: 6px 8px; border-radius: 12px; text-align: center; font-size: 19px; font-weight: 900;
    font-variant-numeric: tabular-nums; color: #fff; background: linear-gradient(140deg, var(--g-safir), #1E3A8A); box-shadow: 0 8px 18px -10px rgba(43,108,181,.9); }
.v17-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 16px; padding-top: 14px; }
.v17-podium-kol { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; position: relative; animation: v17-podium .6s var(--g-lembut) both; }
.v17-podium-kol[data-juara="1"] { animation-delay: .12s; }
.v17-podium-kol[data-juara="3"] { animation-delay: .22s; }
@keyframes v17-podium { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.v17-mahkota { position: absolute; top: -18px; font-size: 18px; color: #E9B949; filter: drop-shadow(0 3px 4px rgba(176,150,95,.55)); animation: v17-mahkota 2.4s ease-in-out infinite; }
@keyframes v17-mahkota { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
.v17-podium-foto { position: relative; width: 54px; height: 54px; border-radius: 50%; padding: 3px; background: linear-gradient(140deg, #CBD5E1, #94A3B8); }
.v17-podium-kol[data-juara="1"] .v17-podium-foto { width: 68px; height: 68px; background: linear-gradient(140deg, #F6D77A, #B0965F); box-shadow: 0 10px 26px -12px rgba(176,150,95,.95); }
.v17-podium-kol[data-juara="3"] .v17-podium-foto { background: linear-gradient(140deg, #E8B48C, #9A6B47); }
.v17-podium-foto img, .v17-podium-foto > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; display: flex; align-items: center; justify-content: center;
    background: var(--g-kartu); font-weight: 900; font-size: 18px; color: var(--g-redup); border: 2px solid var(--g-kartu); }
.v17-podium-foto b { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #fff; background: #64748B; border: 2px solid var(--g-kartu); }
.v17-podium-kol[data-juara="1"] .v17-podium-foto b { background: #B0965F; }
.v17-podium-kol[data-juara="3"] .v17-podium-foto b { background: #9A6B47; }
.v17-podium-kol[data-aku="1"] .v17-podium-foto { outline: 3px solid var(--g-safir); outline-offset: 2px; }
.v17-podium-nama { margin-top: 7px; max-width: 100%; font-size: 11.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v17-podium-nama small { font-weight: 700; color: var(--g-safir); }
.v17-podium-poin { margin-top: 2px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--g-kuningan); }
.v17-podium-poin small { font-size: 9.5px; font-weight: 700; color: var(--g-redup); }
.v17-podium-alas { width: 100%; margin-top: 7px; height: 42px; border-radius: 12px 12px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 7px;
    background: linear-gradient(180deg, rgba(148,163,184,.32), rgba(148,163,184,.08)); font-size: 10px; font-weight: 800; color: var(--g-redup); }
.v17-podium-kol[data-juara="1"] .v17-podium-alas { height: 66px; background: linear-gradient(180deg, rgba(233,185,73,.42), rgba(233,185,73,.08)); color: #8A6D2B; }
.v17-podium-kol[data-juara="3"] .v17-podium-alas { height: 30px; background: linear-gradient(180deg, rgba(180,131,90,.36), rgba(180,131,90,.08)); }
.dark .v17-podium-kol[data-juara="1"] .v17-podium-alas { color: #F6D77A; }
.v17-podium-kol[data-id] { cursor: pointer; }
.v17-papan-pemisah { text-align: center; color: var(--g-redup); font-size: 18px; line-height: 1; letter-spacing: .2em; }
.v17-papan-kaki { margin-top: 10px; font-size: 10.5px; color: var(--g-redup); text-align: center; }
.v12-papan-baris[data-binaan="1"] { border-color: rgba(4,120,87,.4); }
.v12-papan-baris[data-binaan="1"] .v12-papan-rank { color: var(--g-hijau); }
@media (prefers-reduced-motion: reduce) { .v17-papan-isi, .v17-podium-kol, .v17-mahkota { animation: none; } }
.v17-podium { max-width: 480px; margin-left: auto; margin-right: auto; }