Redesign: richer visual language inspired by Magic UI

- Body: radial gradient orbs (teal + green) + dot grid overlay + grain
- Header: dark mesh gradient, shimmer logo animation, animated gradient
  tagline, frosted glass lang-switcher pill
- CategorySection: glow-ring emoji badge, gradient top line, frosted
  glass card container, teal/gold decorative divider
- MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight,
  price pill with green gradient border
- BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg
- Page: welcome strip with teal gradient border, hero fade from header

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

components/MenuItemRow.tsx

@@ -5,32 +5,50 @@ type Props = {
   lang: string
   currency: string
   index: number
+  isLast?: boolean
 }
 
-export default function MenuItemRow({ item, lang, currency, index }: Props) {
+export default function MenuItemRow({ item, lang, currency, index, isLast }: Props) {
   const l = lang as 'tr' | 'en'
+
   return (
     <div
-      className="menu-item-row flex items-center gap-3.5 py-3.5 border-b border-dashed border-beige last:border-0"
+      className={`menu-item-row flex items-center gap-3.5 py-3.5 rounded-xl px-2 -mx-2 ${
+        !isLast ? 'border-b border-dashed border-beige' : ''
+      }`}
       style={{ '--item-index': index } as React.CSSProperties}
     >
-      {/* Emoji circle */}
-      <div className="w-10 h-10 rounded-full bg-beige flex items-center justify-center flex-shrink-0 text-lg">
+      {/* Emoji circle with gradient */}
+      <div
+        className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 text-[1.2rem]"
+        style={{
+          background:
+            'linear-gradient(135deg, #F0E8D8 0%, #E8DCC8 100%)',
+          border: '1px solid rgba(212,200,176,0.80)',
+          boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
+        }}
+      >
         {item.emoji}
       </div>
 
       {/* Text */}
       <div className="flex-1 min-w-0">
-        <p className="font-display text-coffee text-sm font-semibold leading-snug">
+        <p
+          className="font-display text-coffee font-semibold leading-snug"
+          style={{ fontSize: '0.9rem' }}
+        >
           {item.name[l]}
         </p>
-        <p className="font-body text-muted text-xs leading-relaxed mt-0.5 line-clamp-2">
+        <p
+          className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
+          style={{ fontSize: '0.72rem' }}
+        >
           {item.description[l]}
         </p>
       </div>
 
-      {/* Price */}
-      <span className="font-body text-green text-sm font-semibold flex-shrink-0 pl-2">
+      {/* Price pill */}
+      <span className="price-pill flex-shrink-0">
         {currency}{item.price}
       </span>
     </div>