diff --git a/src/pages/ProductDetail.tsx b/src/pages/ProductDetail.tsx
index 89b81bd..89ec598 100644
--- a/src/pages/ProductDetail.tsx
+++ b/src/pages/ProductDetail.tsx
@@ -196,6 +196,17 @@ export default function ProductDetail() {
     return new Date() > eventEnd;
   };
 
+  // Check if webinar is currently running or about to start (can join)
+  const isWebinarJoinable = () => {
+    if (!product || product.type !== 'webinar' || !product.event_start) return false;
+    const eventStart = new Date(product.event_start);
+    const durationMs = (product.duration_minutes || 60) * 60 * 1000;
+    const eventEnd = new Date(eventStart.getTime() + durationMs);
+    const now = new Date();
+    // Can join if webinar hasn't ended yet (even if it's already started)
+    return now <= eventEnd;
+  };
+
   const handleAddToCart = () => {
     if (!product) return;
     addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
@@ -254,9 +265,6 @@ export default function ProductDetail() {
           </Button>
         );
       case 'webinar':
-        // Check if webinar has ended
-        const webinarEnded = product.event_start && new Date(product.event_start) <= new Date();
-
         if (product.recording_url) {
           return (
             <div className="space-y-4">
@@ -278,8 +286,8 @@ export default function ProductDetail() {
           );
         }
 
-        // Only show "Gabung Webinar" if webinar hasn't ended and has meeting link
-        if (!webinarEnded && product.meeting_link) {
+        // Show "Gabung Webinar" if webinar hasn't ended yet (can join even if already started)
+        if (isWebinarJoinable() && product.meeting_link) {
           return (
             <Button asChild size="lg" className="shadow-sm">
               <a href={product.meeting_link} target="_blank" rel="noopener noreferrer">
@@ -291,7 +299,7 @@ export default function ProductDetail() {
         }
 
         // Webinar has ended but no recording yet
-        if (webinarEnded) {
+        if (isWebinarEnded()) {
           return <Badge className="bg-muted text-primary">Rekaman segera tersedia</Badge>;
         }