<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>تقديم طلب كفالة | لجنة زكاة مخيم حطين</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;400;600;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

  <style>
    :root {
      --cyan: #38bdf8;
      --deep-dark: #0f172a;
      --glass-base: rgba(15, 23, 42, 0.75);
      --glass-border: rgba(255, 255, 255, 0.1);
    }

    body {
      font-family: 'Cairo', sans-serif;
      background: var(--deep-dark);
      color: #fff;
      margin: 0;
      overflow-x: hidden;
    }

    /* --- الهيدر المحدث --- */
    .premium-header {
      position: fixed; top: 0; left: 0; width: 100%; height: 85px;
      background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(15px);
      z-index: 2000; padding: 0 5%; border-bottom: 1px solid var(--glass-border);
      display: flex; align-items: center; justify-content: space-between;
    }

    .brand-section { display: flex; align-items: center; gap: 15px; }
    .logo-glow {
      width: 45px; height: 45px; border-radius: 12px;
      background: var(--cyan); display: flex; align-items: center; justify-content: center;
      color: var(--deep-dark); font-size: 1.5rem; box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    }
    .brand-names h1 { font-size: 1.15rem; font-weight: 800; margin: 0; color: #fff; }
    .brand-names small { font-size: 0.8rem; color: var(--cyan); font-weight: 600; display: block; }

    /* --- السلايدر السينمائي --- */
    .cinema-slider { height: 100vh; width: 100%; position: relative; }
    .carousel-inner, .carousel-item { height: 100vh; }
    
    .carousel-item img {
      width: 100%; height: 100%; object-fit: cover;
      filter: brightness(0.35) saturate(1.2);
    }
    
    /* تثبيت المحتوى فوق السلايدر */
    .fixed-hero-content {
      position: absolute; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      text-align: center; pointer-events: none; /* للسماح بالضغط على أزرار السلايدر خلفه إن وجدت */
    }

    .content-card {
      max-width: 800px; padding: 20px; pointer-events: auto;
    }

    .hero-badge {
      background: rgba(56, 189, 248, 0.15); color: var(--cyan);
      padding: 8px 20px; border-radius: 50px; font-weight: 700;
      font-size: 0.9rem; border: 1px solid rgba(56, 189, 248, 0.3);
      display: inline-block; margin-bottom: 25px;
    }

    .content-card h2 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 25px; }
    .content-card p { font-size: clamp(1rem, 2vw, 1.4rem); color: #cbd5e1; margin-bottom: 40px; line-height: 1.8; font-weight: 300; }

    .btn-cta {
      background: var(--cyan); color: var(--deep-dark) !important;
      padding: 18px 45px; border-radius: 15px; font-weight: 800;
      font-size: 1.2rem; text-decoration: none; display: inline-flex;
      align-items: center; gap: 12px; transition: 0.4s;
      box-shadow: 0 15px 30px rgba(56, 189, 248, 0.3);
    }
    .btn-cta:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px rgba(56, 189, 248, 0.5); }

    /* Footer */
    .minimal-footer {
        position: absolute; bottom: 0; width: 100%; height: 50px;
        background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(5px);
        color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem; z-index: 150;
    }
  </style>
</head>
<body>

  <header class="premium-header">
    <div class="brand-section">
      <div class="logo-glow"><i class="bi bi-person-heart"></i></div>
      <div class="brand-names">
        <h1>طلب كفالة يتيم | لجنة زكاة وصدقات مخيم حطين</h1>
        <small>منصة "لمسة أمل" للخدمات الإلكترونية</small>
      </div>
    </div>
    <div class="d-none d-md-block">
        <a href="/zaka/" class="btn btn-outline-light rounded-pill px-4 btn-sm">بوابة النظام</a>
    </div>
  </header>

  <main class="cinema-slider">
    <div id="bgSlider" class="carousel slide carousel-fade h-100" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1920" alt="background">
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1517174637803-bff70d5d5f21?q=80&w=1920" alt="background">
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1509099836639-18ba1795216d?q=80&w=1920" alt="background">
        </div>
      </div>
    </div>

    <div class="fixed-hero-content">
      <div class="content-card animate__animated animate__zoomIn">
        <div class="hero-badge animate__animated animate__fadeInDown animate__delay-1s">
            <i class="bi bi-stars"></i> مبادرة كفالة الأيتام
        </div>
        <h2 class="animate__animated animate__fadeInUp animate__delay-1s">كفالة اليتيم.. <br> تصنع مستقبلاً أجمل</h2>
        <p class="animate__animated animate__fadeInUp animate__delay-1s">نحن نؤمن أن كل طفل يستحق فرصة عادلة. انضم إلينا اليوم لنرسم البسمة ونبني جيلاً واثقاً من خلال طلب كفالة رسمي وموثق.</p>
        
        <div class="animate__animated animate__fadeInUp animate__delay-2s">
            <a href="https://www.shneler.com/zaka/orphan/public/request_access.php" class="btn-cta">
                <span>تقديم طلب وصول</span>
                <i class="bi bi-arrow-left"></i>
            </a>
        </div>
      </div>
    </div>
  </main>

  <footer class="minimal-footer">
    <p class="m-0">© 2026 لجنة زكاة وصدقات مخيم حطين — قسم كفالة الأيتام</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>