/* TEMA NEUMORFIK LEMBUT — laman Iqra' (dimuat selepas gaya asal) */
:root{--neo:#ffffff;--neo-g:#dcd5e8;--neo-p:#fff;--neo-u:#5b2d9e;--neo-u2:#4b2a80;--neo-r:#8a7aa6}
html,body{background:var(--neo)!important;color:#3b2a57!important;font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif!important}
header{background:var(--neo)!important;color:var(--neo-u2)!important;box-shadow:0 8px 16px -8px var(--neo-g)}
header h1,header p{color:var(--neo-u2)!important}header a{color:var(--neo-u)!important}
header .jilid{background:var(--neo)!important;color:var(--neo-u)!important;box-shadow:inset 3px 3px 6px var(--neo-g),inset -3px -3px 6px var(--neo-p)}
header a[href="main/index.html"]{background:var(--neo)!important;color:var(--neo-u)!important;box-shadow:4px 4px 8px var(--neo-g),-4px -4px 8px var(--neo-p)}
a.jilid{background:var(--neo)!important;border-top:0!important;border-radius:26px!important;box-shadow:10px 10px 20px var(--neo-g),-10px -10px 20px var(--neo-p)!important;position:relative;padding:18px 14px 16px!important;transition:transform .15s,box-shadow .15s}
a.jilid::before{content:"";position:absolute;right:14px;top:16px;width:30px;height:30px;border-radius:11px;background:var(--w);box-shadow:4px 4px 8px #bdb2d0,-3px -3px 6px #fff}
a.jilid:active{transform:scale(.98);box-shadow:inset 6px 6px 12px var(--neo-g),inset -6px -6px 12px var(--neo-p)!important}
a.jilid .no{color:var(--w)!important}a.jilid .nama{color:#3b2a57}a.jilid .ket{color:var(--neo-r)!important}
a.jilid .main{background:var(--neo)!important;color:var(--neo-u)!important;box-shadow:inset 2px 2px 4px var(--neo-g),inset -2px -2px 4px var(--neo-p)}
.nota{background:var(--neo)!important;border-left:0!important;border-radius:20px!important;box-shadow:inset 4px 4px 8px var(--neo-g),inset -4px -4px 8px var(--neo-p)!important}
#iqStatus{box-shadow:inset 3px 3px 6px var(--neo-g),inset -3px -3px 6px var(--neo-p)}
.halaman{border-radius:22px!important;box-shadow:12px 12px 24px var(--neo-g),-12px -12px 24px var(--neo-p)!important;padding:8px;background:var(--neo)!important}
.halaman #gambar{border-radius:16px;display:block;width:100%}
.panel{background:var(--neo)!important;border-radius:22px!important;box-shadow:8px 8px 16px var(--neo-g),-8px -8px 16px var(--neo-p)!important}
.alat{background:rgba(255,255,255,.94)!important;border-top:0!important;box-shadow:0 -8px 16px -8px var(--neo-g);backdrop-filter:blur(8px)}
.btn{background:var(--neo)!important;color:var(--neo-u)!important;border-radius:16px!important;box-shadow:4px 4px 8px var(--neo-g),-4px -4px 8px var(--neo-p)!important}
.btn:active{box-shadow:inset 3px 3px 6px var(--neo-g),inset -3px -3px 6px var(--neo-p)!important}
.btn.utama,.utama{background:linear-gradient(135deg,#7b45d6,#4b2a80)!important;color:#fff!important;box-shadow:0 6px 14px rgba(91,45,158,.25)!important}
select{background:var(--neo)!important;border:0!important;border-radius:14px!important;box-shadow:inset 3px 3px 6px var(--neo-g),inset -3px -3px 6px var(--neo-p)!important;color:#3b2a57}
footer{color:var(--neo-r)!important}
/* ---- kulit buku Iqra' ---- */
a.jilid:has(.kulit-iq){padding:12px 12px 14px!important;display:flex!important;flex-direction:column}
a.jilid:has(.kulit-iq)::before{display:none}
.kulit-iq{perspective:700px;margin:0 0 10px}
.kulit-iq img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px 12px 12px 4px;
  transform:rotateY(-10deg);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),6px 10px 18px rgba(60,30,90,.35),-2px 0 0 #2a1a3a}
a.jilid:active .kulit-iq img,a.jilid:hover .kulit-iq img{transform:rotateY(0) translateY(-4px)}
a.jilid:has(.kulit-iq) .no{font-size:11px!important}
a.jilid:has(.kulit-iq) .nama{font-size:19px!important;margin:2px 0!important}
.kulit-jilid{float:left;width:92px;margin:0 14px 10px 0;perspective:600px}
.kulit-jilid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px 9px 9px 3px;transform:rotateY(-12deg);transform-origin:left center;box-shadow:5px 8px 14px rgba(60,30,90,.35)}
.kulit-jilid+.nota{min-height:126px}
.kulit-jilid ~ .nota{overflow:hidden}
.kulit-jilid ~ *:not(.nota){clear:both}