/* Tambahan di luar Tailwind CDN */ .bg-grid { background-image: linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; } .glass-panel { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .glass-panel-strong { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(19, 34, 56, 0.6); backdrop-filter: blur(24px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .text-gradient-gold { background: linear-gradient(135deg, #f0e6c8 0%, #d4af37 45%, #a88b2d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .particle { position: absolute; width: 3px; height: 3px; border-radius: 9999px; background: rgba(0, 229, 255, 0.35); animation: drift 18s linear infinite; opacity: 0.5; } @keyframes drift { 0% { transform: translate3d(0, 0, 0); opacity: 0.2; } 20% { opacity: 0.55; } 100% { transform: translate3d(-30vw, 100vh, 0); opacity: 0; } } @keyframes logoReveal { 0% { opacity: 0; transform: scale(0.98) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .logo-reveal { animation: logoReveal 1.2s ease forwards; } @keyframes successPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.25); } 70% { box-shadow: 0 0 0 22px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } } .success-holo { animation: successPulse 2.2s ease-out 1; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }