/* === 1. GLOBAL & VARIABLES (TEMA AQUATIC PREMIUM) === */
        :root { 
            --primary: #0097e6; /* Biru Laut */
            --primary-dark: #0081c6;
            --accent: #ff9f43; /* Oranye Segar untuk Harga */
            --bg: #f8f9fa; /* Latar belakang lebih bersih */
            --text: #2d3436; 
            --success: #00b894; /* Hijau Sukses */
            --danger: #ff4757; /* Merah Promo */
        }
        
        /* CSS BODY DEFAULT (Background akan diatur otomatis oleh JavaScript) */
        body { 
            font-family: 'Poppins', sans-serif; 
            background: var(--bg); 
            margin: 0; 
            padding-bottom: 0; 
            color: var(--text); 
            -webkit-font-smoothing: antialiased; 
            -webkit-tap-highlight-color: transparent; 
        }
        
        /* === 2. LOADER & ANIMATION === */
        #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f4f7f6; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .pixel-fish-svg { width: 150px; height: 150px; }
        .fish-body-group { animation: swim 2s ease-in-out infinite; }
        .bubble { fill: #87CEEB; opacity: 0; animation: bubbleRise 2s infinite steps(5); }
        .b1 { animation-delay: 0s; } .b2 { animation-delay: 0.8s; }
        .loader-text { margin-top: 15px; color: #ff6b6b; font-weight: bold; letter-spacing: 3px; font-size: 14px; }
        .loader-text::after { content: '.'; animation: dots 1.5s steps(5, end) infinite; }
        @keyframes swim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes bubbleRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
        @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } 80%, 100% { content: ''; } }

        /* === 3. HEADER & HERO === */

       header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 10px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1500; height: 70px; display: flex; align-items: center; justify-content: center; gap: 15px; box-sizing: border-box; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
        .wa-header-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background-color: #25d366; color: white; flex: 1; max-width: 140px; padding: 8px 12px; border-radius: 50px; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.3s; }
        .wa-floating-mode { position: fixed !important; bottom: 15px !important; right: 20px !important; top: auto !important; max-width: none !important; padding: 12px 25px !important; font-size: 16px !important; box-shadow: 0 5px 20px rgba(37, 211, 102, 0.6) !important; z-index: 2000 !important; animation: popUp 0.5s ease; }
        @keyframes popUp { from { transform: scale(0) translateY(50px); } to { transform: scale(1) translateY(0); } }
        
        #search-container { position: relative; display: none; width: 100%; max-width: 500px; }
        input#search { width: 100%; padding: 12px 20px; border-radius: 50px; border: 1px solid #e1e8ed; outline: none; background: #f1f2f6; font-size: 13px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); box-sizing: border-box; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        input#search:focus { background: #ffffff; border-color: var(--primary); box-shadow: 0 4px 15px rgba(0, 151, 230, 0.15); transform: scale(1.02); }
       
        #hero-page { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: none; z-index: 50; background: #000; }
        .hero-box { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; }
        .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); z-index: 1; }
        .hero-content { position: relative; z-index: 2; width: 85%; animation: fadeInUp 0.8s ease; }
        
       /* WADAH LOGO ELASTIS - MENYESUAIKAN UKURAN GAMBAR */
        .hero-logo-center { 
            margin-bottom: 30px; 
            display: inline-flex; 
            justify-content: center; 
            align-items: center; 
            
            /* Ukuran sekarang otomatis mengikuti isi (logo) */
            width: auto; 
            height: auto; 
            min-width: 200px; /* Batas minimal agar tidak terlalu kecil */
            max-width: 90vw;  /* Batas maksimal agar tidak melebar keluar layar HP */
            
            /* Memberi ruang napas di dalam wadah agar logo tidak mepet ke pinggir */
            padding: 20px 35px; 
            
            /* Background gradasi memudar yang Bapak inginkan */
            background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 80%);
            
            /* Sudut dibuat tumpul elegan (bukan lingkaran kaku) */
            border-radius: 50px; 
            
            border: none;
            box-shadow: none;
            overflow: visible; /* Penting: agar bayangan atau bagian logo tidak terpotong */
        }

        /* Pastikan gambar di dalamnya tidak dipaksa bulat */
        .hero-logo-center img {
            max-width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }
        
       /* FONT DINAMIS (RESPONSIVE) MENGGUNAKAN CLAMP */
        .hero-title { font-size: clamp(28px, 8vw, 56px); font-weight: 800; margin-bottom: 10px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.8); padding: 0 15px; }
        .hero-sub { font-size: clamp(22px, 5vw, 40px); font-weight: 500; opacity: 0.95; margin-bottom: 30px; text-shadow: 0 1px 5px rgba(0,0,0,0.8); padding: 0 15px; line-height: 1.5; }
        .btn-hero { background: linear-gradient(90deg, #f1c40f, #e67e22); color: white; border: none; padding: 15px 40px; border-radius: 50px; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 5px 20px rgba(230, 126, 34, 0.6); cursor: pointer; animation: pulse 2s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* === 4. GRID & PRODUCTS (KARTU LEBIH LEGA & JELAS) === */
        .container { max-width: 800px; margin: 110px auto 0; padding: 0 15px; min-height: 80vh; padding-bottom: 80px; }
        
        #view-kategori { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; display: none; }
        .cat-card { position: relative; height: 120px; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.2s; transform: translateZ(0); isolation: isolate; }
        .cat-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); transition: transform 0.5s; }
        .cat-card:hover .cat-bg-img { transform: scale(1.1); }
        .cat-content-layer { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
        .cat-name { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
        
        #view-produk { display: none; }
        .nav-back { display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; background: white; border-radius: 20px; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: background 0.2s; }
        .nav-back:active { background: #eee; }
        .cat-title-display { font-size: 18px; font-weight: 800; color: #2d3436; margin-bottom: 15px; border-left: 4px solid var(--primary); padding-left: 10px; }
        
        /* Grid Produk Dilebarkan */
        .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; padding-top: 10px; }

        /* Desain Kartu Produk Baru */
        .card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.04); display: flex; flex-direction: column; position: relative; border: 1px solid #f1f2f6; transition: transform 0.3s ease, box-shadow 0.3s ease; transform: translateZ(0); isolation: isolate; }
        .card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }
        
        .card-img-wrap { width: 100%; aspect-ratio: 1 / 1; position: relative; background: #f8f9fa; cursor: pointer; overflow: hidden; } 
        .card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
        .card-img-wrap:hover .card-img { transform: scale(1.08); } /* Efek Zoom Tipis Premium */
        
        /* Badge Diskon Diperbesar */
        .discount-badge { position: absolute; top: 10px; right: 10px; width: 48px !important; height: 48px !important; background: var(--danger); color: white; border-radius: 50% !important; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(255, 71, 87, 0.4); transform: rotate(-10deg); border: 2px solid white; z-index: 10; line-height: 1; }
        .discount-badge .label-text { font-size: 9px; font-weight: 600; text-transform: uppercase; margin-bottom: 2px;}
        .discount-badge .angka-text { font-size: 16px; font-weight: 800; }
        
        /* Badge Tambahan */
        .badge-blue { background: var(--primary) !important; width: auto !important; height: auto !important; padding: 5px 10px !important; border-radius: 15px !important; transform: none !important; right: 8px !important; top: 8px !important; font-size: 11px !important; border:none; }
        .badge-green { background: var(--success) !important; width: auto !important; height: auto !important; padding: 5px 10px !important; border-radius: 8px !important; transform: none !important; right: 8px !important; top: 8px !important; font-size: 11px !important; border:none; }
        .text-only { font-size: 11px; font-weight: 700; color: white; }

        /* Area Teks Produk */
        .card-body { padding: 15px 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
       .p-name { 
    font-size: 14px; 
    font-weight: 700; 
    line-height: 1.4; 
    margin-bottom: 8px; 
    color: #2d3436; 
    height: 40px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    line-clamp: 2; /* Tambahkan baris ini */
    -webkit-box-orient: vertical; 
}
        
        .price-container { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
        .p-price-coret { font-size: 12px; color: #a4b0be; text-decoration: line-through; margin-bottom: 2px; }
        .p-price-final { font-size: 17px; font-weight: 800; color: var(--accent); }
        
        .p-stock { font-size: 11px; color: #747d8c; margin-bottom: 10px; font-weight: 500; }
        
        .p-member-badge { font-size: 11px; font-weight: 700; background: linear-gradient(45deg, #f1c40f, #f39c12); color: white; padding: 4px 8px; border-radius: 6px; display: inline-block; margin-bottom: 6px; }
        .info-grosir { font-size: 11px; color: #57606f; background: #f1f2f6; padding: 4px 8px; border-radius: 6px; display: inline-block; margin-top: 5px; font-weight: 500; }
        .p-promo-desc { font-size: 11px; color: var(--danger); font-weight: 700; margin-bottom: 5px; display: block; margin-top: 5px; }
        
        /* Tombol +Keranjang di Kartu Produk */
.btn-beli {
    background: linear-gradient(135deg, #ff9f43, #ff7675);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(255, 118, 117, 0.3);
}
.btn-beli:active { transform: scale(0.95); }

/* Tombol Keranjang Melayang di Sudut Layar */
.cart-float {
    background: linear-gradient(135deg, #ff9f43, #e15f41);
    color: white;
    box-shadow: 0 4px 15px rgba(225, 95, 65, 0.4);
}
        
        /* Tombol Load More */
        #load-more { text-align: center; margin: 30px auto; padding: 12px 25px; background: white; color: var(--primary); border: 2px solid var(--primary); border-radius: 25px; font-size: 14px; font-weight: 700; cursor: pointer; display: none; width: max-content; transition: background 0.3s; }
        #load-more:active { background: var(--bg); }
        
        /* === 5. CART & MODALS === */
        #cart-float { position: relative; background: linear-gradient(135deg, #ff9f43, #e15f41); color: white; width: 75px; height: 75px; border-radius: 50%; display: none; justify-content: center; align-items: center;font-size: 35px; box-shadow: 0 4px 15px rgba(225, 95, 65, 0.4); cursor: pointer; }
        .cart-hero-mode { top: 60px !important; bottom: auto !important; right: 20px !important; z-index: 2000 !important; }
        .cart-badge { position: absolute; top: -5px; right: -5px; background: #ff4757; color: white; font-size: 12px; font-weight: bold; width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 3px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

        /* === 1. MODAL UMUM (Keranjang, Detail Produk, Promo) === */
        /* Hapus #modal-form dan #modal-admin-login dari sini */
        #cart-modal, #product-modal, #promo-popup { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.5); z-index: 2100; 
            display: none; justify-content: center; align-items: center; 
        }
        /* Bilah "Menu Ulam Sae" (position:fixed, z-index 8900) selalu menang atas
           modal ini (z-index 2100), sehingga kepala kartu produk tertutup saat
           tombol Lihat ditekan dari Pusat Kendali. Modal digeser turun sebanyak
           tinggi bilah: 44px + garis bawah 3px = 47px. */
        body.ulamsae-ownerbar-active #cart-modal,
        body.ulamsae-ownerbar-active #product-modal,
        body.ulamsae-ownerbar-active #promo-popup {
            top: 47px; height: calc(100% - 47px);
        }
        #cart-modal { align-items: flex-end; }

        /* === 2. KHUSUS ADMIN (Background Lebih Gelap) === */
        #modal-form, #modal-admin-login, #modal-kategori-form { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.85); z-index: 10005; 
            display: none; justify-content: center; align-items: center; 
        }

        /* === 3. STYLE BARU (Untuk Edit Staff) === */
        
        /* Tampilan Input Terkunci (Abu-abu) */
        .locked-field {
            background-color: #e9ecef !important;
            color: #6c757d !important;
            cursor: not-allowed;
            border: 1px solid #ced4da !important;
            font-weight: bold;
        }

        /* Tampilan Kotak Foto (Grid 3 Kolom) */
        .photo-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px;
        }
        .photo-slot {
            position: relative; aspect-ratio: 1/1; background: #f8f9fa;
            border: 2px dashed #dee2e6; border-radius: 8px;
            display: flex; justify-content: center; align-items: center;
            overflow: hidden; cursor: pointer;
        }
        .photo-slot img { width: 100%; height: 100%; object-fit: cover; display: none; }
        .photo-slot span { font-size: 10px; color: #adb5bd; text-align: center; padding: 5px; }
        .photo-slot.has-image { border: 2px solid #007bff; }
        .photo-slot.has-image img { display: block; }
        .photo-slot.has-image span { display: none; }
        
        /* CSS Tombol Hapus Foto & Template */
        .btn-clear-foto { position: absolute; top: 5px; right: 5px; background: rgba(255,71,87,0.9); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: bold; cursor: pointer; display: none; z-index: 5; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .photo-slot.has-image .btn-clear-foto { display: flex; justify-content: center; align-items: center; }
        .btn-clear-foto:active { transform: scale(0.9); }
        .btn-download-foto { position: absolute; top: 5px; left: 5px; background: rgba(41,128,185,0.9); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: bold; cursor: pointer; display: none; z-index: 5; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .photo-slot.has-image .btn-download-foto { display: flex; justify-content: center; align-items: center; }
        .btn-download-foto:active { transform: scale(0.9); }

        .template-btn { background: #e1f5fe; color: var(--primary); border: 1px solid var(--primary); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.2s; }
        .template-btn:active { background: var(--primary); color: white; }

        /* Layar Loading saat Upload */
        #save-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.95); z-index: 20000;
            display: none; flex-direction: column;
            justify-content: center; align-items: center;
        }

        .cart-panel { background: white; width: 100%; max-width: 500px; border-radius: 20px 20px 0 0; padding: 20px; max-height: 80vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .cart-items { overflow-y: auto; flex: 1; margin-bottom: 15px; }
        .c-item { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
        .c-qty-wrap { display: flex; align-items: center; gap: 10px; }
        .btn-qty { width: 24px; height: 24px; background: #eee; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
        .cart-summary-box { background: #f8f9fa; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
        .cs-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
        .cs-total { font-weight: 700; font-size: 16px; color: var(--accent); border-top: 1px solid #ddd; padding-top: 5px; margin-top: 5px; text-align: right; }
        .btn-checkout { width: 100%; background: #25d366; color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 15px; }

        .popup-content { background: white; width: 90%; max-width: 350px; padding: 20px; border-radius: 20px; text-align: center; position: relative; animation: popIn 0.3s ease; }
        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
       .btn-close-popup { position: absolute; top: 10px; right: 10px; background: #f1f1f1; width: 32px; height: 32px; border-radius: 50%; border: none; font-weight: bold; cursor: pointer; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        
        /* CSS PROPORSIONAL ANTI-GEPENG & ANTI-KEPOTONG */
        #promo-img-display { 
            max-width: 100%; 
            max-height: 45vh; 
            width: auto; 
            height: auto; 
            border-radius: 12px; 
            margin: 0 auto 15px auto; 
            display: block; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .btn-ok { background: linear-gradient(90deg, #f1c40f, #e67e22); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-weight: 700; cursor: pointer; width: 100%; font-size: 14px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4); animation: pulse 2s infinite; }
        
        /* === UPDATE CSS: POPUP DETAIL PRODUK (UI MODERN) === */
        .pm-content { 
            background: white; width: 90%; max-width: 450px; max-height: 90vh; 
            border-radius: 20px; overflow-y: auto; position: relative; 
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            padding-bottom: 20px;
        }
        .pm-close-btn {
            position: absolute; top: 15px; right: 15px; z-index: 10;
            background: rgba(255,255,255,0.9); border: none; width: 32px; height: 32px; 
            border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
            font-weight: bold; color: #333; cursor: pointer; font-size: 16px;
        }
        .pm-slider-wrap { 
            position: relative; width: 100%; aspect-ratio: 1 / 1; 
            background: #f1f2f6; border-radius: 20px 20px 0 0; 
            overflow: hidden; display: flex; align-items: center; justify-content: center;
        }
        .pm-img { 
            width: 100%; height: 100%; object-fit: contain; /* Memastikan foto tidak terpotong */
            transition: opacity 0.3s ease;
        }
        /* Tombol Navigasi Slider yang Lebih Jelas */
        .pm-nav { 
            position: absolute; top: 50%; transform: translateY(-50%); 
            background: white; color: var(--primary); border: none; cursor: pointer; 
            font-size: 14px; border-radius: 50%; width: 36px; height: 36px; 
            display: flex; justify-content: center; align-items: center; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.2); opacity: 0.9; transition: transform 0.2s;
        }
        .pm-nav:active { transform: translateY(-50%) scale(0.9); }
        .pm-prev { left: 15px; } 
        .pm-next { right: 15px; }
        .pm-nav.hidden { display: none !important; } /* Sembunyi otomatis jika foto cuma 1 */
        
        /* Indikator Titik (Dots) */
        .pm-dots { 
            position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); 
            display: flex; gap: 6px; 
        }
        .pm-dot { 
            width: 8px; height: 8px; background: rgba(0,0,0,0.2); 
            border-radius: 50%; transition: all 0.3s; 
        }
        .pm-dot.active { background: var(--primary); width: 20px; border-radius: 10px; }
        
        #toast { visibility: hidden; min-width: 200px; background-color: rgba(0,0,0,0.8); color: #fff; text-align: center; border-radius: 50px; padding: 10px; position: fixed; z-index: 3000; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 12px; }
        #toast.show { visibility: visible; bottom: 80px; }

        /* === 6. FOOTER === */
        footer { text-align: center; margin-top: 40px; font-size: 11px; color: #aaa; padding: 30px 15px; border-top: 1px solid #eee; background: white; display: none; }

        /* === TAMBAHAN FITUR KERANJANG (NUMPAD & TRASH) === */
        .btn-hapus-item { background: #ffeaa7; color: #d63031; border: none; width: 28px; height: 28px; border-radius: 6px; font-size: 14px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; margin-left: 10px; }
        .btn-hapus-item:active { background: #ff7675; color: white; transform: scale(0.9); }
        
        .qty-clickable { font-size: 16px; font-weight: 800; min-width: 35px; text-align: center; background: #e1f5fe; padding: 4px 8px; border-radius: 6px; color: var(--primary); cursor: pointer; user-select: none; }
        .qty-clickable:active { background: #b3e5fc; }

        #numpad-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: none; justify-content: center; align-items: center; }
        .numpad-panel { background: white; width: 90%; max-width: 320px; padding: 20px; border-radius: 20px; text-align: center; animation: popIn 0.2s; }
        .numpad-display { font-size: 32px; font-weight: 800; background: #f8f9fa; padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 2px solid var(--primary); color: #2d3436; letter-spacing: 2px;}
        .numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .numpad-btn { background: white; border: 1px solid #ddd; padding: 15px; font-size: 22px; font-weight: 700; border-radius: 12px; cursor: pointer; color: #333; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .numpad-btn:active { background: var(--primary); color: white; transform: scale(0.95); }
        .numpad-btn.del { background: #ff7675; color: white; border: none; }
        .numpad-btn.cancel { background: #f1f2f6; color: #555; border: none; font-size: 14px; }

        /* === TAMBAHAN POPUP CHECKOUT === */
        #checkout-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; display: none; justify-content: center; align-items: center; }
        .checkout-panel { background: white; width: 90%; max-width: 400px; padding: 25px; border-radius: 20px; position: relative; animation: popIn 0.3s ease; max-height: 90vh; overflow-y: auto; text-align: left; }
        .checkout-panel label { font-size: 12px; font-weight: 700; color: #555; display: block; margin-top: 15px; margin-bottom: 5px; }
        .checkout-panel input, .checkout-panel select, .checkout-panel textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size: 14px; background: #f8f9fa; }
        .checkout-panel input:focus, .checkout-panel select:focus, .checkout-panel textarea:focus { outline: none; border-color: var(--primary); background: white; }
        
        /* --- FITUR MELAYANG LAPTOP (TOMBOL KEMBALI) --- */
@media (min-width: 768px) {
    .nav-back {
        position: sticky !important;
        top: 85px !important; /* Pas di bawah header */
        z-index: 1400;
        border: 1px solid var(--primary);
        box-shadow: 0 4px 15px rgba(0, 151, 230, 0.2);
        display: inline-flex;
    }
}
/* --- FIX LAYOUT UNTUK LAPTOP (14-17 Inch) --- */
@media (min-width: 1024px) and (max-height: 800px) {
    .hero-logo-center { margin-bottom: 10px !important; padding: 10px 20px !important; max-height: 35vh; }
    .hero-logo-center img { max-height: 22vh !important; }
    .hero-title { font-size: clamp(28px, 5vw, 48px) !important; margin-bottom: 5px !important; }
    .hero-sub { font-size: clamp(16px, 2.5vw, 24px) !important; margin-bottom: 15px !important; }
    .btn-hero { padding: 10px 30px !important; font-size: 14px !important; }
    .hero-content { max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
}

/* Memberi ruang agar konten tidak tertutup footer sticky */
body {
    padding-bottom: 60px !important;
}

/* Batas bawah untuk modal keranjang dan opname */
#modal-keranjang, #modal-keranjang-opname, .modal-content {
    margin-bottom: 50px !important;
}

/* Hilangkan panah spinner pada kolom input angka di modal Opname */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}