/* =============================================================================
   kartu-belakang.css — KARTU DIGITAL, SISI BELAKANG
   Melengkapi kartu-digital.css. Elemen akar juga membawa kelas
   .digital-student-card, sehingga token warna, satuan --dsc-u, latar, pola
   bintang, butiran, dan bingkai emas diwarisi langsung — sisi belakang
   memakai material yang SAMA, bukan salinannya.

   Komposisi (100u x 63,08u):
     panel kiri  x 5–36u   : lambang lembaga di tengah halo bintang delapan
     pembatas    x 39u     : garis emerald → emas (tegak, cermin garis depan)
     isi kanan   x 43–95u  : Ketentuan Kartu (4 butir) + tanda tangan pimpinan
     kaki        bawah     : alamat lembaga · User-ID pasangan sisi depan
   ========================================================================== */

/* Cahaya dicerminkan terhadap sisi depan: emerald di kanan atas, emas di kiri bawah. */
.digital-student-card--back .digital-student-card__bg {
    background:
        radial-gradient(circle at 92% 5%, rgba(15, 107, 85, 0.40) 0%, transparent 46%),
        radial-gradient(circle at 6% 96%, rgba(212, 175, 55, 0.12) 0%, transparent 42%),
        radial-gradient(ellipse at 22% 46%, rgba(16, 37, 68, 0.75) 0%, transparent 62%);
}
/* Pola memudar di belakang teks ketentuan supaya tetap paling terbaca. */
.digital-student-card--back .digital-student-card__bg::before {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 36%, rgba(0,0,0,.28) 64%, rgba(0,0,0,.55) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 36%, rgba(0,0,0,.28) 64%, rgba(0,0,0,.55) 100%);
}

/* ------------------------------------------------------------ panel lambang */
.dsc-back__panel {
    position: absolute; left: calc(var(--dsc-u) * 5); top: calc(var(--dsc-u) * 6);
    width: calc(var(--dsc-u) * 31); bottom: calc(var(--dsc-u) * 12);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.dsc-back__halo {
    position: absolute; left: 50%; top: 40%;
    width: calc(var(--dsc-u) * 31); height: calc(var(--dsc-u) * 31);
    transform: translate(-50%, -50%); color: var(--dsc-gold); opacity: .15; pointer-events: none;
}
.dsc-back__halo svg { width: 100%; height: 100%; display: block; }
.dsc-back__logo {
    position: relative; flex: none;
    width: calc(var(--dsc-u) * 15); height: calc(var(--dsc-u) * 15);
    border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--dsc-ivory);
    box-shadow: 0 0 0 calc(var(--dsc-u) * .35) rgba(212, 175, 55, .9),
                0 0 0 calc(var(--dsc-u) * 1.05) rgba(212, 175, 55, .15),
                0 calc(var(--dsc-u) * .8) calc(var(--dsc-u) * 2.4) rgba(0, 0, 0, .4);
}
.dsc-back__logo img { width: 100%; height: 100%; object-fit: contain; padding: calc(var(--dsc-u) * 1.3); display: block; }
.dsc-back__logo span { font-size: calc(var(--dsc-u) * 6.4); font-weight: 800; color: var(--dsc-navy); }
.dsc-back__org {
    position: relative; max-width: 100%; margin-top: calc(var(--dsc-u) * 3.1) !important;
    font-size: calc(var(--dsc-u) * var(--dsc-fs-borg, 2.7)); font-weight: 800; letter-spacing: .02em; line-height: 1.22;
    color: var(--dsc-ivory); white-space: nowrap; overflow: hidden;
}
.dsc-back__region {
    position: relative; margin-top: calc(var(--dsc-u) * .35) !important;
    font-size: calc(var(--dsc-u) * 1.6); font-weight: 700; letter-spacing: .22em; line-height: 1.3;
    color: var(--dsc-gold-soft); white-space: nowrap;
}
.dsc-back__system {
    position: relative; max-width: 100%; margin-top: calc(var(--dsc-u) * .45) !important;
    font-size: calc(var(--dsc-u) * 1.35); font-weight: 500; line-height: 1.4;
    color: var(--dsc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pembatas tegak: cermin garis mendatar di sisi depan. */
.dsc-back__divider {
    position: absolute; left: calc(var(--dsc-u) * 39); top: calc(var(--dsc-u) * 7); bottom: calc(var(--dsc-u) * 12.5);
    width: calc(var(--dsc-u) * .18); border-radius: 99px;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 107, 85, .9) 18%, var(--dsc-gold) 50%, rgba(212, 175, 55, .3) 82%, transparent 100%);
}

