Add timeline clickability control and checkout auth modal

- Add clickable prop to TimelineChapters component for marketing vs purchased users
- Make timeline non-clickable in product preview pages with lock icons
- Keep timeline clickable in actual content pages (WebinarRecording, Bootcamp)
- Add inline auth modal in checkout with login/register tabs
- Replace "Login untuk Checkout" button with seamless auth flow
- Add form validation and error handling for auth forms

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

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

src/pages/WebinarRecording.tsx

@@ -49,6 +49,7 @@ export default function WebinarRecording() {
   const [loading, setLoading] = useState(true);
   const [currentTime, setCurrentTime] = useState(0);
   const [accentColor, setAccentColor] = useState<string>('');
+  const [hasPurchased, setHasPurchased] = useState(false);
   const [userReview, setUserReview] = useState<UserReview | null>(null);
   const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const playerRef = useRef<VideoPlayerRef>(null);
@@ -113,7 +114,10 @@ export default function WebinarRecording() {
       order.order_items?.some((item: any) => item.product_id === productData.id)
     );
 
-    if (!hasDirectAccess && !hasPaidOrderAccess) {
+    const hasAccess = hasDirectAccess || hasPaidOrderAccess;
+    setHasPurchased(hasAccess);
+
+    if (!hasAccess) {
       toast({ title: 'Akses ditolak', description: 'Anda tidak memiliki akses ke webinar ini', variant: 'destructive' });
       navigate('/dashboard');
       return;