From 3ce2180325bb5dbc8f8c247ba4116546719d6209 Mon Sep 17 00:00:00 2001
From: ardhikaxx <ardhikayanuar58@gmail.com>
Date: Wed, 25 Feb 2026 10:38:01 +0700
Subject: [PATCH] refactor(ticket): simplify design seperti boarding pass

Design Changes:
- Remove complex animations dan gradients
- Clean minimalist layout seperti tiket pesawat
- Background gradient soft blue (#e0f2fe to #f0f9ff)
- Header horizontal: brand kiri, info tiket kanan
- Destination code besar 'WISATA' di tengah
- QR code centered dengan label 'Scan untuk verifikasi'
- Info grid 2 kolom: nama pemesan & harga
- Footer simple dengan border dashed
- Small decorative corners (18px)
- Typography hierarchy jelas
- Spacing konsisten dan breathable
- No borders, no heavy shadows
- Soft shadow untuk depth minimal
- Color palette: teal (#0f766e) + slate (#64748b)
- Font sizes: 32px brand, 48px destination, 18px info
- Clean dan professional look
---
 resources/views/pdf/ticket.blade.php          | 539 +++++++-----------
 .../views/user/tickets/download.blade.php     | 421 ++++++--------
 2 files changed, 384 insertions(+), 576 deletions(-)

diff --git a/resources/views/pdf/ticket.blade.php b/resources/views/pdf/ticket.blade.php
index e3048bf..3a93c03 100644
--- a/resources/views/pdf/ticket.blade.php
+++ b/resources/views/pdf/ticket.blade.php
@@ -11,408 +11,289 @@
         
         body { 
             font-family: DejaVu Sans, sans-serif;
-            background: #f0fdfa;
-            padding: 20px;
+            background: #f0f9ff;
+            padding: 30px 20px;
         }
         
         .ticket-container {
             width: 100%;
-            max-width: 850px;
+            max-width: 600px;
             margin: 0 auto;
-            position: relative;
         }
         
         .ticket-box { 
-            border: 5px solid #0f766e;
+            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
             border-radius: 24px;
-            overflow: hidden;
-            background: white;
-            box-shadow: 0 20px 60px rgba(15, 118, 110, 0.4);
+            padding: 40px 35px;
+            box-shadow: 0 20px 60px rgba(15, 118, 110, 0.15);
             position: relative;
         }
         
-        .ticket-background {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0.03;
-            z-index: 0;
-        }
-        
-        .ticket-content {
-            position: relative;
-            z-index: 1;
-        }
-        
-        /* Header dengan wave pattern */
-        .header { 
-            background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
-            color: white;
-            text-align: center;
-            padding: 40px 30px 50px 30px;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -50%;
-            width: 200%;
-            height: 100%;
-            background: radial-gradient(circle at 30% 50%, rgba(20, 184, 166, 0.3) 0%, transparent 50%);
-            animation: wave 15s ease-in-out infinite;
-        }
-        
-        .header::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 100%;
-            height: 40px;
-            background: white;
-            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
-        }
-        
-        @keyframes wave {
-            0%, 100% { transform: translateX(0) translateY(0); }
-            50% { transform: translateX(10%) translateY(-5%); }
-        }
-        
-        .header-content {
-            position: relative;
-            z-index: 1;
-        }
-        
-        .header-icon {
-            width: 60px;
-            height: 60px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 50%;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 15px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-        }
-        
-        .header-icon-inner {
-            width: 35px;
-            height: 35px;
-            background: white;
-            border-radius: 50%;
-        }
-        
-        .header h1 {
-            font-size: 48px;
-            font-weight: 900;
-            margin: 0 0 12px 0;
-            letter-spacing: 6px;
-            text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
-            color: #ffffff;
-            text-transform: uppercase;
-        }
-        
-        .header p {
-            font-size: 18px;
-            margin: 0;
-            font-weight: 600;
-            color: #ccfbf1;
-            letter-spacing: 2px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-        }
-        
-        .ticket-body {
-            padding: 40px 35px 35px 35px;
-        }
-        
-        /* QR Section dengan layout horizontal */
-        .qr-section { 
+        /* Header Section */
+        .ticket-header {
             display: table;
             width: 100%;
-            margin: 0 0 35px 0;
-            padding: 30px;
-            background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%);
-            border-radius: 20px;
-            border: 4px dashed #14b8a6;
-            position: relative;
-        }
-        
-        .qr-section::before {
-            content: '';
-            position: absolute;
-            top: -4px;
-            left: -4px;
-            right: -4px;
-            bottom: -4px;
-            background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
-            border-radius: 20px;
-            z-index: -1;
-            opacity: 0.08;
-        }
-        
-        .qr-left {
-            display: table-cell;
-            width: 50%;
-            vertical-align: middle;
-            text-align: center;
-            padding-right: 20px;
-        }
-        
-        .qr-right {
-            display: table-cell;
-            width: 50%;
-            vertical-align: middle;
-            text-align: center;
-            padding-left: 20px;
-            border-left: 3px solid #14b8a6;
-        }
-        
-        .qr-code-wrapper {
-            background: white;
-            padding: 20px;
-            border-radius: 16px;
-            display: inline-block;
-            box-shadow: 0 8px 25px rgba(15, 118, 110, 0.3);
-            border: 4px solid #0f766e;
-        }
-        
-        .qr-label {
-            font-size: 13px;
-            color: #0f766e;
-            font-weight: 700;
-            margin-bottom: 10px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        
-        .ticket-code { 
-            font-size: 32px;
-            font-weight: 900;
-            letter-spacing: 5px;
-            color: #0f766e;
-            padding: 15px 25px;
-            background: white;
-            border-radius: 12px;
-            display: inline-block;
-            border: 3px solid #14b8a6;
-            box-shadow: 0 6px 20px rgba(15, 118, 110, 0.2);
-            margin-top: 10px;
-        }
-        
-        .divider {
-            height: 4px;
-            background: linear-gradient(90deg, transparent 0%, #14b8a6 20%, #0f766e 50%, #14b8a6 80%, transparent 100%);
-            margin: 30px 0;
-            border-radius: 2px;
-        }
-        
-        .info-section {
-            background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
-            border-radius: 20px;
-            padding: 30px;
             margin-bottom: 30px;
-            border: 3px solid #ccfbf1;
-            box-shadow: 0 4px 15px rgba(15, 118, 110, 0.08);
         }
         
-        .info-row { 
-            display: table;
-            width: 100%;
-            margin: 18px 0;
-            padding: 15px 0;
-            border-bottom: 3px solid #e0f2fe;
-        }
-        
-        .info-row:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-        }
-        
-        .info-label {
+        .header-left {
             display: table-cell;
-            width: 45%;
-            font-size: 15px;
-            color: #0f766e;
-            font-weight: 800;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+            width: 60%;
+            vertical-align: middle;
         }
         
-        .info-value {
+        .header-right {
             display: table-cell;
-            width: 55%;
-            font-size: 16px;
-            color: #111827;
-            font-weight: 700;
+            width: 40%;
+            vertical-align: middle;
             text-align: right;
         }
         
-        .price-highlight {
-            color: #0f766e;
-            font-size: 20px;
-            background: #ccfbf1;
-            padding: 8px 16px;
-            border-radius: 10px;
+        .brand-name {
+            font-size: 32px;
             font-weight: 900;
-            border: 2px solid #14b8a6;
+            color: #0f766e;
+            letter-spacing: 2px;
+            margin-bottom: 5px;
         }
         
+        .brand-subtitle {
+            font-size: 13px;
+            color: #0f766e;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+        
+        .ticket-type {
+            font-size: 11px;
+            color: #64748b;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 3px;
+        }
+        
+        .ticket-name {
+            font-size: 16px;
+            color: #0f766e;
+            font-weight: 800;
+        }
+        
+        /* Destination Section */
+        .destination-section {
+            text-align: center;
+            margin-bottom: 35px;
+        }
+        
+        .destination-code {
+            font-size: 48px;
+            font-weight: 900;
+            color: #0f766e;
+            letter-spacing: 8px;
+            margin-bottom: 8px;
+        }
+        
+        .destination-detail {
+            font-size: 14px;
+            color: #64748b;
+            font-weight: 600;
+        }
+        
+        /* QR Section */
+        .qr-section {
+            text-align: center;
+            margin-bottom: 35px;
+            padding: 25px;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 15px rgba(15, 118, 110, 0.1);
+        }
+        
+        .qr-label {
+            font-size: 10px;
+            color: #64748b;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 15px;
+        }
+        
+        .qr-code-wrapper {
+            display: inline-block;
+            padding: 15px;
+            background: white;
+            border: 3px solid #e0f2fe;
+            border-radius: 12px;
+        }
+        
+        .ticket-code-text {
+            font-size: 16px;
+            font-weight: 700;
+            color: #64748b;
+            letter-spacing: 3px;
+            margin-top: 15px;
+        }
+        
+        /* Info Grid */
+        .info-grid {
+            display: table;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        
+        .info-row {
+            display: table-row;
+        }
+        
+        .info-cell {
+            display: table-cell;
+            padding: 18px 0;
+            border-bottom: 2px solid #e0f2fe;
+        }
+        
+        .info-cell:first-child {
+            width: 50%;
+            padding-right: 15px;
+        }
+        
+        .info-cell:last-child {
+            width: 50%;
+            padding-left: 15px;
+            text-align: right;
+        }
+        
+        .info-label {
+            font-size: 11px;
+            color: #64748b;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 5px;
+            display: block;
+        }
+        
+        .info-value {
+            font-size: 18px;
+            color: #0f766e;
+            font-weight: 800;
+        }
+        
+        .info-value-large {
+            font-size: 22px;
+            color: #0f766e;
+            font-weight: 900;
+        }
+        
+        /* Footer Note */
         .footer-note {
             text-align: center;
-            color: #0f766e;
-            font-size: 13px;
-            margin-top: 30px;
-            padding: 22px;
-            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-            border-radius: 16px;
-            border: 4px solid #fbbf24;
-            font-weight: 600;
+            font-size: 11px;
+            color: #64748b;
             line-height: 1.6;
+            margin-top: 25px;
+            padding-top: 20px;
+            border-top: 2px dashed #cbd5e1;
         }
         
         .footer-note strong {
-            color: #92400e;
-            display: block;
-            margin-bottom: 10px;
-            font-size: 15px;
-            font-weight: 900;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        
-        .watermark { 
-            position: fixed;
-            opacity: 0.015;
-            font-size: 120px;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) rotate(-45deg);
-            font-weight: 900;
             color: #0f766e;
-            z-index: 0;
-            letter-spacing: 15px;
+            font-weight: 800;
         }
         
+        /* Decorative Elements */
         .ticket-corner {
             position: absolute;
-            width: 50px;
-            height: 50px;
-            border: 5px solid #14b8a6;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #0f766e;
         }
         
         .corner-tl {
-            top: -5px;
-            left: -5px;
+            top: 15px;
+            left: 15px;
             border-right: none;
             border-bottom: none;
-            border-radius: 24px 0 0 0;
         }
         
         .corner-tr {
-            top: -5px;
-            right: -5px;
+            top: 15px;
+            right: 15px;
             border-left: none;
             border-bottom: none;
-            border-radius: 0 24px 0 0;
         }
         
         .corner-bl {
-            bottom: -5px;
-            left: -5px;
+            bottom: 15px;
+            left: 15px;
             border-right: none;
             border-top: none;
-            border-radius: 0 0 0 24px;
         }
         
         .corner-br {
-            bottom: -5px;
-            right: -5px;
+            bottom: 15px;
+            right: 15px;
             border-left: none;
             border-top: none;
-            border-radius: 0 0 24px 0;
         }
     </style>
 </head>
 <body>
-    <div class="watermark">BANYU BIRU NGANJUK</div>
-    
     <div class="ticket-container">
         <div class="ticket-box">
-            <!-- Background Image -->
-            @if(file_exists(public_path('images/background.jpg')))
-                <img src="{{ public_path('images/background.jpg') }}" class="ticket-background" alt="Background">
-            @endif
-            
             <!-- Decorative Corners -->
             <div class="ticket-corner corner-tl"></div>
             <div class="ticket-corner corner-tr"></div>
             <div class="ticket-corner corner-bl"></div>
             <div class="ticket-corner corner-br"></div>
             
-            <div class="ticket-content">
-                <!-- Header -->
-                <div class="header">
-                    <div class="header-content">
-                        <div class="header-icon">
-                            <div class="header-icon-inner"></div>
-                        </div>
-                        <h1>BANYU BIRU</h1>
-                        <p>Pemandian Air Panas Nganjuk</p>
-                    </div>
-                </div>
-                
-                <!-- Body -->
-                <div class="ticket-body">
-                    <!-- QR Code Section dengan layout horizontal -->
-                    <div class="qr-section">
-                        <div class="qr-left">
-                            <div class="qr-label">Scan QR Code</div>
-                            <div class="qr-code-wrapper">
-                                @if(file_exists(public_path($item->qr_code_path)))
-                                    <img src="{{ public_path($item->qr_code_path) }}" style="height:160px; width:160px; display:block;" alt="QR Code">
-                                @endif
-                            </div>
-                        </div>
-                        <div class="qr-right">
-                            <div class="qr-label">Kode Tiket</div>
-                            <div class="ticket-code">{{ $item->ticket_code }}</div>
-                        </div>
-                    </div>
-                    
-                    <div class="divider"></div>
-                    
-                    <!-- Info Section -->
-                    <div class="info-section">
-                        <div class="info-row">
-                            <span class="info-label">Nama Pemesan</span>
-                            <span class="info-value">{{ $order->user->name }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Jenis Tiket</span>
-                            <span class="info-value">{{ $item->ticket->name }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Tanggal Kunjungan</span>
-                            <span class="info-value">{{ \Carbon\Carbon::parse($order->visit_date)->isoFormat('dddd, D MMMM Y') }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Harga Tiket</span>
-                            <span class="info-value price-highlight">Rp {{ number_format($item->price, 0, ',', '.') }}</span>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer Note -->
-                    <div class="footer-note">
-                        <strong>⚠ PENTING - HARAP DIBACA</strong>
-                        Tunjukkan tiket ini kepada petugas di pintu masuk. Tiket hanya berlaku untuk 1 (satu) kali kunjungan sesuai tanggal yang tertera. Simpan tiket ini sampai kunjungan selesai.
+            <!-- Header -->
+            <div class="ticket-header">
+                <div class="header-left">
+                    <div class="brand-name">BANYU BIRU</div>
+                    <div class="brand-subtitle">Pemandian Air Panas Nganjuk</div>
+                </div>
+                <div class="header-right">
+                    <div class="ticket-type">Tiket</div>
+                    <div class="ticket-name">{{ $item->ticket->name }}</div>
+                </div>
+            </div>
+            
+            <!-- Destination Code -->
+            <div class="destination-section">
+                <div class="destination-code">WISATA</div>
+                <div class="destination-detail">{{ \Carbon\Carbon::parse($order->visit_date)->isoFormat('dddd, D MMMM Y') }}</div>
+            </div>
+            
+            <!-- QR Code -->
+            <div class="qr-section">
+                <div class="qr-label">Scan untuk verifikasi</div>
+                <div class="qr-code-wrapper">
+                    @if(file_exists(public_path($item->qr_code_path)))
+                        <img src="{{ public_path($item->qr_code_path) }}" style="width:180px; height:180px; display:block;" alt="QR Code">
+                    @endif
+                </div>
+                <div class="ticket-code-text">{{ $item->ticket_code }}</div>
+            </div>
+            
+            <!-- Info Grid -->
+            <div class="info-grid">
+                <div class="info-row">
+                    <div class="info-cell">
+                        <span class="info-label">Nama Pemesan</span>
+                        <div class="info-value">{{ $order->user->name }}</div>
+                    </div>
+                    <div class="info-cell">
+                        <span class="info-label">Harga</span>
+                        <div class="info-value-large">Rp {{ number_format($item->price, 0, ',', '.') }}</div>
                     </div>
                 </div>
             </div>
+            
+            <!-- Footer -->
+            <div class="footer-note">
+                <strong>Tunjukkan tiket ini kepada petugas.</strong><br>
+                Tiket berlaku 1x kunjungan sesuai tanggal tertera.
+            </div>
         </div>
     </div>
 </body>
diff --git a/resources/views/user/tickets/download.blade.php b/resources/views/user/tickets/download.blade.php
index 16d1edd..2e2aa32 100644
--- a/resources/views/user/tickets/download.blade.php
+++ b/resources/views/user/tickets/download.blade.php
@@ -5,272 +5,195 @@
 @push('styles')
 <style>
     .ticket-preview {
-        border: 5px solid #0f766e;
+        background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
         border-radius: 24px;
-        overflow: hidden;
-        background: white;
-        box-shadow: 0 20px 60px rgba(15, 118, 110, 0.25);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 35px 30px;
+        box-shadow: 0 15px 40px rgba(15, 118, 110, 0.12);
+        transition: all 0.3s ease;
         position: relative;
     }
     
     .ticket-preview:hover {
-        transform: translateY(-10px) scale(1.02);
-        box-shadow: 0 30px 80px rgba(15, 118, 110, 0.4);
+        transform: translateY(-5px);
+        box-shadow: 0 20px 50px rgba(15, 118, 110, 0.2);
     }
     
-    .ticket-preview::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: url('/images/background.jpg') center/cover;
-        opacity: 0.03;
-        z-index: 0;
-    }
-    
-    /* Header dengan wave animation */
+    /* Header Section */
     .ticket-header {
-        background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
-        color: white;
-        text-align: center;
-        padding: 35px 25px 45px 25px;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .ticket-header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -50%;
-        width: 200%;
-        height: 100%;
-        background: radial-gradient(circle at 30% 50%, rgba(20, 184, 166, 0.3) 0%, transparent 50%);
-        animation: wave 15s ease-in-out infinite;
-    }
-    
-    .ticket-header::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        width: 100%;
-        height: 35px;
-        background: white;
-        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
-    }
-    
-    @keyframes wave {
-        0%, 100% { transform: translateX(0) translateY(0); }
-        50% { transform: translateX(10%) translateY(-5%); }
-    }
-    
-    .ticket-header-content {
-        position: relative;
-        z-index: 1;
-    }
-    
-    .header-icon {
-        width: 50px;
-        height: 50px;
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 12px;
-        border: 3px solid rgba(255, 255, 255, 0.3);
-    }
-    
-    .header-icon-inner {
-        width: 28px;
-        height: 28px;
-        background: white;
-        border-radius: 50%;
-    }
-    
-    .ticket-header h5 {
-        font-size: 28px;
-        font-weight: 900;
-        margin: 0 0 8px 0;
-        letter-spacing: 4px;
-        text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
-        color: #ffffff;
-        text-transform: uppercase;
-    }
-    
-    .ticket-header small {
-        font-size: 14px;
-        font-weight: 600;
-        color: #ccfbf1;
-        letter-spacing: 1.5px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-    }
-    
-    /* QR Section horizontal layout */
-    .ticket-qr-section {
         display: flex;
-        align-items: center;
         justify-content: space-between;
-        padding: 25px;
-        background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%);
-        border-radius: 20px;
-        border: 4px dashed #14b8a6;
-        margin: 25px;
-        position: relative;
-        gap: 20px;
+        align-items: flex-start;
+        margin-bottom: 25px;
     }
     
-    .ticket-qr-section::before {
-        content: '';
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        right: -4px;
-        bottom: -4px;
-        background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
-        border-radius: 20px;
-        z-index: -1;
-        opacity: 0.08;
-    }
-    
-    .qr-left {
+    .header-left {
         flex: 1;
-        text-align: center;
-        padding-right: 15px;
     }
     
-    .qr-right {
-        flex: 1;
+    .header-right {
+        text-align: right;
+    }
+    
+    .brand-name {
+        font-size: 26px;
+        font-weight: 900;
+        color: #0f766e;
+        letter-spacing: 1.5px;
+        margin-bottom: 3px;
+    }
+    
+    .brand-subtitle {
+        font-size: 12px;
+        color: #0f766e;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+    }
+    
+    .ticket-type {
+        font-size: 10px;
+        color: #64748b;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        margin-bottom: 2px;
+    }
+    
+    .ticket-name {
+        font-size: 14px;
+        color: #0f766e;
+        font-weight: 800;
+    }
+    
+    /* Destination Section */
+    .destination-section {
         text-align: center;
-        padding-left: 15px;
-        border-left: 3px solid #14b8a6;
+        margin-bottom: 30px;
+    }
+    
+    .destination-code {
+        font-size: 40px;
+        font-weight: 900;
+        color: #0f766e;
+        letter-spacing: 6px;
+        margin-bottom: 6px;
+    }
+    
+    .destination-detail {
+        font-size: 13px;
+        color: #64748b;
+        font-weight: 600;
+    }
+    
+    /* QR Section */
+    .ticket-qr-section {
+        text-align: center;
+        margin-bottom: 30px;
+        padding: 22px;
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 4px 15px rgba(15, 118, 110, 0.08);
     }
     
     .qr-label {
-        font-size: 11px;
-        color: #0f766e;
+        font-size: 10px;
+        color: #64748b;
         font-weight: 700;
-        margin-bottom: 10px;
         text-transform: uppercase;
-        letter-spacing: 1px;
+        letter-spacing: 0.8px;
+        margin-bottom: 12px;
     }
     
     .qr-wrapper {
-        background: white;
-        padding: 15px;
-        border-radius: 12px;
         display: inline-block;
-        box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25);
-        border: 4px solid #0f766e;
+        padding: 12px;
+        background: white;
+        border: 3px solid #e0f2fe;
+        border-radius: 12px;
     }
     
     .ticket-code-display {
-        font-size: 18px;
-        font-weight: 900;
-        letter-spacing: 3px;
-        color: #0f766e;
-        padding: 10px 15px;
-        background: white;
-        border-radius: 10px;
-        display: inline-block;
-        margin-top: 10px;
-        border: 3px solid #14b8a6;
-        box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
-    }
-    
-    .divider-line {
-        height: 4px;
-        background: linear-gradient(90deg, transparent 0%, #14b8a6 20%, #0f766e 50%, #14b8a6 80%, transparent 100%);
-        margin: 20px 25px;
-        border-radius: 2px;
+        font-size: 15px;
+        font-weight: 700;
+        color: #64748b;
+        letter-spacing: 2.5px;
+        margin-top: 12px;
     }
     
+    /* Info Grid */
     .ticket-info-box {
-        background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
-        border-radius: 20px;
-        padding: 25px;
-        margin: 25px;
-        position: relative;
-        z-index: 1;
-        border: 3px solid #ccfbf1;
-        box-shadow: 0 4px 15px rgba(15, 118, 110, 0.08);
+        margin-bottom: 15px;
     }
     
     .ticket-info-row {
         display: flex;
         justify-content: space-between;
-        padding: 14px 0;
-        border-bottom: 3px solid #e0f2fe;
+        padding: 15px 0;
+        border-bottom: 2px solid #e0f2fe;
     }
     
     .ticket-info-row:last-child {
         border-bottom: none;
     }
     
-    .ticket-info-label {
-        font-size: 13px;
-        color: #0f766e;
-        font-weight: 800;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
+    .info-column {
+        flex: 1;
     }
     
-    .ticket-info-value {
-        font-size: 14px;
-        color: #111827;
-        font-weight: 700;
+    .info-column:last-child {
         text-align: right;
     }
     
-    .price-highlight {
-        color: #0f766e;
-        font-size: 16px;
-        background: #ccfbf1;
-        padding: 6px 12px;
-        border-radius: 8px;
-        font-weight: 900;
-        border: 2px solid #14b8a6;
+    .ticket-info-label {
+        font-size: 10px;
+        color: #64748b;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        margin-bottom: 4px;
+        display: block;
     }
     
+    .ticket-info-value {
+        font-size: 16px;
+        color: #0f766e;
+        font-weight: 800;
+    }
+    
+    .ticket-info-value-large {
+        font-size: 20px;
+        color: #0f766e;
+        font-weight: 900;
+    }
+    
+    /* Footer Note */
+    .footer-note-simple {
+        text-align: center;
+        font-size: 10px;
+        color: #64748b;
+        line-height: 1.5;
+        margin-top: 20px;
+        padding-top: 18px;
+        border-top: 2px dashed #cbd5e1;
+    }
+    
+    .footer-note-simple strong {
+        color: #0f766e;
+        font-weight: 800;
+    }
+    
+    /* Decorative Corners */
     .ticket-corners {
         position: absolute;
-        width: 40px;
-        height: 40px;
-        border: 5px solid #14b8a6;
+        width: 18px;
+        height: 18px;
+        border: 3px solid #0f766e;
         z-index: 2;
     }
     
-    .corner-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 24px 0 0 0; }
-    .corner-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 24px 0 0; }
-    .corner-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 24px; }
-    .corner-br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 24px 0; }
-    
-    /* Responsive untuk mobile */
-    @media (max-width: 576px) {
-        .ticket-qr-section {
-            flex-direction: column;
-            gap: 15px;
-        }
-        
-        .qr-left, .qr-right {
-            padding: 0;
-            border-left: none;
-        }
-        
-        .qr-right {
-            border-top: 3px solid #14b8a6;
-            padding-top: 15px;
-        }
-        
-        .ticket-code-display {
-            font-size: 16px;
-            letter-spacing: 2px;
-        }
-    }
+    .corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
+    .corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
+    .corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
+    .corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
 </style>
 @endpush
 
@@ -312,52 +235,56 @@
             
             <!-- Header -->
             <div class="ticket-header">
-                <div class="ticket-header-content">
-                    <div class="header-icon">
-                        <div class="header-icon-inner"></div>
-                    </div>
-                    <h5>BANYU BIRU</h5>
-                    <small>Pemandian Air Panas Nganjuk</small>
+                <div class="header-left">
+                    <div class="brand-name">BANYU BIRU</div>
+                    <div class="brand-subtitle">Pemandian Air Panas Nganjuk</div>
+                </div>
+                <div class="header-right">
+                    <div class="ticket-type">Tiket</div>
+                    <div class="ticket-name">{{ $item->ticket->name }}</div>
                 </div>
             </div>
             
-            <!-- QR Section dengan layout horizontal -->
+            <!-- Destination Code -->
+            <div class="destination-section">
+                <div class="destination-code">WISATA</div>
+                <div class="destination-detail">{{ $order->visit_date->format('d F Y') }}</div>
+            </div>
+            
+            <!-- QR Section -->
             <div class="ticket-qr-section">
-                <div class="qr-left">
-                    <div class="qr-label">Scan QR Code</div>
-                    <div class="qr-wrapper">
-                        @if(file_exists(public_path($item->qr_code_path)))
-                            <img src="{{ asset($item->qr_code_path) }}" style="width: 100px; height: 100px; display: block;" alt="QR Code">
-                        @else
-                            <div style="width: 100px; height: 100px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
-                                <i class="fas fa-qrcode" style="font-size: 45px; color: #9ca3af;"></i>
-                            </div>
-                        @endif
-                    </div>
-                </div>
-                <div class="qr-right">
-                    <div class="qr-label">Kode Tiket</div>
-                    <div class="ticket-code-display">{{ $item->ticket_code }}</div>
+                <div class="qr-label">Scan untuk verifikasi</div>
+                <div class="qr-wrapper">
+                    @if(file_exists(public_path($item->qr_code_path)))
+                        <img src="{{ asset($item->qr_code_path) }}" style="width: 130px; height: 130px; display: block;" alt="QR Code">
+                    @else
+                        <div style="width: 130px; height: 130px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
+                            <i class="fas fa-qrcode" style="font-size: 50px; color: #9ca3af;"></i>
+                        </div>
+                    @endif
                 </div>
+                <div class="ticket-code-display">{{ $item->ticket_code }}</div>
             </div>
             
-            <div class="divider-line"></div>
-            
-            <!-- Info -->
+            <!-- Info Grid -->
             <div class="ticket-info-box">
                 <div class="ticket-info-row">
-                    <span class="ticket-info-label">Jenis Tiket</span>
-                    <span class="ticket-info-value">{{ $item->ticket->name }}</span>
-                </div>
-                <div class="ticket-info-row">
-                    <span class="ticket-info-label">Tanggal Kunjungan</span>
-                    <span class="ticket-info-value">{{ $order->visit_date->format('d M Y') }}</span>
-                </div>
-                <div class="ticket-info-row">
-                    <span class="ticket-info-label">Harga</span>
-                    <span class="ticket-info-value price-highlight">Rp {{ number_format($item->price, 0, ',', '.') }}</span>
+                    <div class="info-column">
+                        <span class="ticket-info-label">Nama Pemesan</span>
+                        <div class="ticket-info-value">{{ $order->user->name }}</div>
+                    </div>
+                    <div class="info-column">
+                        <span class="ticket-info-label">Harga</span>
+                        <div class="ticket-info-value-large">Rp {{ number_format($item->price, 0, ',', '.') }}</div>
+                    </div>
                 </div>
             </div>
+            
+            <!-- Footer -->
+            <div class="footer-note-simple">
+                <strong>Tunjukkan tiket ini kepada petugas.</strong><br>
+                Tiket berlaku 1x kunjungan sesuai tanggal tertera.
+            </div>
 
             <!-- Actions -->
             <div class="p-3">