Improve shortcode UI and add payment link shortcodes

✨ UI Improvements:
- Completely redesigned shortcode display with clean categorization
- Added collapsible section for all available shortcodes
- Used emoji icons for better visual organization
- Improved color coding and typography
- Added "Used in this template" section with visual distinction

➕ New Shortcodes:
- Added {payment_link} for direct payment links in emails
- Added {thank_you_page} for public thank you page access
- Updated relevant templates to include new payment shortcodes

🎯 Key Features:
- Shortcodes organized by category (User, Order, Product, Access, etc.)
- Visual hierarchy with proper spacing and borders
- Hover effects and smooth transitions
- Better readability with proper contrast

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

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

src/lib/email-templates/master-template.ts

@@ -405,7 +405,9 @@ export class ShortcodeProcessor {
     nomor_rekening: '123-456-7890',
     atas_nama: 'PT Access Hub Indonesia',
     jumlah_pembayaran: 'Rp 1.500.000',
-    batas_pembayaran: '22 Desember 2025 23:59'
+    batas_pembayaran: '22 Desember 2025 23:59',
+    payment_link: 'https://accesshub.example.com/payment/ORD-123456',
+    thank_you_page: 'https://accesshub.example.com/thank-you/ORD-123456'
   };
 
   static process(content: string, customData: Record<string, string> = {}): string {