<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>Zeynep &amp; Vahdettin - Düğün Davetiyesi</title>

  <!-- Primary Meta Tags -->
  <meta name="title" content="Zeynep & Vahdettin - Düğün Davetiyesi">
  <meta name="description" content="6 Eylül 2026 Pazar günü gerçekleşecek düğün törenimize sizleri aramızda görmekten mutluluk duyarız.">
  <meta name="theme-color" content="#FAF9F6" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1C1C1A" media="(prefers-color-scheme: dark)">

  <!-- Open Graph / Facebook / WhatsApp Sharing -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zeynep-vahdettin.davetiyem.online">
  <meta property="og:title" content="Zeynep & Vahdettin Evleniyor! 💍">
  <meta property="og:description" content="6 Eylül 2026 Pazar | Payitaht Düğün Salonu Sakarya/Serdivan. Düğün davetiyemizi incelemek ve LCV bildirmek için tıklayınız.">
  <!-- og:image PNG KALMALI — WhatsApp/Facebook önizlemesi SVG render etmez -->
  <meta property="og:image" content="./assets/images/logo-zv.png">

  <!--
    Favicon seti.
    Sorun: kaynak logo #202c28 (neredeyse siyah) ve zemini şeffaftı — koyu tema
    sekme çubuğunda siyah üstüne siyah kalıp kayboluyordu. Ayrıca 181x136 kare
    olmadığı için apple-touch-icon olarak da uygun değildi.
    Çözüm: SVG favicon içinde prefers-color-scheme ile mürekkep/parşömen geçişi,
    PNG fallback'lerde ise krem zemin (hangi temada olursa olsun görünür).
  -->
  <link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
  <link rel="icon" type="image/png" sizes="48x48" href="./assets/images/favicon-48.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png">

  <!--
    Web Fonts.
    NOT: Bunlar daha önce style.css içinde @import ile çağrılıyordu. CSS spesifikasyonu
    @import'un @charset/@layer dışındaki TÜM kurallardan önce gelmesini şart koşar;
    dosyada @font-face'ten sonra geldiği için tarayıcı kuralı sessizce atıyor ve
    Cormorant Garamond / Montserrat hiç yüklenmiyordu. <link> olarak taşındı.
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" as="font" type="font/ttf" href="./assets/fonts/Kudry-ClassicHeadline.ttf" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="./style.css">

  <!--
    Dock modunu ilk boyamadan ÖNCE seç: JS çalışmazsa ya da kullanıcı hareket azaltma
    tercihi kullanıyorsa sayfa statik ama tamamen sağlam bir hero ile açılır.
  -->
  <script>
    (function () {
      var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      document.documentElement.classList.add(reduced ? 'dock-static' : 'dock-on');
    })();
  </script>
