Fix public header mobile menu and content formatting

Public Header Mobile Menu:
- Added hamburger menu for non-logged-in visitors on mobile
- Desktop shows full navigation, mobile shows slide-out menu with icons
- Cart icon remains visible on mobile alongside hamburger

Tiptap Editor List Formatting:
- Added visual styling for bullet lists (disc markers, padding, spacing)
- Added visual styling for ordered lists (decimal markers, padding, spacing)
- List markers now use primary color for better visibility

Product Content HTML Formatting:
- Enhanced prose styling with proper heading sizes (h1, h2, h3)
- Improved list formatting with proper indentation and markers
- Added blockquote styling with left border and italic text
- Added code and preformatted text styling
- Ensures all formatted content displays properly on product detail pages

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

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

src/components/AppLayout.tsx

@@ -113,7 +113,9 @@ export function AppLayout({ children }: AppLayoutProps) {
               )}
               <span>{brandName}</span>
             </Link>
-            <nav className="flex items-center gap-4">
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex items-center gap-4">
               <Link to="/products" className="hover:underline font-medium">Produk</Link>
               <Link to="/calendar" className="hover:underline font-medium">Kalender</Link>
               <Link to="/auth">
@@ -133,6 +135,43 @@ export function AppLayout({ children }: AppLayoutProps) {
                 </Button>
               </Link>
             </nav>
+
+            {/* Mobile Menu Trigger */}
+            <div className="md:hidden flex items-center gap-2">
+              <Link to="/checkout">
+                <Button variant="outline" size="sm" className="relative border-2">
+                  <ShoppingCart className="w-4 h-4" />
+                  {items.length > 0 && (
+                    <span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center">
+                      {items.length}
+                    </span>
+                  )}
+                </Button>
+              </Link>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="sm">
+                    <Menu className="w-6 h-6" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="right" className="border-l-2 border-border">
+                  <nav className="flex flex-col space-y-4 mt-8">
+                    <Link to="/products" className="flex items-center gap-3 text-lg font-medium">
+                      <Package className="w-5 h-5" />
+                      Produk
+                    </Link>
+                    <Link to="/calendar" className="flex items-center gap-3 text-lg font-medium">
+                      <Calendar className="w-5 h-5" />
+                      Kalender
+                    </Link>
+                    <Link to="/auth" className="flex items-center gap-3 text-lg font-medium">
+                      <User className="w-5 h-5" />
+                      Login
+                    </Link>
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
           </div>
         </header>
         <main className="flex-1">{children}</main>