بطاقة العضوية والولاء الذهبية Vip Membership

<!-- Qahera UI Kit - VIP Membership Pattern (Native HTML) -->
<div class="qhr-card qhr-vip-membership" 
     style="background: linear-gradient(135deg, #17120F 0%, #221A15 50%, #0F0B09 100%); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 16px; padding: 40px; max-width: 800px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); position: relative; overflow: hidden;">
  
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
    <span class="qhr-badge qhr-badge--outline qhr-badge--sm" style="border-color: #D4AF37; color: #D4AF37; letter-spacing: 0.15em;">
      GOLD TIER VIP
    </span>
    <span style="color: rgba(212, 175, 55, 0.4);">
      <svg class="qhr-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="8" r="7" />
        <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
      </svg>
    </span>
  </div>

  <h3 style="font-family: var(--qhr-font-family-display, serif); font-size: 28px; font-weight: 700; color: #F7F3ED; margin-bottom: 12px;">
    نادي العضوية والمقتنيات الخاصة
  </h3>

  <p style="font-size: 14px; color: #B9A896; line-height: 1.7; margin-bottom: 24px;">
    انضم إلى مجتمع صفوة المقتنين لتصلك الإصدارات المحدودة قبل طرحها العام، مع شحن مخصص وتغليف ملكي خاص.
  </p>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 28px;">
    <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #F7F3ED;">
      <span style="color: #D4AF37; display: inline-flex;">
        <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </span>
      <span>أولوية حجز الإصدارات المحدودة</span>
    </div>
    <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #F7F3ED;">
      <span style="color: #D4AF37; display: inline-flex;">
        <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </span>
      <span>تغليف ملكي فاخر بشمع الختم</span>
    </div>
  </div>

  <form action="/api/vip" method="POST" style="display: flex; gap: 12px; flex-wrap: wrap;">
    <div style="flex: 1; min-width: 240px;">
      <input 
        type="email" 
        name="email" 
        placeholder="أدخل بريدك الإلكتروني الخاص..." 
        class="qhr-input"
        required 
        style="background-color: rgba(15, 11, 9, 0.7); border-color: rgba(212, 175, 55, 0.3); color: #F7F3ED; width: 100%;"
      />
    </div>
    <button type="submit" class="qhr-btn qhr-btn--primary qhr-btn--md" style="background-color: #D4AF37; border-color: #D4AF37; color: #0F0B09; font-weight: 700; min-width: 150px;">
      <span>انضم الآن للمقتنين</span>
      <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M5 12h14m-7 7l7-7-7-7" />
      </svg>
    </button>
  </form>
</div>