/* ------------------------------------------------------------ ketentuan */
.dsc-back__content {
    position: absolute; left: calc(var(--dsc-u) * 43); right: calc(var(--dsc-u) * 5);
    top: calc(var(--dsc-u) * 6); bottom: calc(var(--dsc-u) * 12);
    display: flex; flex-direction: column;
}
.dsc-back__title {
    display: flex; align-items: center; gap: calc(var(--dsc-u) * 1.4);
    font-size: calc(var(--dsc-u) * 1.65); font-weight: 800; letter-spacing: .26em; text-transform: uppercase; line-height: 1.3;
    color: var(--dsc-gold-soft); white-space: nowrap;
}
.dsc-back__title::after {
    content: ''; flex: 1; height: calc(var(--dsc-u) * .12);
    background: linear-gradient(90deg, rgba(212, 175, 55, .5), transparent);
}
.dsc-back__rules {
    list-style: none; margin: calc(var(--dsc-u) * 2.1) 0 0; padding: 0;
    display: grid; gap: calc(var(--dsc-u) * 1); counter-reset: dsc-aturan;
}
.dsc-back__rules li {
    position: relative; counter-increment: dsc-aturan;
    padding-left: calc(var(--dsc-u) * 3.6);
    font-size: calc(var(--dsc-u) * 1.8); font-weight: 500; line-height: 1.36;
    color: rgba(248, 245, 234, .92);
}
.dsc-back__rules li::before {
    content: counter(dsc-aturan);
    position: absolute; left: 0; top: calc(var(--dsc-u) * .05);
    width: calc(var(--dsc-u) * 2.4); height: calc(var(--dsc-u) * 2.4); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--dsc-u) * 1.35); font-weight: 800; line-height: 1; color: var(--dsc-navy);
    background: linear-gradient(135deg, var(--dsc-gold), var(--dsc-gold-soft));
}

/* ------------------------------------------------------------ tanda tangan */
/* Ruang kosong di atas garis sengaja disediakan untuk tanda tangan basah atau
   stempel pada kartu cetak. */
.dsc-back__sign { margin-top: auto; align-self: flex-end; width: calc(var(--dsc-u) * 32); text-align: center; }
.dsc-back__sign-role {
    font-size: calc(var(--dsc-u) * 1.35); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3;
    color: var(--dsc-muted);
}
.dsc-back__sign-line {
    display: block; height: calc(var(--dsc-u) * .14); margin-top: calc(var(--dsc-u) * 6.2);
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .7), transparent);
}
.dsc-back__sign-name {
    margin-top: calc(var(--dsc-u) * .9) !important;
    font-size: calc(var(--dsc-u) * var(--dsc-fs-pimpinan, 2.1)); font-weight: 700; line-height: 1.25;
    color: var(--dsc-ivory); white-space: nowrap; overflow: hidden;
}

