<!DOCTYPE html>
<html lang="tr">

<head>
  <?php include "inc/head.php"; ?>
  <!-- Tailwind CSS ve Verinay CSS dosyalarınızın dahil edildiğinden emin olun -->
</head>

<body class="bg-verinay-dark">
  <!-- ========= NAV ========= -->
  <?php include "inc/navbar.php"; ?>

  <!-- ========= HERO SECTION ========= -->
  <section class="relative w-full h-screen overflow-hidden bg-verinay-dark-2">
    <!-- Background Image -->
    <div class="absolute inset-0 bg-cover bg-center opacity-30"
      style="background-image: url('images/bank-account/bankaccount-background.jpg');">
    </div>

    <!-- Gradient Overlay -->
    <div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-transparent"></div>

    <!-- Content -->
    <div class="relative z-10 h-full flex justify-center items-center text-center text-white px-6">
      <div>
        <h1 class="text-4xl md:text-5xl lg:text-6xl mb-4 leading-tight font-bold verinay-white">
          Banka Hesap Detayları
        </h1>
        <p class="text-base md:text-lg lg:text-xl max-w-2xl mx-auto leading-relaxed verinay-gray-1">
          EFT ve havale işlemleri için resmi banka hesaplarımız
        </p>
      </div>
    </div>
  </section>

  <div class="py-16">
    <!-- ========= CONTENT SECTION ========= -->
    <div class="max-w-6xl mx-auto px-6">

      <!-- Alert Section -->
      <div class="bg-red-600 p-4 sm:p-6 rounded-xl mb-8 sm:mb-12">
        <p class="mb-0 verinay-white text-sm sm:text-base leading-relaxed">
          Gönderen hesabındaki bilgiler ile müşteri hesabındaki bilgilerin eşleşmesi gereklidir. Ad soyad eşleşmez ise
          ödeme geri iade edilir. Havale/eft işleminden sonra iletişim kanallarından mutlaka ödemeyi bildiriniz.
        </p>
      </div>

      <!-- Bank Cards Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 gap-6 lg:gap-8">

        <!-- Garanti BBVA Card -->
        <div
          class="bg-verinay-dark-2 rounded-xl p-6 text-center border border-gray-600 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:border-yellow-400 group h-80 flex flex-col">
          <div class="flex justify-center items-center mb-4 h-16">
            <img src="images/bank-account/garanti_bbva.png" alt="Garanti BBVA"
              class="max-h-12 w-auto object-contain">
          </div>
          <div class="flex-1 flex flex-col justify-center">
            <h4 class="text-lg sm:text-xl font-semibold verinay-yellow-1 mb-4">Garanti BBVA</h4>
            <ul class="list-none p-0 space-y-3 text-left">
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">Hesap Adı:</span><br>
                <span class="text-xs">VERINAY İNTERNET VE BİLİŞİM TİCARET LİMİTED ŞİRKETİ</span>
              </li>
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">IBAN Numarası:</span><br>
                <span class="font-mono text-xs break-all">TR00 0000 0000 0000 8000 0000 00</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- QNB Finansbank Card -->
        <div
          class="bg-verinay-dark-2 rounded-xl p-6 text-center border border-gray-600 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:border-yellow-400 group h-80 flex flex-col">
          <div class="flex justify-center items-center mb-4 h-16">
            <img src="images/bank-account/qnb.png" alt="QNB Finansbank"
              class="max-h-12 w-auto object-contain">
          </div>
          <div class="flex-1 flex flex-col justify-center">
            <h4 class="text-lg sm:text-xl font-semibold verinay-yellow-1 mb-4">QNB Finansbank</h4>
            <ul class="list-none p-0 space-y-3 text-left">
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">Hesap Adı:</span><br>
                <span class="text-xs">VERINAY İNTERNET VE BİLİŞİM TİCARET LİMİTED ŞİRKETİ</span>
              </li>
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">IBAN Numarası:</span><br>
                <span class="font-mono text-xs break-all">TR00 0000 0000 0000 8000 0000 00</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Akbank Card -->
        <div
          class="bg-verinay-dark-2 rounded-xl p-6 text-center border border-gray-600 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:border-yellow-400 group h-80 flex flex-col lg:col-span-2 xl:col-span-1">
          <div class="flex justify-center items-center mb-4 h-16">
            <img src="images/bank-account/akbank.png" alt="Akbank"
              class="max-h-12 w-auto object-contain">
          </div>
          <div class="flex-1 flex flex-col justify-center">
            <h4 class="text-lg sm:text-xl font-semibold verinay-yellow-1 mb-4">Akbank</h4>
            <ul class="list-none p-0 space-y-3 text-left">
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">Hesap Adı:</span><br>
                <span class="text-xs">VERINAY İNTERNET VE BİLİŞİM TİCARET LİMİTED ŞİRKETİ</span>
              </li>
              <li class="text-sm verinay-gray-1">
                <span class="font-medium verinay-white">IBAN Numarası:</span><br>
                <span class="font-mono text-xs break-all">TR00 0000 0000 0000 8000 0000 00</span>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- ========= FOOTER ========= -->
  <?php include 'inc/footer.php'; ?>

  <!-- ========= SCRIPT ========= -->
  <script src="js/main.js"></script>
</body>

</html>