﻿    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #ffffff; color: #111111; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; }
        body::-webkit-scrollbar { display: none; }
        h1, h2, h3, h4, .font-montserrat { font-family: 'Montserrat', sans-serif; }
        .font-mono { font-family: 'Space Mono', monospace; }
        .font-serif-custom { font-family: 'Playfair Display', serif; }
        
        .page-section { animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        .form-input { width: 100%; padding: 0.8rem 1rem; border: 1px solid #e5e7eb; background-color: #f9fafb; transition: all 0.3s; font-size: 13px; }
        .form-input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000; background-color: #ffffff; }
        
        .dropdown-menu { visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
        .group:hover .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); }
        #mobile-menu { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .slide-in { transform: translateX(0) !important; }
        .sharp-edge { border-radius: 0 !important; }

        /* Premium Member Card */
        .member-card-premium {
            background: linear-gradient(135deg, #0f172a 0%, #000000 100%);
            box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
            position: relative; overflow: hidden;
        }

        .content-card { background: #ffffff; border: 1px solid #E2E8F0; transition: all 0.3s ease; }
        .content-card:hover { border-color: #111; transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
        
        /* Cart Animation */
        #cart-modal-content { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .cart-open { transform: translateX(0) !important; }

        /* Multi-row Marquee for Story (Diperlambat) */
        .marquee-track-left { display: flex; flex-shrink: 0; animation: scrollLeft 300s linear infinite; }
        @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

        /* Print Style for QR Generator */
        @media print {
            body * { visibility: hidden; }
            #qr-batch-container, #qr-batch-container * { visibility: visible; }
            #qr-batch-container { position: absolute; left: 0; top: 0; width: 100%; }
            #admin-sidebar, nav, .admin-tab:not(#tab-qr-meja), button { display: none !important; }
            .qr-print-area { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; display: grid !important; }
            .qr-card { page-break-inside: avoid; break-inside: avoid; border: 2px solid #ddd !important; box-shadow: none !important;}
        }
