/* Muka Iqra digital: huruf asal (vektor), panel 3D, corak zamrud ikut warna jilid */
.halaman.dig{isolation:isolate;position:relative;aspect-ratio:100/158;padding:0!important;border-radius:22px!important;overflow:hidden;container-type:inline-size;
  box-shadow:0 10px 30px rgba(20,20,40,.32)!important;background:var(--dig-latar)!important;touch-action:pan-y}
.halaman.dig #gambar{display:none!important}
.halaman.dig::before{content:"";position:absolute;inset:2.2cqw;border-radius:4cqw;border:.5cqw solid transparent;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,var(--dig-rim)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.dig-panel{position:absolute;left:4.5cqw;right:4.5cqw;top:15cqw;height:132cqw;border-radius:3.6cqw;background:linear-gradient(145deg,#f8fbfd,#e7eef5);
  box-shadow:1.6cqw 1.6cqw 3.2cqw rgba(0,10,25,.5),-.8cqw -.8cqw 2.4cqw rgba(255,255,255,.18),inset .25cqw .25cqw .5cqw #fff,inset -.3cqw -.3cqw .6cqw #c6d3df;
  outline:.35cqw solid var(--dig-garis);outline-offset:.6cqw}
.dig-cip{position:absolute;border-radius:1.8cqw;background-repeat:no-repeat;
  box-shadow:.5cqw .5cqw 1.2cqw rgba(0,10,25,.45),-.3cqw -.3cqw .8cqw rgba(255,255,255,.2)}
.dig-qr{position:absolute;left:14.4cqw;top:3.3cqw;width:8.8cqw;border-radius:1cqw;background:#fff;padding:.5cqw;image-rendering:pixelated;box-shadow:.5cqw .5cqw 1.2cqw rgba(0,10,25,.45)}
.dig-qrteks{position:absolute;left:25cqw;top:5.4cqw;font:700 1.9cqw/1.3 system-ui,sans-serif;color:#fff;letter-spacing:.03em;text-shadow:0 .2cqw .4cqw rgba(0,0,0,.45)}
/* sistem koordinat muka asal, dibesarkan (lihat digital.js) */
.halaman.dig #isi{isolation:isolate;position:absolute;left:var(--isi-l);top:var(--isi-t);width:var(--isi-w);aspect-ratio:957/1317;container-type:inline-size;z-index:1}
.dig-asas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* kotak bacaan = butang timbul 3D; huruf dipotong daripada SVG yang sama supaya bergerak bila ditekan */
.halaman.dig .suku{z-index:auto!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible;
  transition:transform .12s ease;-webkit-tap-highlight-color:transparent;user-select:none}
.halaman.dig .suku::before{content:"";position:absolute;inset:-.8cqw -1.2cqw;z-index:-1;border-radius:1.8cqw;background:#f3f7fb;
  box-shadow:.7cqw .7cqw 1.4cqw #c3d1de,-.7cqw -.7cqw 1.4cqw #ffffff;transition:box-shadow .12s,background-color .2s}
.halaman.dig .suku::after{content:"";position:absolute;inset:-.8cqw -1.2cqw;z-index:1;pointer-events:none;background-image:var(--dig-svg);background-repeat:no-repeat;
  background-size:100cqw 137.62cqw;background-position:calc(var(--sx) * -1cqw + 1.2cqw) calc(var(--sy) * -1.3762cqw + .8cqw);opacity:0}
.halaman.dig .suku:active::after,.halaman.dig .suku.tekan::after,.halaman.dig .suku.aktif::after{opacity:1}
.halaman.dig .suku:active,.halaman.dig .suku.tekan{transform:scale(.95) translateY(.25cqw)}
.halaman.dig .suku:active::before,.halaman.dig .suku.tekan::before{box-shadow:inset .6cqw .6cqw 1.2cqw #c3d1de,inset -.6cqw -.6cqw 1.2cqw #ffffff}
.halaman.dig .suku.aktif{transform:scale(.97)}
.halaman.dig .suku.aktif::before{background:#fff3c4;box-shadow:inset .6cqw .6cqw 1.2cqw #e3c96f,inset -.6cqw -.6cqw 1.2cqw #fffbe9,0 0 0 .4cqw #f4c430}
.halaman.dig .suku.lulus::before{background:#dcf7e7;box-shadow:inset .5cqw .5cqw 1cqw #9fd9b7,inset -.5cqw -.5cqw 1cqw #f3fff8,0 0 0 .35cqw #34c47a}
.halaman.dig .suku.gagal::before{background:#ffe3e8;box-shadow:inset .5cqw .5cqw 1cqw #f0a7b5,inset -.5cqw -.5cqw 1cqw #fff5f7,0 0 0 .35cqw #ff4d6d}
.halaman.dig .suku.sasaran::before{animation:digkelip 1.2s infinite}
@keyframes digkelip{0%,100%{box-shadow:.7cqw .7cqw 1.4cqw #c3d1de,-.7cqw -.7cqw 1.4cqw #fff,0 0 0 .4cqw #3f2456}50%{box-shadow:.7cqw .7cqw 1.4cqw #c3d1de,-.7cqw -.7cqw 1.4cqw #fff,0 0 0 .4cqw #c9a227}}
.halaman.dig .suku .r{z-index:2}
.halaman.dig .ss-baru{z-index:3}
.halaman.dig img.dig-qr{width:8.8cqw!important;height:auto!important;display:block}
.halaman.dig img.dig-asas{width:100%!important;height:100%!important}
.halaman.dig .suku.aktif::before,.halaman.dig .suku.tekan::before,.halaman.dig .suku:active::before{inset:-.3cqw -.5cqw}