Add Tiptap enhancements and webinar date/time fields

- Add text alignment controls to Tiptap editor (left, center, right, justify)
- Add horizontal rule/spacer button to Tiptap toolbar
- Add event_start and duration_minutes fields to webinar products
- Add webinar status badges (Recording Available, Coming Soon, Ended)
- Install @tiptap/extension-text-align package

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/ProductDetail.tsx

@@ -345,8 +345,17 @@ export default function ProductDetail() {
           <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
             <div>
               <h1 className="text-4xl font-bold mb-2">{product.title}</h1>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 flex-wrap">
                 <Badge className="bg-primary text-primary-foreground capitalize">{product.type}</Badge>
+                {product.type === 'webinar' && product.recording_url && (
+                  <Badge className="bg-secondary text-primary">Rekaman Tersedia</Badge>
+                )}
+                {product.type === 'webinar' && !product.recording_url && product.event_start && new Date(product.event_start) > new Date() && (
+                  <Badge className="bg-brand-accent text-white">Segera Hadir</Badge>
+                )}
+                {product.type === 'webinar' && !product.recording_url && product.event_start && new Date(product.event_start) <= new Date() && (
+                  <Badge className="bg-muted text-primary">Telah Selesai</Badge>
+                )}
                 {hasAccess && <Badge className="bg-primary text-primary-foreground">Anda memiliki akses</Badge>}
               </div>
             </div>