:root { --neon-cyan: #00f3ff; --neon-purple: #bc13fe; --bg-dark: #0a0a0f; }
body { font-family: 'Space Grotesk', sans-serif; background-color: var(--bg-dark); color: #e2e8f0; overflow-x: hidden; }
.glass { background: rgba(16, 16, 24, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.05); }
.glass-panel { background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }
.neon-border { border: 1px solid var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1); }
.font-serif-read { font-family: 'Lora', serif; }

/* Isi artikel */
.prose-dark { line-height: 1.85; }
.prose-dark p { margin: 0 0 1em; }
.prose-dark ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0 1rem; }
.prose-dark ol { list-style: decimal; padding-left: 1.5rem; margin: .5rem 0 1rem; }
.prose-dark b, .prose-dark strong { color: #fff; font-weight: 700; }
.prose-dark i, .prose-dark em { font-style: italic; }
.prose-dark u { text-decoration: underline; }
.prose-dark strike, .prose-dark s { text-decoration: line-through; }
.prose-dark h1 { font-size: 1.9em; font-weight: 700; margin: .8em 0 .4em; color: #fff; }
.prose-dark h2 { font-size: 1.5em; font-weight: 700; margin: .9em 0 .4em; color: #fff; }
.prose-dark h3 { font-size: 1.2em; font-weight: 700; margin: .9em 0 .4em; color: #fff; }
.prose-dark a { color: var(--neon-cyan); text-decoration: underline; }
.prose-dark blockquote { border-left: 3px solid var(--neon-cyan); padding: .4em 1em; margin: 1em 0; color: #cbd5e1; font-style: italic; background: rgba(0,243,255,.04); border-radius: 0 8px 8px 0; }
.prose-dark img { max-width: 100%; border-radius: 12px; margin: 1em 0; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floating { animation: float 4s ease-in-out infinite; }
#bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; opacity: .4; pointer-events: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, 0.3); border-radius: 4px; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 40px); }
.toast { background: rgba(16, 16, 24, 0.95); border-left: 4px solid var(--neon-cyan); color: #fff; padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.5); transform: translateX(120%); transition: transform .3s ease-in-out; font-size: 14px; }
.toast.show { transform: translateX(0); }
.toast.error { border-left-color: #f87171; }