{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0d0d0d; font-family: 'Plus Jakarta Sans', sans-serif; padding: 40px 20px; } .page-title { color: #fff; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #666; margin-bottom: 12px; } .page-sub { color: #444; text-align: center; font-size: 13px; margin-bottom: 60px; } .cards-grid { display: flex; flex-direction: column; gap: 60px; align-items: center; } /* ── CARD 1: Instagram Feed Square 1080x1080 ── */ .card1 { width: 540px; height: 540px; background: #0a1628; border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; } .card1 .noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; } .card1 .glow-red { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(220,38,38,0.25) 0%, transparent 70%); top: -80px; right: -60px; } .card1 .glow-teal { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(15,123,108,0.2) 0%, transparent 70%); bottom: 0; left: 0; } .card1 .content { position: relative; z-index: 2; padding: 36px; display: flex; flex-direction: column; height: 100%; } .card1 .badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(220,38,38,0.15); border: 1px solid rgba(220,38,38,0.4); border-radius: 100px; padding: 5px 14px; width: fit-content; margin-bottom: 20px; } .card1 .badge span { font-size: 11px; font-weight: 600; color: #f87171; letter-spacing: 0.08em; text-transform: uppercase; } .card1 .badge::before { content: ''; width: 6px; height: 6px; background: #ef4444; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} } .card1 h1 { font-size: 38px; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 6px; } .card1 h1 span { color: #f87171; } .card1 .sub { font-size: 14px; color: #94a3b8; line-height: 1.6; margin-bottom: 24px; flex: 1; } .card1 .stats-row { display: flex; gap: 12px; margin-bottom: 24px; } .card1 .stat { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; } .card1 .stat-num { font-size: 20px; font-weight: 800; color: #fff; } .card1 .stat-num.red { color: #f87171; } .card1 .stat-label { font-size: 10px; color: #64748b; margin-top: 2px; line-height: 1.4; } .card1 .bottom { display: flex; align-items: center; justify-content: space-between; } .card1 .price-box { background: linear-gradient(135deg, #0f7b6c, #0a5c50); border-radius: 10px; padding: 10px 18px; } .card1 .price-box .p1 { font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 500; } .card1 .price-box .p2 { font-size: 22px; font-weight: 800; color: #fff; } .card1 .cta-arrow { background: #f87171; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; } /* ── CARD 2: WA/Story Vertical 9:16 ── */ .card2 { width: 304px; height: 540px; background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); border-radius: 16px; overflow: hidden; position: relative; } .card2 .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px); background-size: 30px 30px; } .card2 .content { position: relative; z-index: 2; padding: 28px 24px; height: 100%; display: flex; flex-direction: column; } .card2 .top-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #a5b4fc; text-transform: uppercase; margin-bottom: 16px; } .card2 .big-num { font-size: 72px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 4px; font-family: 'Space Grotesk', sans-serif; } .card2 .big-num span { font-size: 32px; color: #818cf8; } .card2 .num-label { font-size: 12px; color: #64748b; margin-bottom: 24px; } .card2 .divline { width: 40px; height: 3px; background: linear-gradient(90deg, #6366f1, transparent); border-radius: 2px; margin-bottom: 20px; } .card2 h2 { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 14px; } .card2 .items { flex: 1; display: flex; flex-direction: column; gap: 8px; } .card2 .item { display: flex; align-items: flex-start; gap: 8px; } .card2 .dot { width: 6px; height: 6px; background: #6366f1; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .card2 .item-text { font-size: 11px; color: #94a3b8; line-height: 1.5; } .card2 .bottom-cta { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); border-radius: 10px; padding: 12px 16px; margin-top: 16px; } .card2 .bottom-cta p:first-child { font-size: 10px; color: #818cf8; font-weight: 600; margin-bottom: 3px; } .card2 .bottom-cta p:last-child { font-size: 18px; font-weight: 800; color: #fff; } /* ── CARD 3: FB Group / Horizontal Banner ── */ .card3 { width: 540px; height: 282px; background: #fff; border-radius: 16px; overflow: hidden; position: relative; display: flex; } .card3 .left { width: 220px; background: #0f7b6c; position: relative; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; } .card3 .left .shield { font-size: 48px; margin-bottom: 8px; } .card3 .left h3 { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); text-align: center; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; } .card3 .left .price { font-size: 32px; font-weight: 900; color: #fff; margin-top: 10px; } .card3 .left .price-sub { font-size: 10px; color: rgba(255,255,255,0.6); } .card3 .right { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; } .card3 .right .eyebrow { font-size: 10px; font-weight: 700; color: #0f7b6c; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .card3 .right h2 { font-size: 18px; font-weight: 800; color: #111827; line-height: 1.25; margin-bottom: 12px; } .card3 .right h2 span { color: #dc2626; } .card3 .checks { display: flex; flex-direction: column; gap: 5px; } .card3 .check-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #374151; } .card3 .check-item::before { content: '✓'; color: #0f7b6c; font-weight: 700; font-size: 12px; } .card3 .right .komisi-tag { margin-top: 14px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px; padding: 5px 10px; display: inline-block; font-size: 10px; font-weight: 700; color: #92400e; } /* ── CARD 4: Affiliator Recruitment ── */ .card4 { width: 540px; height: 540px; background: #fffbf0; border-radius: 16px; overflow: hidden; position: relative; } .card4 .top-bar { background: #0f7b6c; padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; } .card4 .top-bar span:first-child { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; text-transform: uppercase; } .card4 .top-bar span:last-child { font-size: 13px; font-weight: 700; color: #fff; } .card4 .body { padding: 28px 32px; } .card4 h2 { font-size: 28px; font-weight: 900; color: #111827; line-height: 1.2; margin-bottom: 6px; } .card4 h2 em { color: #0f7b6c; font-style: normal; } .card4 .tagline { font-size: 13px; color: #6b7280; margin-bottom: 22px; } .card4 .comm-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; } .card4 .comm-box { border-radius: 10px; padding: 14px 16px; } .card4 .comm-box.a { background: #ecfdf5; border: 1.5px solid #6ee7b7; } .card4 .comm-box.b { background: #fef3c7; border: 1.5px solid #fbbf24; } .card4 .comm-box .pct { font-size: 32px; font-weight: 900; } .card4 .comm-box.a .pct { color: #059669; } .card4 .comm-box.b .pct { color: #d97706; } .card4 .comm-box .desc { font-size: 11px; color: #374151; margin-top: 2px; line-height: 1.4; } .card4 .steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .card4 .step { display: flex; align-items: center; gap: 10px; } .card4 .step-n { width: 22px; height: 22px; background: #0f7b6c; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card4 .step-t { font-size: 12px; color: #374151; } .card4 .bottom-strip { background: #111827; border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; } .card4 .bottom-strip p { font-size: 11px; color: #9ca3af; } .card4 .bottom-strip strong { font-size: 13px; color: #fff; display: block; } /* ── Labels ── */ .card-label { font-size: 11px; color: #444; text-align: center; margin-top: 10px; letter-spacing: 0.05em; } .download-note { text-align: center; color: #555; font-size: 12px; margin-top: 60px; padding-top: 40px; border-top: 1px solid #222; line-height: 1.8; }