/* ------------------------------------------------------------ kaki */
.dsc-back__footer {
    position: absolute; left: calc(var(--dsc-u) * 5); right: calc(var(--dsc-u) * 5); bottom: calc(var(--dsc-u) * 4.3);
    display: flex; align-items: center; gap: calc(var(--dsc-u) * 1.8);
}
.dsc-back__address { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--dsc-u) * .9); color: var(--dsc-muted); }
.dsc-back__address svg { flex: none; width: calc(var(--dsc-u) * 1.9); height: calc(var(--dsc-u) * 1.9); color: var(--dsc-gold); }
.dsc-back__address-text {
    font-size: calc(var(--dsc-u) * var(--dsc-fs-alamat, 1.5)); font-weight: 500; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsc-back__id {
    flex: none; padding-left: calc(var(--dsc-u) * 1.8);
    border-left: calc(var(--dsc-u) * .12) solid rgba(212, 175, 55, .4);
    font-size: calc(var(--dsc-u) * 1.75); font-weight: 800; letter-spacing: .12em; line-height: 1.2;
    color: var(--dsc-gold-soft); white-space: nowrap;
}

/* ------------------------------------------------------------ lembar cetak */
/* Penahan tempat pada baris terakhir lembar belakang yang tidak penuh:
   menjaga kolom tetap tercermin tepat, tetapi tidak tercetak apa pun. */
.v12-sel--kosong { visibility: hidden; }
.v12-sel--kosong::before, .v12-sel--kosong::after { display: none !important; }

/* ============================================================================
   KARTU YANG BISA DIBALIK — menu Kartu (cakupan satu santri)
   ========================================================================== */
@media screen {
    .dsc-balik {
        --k-lebar: min(calc(100vw - 72px), 540px);
        --k-tinggi: calc(var(--k-lebar) / 1.5852);
        position: relative; width: var(--k-lebar); height: var(--k-tinggi);
        margin: 0 auto; perspective: 1800px; cursor: pointer;
        transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    }
    .dsc-balik__isi {
        position: relative; width: 100%; height: 100%;
        transform-style: preserve-3d;
        transition: transform .85s cubic-bezier(.22, 1, .36, 1);
    }
    .dsc-balik.is-belakang .dsc-balik__isi { transform: rotateY(180deg); }
    /* Kedua sisi menumpuk di tempat yang sama; sisi yang membelakangi disembunyikan. */
    .dsc-balik .digital-student-card {
        position: absolute !important; inset: 0; margin: 0;
        -webkit-backface-visibility: hidden; backface-visibility: hidden;
        animation: none !important;
    }
    .dsc-balik .digital-student-card:hover { transform: none; }
    .dsc-balik .dsc-balik__belakang { transform: rotateY(180deg) !important; }
    .dsc-balik .dsc-balik__belakang:hover { transform: rotateY(180deg) !important; }

    .dsc-balik__tombol {
        display: flex; align-items: center; gap: 8px; margin: 16px auto 0;
        padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
        font: 700 13px/1 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; letter-spacing: .01em;
        color: #0B1B32; background: linear-gradient(135deg, #E6C766, #D4AF37);
        box-shadow: 0 10px 24px -12px rgba(212, 175, 55, .75);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .dsc-balik__tombol svg { width: 16px; height: 16px; display: block; }
    .dsc-balik__tombol:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(212, 175, 55, .85); }
    .dsc-balik__tombol:focus-visible { outline: 2px solid #0F6B55; outline-offset: 3px; }

    @media (prefers-reduced-motion: no-preference) {
        .dsc-balik { animation: dsc-masuk .7s cubic-bezier(.22, 1, .36, 1) both; }
        .dsc-balik:hover { transform: translateY(-3px); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .dsc-balik, .dsc-balik__isi, .dsc-balik__tombol { transition: none !important; animation: none !important; }
}
@media print {
    .dsc-balik__tombol { display: none !important; }
}

/* Garis halo lebih tipis dari ikon bintang biasa: pada ukuran besar, garis
   halus terasa lebih mewah daripada garis tebal. */
.dsc-back__halo svg g { stroke-width: .55; }
.dsc-back__halo { opacity: .2; }

/* Wadah kartu digital di menu Kartu (cakupan satu santri). */
.dsc-balik-wadah { display: flex; flex-direction: column; align-items: center; }

.dsc-back__code{position:relative;width:100%;margin-top:calc(var(--dsc-u)*2);padding:calc(var(--dsc-u)*1.4);border:calc(var(--dsc-u)*.12) solid rgba(212,175,55,.5);border-radius:calc(var(--dsc-u)*1.4);background:rgba(0,0,0,.2);color:#fff}.dsc-back__code b{display:block;font-size:calc(var(--dsc-u)*1.6);letter-spacing:.16em;color:var(--dsc-gold-soft)}.dsc-back__code code{display:block;margin-top:calc(var(--dsc-u)*.7);font:700 calc(var(--dsc-u)*2.05)/1.5 Consolas,monospace;letter-spacing:.02em;overflow-wrap:anywhere}.dsc-back__code small{display:block;font-size:calc(var(--dsc-u)*1.4);line-height:1.4;color:var(--dsc-muted);margin-top:calc(var(--dsc-u)*.7)}.dsc-back__panel:has(.dsc-back__code) .dsc-back__logo{width:calc(var(--dsc-u)*11);height:calc(var(--dsc-u)*11)}.dsc-back__panel:has(.dsc-back__code) .dsc-back__org{margin-top:calc(var(--dsc-u)*1.8)!important}