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

<head>
  <?php include "inc/head.php"; ?>
</head>

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

  <!-- ========= HERO SECTION ========= -->
  <section class="hero-section relative w-full h-screen overflow-hidden bg-verinay-dark">
    <!-- Background Image -->
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
      style="background-image: url('images/about/about-background.avif');">
    </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 items-center">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
          <!-- Sol taraf - İçerik -->
          <div class="hero-content">
            <!-- Badge -->
            <div
              class="inline-flex flex-wrap items-center px-3 py-2 sm:px-4 bg-verinay-dark-3 rounded-full mb-4 sm:mb-6 border border-verinay-gray-2">
              <i class="fas fa-users verinay-yellow-1 mr-2 text-xs sm:text-sm"></i>
              <span class="verinay-white text-xs sm:text-sm font-medium">Deneyimli ekibimizle</span>
              <span class="verinay-yellow-1 text-xs sm:text-sm ml-1 sm:ml-2 font-bold">güvenilir hizmet</span>
              <span class="verinay-white text-xs sm:text-sm font-medium pl-1 sm:pl-2">sunuyoruz!</span>
            </div>

            <!-- Main Title -->
            <h1
              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold verinay-white mb-4 sm:mb-6 leading-tight">
              Hakkımızda
            </h1>

            <!-- Subtitle -->
            <p class="text-base sm:text-lg md:text-xl verinay-gray-1 mb-6 sm:mb-8 max-w-2xl leading-relaxed">
              Firmamız hakkında bilgiler. Teknoloji dünyasında güvenilir çözümler sunarak müşterilerimizin dijital
              yolculuğunda yanlarında oluyoruz.
            </p>

            <!-- Features List -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6 sm:mb-8">
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-award verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Yılların Deneyimi</span>
              </div>
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-handshake verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Güvenilir Hizmet</span>
              </div>
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-cog verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Profesyonel Çözümler</span>
              </div>
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-heart verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Müşteri Memnuniyeti</span>
              </div>
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-lightbulb verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Yenilikçi Yaklaşım</span>
              </div>
              <div class="flex items-center verinay-gray-1">
                <i class="fas fa-shield-alt verinay-yellow-1 mr-3 text-sm"></i>
                <span class="text-sm sm:text-base">Güvenlik Odaklı</span>
              </div>
            </div>

            <!-- Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mb-8">
              <button type="button"
                class="bg-verinay-yellow-1 hover:bg-verinay-yellow-2 verinay-dark font-semibold px-6 py-3 sm:px-8 sm:py-4 rounded-lg transition-all duration-300 transform hover:scale-105 text-sm sm:text-base flex items-center justify-center">
                <i class="fas fa-envelope mr-2"></i>
                İletişime Geç
              </button>
              <button type="button"
                class="border border-verinay-gray-2 verinay-white hover:bg-verinay-gray-3 font-semibold px-6 py-3 sm:px-8 sm:py-4 rounded-lg transition-all duration-300 text-sm sm:text-base flex items-center justify-center">
                <i class="fas fa-info-circle mr-2"></i>
                Detaylı Bilgi
              </button>
            </div>

            <!-- Stats -->
            <div class="grid grid-cols-3 gap-4 sm:gap-6">
              <div class="text-center">
                <div class="text-xl sm:text-2xl font-bold verinay-yellow-1 flex items-center justify-center mb-1">
                  <i class="fas fa-calendar-alt mr-2"></i>
                  10+
                </div>
                <div class="text-xs sm:text-sm verinay-gray-1">Yıl Deneyim</div>
              </div>
              <div class="text-center">
                <div class="text-xl sm:text-2xl font-bold verinay-yellow-1 flex items-center justify-center mb-1">
                  <i class="fas fa-users mr-2"></i>
                  1000+
                </div>
                <div class="text-xs sm:text-sm verinay-gray-1">Mutlu Müşteri</div>
              </div>
              <div class="text-center">
                <div class="text-xl sm:text-2xl font-bold verinay-yellow-1 flex items-center justify-center mb-1">
                  <i class="fas fa-project-diagram mr-2"></i>
                  500+
                </div>
                <div class="text-xs sm:text-sm verinay-gray-1">Tamamlanan Proje</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========= ABOUT SECTION ========= -->
  <section class="about-section py-16 bg-verinay-dark-2">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="text-center mb-16">
        <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold verinay-yellow-1 mb-4">
          Firmamız Hakkında
        </h2>
        <p class="text-base sm:text-lg verinay-gray-1 max-w-2xl mx-auto">
          Teknoloji dünyasında güvenilir çözümler sunan, müşteri odaklı yaklaşımımızla sektörde fark yaratan bir ekibiz.
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Sol Taraf - Bilgiler -->
        <div class="info-text">
          <!-- Açıklama -->
          <div class="mb-8 p-6 bg-verinay-dark-4 rounded-xl border border-verinay-gray-2">
            <h3 class="text-xl font-bold verinay-yellow-1 mb-4">Misyonumuz</h3>
            <p class="text-base verinay-white leading-relaxed">
              Kurumsal çözümlerimiz ve sektördeki hedeflerimiz doğrultusunda, müşterilerimize en iyi teknoloji
              deneyimini sunmak için çalışıyoruz.
            </p>
          </div>

          <!-- Bilgi Kartları -->
          <div class="space-y-6">
            <div
              class="bg-verinay-dark-4 rounded-xl p-6 mb-4 border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="flex items-center">
                <div class="flex-shrink-0 w-14 h-14 bg-verinay-yellow-1 rounded-xl flex items-center justify-center">
                  <i class="fas fa-building text-xl verinay-dark"></i>
                </div>
                <div class="flex-1 ml-4">
                  <h4 class="font-bold verinay-white text-lg">Kurumsal Bilgi</h4>
                  <p class="verinay-gray-1">Örnek Şirket A.Ş.</p>
                </div>
              </div>
            </div>

            <div
              class="bg-verinay-dark-4 rounded-xl p-6 mb-4 border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="flex items-center">
                <div class="flex-shrink-0 w-14 h-14 bg-verinay-yellow-1 rounded-xl flex items-center justify-center">
                  <i class="fas fa-map-marker-alt text-xl verinay-dark"></i>
                </div>
                <div class="flex-1 ml-4">
                  <h4 class="font-bold verinay-white text-lg">Lokasyon</h4>
                  <p class="verinay-gray-1">Örnek Mah. Örnek Cad. No: 1, İstanbul</p>
                </div>
              </div>
            </div>

            <div
              class="bg-verinay-dark-4 rounded-xl p-6 border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="flex items-center">
                <div class="flex-shrink-0 w-14 h-14 bg-verinay-yellow-1 rounded-xl flex items-center justify-center">
                  <i class="fas fa-briefcase text-xl verinay-dark"></i>
                </div>
                <div class="flex-1 ml-4">
                  <h4 class="font-bold verinay-white text-lg">Hizmet Alanı</h4>
                  <p class="verinay-gray-1">Bilişim & Teknoloji Çözümleri</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Sağ Taraf - Görsel ve İstatistikler -->
        <div class="info-image">
          <div class="relative">
            <!-- Ana Görsel -->
            <div class="relative rounded-2xl overflow-hidden shadow-2xl mb-6">
              <img
                src="images/about/about-section.avif"
                alt="Hakkımızda" class="w-full h-96 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-verinay-dark/60 via-transparent to-transparent"></div>
            </div>

            <!-- İstatistik Kartları -->
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-verinay-dark-4 rounded-xl p-4 border border-verinay-gray-2 text-center">
                <div class="text-2xl font-bold verinay-yellow-1 mb-1">10+</div>
                <div class="text-sm verinay-gray-1">Yıl Deneyim</div>
              </div>
              <div class="bg-verinay-dark-4 rounded-xl p-4 border border-verinay-gray-2 text-center">
                <div class="text-2xl font-bold verinay-yellow-1 mb-1">1000+</div>
                <div class="text-sm verinay-gray-1">Mutlu Müşteri</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========= CONTACT SECTION ========= -->
  <?php include 'inc/contact.php'; ?>

  <!-- ========= FEATURES SECTION ========= -->
  <section class="feature-section py-20 bg-verinay-dark relative overflow-hidden">
    <!-- Background Effects -->
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute w-96 h-96 bg-verinay-yellow-1 opacity-5 rounded-full blur-3xl" style="top: 20%; left: -10%;">
      </div>
      <div class="absolute w-64 h-64 bg-verinay-yellow-2 opacity-10 rounded-full blur-3xl"
        style="bottom: 30%; right: -5%;"></div>
    </div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <!-- Vizyon -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-32">
        <div class="feature-text order-1 lg:order-1">
          <h2 class="text-4xl sm:text-5xl font-bold verinay-yellow-1 mb-8 leading-tight">
            Vizyonumuz
          </h2>
          <p class="text-xl verinay-gray-1 leading-relaxed mb-4">
            Türkiye ve dünya çapında sektöre öncülük edecek projeler geliştirmek. Teknoloji alanında yenilikçi
            çözümlerle global standartları yakalayarak, dijital dönüşümün öncüsü olmak.
          </p>

          <div class="space-y-4 mb-8">
            <div
              class="flex items-center p-4 bg-verinay-dark-4 rounded-lg border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="w-12 h-12 bg-verinay-yellow-1 rounded-lg flex items-center justify-center">
                <i class="fas fa-rocket verinay-dark text-lg"></i>
              </div>
              <span class="verinay-white font-medium ml-4">İnovasyon Odaklı Yaklaşım</span>
            </div>
            <div
              class="flex items-center p-4 bg-verinay-dark-4 rounded-lg border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="w-12 h-12 bg-verinay-yellow-1 rounded-lg flex items-center justify-center">
                <i class="fas fa-globe verinay-dark text-lg"></i>
              </div>
              <span class="verinay-white font-medium ml-4">Global Vizyon & Perspektif</span>
            </div>
          </div>
        </div>

        <!-- Vizyon Görseli -->
        <div class="feature-visual order-2 lg:order-2">
          <div class="relative group">
            <div
              class="bg-verinay-dark-4 rounded-3xl p-5 border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="text-center">
                <div
                  class="inline-flex items-center justify-center w-28 h-28 bg-verinay-yellow-1 rounded-2xl mb-4 p-2 shadow-2xl">
                  <i class="fas fa-eye text-4xl verinay-dark"></i>
                </div>
                <h3 class="text-2xl font-bold verinay-white mb-6">Geleceği Şekillendiriyoruz</h3>
                <div class="grid grid-cols-2 gap-6 mt-8">
                  <div class="text-center p-6 bg-verinay-dark-2 rounded-xl border border-verinay-gray-2">
                    <div class="text-3xl font-bold verinay-yellow-1 mb-2">50+</div>
                    <div class="text-sm verinay-gray-1">İnovatif Proje</div>
                  </div>
                  <div class="text-center p-6 bg-verinay-dark-2 rounded-xl border border-verinay-gray-2">
                    <div class="text-3xl font-bold verinay-yellow-1 mb-2">15+</div>
                    <div class="text-sm verinay-gray-1">Ülke Deneyimi</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Misyon -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <!-- Misyon Görseli -->
        <div class="feature-visual order-2 lg:order-1">
          <div class="relative group">
            <div
              class="bg-verinay-dark-4 rounded-3xl p-5 border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="text-center">
                <div
                  class="inline-flex items-center justify-center w-28 h-28 bg-verinay-yellow-1 rounded-2xl mb-4 p-2 shadow-2xl">
                  <i class="fas fa-diagram-project text-4xl verinay-dark"></i>
                </div>
                <h3 class="text-2xl font-bold verinay-white mb-6">Profesyonel Çözümler</h3>
                <div class="grid grid-cols-2 gap-6 mt-8">
                  <div class="text-center p-6 bg-verinay-dark-2 rounded-xl border border-verinay-gray-2">
                    <div class="text-3xl font-bold verinay-yellow-1 mb-2">99%</div>
                    <div class="text-sm verinay-gray-1">Başarı Oranı</div>
                  </div>
                  <div class="text-center p-6 bg-verinay-dark-2 rounded-xl border border-verinay-gray-2">
                    <div class="text-3xl font-bold verinay-yellow-1 mb-2">24/7</div>
                    <div class="text-sm verinay-gray-1">Destek</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="feature-text order-1 lg:order-2">
          <h2 class="text-4xl sm:text-5xl font-bold verinay-yellow-1 mb-8 leading-tight">
            Misyonumuz
          </h2>
          <p class="text-xl verinay-gray-1 leading-relaxed mb-4">
            En güncel teknolojilerle profesyonel bilişim ve yazılım çözümleri sunmak. Müşterilerimizin dijital dönüşüm
            yolculuğunda güvenilir partner olmak ve teknoloji ile hayatları kolaylaştırmak.
          </p>

          <div class="space-y-4 mb-8">
            <div
              class="flex items-center p-4 bg-verinay-dark-4 rounded-lg border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="w-12 h-12 bg-verinay-yellow-1 rounded-lg flex items-center justify-center">
                <i class="fas fa-cogs verinay-dark text-lg"></i>
              </div>
              <span class="verinay-white font-medium ml-4">Güncel Teknolojiler</span>
            </div>
            <div
              class="flex items-center p-4 bg-verinay-dark-4 rounded-lg border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
              <div class="w-12 h-12 bg-verinay-yellow-1 rounded-lg flex items-center justify-center">
                <i class="fas fa-handshake verinay-dark text-lg"></i>
              </div>
              <span class="verinay-white font-medium ml-4">Güvenilir Partner</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========= FAQ SECTION ========= -->
  <section class="faq-section relative py-20 bg-verinay-dark-2">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
      <!-- Header -->
      <div class="text-center mb-12">
        <h2 class="text-3xl sm:text-4xl font-semibold verinay-yellow-1 mb-3 tracking-tight">
          Sıkça Sorulan Sorular
        </h2>
        <p class="verinay-gray-1 text-lg">
          Firmamız ve hizmetlerimiz hakkında merak ettikleriniz
        </p>
      </div>

      <!-- FAQ Items -->
      <div class="space-y-5">
        <!-- FAQ Item 1 -->
        <div
          class="faq-item bg-verinay-dark-4 rounded-xl border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
          <button
            class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-verinay-gray-3 transition-all duration-200 rounded-xl group"
            data-faq="1">
            <span class="verinay-white font-medium text-lg group-hover:verinay-yellow-1 transition-colors">
              Firmamızın Kuruluş Hikayesi Nasıldır?
            </span>
            <div class="flex-shrink-0">
              <div
                class="w-6 h-6 rounded-md bg-verinay-gray-2 group-hover:bg-verinay-yellow-1 transition-colors duration-200 flex items-center justify-center">
                <svg
                  class="faq-icon w-4 h-4 verinay-white group-hover:verinay-dark transform transition-transform duration-200"
                  fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd"></path>
                </svg>
              </div>
            </div>
          </button>
          <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-out" data-faq-content="1">
            <div class="px-6 pb-6 pt-1">
              <div class="border-t border-verinay-gray-2 pt-5">
                <div class="space-y-4 verinay-gray-1 text-base leading-relaxed">
                  <p>
                    Firmamız 2014 yılında, teknoloji alanında güvenilir ve yenilikçi çözümler sunma vizyonuyla kuruldu.
                    <strong class="verinay-white">Küçük bir ekiple başladığımız yolculukta</strong>, müşteri
                    memnuniyetini her zaman ön planda tutarak büyüdük.
                  </p>
                  <p>
                    İlk yıllarımızda yerel pazara odaklanırken, zamanla <strong class="verinay-white">ulusal ve
                      uluslararası projelerde</strong> yer aldık. Bugün 50'den fazla başarılı proje ve binlerce memnun
                    müşteriyle sektörde güvenilir bir marka haline geldik.
                  </p>
                  <p>
                    <strong class="verinay-white">Sürekli gelişim ve öğrenme</strong> felsefemizle, teknolojideki
                    gelişmeleri yakından takip ederek müşterilerimize en güncel çözümleri sunmaya devam ediyoruz.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ Item 2 -->
        <div
          class="faq-item bg-verinay-dark-4 rounded-xl border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
          <button
            class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-verinay-gray-3 transition-all duration-200 rounded-xl group"
            data-faq="2">
            <span class="verinay-white font-medium text-lg group-hover:verinay-yellow-1 transition-colors">
              Hangi Hizmetleri Sunuyoruz?
            </span>
            <div class="flex-shrink-0">
              <div
                class="w-6 h-6 rounded-md bg-verinay-gray-2 group-hover:bg-verinay-yellow-1 transition-colors duration-200 flex items-center justify-center">
                <svg
                  class="faq-icon w-4 h-4 verinay-white group-hover:verinay-dark transform transition-transform duration-200"
                  fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd"></path>
                </svg>
              </div>
            </div>
          </button>
          <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-out" data-faq-content="2">
            <div class="px-6 pb-6 pt-1">
              <div class="border-t border-verinay-gray-2 pt-5">
                <div class="space-y-4 verinay-gray-1 text-base leading-relaxed">
                  <p>
                    Geniş hizmet yelpazemizle müşterilerimizin tüm teknoloji ihtiyaçlarını karşılıyoruz. <strong
                      class="verinay-white">Web hosting, alan adı, VDS sunucu hizmetleri</strong> başta olmak üzere
                    kapsamlı çözümler sunuyoruz.
                  </p>
                  <p>
                    <strong class="verinay-white">Web tasarım ve yazılım geliştirme</strong> alanında özel projeler
                    gerçekleştiriyoruz. E-ticaret çözümleri, kurumsal web siteleri ve mobil uygulamalar konularında
                    uzmanız.
                  </p>
                  <p>
                    Ayrıca <strong class="verinay-white">dijital pazarlama, SEO optimizasyonu ve sistem
                      yönetimi</strong> hizmetleriyle müşterilerimizin dijital dönüşüm süreçlerinde yanlarında oluyoruz.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ Item 3 -->
        <div
          class="faq-item bg-verinay-dark-4 rounded-xl border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
          <button
            class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-verinay-gray-3 transition-all duration-200 rounded-xl group"
            data-faq="3">
            <span class="verinay-white font-medium text-lg group-hover:verinay-yellow-1 transition-colors">
              Neden Bizi Tercih Etmelisiniz?
            </span>
            <div class="flex-shrink-0">
              <div
                class="w-6 h-6 rounded-md bg-verinay-gray-2 group-hover:bg-verinay-yellow-1 transition-colors duration-200 flex items-center justify-center">
                <svg
                  class="faq-icon w-4 h-4 verinay-white group-hover:verinay-dark transform transition-transform duration-200"
                  fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd"></path>
                </svg>
              </div>
            </div>
          </button>
          <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-out" data-faq-content="3">
            <div class="px-6 pb-6 pt-1">
              <div class="border-t border-verinay-gray-2 pt-5">
                <div class="space-y-4 verinay-gray-1 text-base leading-relaxed">
                  <p>
                    <strong class="verinay-white">10 yılı aşkın deneyimimiz</strong> ve sektördeki derin bilgi
                    birikimimizle, müşterilerimize en kaliteli hizmeti sunuyoruz. Her projede müşteri memnuniyetini ön
                    planda tutuyoruz.
                  </p>
                  <p>
                    <strong class="verinay-white">7/24 teknik destek hizmeti</strong> ile müşterilerimizin her zaman
                    yanındayız. Uzman ekibimiz, en kısa sürede çözüm odaklı yaklaşımla sorunları çözer.
                  </p>
                  <p>
                    <strong class="verinay-white">Rekabetçi fiyatlar ve kaliteli hizmet</strong> dengesiyle sektörde
                    fark yaratıyoruz. Teknolojideki gelişmeleri yakından takip ederek, müşterilerimize en güncel
                    çözümleri sunuyoruz.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ Item 4 -->
        <div
          class="faq-item bg-verinay-dark-4 rounded-xl border border-verinay-gray-2 hover:border-verinay-yellow-1 transition-all duration-300">
          <button
            class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-verinay-gray-3 transition-all duration-200 rounded-xl group"
            data-faq="4">
            <span class="verinay-white font-medium text-lg group-hover:verinay-yellow-1 transition-colors">
              İletişim ve Destek Nasıl Alınır?
            </span>
            <div class="flex-shrink-0">
              <div
                class="w-6 h-6 rounded-md bg-verinay-gray-2 group-hover:bg-verinay-yellow-1 transition-colors duration-200 flex items-center justify-center">
                <svg
                  class="faq-icon w-4 h-4 verinay-white group-hover:verinay-dark transform transition-transform duration-200"
                  fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd"></path>
                </svg>
              </div>
            </div>
          </button>
          <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-out" data-faq-content="4">
            <div class="px-6 pb-6 pt-1">
              <div class="border-t border-verinay-gray-2 pt-5">
                <div class="space-y-4 verinay-gray-1 text-base leading-relaxed">
                  <p>
                    Müşterilerimizle iletişim kurmak için <strong class="verinay-white">çoklu kanal desteği</strong>
                    sunuyoruz. Telefon, e-posta, canlı destek hattı ve WhatsApp üzerinden 7/24 ulaşabilirsiniz.
                  </p>
                  <p>
                    <strong class="verinay-white">Müşteri portalımız</strong> üzerinden destek talebinde bulunabilir,
                    projenizin durumunu takip edebilir ve geçmiş işlemlerinizi görüntüleyebilirsiniz.
                  </p>
                  <p>
                    Acil durumlar için <strong class="verinay-white">öncelikli destek sistemi</strong> mevcuttur.
                    Ofisimize ziyaret ederek yüz yüze görüşme imkanı da bulunmaktadır. Tüm iletişim kanallarımızda
                    Türkçe destek alabilirsiniz.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

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

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

</html>