/* ========================================================================== THEME ALTERNATIF: CYBERPUNK GLASSMORPHISM (ANIMATED) ========================================================================== */ /* Animasi Pergeseran Gradasi Latar Belakang */ @keyframes CyberGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Animasi Tombol Berpendar (Pulse) */ @keyframes NeonPulse { 0% { box-shadow: 0 0 5px rgba(0, 245, 212, 0.4), 0 0 10px rgba(0, 245, 212, 0.2); } 50% { box-shadow: 0 0 20px rgba(0, 245, 212, 0.6), 0 0 30px rgba(255, 0, 127, 0.4); } 100% { box-shadow: 0 0 5px rgba(0, 245, 212, 0.4), 0 0 10px rgba(0, 245, 212, 0.2); } } /* Aktifkan class ini pada tag jika ingin beralih ke tema ini */ body.theme-cyberpunk { background: linear-gradient(-45deg, #0f172a, #1e1b4b, #2e1065, #0f172a); background-size: 400% 400%; animation: CyberGradient 15s ease infinite; color: #f1f5f9; } /* Modifikasi Navigasi Menjadi Semi Transparan */ body.theme-cyberpunk nav { background-color: rgba(15, 23, 42, 0.7) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Hero Section Menjadi Gradasi Elegan */ body.theme-cyberpunk .hero { background: rgba(30, 27, 75, 0.4) !important; backdrop-filter: blur(8px); border: 1px solid rgba(0, 245, 212, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } body.theme-cyberpunk .hero h1 { background: linear-gradient(135deg, #00f5d4, #ff007f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; } /* Modifikasi Grid Card Menjadi Efek Kaca (Glassmorphism) */ body.theme-cyberpunk .card-tema, body.theme-cyberpunk .card { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #e2e8f0; } body.theme-cyberpunk .card h3, body.theme-cyberpunk .card-tema h3 { color: #00f5d4 !important; } /* Tombol Aksi Interaktif */ body.theme-cyberpunk .btn-demo-link, body.theme-cyberpunk .btn { background: linear-gradient(135deg, #ff007f, #7928ca) !important; color: #ffffff; border: none; animation: NeonPulse 3s infinite; } body.theme-cyberpunk .btn-demo-link:hover, body.theme-cyberpunk .btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.2); }