/* Gaya dasar bersama tema Profesional baru: toast dan lightbox. Tema boleh menimpanya. */
.nh-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); max-width: calc(100% - 40px); padding: 11px 20px; background: #1b1b1b; color: #fff; font: 400 14px/1.4 system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 400; text-align: center; }
.nh-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nh-lb { position: fixed; inset: 0; z-index: 500; background: rgba(10, 9, 8, .94); display: flex; align-items: center; justify-content: center; }
.nh-lb[hidden] { display: none; }
.nh-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.nh-lb-x, .nh-lb-n { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 38px; line-height: 1; width: 52px; height: 52px; }
.nh-lb-x { top: 10px; right: 10px; }
.nh-lb-n.p { left: 4px; top: 50%; margin-top: -26px; }
.nh-lb-n.n { right: 4px; top: 50%; margin-top: -26px; }
.nh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Efek bersama (lewat atribut data-* dan kelas .in; JS tidak menjalankannya bila gerak dikurangi) */
.nh-g { display: inline; }
.nh-w { display: inline-block; white-space: nowrap; }
.nh-c { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(5deg); filter: blur(5px); transition: opacity .7s ease, transform .95s cubic-bezier(.2, .8, .2, 1), filter .7s ease; transition-delay: calc(var(--c, 0) * 26ms + var(--cd, 0ms)); }
.in .nh-c { opacity: 1; transform: none; filter: none; }
.nh-tick { animation: nh-tick .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes nh-tick { from { opacity: .2; transform: translateY(-.28em); } to { opacity: 1; transform: none; } }
.nh-fl { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.nh-fl i { position: absolute; left: var(--x); top: 0; width: 10px; height: 10px; opacity: 0; scale: var(--s); animation: nh-rise var(--d) linear var(--dl) infinite; }
.nh-fl.down i { animation-name: nh-fall; }
@keyframes nh-rise { 0% { transform: translate3d(0, 105vh, 0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translate3d(var(--w), -10vh, 0) rotate(200deg); opacity: 0; } }
@keyframes nh-fall { 0% { transform: translate3d(0, -8vh, 0) rotate(0); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate3d(calc(var(--w) * -.6), 52vh, 0) rotate(180deg); } 90% { opacity: .85; } 100% { transform: translate3d(var(--w), 108vh, 0) rotate(420deg); opacity: 0; } }
.nh-bu { position: fixed; z-index: 600; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; animation: nh-bu 1.6s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes nh-bu { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 12% { transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .2)) scale(var(--s)); } 100% { transform: translate(var(--dx), calc(var(--dy) + 190px)) rotate(var(--r)) scale(var(--s)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nh-c { opacity: 1; transform: none; filter: none; transition: none; } .nh-fl, .nh-bu { display: none; } }