/* ===== Sampul buku 3D (diadaptasi dari komponen "Book") ===== */
.bk {
    --bk-w: 150px;
    --bk-tone: #0f7a66;
    --bk-bind: linear-gradient(90deg, #fff0, #fff0 12%, #ffffff40 29.25%, #fff0 50.5%, #fff0 75.25%, #ffffff40 91%, #fff0), linear-gradient(90deg, #00000008, #0000001a 12%, #0000 30%, #00000005 50%, #0003 73.5%, #00000080 75.25%, #00000026 85.25%, #0000);
    --bk-shadow: 0 1px 1px 0 #00000005, 0 4px 8px -4px #0000001a, 0 16px 24px -8px #00000008, 0 24px 40px -18px #062a2659;
    display: inline-block; width: fit-content; perspective: 900px;
}
.bk-tone-pengabdian { --bk-tone: #b07a12; }
.bk-tone-publikasi { --bk-tone: #7a5ca3; }
.bk-tone-haki { --bk-tone: #c8664a; }
.bk-tone-buku { --bk-tone: #3f7f95; }
.bk-tone-kerjasama { --bk-tone: #5d8a3a; }
.bk-tone-dokumen, .bk-tone-spo { --bk-tone: #3d5a8a; }

.bk-rotate {
    position: relative; width: var(--bk-w); aspect-ratio: 49 / 60;
    transform-style: preserve-3d; container-type: inline-size;
    transform: rotateY(0deg); transition: transform 250ms ease-out;
}
.bk:hover .bk-rotate, :is(.rp-card, .dt-cover):hover .bk-rotate { transform: rotateY(-28deg) scale(1.066) translateX(-2px); }

.bk-front {
    position: relative; display: flex; flex-direction: column; width: var(--bk-w); height: 100%;
    overflow: hidden; border-radius: 6px 4px 4px 6px; background: #fafafa; box-shadow: var(--bk-shadow);
}
.bk-front::after { content: ''; position: absolute; inset: 0; border: 1px solid #00000014; border-radius: inherit; box-shadow: inset 0 1px 2px 0 #ffffff4d; pointer-events: none; }
.bk-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-bind { position: absolute; top: 0; bottom: 0; left: 0; width: 8.2%; background: var(--bk-bind); mix-blend-mode: overlay; z-index: 1; }
.bk-bind.is-soft { mix-blend-mode: normal; opacity: .2; }

/* Bagian atas: warna kategori + motif batik */
.bk-stripe { position: relative; flex: 1; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bk-tone) 70%, #fff), transparent 60%), var(--bk-tone); }
.bk-motif { position: absolute; inset: 0; background: #fff; opacity: .22;
    -webkit-mask: url('../images/batik-dayak-tile.webp') 0 0 / 46cqw auto repeat; mask: url('../images/batik-dayak-tile.webp') 0 0 / 46cqw auto repeat; }
.bk-brand { position: absolute; left: 14.3%; bottom: 7%; display: inline-flex; align-items: center; gap: 4cqw; padding: 2.5cqw 5cqw 2.5cqw 3cqw; border-radius: 99px; background: #ffffffe6; color: #10302b; font: 700 6.5cqw/1 Outfit, sans-serif; }
.bk-brand img { width: 8cqw; height: 8cqw; object-fit: contain; }

/* Bagian bawah: judul */
.bk-body { position: relative; flex: 1; background: linear-gradient(180deg, #ffffff, #eef4f1); }
.bk-text { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 6.1% 6.1% 6.1% 14.3%; }
.bk-text small { color: var(--bk-tone); font: 700 5.6cqw/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.bk-text strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2cqw; color: #172b26; font: 650 8.4cqw/1.25 Outfit, sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.bk-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2cqw; color: #5b7069; font: 600 5.4cqw/1 Inter, sans-serif; }
.bk-foot b { color: var(--bk-tone); }

/* Tepi halaman & sampul belakang */
.bk-pages {
    position: absolute; top: 3px; height: calc(100% - 6px); width: calc(29cqw - 2px);
    background: linear-gradient(90deg, #eaeaea, transparent 70%), linear-gradient(#fff, #fafafa);
    transform: translateX(calc(var(--bk-w) - 29cqw / 2 - 3px)) rotateY(90deg) translateX(calc(29cqw / 2));
}
.bk-back { position: absolute; top: 0; left: 0; width: var(--bk-w); height: 100%; border-radius: 6px 4px 4px 6px; background: color-mix(in srgb, var(--bk-tone) 30%, #e4ebe8); transform: translateZ(calc(-1 * 29cqw)); }

@media (prefers-reduced-motion: reduce) {
    .bk-rotate { transition: none; }
    .bk:hover .bk-rotate, :is(.rp-card, .dt-cover):hover .bk-rotate { transform: none; }
}