</head>
<body>

  <!-- Atmosfer katmanları: ikisi de .page-container'ın ARKASINDA kalır (z-index 0/1 < 2) -->
  <div class="bg-texture" aria-hidden="true"></div>

  <!--
    Arka plan müziği. 'loop' özniteliği bilerek YOK: native döngü parçayı
    her zaman 0'dan başlatır, bizse her turda 1:10'dan başlatıyoruz (app.js →
    AUDIO_START_AT). Döngü 'ended' olayıyla elle kuruluyor.
  -->
  <audio id="bgAudio" src="./assets/audio/muzik2.mp3" preload="metadata"></audio>

  <!-- ==================== KALICI ÜST BAŞLIK (SCROLL İLE OLUŞUR) ==================== -->
  <header class="site-header" id="siteHeader">
    <div class="header-surface" aria-hidden="true"></div>
    <div class="header-inner">
      <!-- Monogramın yerleşeceği ölçüm yuvası. Görsel değil, sadece hedef rect. -->
      <div class="mark-slot" id="markSlot" aria-hidden="true"></div>
      <div class="header-names" id="headerNames"
           data-text="ZEYNEP &amp; VAHDETTİN"
           aria-label="Zeynep ve Vahdettin"></div>
      <div class="header-date" id="headerDate">06.09.26</div>
    </div>
    <div class="header-rule" aria-hidden="true"></div>
  </header>

  <!--
    Uçan monogram. .site-header'ın dışında ve position:fixed — çünkü hem hero
    ortasında hem başlıkta aynı ÖĞE olarak var olması gerekiyor.
    DOM genişliği hero boyutunda (170px); başlığa küçülerek gider, böylece
    ölçek her zaman <= 1 kalır ve görsel net görünür.
  -->
  <div class="mark-layer" id="markLayer" aria-hidden="true">
    <img src="./assets/images/logo-zv.svg" alt="" width="180" height="135"
         class="header-mark" id="headerMark">
  </div>

  <!-- Ana Sayfa Sarmalayıcı -->
  <div class="page-container">

    <!-- Sahne alanı: bu track boyunca sahne ekrana çivilenir -->
    <div class="scene-track" id="sceneTrack">
      <div class="scene-stage" id="sceneStage">

        <!-- SAHNE 1 — KAPAK -->
        <section class="scene scene--cover" data-scene="cover">
          <div class="scene-inner">
            <div class="top-indicator-line" id="topLine" aria-hidden="true"></div>
            <div class="anchor-mark" id="anchorMark">
              <img src="./assets/images/logo-zv.svg" alt="" width="180" height="135" class="anchor-mark-img">
            </div>
            <div class="hero-date" id="heroDate">06.09.26</div>
            <a href="#invitation" class="bottom-indicator" id="scrollHint">
              <div class="bottom-indicator-line" aria-hidden="true"></div>
              <span class="scroll-text">aşağı kaydırın.</span>
            </a>
          </div>
        </section>

        <!-- SAHNE 2 — İSİMLER -->
        <section class="scene scene--names" data-scene="names">
          <div class="scene-inner">
            <div class="calligraphy-header">
              <img src="./assets/images/signature-zeynep-vahdettin.svg"
                   alt="Zeynep &amp; Vahdettin" width="191" height="125" class="calligraphy-img">
            </div>
            <h2 class="evleniyoruz-title">evleniyoruz.</h2>
            <section class="couples-grid" aria-label="Gelin ve Damat Bilgileri">
              <div class="couple-column couple-column--left">
                <div class="couple-name">Z E Y N E P</div>
                <div class="parents-names">Türkan ve Yusuf</div>
                <div class="couple-surname">Y I L D I Z</div>
              </div>
              <div class="slash-divider" aria-hidden="true">/</div>
              <div class="couple-column couple-column--right">
                <div class="couple-name">V A H D E T T İ N</div>
                <div class="parents-names">Mevlüde ve Ahmet</div>
                <div class="couple-surname">Ş E N T Ü R K</div>
              </div>
            </section>
          </div>
        </section>

        <!-- SAHNE 3 — ZAMAN & YER -->
        <section class="scene scene--when" data-scene="when">
          <div class="scene-inner">
            <div class="center-divider-line" aria-hidden="true"></div>
            <section class="event-datetime-box" aria-label="Düğün Tarihi ve Saati">
              <div class="event-date-main">6 EYLÜL 2026</div>
              <div class="event-time-sub">PAZAR Saat: 13.00 - 17.00</div>
            </section>
            <section class="location-box" aria-label="Düğün Mekanı ve Adresi">
              <div class="venue-name">Payitaht Düğün Salonu</div>
              <div class="venue-address">
                Medeniyet blv. , Kemalpaşa<br>
                Sakarya/Serdivan
              </div>
            </section>
            <p class="invitation-quote">
              Bu özel günümüzde sizleri aramızda görmekten mutluluk duyarız.
            </p>
          </div>
        </section>

      </div>
    </div>

    <!-- NORMAL AKIŞ -->
    <main class="flow-section" id="invitation">

      <!-- Geri Sayım -->
      <section class="countdown-container fade-in-up" aria-label="Düğüne Kalan Süre Sayacı">
        <div class="countdown-title">düğüne kalan süre.</div>
        <div class="countdown-cards">
          <div class="timer-card">
            <span class="timer-number" id="days">00</span>
            <span class="timer-label">gün</span>
          </div>
          <div class="timer-card">
            <span class="timer-number" id="hours">00</span>
            <span class="timer-label">saat</span>
          </div>
          <div class="timer-card">
            <span class="timer-number" id="minutes">00</span>
            <span class="timer-label">dakika</span>
          </div>
          <div class="timer-card">
            <span class="timer-number" id="seconds">00</span>
            <span class="timer-label">saniye</span>
          </div>
        </div>
      </section>

      <!-- Eylemler -->
      <section class="actions-container fade-in-up" aria-label="Eylemler ve Harita Bağlantıları">
        <a href="https://www.google.com/maps/search/?api=1&query=Payitaht+D%C3%BC%C4%9F%C3%BCn+Salonu+Medeniyet+blv+Kemalpa%C5%9Fa+Sakarya+Serdivan"
           target="_blank" rel="noopener noreferrer" class="btn-primary" id="mapLocationBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          KONUMU HARİTADA AÇ
        </a>

        <button type="button" class="btn-secondary" id="openRsvpModalBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
          </svg>
          İLETİŞİM - WHATSAPP
        </button>

        <button type="button" class="btn-secondary" id="addToCalendarBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          TAKVİME EKLE
        </button>
      </section>

      <!-- Footer -->
      <footer class="footer-section fade-in-up">
        <img src="./assets/images/logo-zv.svg" alt="" width="180" height="135" class="footer-monogram">
        <p class="site-credit">
          powered by
          <a href="https://emiryigit.com.tr" target="_blank" rel="noopener noreferrer">Emir Yiğit</a>
        </p>
      </footer>

    </main>

  </div>

  <!-- Müzik Kontrolü — başlıkla çakışmaması için sağ ALT köşeye taşındı -->
  <button id="audioToggleBtn" class="audio-control-btn" type="button" title="Müzik Çal" aria-label="Müzik Çal" aria-pressed="false">
    <span class="audio-icon" aria-hidden="true"></span>
  </button>

  <!-- ==================== LCV / RSVP MODAL ==================== -->
  <div class="modal-overlay" id="rsvpModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-card">
      <button class="modal-close-btn" id="closeModalBtn" type="button" aria-label="Kapat">&times;</button>
      <h3 class="modal-title" id="modalTitle">LCV &amp; Katılım Bildirimi</h3>
      <p class="modal-subtitle">Zeynep &amp; Vahdettin çiftine doğrudan mesajınızı iletin.</p>

      <form class="rsvp-form" id="rsvpForm" novalidate>
        <div class="form-group">
          <label for="guestName">Adınız ve Soyadınız</label>
          <input type="text" id="guestName" class="form-input" placeholder="Örn: Ahmet Yılmaz" autocomplete="name" required>
        </div>

        <div class="form-group">
          <label for="attendanceStatus">Katılım Durumunuz</label>
          <!--
            value'lar sade anahtar; emoji yalnızca görünen etikette.
            Mesaj metni app.js'te ASCII kaçış dizilerinden kurulur, böylece
            gönderilen içerik dosya kodlamasına hiç bağlı kalmaz.
          -->
          <select id="attendanceStatus" class="form-select">
            <option value="katiliyorum">Katılıyorum 🎉</option>
            <option value="katilamiyorum">Maalesef Katılamıyorum 😔</option>
            <option value="belirsiz">Henüz Belli Değil ⏳</option>
          </select>
        </div>

        <div class="form-group" id="guestCountGroup">
          <label for="guestCount">Gelecek Kişi Sayısı</label>
          <select id="guestCount" class="form-select">
            <option value="1">1 Kişi</option>
            <option value="2">2 Kişi</option>
            <option value="3">3 Kişi</option>
            <option value="4+">4 veya daha fazla</option>
          </select>
        </div>

        <div class="form-group">
          <label for="guestNote">Özel Notunuz / Tebrik Mesajınız</label>
          <input type="text" id="guestNote" class="form-input" placeholder="Örn: Ömür boyu mutluluklar dileriz!">
        </div>

        <p class="form-error" id="formError" role="alert" hidden>Lütfen adınızı ve soyadınızı giriniz.</p>

        <button type="submit" class="btn-primary btn-submit">WHATSAPP İLE GÖNDER</button>
      </form>
    </div>
  </div>

  <script src="./app.js"></script>
</body>
</html>
