/* CSS Variables untuk mengekalkan warna tema asal */
        :root {
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-300: #cbd5e1;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            
            --blue-50: #eff6ff;
            --blue-100: #dbeafe;
            --blue-200: #bfdbfe;
            --blue-500: #3b82f6;
            --blue-600: #2563eb;
            --blue-700: #1d4ed8;
            --blue-900: #1e3a8a;
            
            --yellow-200: #fef08a;
            --yellow-300: #fde047;
            --yellow-400: #facc15;
            --yellow-500: #eab308;
            
            --red-50: #fef2f2;
            --red-500: #ef4444;
			--red-700: #b50e3b;
			
			--gold: #c9a84c;
			--gold2: #e8c96a;
			--gold3: #f5d87a;
			--gold4: #8a6420;

            --font-sans: 'Inter', sans-serif;
        }

        /* Base & Reset */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: var(--font-sans);
            background-color: var(--slate-50);
            color: var(--slate-800);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }
        a, button {
            text-decoration: none;
            cursor: pointer;
            border: none;
            background: none;
            font-family: inherit;
        }
        input, select {
            font-family: inherit;
        }
        .max-w-7xl { max-width: 80rem; margin: 0 auto; }
        .max-w-4xl { max-width: 56rem; margin: 0 auto; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        
        /* Navigation */
        .navbar {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 50;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 4rem;
        }
        .nav-brand {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .brand-logo {
            width: 3rem;
            height: 3rem;
            background: linear-gradient(to bottom right, var(--red-500), var(--yellow-500));
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 1.25rem;
        }
        .brand-text {
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--slate-900);
            display: none;
        }
        .nav-links {
            display: none;
            align-items: center;
            gap: 2rem;
        }
        .nav-link {
            color: var(--slate-600);
            font-weight: 500;
            transition: color 0.3s;
        }
        .nav-link:hover { color: var(--red-500); }
        .btn-primary {
            background-color: var(--blue-600);
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            font-weight: 500;
            transition: background-color 0.3s;
            box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
        }
        .btn-primary:hover { background-color: var(--blue-700); }
        
        .mobile-toggle { display: flex; color: var(--slate-600); }
        .mobile-menu {
            display: none;
            background-color: white;
            border-top: 1px solid var(--slate-100);
            padding: 0.5rem 1rem 1rem;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        .mobile-menu.active { display: block; }
        .mobile-menu-link {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.5rem 0.75rem;
            color: var(--slate-600);
            font-weight: 500;
        }
        .mobile-menu-btn {
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 1rem;
            background-color: var(--blue-600);
            color: white;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            font-weight: 500;
        }

        /* Hero Section */
        .hero {
            position: relative;
            padding-top: 4rem;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		.hero-logo {
            max-width: 70px;
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            background-color: #0f172a;
        }
        .hero-picture {
            display: block;
            width: 100%;
            height: 100%;
        }
        .hero-bg img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }
        @media (min-width: 768px) {
            .hero-bg {
                background-image: url('hero-desktop.jpg');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            .hero-picture {
                display: none;
            }
        }
        @media (max-width: 767px) {
            .hero-bg img {
                object-position: 62% center;
            }
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(30, 58, 138, 0.8), rgba(15, 23, 42, 0.7));
        }
        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: 0 1rem;
            width: 100%;
        }
        .hero-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            background-color: rgba(59, 130, 246, 0.2);
            color: var(--blue-200);
            border: 1px solid rgba(96, 165, 250, 0.3);
            font-weight: 600;
            letter-spacing: 0.05em;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
            backdrop-filter: blur(4px);
        }
        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            color: white;
            margin-bottom: 1.5rem;
            letter-spacing: -0.025em;
            line-height: 1.1;
        }
        .hero-title span {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, var(--yellow-400), var(--yellow-200));
        }
        .hero-subtitle {
            font-size: 1.125rem;
            color: var(--blue-100);
            margin-bottom: 2rem;
            font-weight: 300;
        }
        .hero-info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            margin-bottom: 2.5rem;
        }
        .hero-info-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-weight: 500;
        }
        .hero-info-item svg { color: var(--yellow-400); }
        .hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 2rem;
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--slate-900);
            background: linear-gradient(to right, var(--yellow-400), var(--yellow-300));
            border-radius: 9999px;
            transition: all 0.3s;
            box-shadow: 0 20px 25px -5px rgba(234, 179, 8, 0.3);
        }
        .hero-btn:hover {
            transform: scale(1.05);
            background: linear-gradient(to right, var(--yellow-300), var(--yellow-200));
        }
        .hero-btn svg { margin-left: 0.5rem; transition: transform 0.3s; }
        .hero-btn:hover svg { transform: translateX(4px); }
		.hero-scroll{
			position:absolute;
			bottom:2.5rem;
			left:50%;
			transform:translateX(-50%);
			z-index:2;
			display:flex;
			flex-direction:column;
			align-items:center;gap:0.6rem;
			animation:heroFade 1.4s 1s cubic-bezier(0.22,1,0.36,1) both;
		}
		.scroll-lbl{font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);font-weight:600;}
		.scroll-bar{width:1px;height:55px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollAnim 2.2s ease-in-out infinite;}
		@keyframes scrollAnim{0%,100%{opacity:0.25;transform:scaleY(1);}50%{opacity:1;transform:scaleY(1.15);}}

        /* Maklumat Section */
        .section { padding: 5rem 0; }
        .bg-white { 
			background-color: white;
		}
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-title {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--slate-900);
            margin-bottom: 1rem;
        }
        .title-divider {
            width: 6rem;
            height: 0.25rem;
            background-color: var(--blue-600);
            margin: 0 auto;
            border-radius: 9999px;
        }
        
        .maklumat-grid {
            display: grid;
            gap: 2rem;
        }
        .price-card {
            background: linear-gradient(to bottom, var(--slate-900), var(--blue-900));
            border-radius: 1.5rem;
            padding: 2rem;
            color: white;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            position: relative;
            overflow: hidden;
        }
        .price-card-bg-icon {
            position: absolute;
            top: 0;
            right: 0;
            padding: 1rem;
            opacity: 0.1;
        }
        .price-card-bg-icon svg { width: 120px; height: 120px; }
        .price-card-content { position: relative; z-index: 10; }
        .price-title { font-size: 1.25rem; font-weight: 500; color: var(--blue-200); margin-bottom: 0.5rem; }
        .price-amount-wrapper { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.5rem; }
        .price-currency { font-size: 0.875rem; font-weight: 600; }
        .price-amount { font-size: 3rem; font-weight: 700; color: var(--yellow-400); }
        .price-desc { color: var(--blue-100); font-size: 0.875rem; margin-bottom: 2rem; }
        .price-addons {
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        .addon-title { font-weight: 600; color: var(--yellow-400); margin-bottom: 1rem; }
        .addon-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; margin-bottom: 0.5rem; }
        .addon-label { display: flex; align-items: center; gap: 0.5rem; }
        .addon-label svg { width: 16px; height: 16px; }
        .addon-price { font-weight: 700; }

        .inclusion-card {
            background-color: var(--slate-50);
            border-radius: 1.5rem;
            padding: 2rem;
            border: 1px solid var(--slate-200);
        }
        .inclusion-title { font-size: 1.5rem; font-weight: 700; color: var(--slate-900); margin-bottom: 1.5rem; }
        .inclusion-grid { display: grid; gap: 1.5rem; }
        .inclusion-item { display: flex; gap: 1rem; }
        .inclusion-icon {
            width: 3rem;
            height: 3rem;
            background-color: var(--blue-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--blue-600);
        }
        .inclusion-text h4 { font-weight: 600; color: var(--slate-900); margin-bottom: 0.25rem; }
        .inclusion-text p { font-size: 0.875rem; color: var(--slate-600); }

        /* Galeri Section */
        .bg-slate-900 { background-color: var(--slate-900); color: white; }
        .galeri-title { font-size: 1.875rem; font-weight: 700; color: white; margin-bottom: 1rem; }
        .galeri-subtitle { color: var(--blue-200); }
        .galeri-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        .galeri-item {
            position: relative;
            border-radius: 1rem;
            overflow: hidden;
            aspect-ratio: 4 / 3;
        }
        .galeri-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .galeri-item:hover img { transform: scale(1.1); }
        .galeri-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent, transparent);
            opacity: 0;
            transition: opacity 0.3s;
            display: flex;
            align-items: flex-end;
            padding: 1.5rem;
        }
        .galeri-item:hover .galeri-overlay { opacity: 1; }
        .galeri-overlay h3 { color: white; font-weight: 700; font-size: 1.25rem; }

        /* Form Section */
        .form-container {
            background-color: white;
            border-radius: 1.5rem;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid var(--slate-100);
        }
        .form-header {
            background: linear-gradient(to right, var(--blue-700), var(--blue-900));
            padding: 2rem;
            text-align: center;
        }
        .form-header h2 { font-size: 1.875rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
        .form-header p { color: var(--blue-100); }
        .form-body { padding: 2rem; }
        
        .form-section { margin-bottom: 2rem; }
        .form-section-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--slate-900);
            border-bottom: 1px solid var(--slate-200);
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .step-number {
            background-color: var(--blue-100);
            color: var(--blue-700);
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
        }

        .input-grid { display: grid; gap: 1rem; }
        .input-group { display: flex; flex-direction: column; gap: 0.25rem; }
        .input-group label { font-size: 0.875rem; font-weight: 500; color: var(--slate-700); }
        .form-control {
            width: 100%;
            padding: 0.5rem 1rem;
            border: 1px solid var(--slate-300);
            border-radius: 0.5rem;
            outline: none;
            transition: all 0.2s;
        }
        .form-control:focus { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }

        .addon-box {
            background-color: var(--slate-50);
            padding: 1rem;
            border-radius: 0.75rem;
            border: 1px solid var(--slate-200);
            display: grid;
            gap: 1.5rem;
        }
        .addon-row { display: flex; justify-content: space-between; align-items: center; }
        .addon-info p:first-child { font-weight: 600; color: var(--slate-800); }
        .addon-info p:last-child { font-size: 0.875rem; color: var(--slate-500); }
        .counter {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background-color: white;
            border: 1px solid var(--slate-300);
            border-radius: 0.5rem;
            padding: 0.25rem 0.5rem;
        }
        .counter button { width: 2rem; height: 2rem; border-radius: 0.25rem; font-size: 1.25rem; color: var(--slate-600); }
        .counter button:hover { background-color: var(--slate-100); }
        .counter span { width: 1rem; text-align: center; font-weight: 500; }
		
		/* CSS Untuk Butang Saiz & Lightbox */
    .btn-size-chart {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f8fafc;
        color: #3b82f6;
        border: 1px solid #cbd5e1;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-size-chart:hover {
        background: #eff6ff;
        color: #2563eb;
        border-color: #93c5fd;
    }
    .lightbox-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        backdrop-filter: blur(4px);
    }
    .lightbox-content {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        max-width: 500px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    }
    .lightbox-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: #f1f5f9;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: #64748b;
        transition: 0.2s;
    }
    .lightbox-close:hover {
        background: #ef4444;
        color: white;
    }
    .size-img {
        max-width: 100%;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        margin-bottom: 10px;
    }
    .size-chart-modal { max-width: 920px; padding:0; overflow:hidden; border-radius:18px; }
    .size-chart-header { padding:1.35rem 4rem 1.25rem 1.5rem; color:#fff; background:linear-gradient(135deg,#1d4ed8,#6d28d9); }
    .size-chart-header h3 { margin:0 0 .3rem; font-size:1.3rem; }
    .size-chart-header p { margin:0; color:rgba(255,255,255,.8); font-size:.84rem; line-height:1.5; }
    .size-chart-modal .lightbox-close { top:1rem; right:1rem; color:#fff; background:rgba(255,255,255,.16); }
    .size-chart-modal .lightbox-close:hover { background:rgba(255,255,255,.3); }
    .size-chart-body { max-height:calc(90vh - 96px); padding:1.25rem 1.5rem 1.5rem; overflow-y:auto; background:#f8fafc; }
    .size-chart-item { margin-bottom:.75rem; border:1px solid #e2e8f0; border-radius:12px; background:#fff; overflow:hidden; }
    .size-chart-item summary { position:relative; display:flex; align-items:center; gap:.7rem; padding:1rem 3rem 1rem 1rem; color:#0f172a; font-size:.92rem; font-weight:700; cursor:pointer; list-style:none; }
    .size-chart-item summary::-webkit-details-marker { display:none; }
    .size-chart-item summary::after { content:'+'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#2563eb; font-size:1.3rem; }
    .size-chart-item[open] summary::after { content:'−'; }
    .size-chart-number { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:8px; background:#dbeafe; color:#2563eb; font-size:.8rem; }
    .size-chart-image-wrap { padding:0 1rem 1rem; }
    .size-chart-image-wrap picture { display:block; }
    .size-chart-image { display:block; width:100%; height:auto; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
    .size-chart-disclaimer { display:flex; align-items:flex-start; gap:.7rem; margin-top:1rem; padding:.9rem 1rem; border:1px solid #fde68a; border-radius:10px; background:#fffbeb; color:#92400e; font-size:.82rem; line-height:1.55; }
    .size-chart-disclaimer strong { color:#78350f; }
    @media (max-width:640px) {
        .lightbox-overlay { padding:10px; }
        .size-chart-modal { max-height:94vh; }
        .size-chart-header { padding:1.15rem 3.5rem 1rem 1rem; }
        .size-chart-header h3 { font-size:1.08rem; }
        .size-chart-body { max-height:calc(94vh - 88px); padding:1rem; }
        .size-chart-item summary { padding:.85rem 2.7rem .85rem .8rem; font-size:.85rem; }
        .size-chart-image-wrap { padding:0 .65rem .65rem; }
    }

        .shirt-driver-box {
            background-color: var(--blue-50);
            border: 1px solid var(--blue-200);
            padding: 1rem;
            border-radius: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .shirt-driver-box label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--slate-800); margin-bottom: 0.5rem; }

        .cart-box { border: 1px solid var(--slate-200); border-radius: 0.75rem; overflow: hidden; }
        .cart-header { background-color: var(--slate-100); padding: 0.75rem 1rem; border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--slate-800); }
        .cart-body { padding: 1rem; background-color: white; }
        .cart-add-grid { display: grid; gap: 0.75rem; align-items: end; }
        .cart-add-grid label { font-size: 0.75rem; font-weight: 500; color: var(--slate-600); }
        .cart-add-grid .warn { color: var(--red-500); font-size: 10px; }
        .btn-add {
            width: 100%; background-color: var(--slate-800); color: white; padding: 0.5rem 1rem;
            border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        }
        .btn-add:hover { background-color: var(--slate-900); }
        
        .cart-list { margin-top: 1rem; border-top: 1px solid var(--slate-200); padding-top: 1rem; display: none; }
        .cart-list-title { font-size: 0.75rem; font-weight: 700; color: var(--slate-500); text-transform: uppercase; margin-bottom: 0.5rem; }
        .cart-item {
            display: flex; justify-content: space-between; align-items: center;
            background-color: var(--slate-50); padding: 0.5rem 0.75rem;
            border-radius: 0.5rem; border: 1px solid var(--slate-100); margin-bottom: 0.5rem;
        }
        .cart-item-title { font-size: 0.875rem; font-weight: 500; color: var(--slate-800); text-transform: capitalize; }
        .cart-item-desc { font-size: 0.75rem; color: var(--slate-500); }
        .cart-item-price { font-weight: 700; color: var(--slate-800); margin-right: 1rem; }
        .btn-remove { color: var(--red-500); padding: 0.25rem; border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center; }
        .btn-remove:hover { background-color: var(--red-50); }

        .summary-box { background-color: var(--slate-900); color: white; padding: 1.5rem; border-radius: 1rem; margin-bottom: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .summary-title { color: var(--blue-200); font-weight: 500; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 0.5rem; }
        .summary-row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--blue-100); }
        .summary-row.base { color: white; }
        .summary-total {
            display: flex; justify-content: space-between; align-items: center;
            border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; margin-top: 0.5rem;
        }
        .summary-total span:first-child { font-size: 1.125rem; font-weight: 500; }
        .summary-total span:last-child { font-size: 1.875rem; font-weight: 700; color: var(--yellow-400); }

        .bank-details { background-color: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
        .bank-icon { background-color: white; padding: 0.75rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); color: var(--blue-600); }
        .bank-info p:first-child { font-size: 0.875rem; color: var(--slate-600); margin-bottom: 0.25rem; }
        .bank-info h4 { font-weight: 700; color: var(--slate-900); font-size: 1.125rem; }
        .bank-acc { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
        .bank-name { background-color:var(--red-700);  color: white; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; }
        .bank-number { font-family: monospace; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.05em; color: var(--slate-800); }
        .bank-ref { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.5rem; font-style: italic; }

        .upload-box {
            border: 2px dashed var(--slate-300); border-radius: 1rem; padding: 2rem;
            text-align: center; cursor: pointer; transition: background-color 0.3s;
        }
        .upload-box:hover { background-color: var(--slate-50); }
        .upload-icon {
            width: 4rem; height: 4rem; background-color: var(--blue-100); color: var(--blue-600);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem;
        }
        .upload-text { font-weight: 500; color: var(--slate-700); font-size: 1.125rem; display: block; }
        .upload-desc { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.25rem; display: block; }

        .form-footer {
            border-top: 1px solid var(--slate-200);
            padding: 1.75rem 2rem 2rem;
            background-color: white;
        }
        .btn-submit {
            width: 100%; background-color: var(--blue-600); color: white;
            display: flex; align-items: center; justify-content: center;
            min-height: 56px; border: 0; cursor: pointer;
            font-weight: 700; font-size: 1.125rem; line-height: 1.35;
            padding: 1rem 1.5rem; border-radius: 0.75rem;
            transition: all 0.2s; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
        }
        .btn-submit:hover { background-color: var(--blue-700); }
        .btn-submit:active { transform: scale(0.98); }
        .btn-submit:focus-visible { outline: 3px solid rgba(59,130,246,.3); outline-offset: 3px; }
        .btn-submit:disabled { opacity: .7; cursor: wait; }
        .tnc-text { text-align: center; font-size: 0.8rem; line-height: 1.5; color: var(--slate-500); margin: .9rem 0 0; }

        @media (max-width: 639px) {
            .form-footer { padding: 1.25rem 1rem 1.5rem; }
            .btn-submit { min-height: 52px; padding: .9rem 1rem; font-size: 1rem; }
        }

        /* Footer */
        .footer { background-color: var(--slate-900); color: var(--slate-400); padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
        .footer-logo { width: 3rem; height: 3rem; background: linear-gradient(to bottom right, var(--red-500), var(--yellow-500)); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.5rem; margin: 0 auto 1rem; }
        .footer-title { font-weight: 500; color: white; margin-bottom: 0.5rem; }
        .footer-desc { font-style: italic; font-size: 0.875rem; color: var(--yellow-400); margin-bottom: 1.5rem; }
        .footer-copy { font-size: 0.75rem; color: white; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; }

        /* Media Queries */
        @media (min-width: 640px) {
            .brand-text { display: block; }
            .hero-title { font-size: 4.5rem; }
            .hero-subtitle { font-size: 1.5rem; }
            .hero-info { flex-direction: row; }
            .input-grid { grid-template-columns: 1fr 1fr; }
            .addon-box { grid-template-columns: 1fr 1fr; }
            .shirt-driver-box select { width: 50%; }
            .cart-add-grid { grid-template-columns: 1fr 1fr 1fr auto; }
        }
        @media (min-width: 768px) {
            .mobile-toggle { display: none; }
            .nav-links { display: flex; }
            .galeri-grid { grid-template-columns: repeat(3, 1fr); }
            .galeri-item:nth-child(1), .galeri-item:nth-child(4) { grid-column: span 2; }
        }
        @media (min-width: 1024px) {
            .maklumat-grid { grid-template-columns: 1fr 2fr; }
            .inclusion-grid { grid-template-columns: 1fr 1fr; }
        }