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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Kuaför Dilek Şengül | Selimpaşa · Silivri</title>

  <!-- Güvenli Passive Event Listener Yaması (Tüm Scriptlerden Önce Çalışmalı) -->
  <script>
    (function () {
      let supportsPassive = false;
      try {
        let opts = Object.defineProperty({}, 'passive', { get: function () { supportsPassive = true; } });
        window.addEventListener('test', null, opts);
      } catch (e) { }

      if (supportsPassive) {
        const originalAddEventListener = EventTarget.prototype.addEventListener;
        EventTarget.prototype.addEventListener = function (type, listener, options) {
          // touchstart/touchmove olaylarını zorla passive yapmak
          // bazı ekranlarda dokunma/scroll davranışını bozabiliyor.
          // Bu yüzden sadece wheel ailesine uygula.
          const isScrollEvent = ['wheel', 'mousewheel'].includes(type);
          if (isScrollEvent) {
            if (options === undefined || typeof options === 'boolean') {
              options = { capture: !!options, passive: true };
            } else if (typeof options === 'object' && !('passive' in options)) {
              options.passive = true;
            }
          }
          return originalAddEventListener.call(this, type, listener, options);
        };
      }
    })();
  </script>

  <!-- Schema.org -->
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HairSalon",
  "name": "Dilek Şengül Kuaför",
  "description": "Selimpaşa ve Silivri'nin en prestijli bayan kuaförü. 25 yıllık ustalık.",
  "url": "https://kuafordileksengul.pages.dev",
  "telephone": "+905332248451",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "İskender Özcan Caddesi No:6/C",
    "addressLocality": "Selimpaşa",
    "addressRegion": "İstanbul",
    "postalCode": "34590",
    "addressCountry": "TR"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 41.0833,
    "longitude": 28.2167
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": [
        "Monday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday"
      ],
      "opens": "10:00",
      "closes": "19:30"
    }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "49"
  },
  "priceRange": "₺₺₺",
  "image": "https://kuafordileksengul.pages.dev/assets/icons/icon-512.png",
  "paymentAccepted": "Cash, Credit Card",
  "areaServed": [
    "Selimpaşa",
    "Silivri",
    "Ortaköy",
    "Kavaklı",
    "Büyükçekmece"
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Kuaför Hizmetleri",
    "itemListElement": [
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Saç Kesimi",
          "description": "Modern ve yüz hatlarına uygun profesyonel saç kesimi"
        }
      },
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Röfle & Ombre",
          "description": "Saçlara zarar vermeden doğal görünümlü renklendirme işlemleri"
        }
      },
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Gelin Başı",
          "description": "Özel günler için profesyonel gelin saçı ve makyajı"
        }
      },
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Keratin Bakım",
          "description": "Yıpranmış saçlar için onarıcı ve düzleştirici keratin bakımı"
        }
      }
    ]
  },
  "sameAs": [
    "https://instagram.com/kuafordileksengul"
  ]
}
</script>

  <!-- SEO -->
  <meta name="description" content="Dilek Şengül Kuaför - Selimpaşa ve Silivri'nin en prestijli bayan kuaförü. 25 yıllık ustalık ile röfle, ombre, gelin başı ve saç bakımı. Hemen online randevu alın.">
  <meta name="keywords" content="Selimpaşa kuaför, Silivri kuaför, Büyükçekmece kuaför, Ortaköy kuaför, Kavaklı kuaför, bayan kuaför, saç kesimi, röfle, ombre, gelin başı, keratin bakım, Dilek Şengül">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
  <meta name="author" content="Dilek Şengül Kuaför">
  <link rel="canonical" href="https://kuafordileksengul.pages.dev">

  <!-- Local SEO & GEO Tags -->
  <meta name="geo.region" content="TR-34">
  <meta name="geo.placename" content="Selimpaşa, Silivri, İstanbul">
  <meta name="geo.position" content="41.0833;28.2167">
  <meta name="ICBM" content="41.0833, 28.2167">

  <!-- Open Graph -->
  <meta property="og:type" content="business.business">
  <meta property="og:title" content="Dilek Şengül Kuaför | Selimpaşa · Silivri">
  <meta property="og:description"
    content="Selimpaşa'nın en prestijli bayan kuaförü. 25 yıllık ustalık. Röfle, Ombre, Keratin, Gelin Başı. Online randevu: 0533 224 84 51">
  <meta property="og:url" content="https://kuafordileksengul.pages.dev">
  <meta property="og:image" content="https://kuafordileksengul.pages.dev/og-image.jpg">
  <meta property="og:locale" content="tr_TR">
  <meta property="og:site_name" content="Kuaför Dilek Şengül">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Kuaför Dilek Şengül | Selimpaşa">
  <meta name="twitter:description"
    content="25 yıllık ustalık. Selimpaşa'nın en prestijli bayan kuaförü. Online randevu alın.">

  <!-- PWA — FIX #7: manifest artık harici dosya, iOS'ta da çalışır -->
  <link rel="manifest" href="/manifest.json">
  <link rel="apple-touch-icon" href="/assets/icons/icon-192.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/assets/icons/icon-192.png">
  <link rel="icon" type="image/png" sizes="512x512" href="/assets/icons/icon-512.png">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="Dilek Kuaför">
  <meta name="theme-color" content="#111111">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Outfit:wght@300;400;500;600;700&amp;display=swap"
    rel="stylesheet">

  <!-- CSS — FIX #9: rel="noopener noreferrer" tüm harici linklerde uygulandı -->
  <link rel="stylesheet" href="/main.css">

</head>

<body>

  <!-- PWA Install Banner -->
  <div
    style="position:fixed;bottom:0;left:0;right:0;background:#fff;padding:20px 24px;box-shadow:0 -4px 15px rgba(0,0,0,0.1);z-index:9999;display:none;flex-direction:row;align-items:center;justify-content:space-between;border-top:1px solid #d5c9b8;"
    id="pwaBanner">
    <div>
      <strong style="font-size:1rem;color:#0f0d0b;">Dilek Şengül</strong><br>
      <span style="font-size:0.75rem;color:#7a6a58">Daha hızlı randevu için uygulamayı indir</span>
    </div>
    <div style="display:flex;align-items:center;">
      <button id="pwaEkleBtn"
        style="background:#0f0d0b;color:#fff;padding:14px 20px;border:none;border-radius:4px;font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:500;">İndir</button>
      <button id="pwaKapat"
        style="background:none;border:none;font-size:1.4rem;margin-left:14px;color:#7a6a58;cursor:pointer;">✕</button>
    </div>
  </div>

  <!-- ✅ FİX #6: Kurşun geçirmez duyuru modali -->
  <!-- Modal elementi: A11Y (Erişilebilirlik) eklentileriyle -->
  <div id="duyuruModal" role="dialog" aria-modal="true" aria-labelledby="duyuruBaslik"
    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center;">
    <div
      style="background: #fdfaf6; padding: 40px; border-radius: 10px; text-align: center; max-width: 400px; position: relative;">
      <span id="duyuru-kapat"
        style="position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer;">×</span>
      <h2 id="duyuruBaslik" style="margin-top:0;">📢 DUYURU</h2>
      <p id="duyuruMetni" style="font-size: 18px;"></p>
    </div>
  </div>

  <!-- Firebase Yükleme -->
  <div class="fb-loading" id="fbLoading">
    <div class="fb-spinner"></div>
    <div class="fb-loading-m">İşleminiz yapılıyor...</div>
  </div>
  <div class="fb-toast" id="fbToast" aria-live="polite"></div>

  <!-- ══════════════════════════════════════════
     ANA SAYFA
════════════════════════════════════════════ -->
  <div class="ekran aktif" id="ana">
    <div class="nav">
      <div class="nav-logo">
        <div class="nav-logo-ust">Kuaför</div>
        <div class="nav-logo-alt">Dilek Şengül</div>
      </div>
      <div style="display:flex;gap:8px;">
        <a class="nav-yonetim" id="btn-nav-login" href="/admin.html"
          style="display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;">Yönetim</a>
      </div>
    </div>
    <div class="scroll">
      <div class="hero">
        <svg class="hero-makas" viewBox="0 0 200 280" fill="none">
          <path d="M80 20 L110 140 L100 145 L68 25 Z" fill="#8a7040" opacity=".5"></path>
          <path d="M120 20 L90 140 L100 145 L132 25 Z" fill="#8a7040" opacity=".5"></path>
          <circle cx="100" cy="143" r="8" fill="#c9a960" opacity=".6"></circle>
          <ellipse cx="72" cy="185" rx="22" ry="28" stroke="#8a7040" stroke-width="4" fill="none" opacity=".4">
          </ellipse>
          <ellipse cx="128" cy="185" rx="22" ry="28" stroke="#8a7040" stroke-width="4" fill="none" opacity=".4">
          </ellipse>
          <rect x="20" y="60" width="7" height="140" rx="3" fill="#b09050" opacity=".3"></rect>
          <rect x="14" y="72" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="88" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="104" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="120" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="136" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="152" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
          <rect x="14" y="168" width="4" height="7" rx="1" fill="#8a7040" opacity=".35"></rect>
        </svg>
        <div class="hero-ust">Selimpaşa · Silivri</div>
        <div class="hero-baslik"><em>Dilek</em><br>Şengül</div>
        <div class="hero-alt">25 Yıllık Ustalık · Butik Salon</div>
        <div class="hero-cizgi"></div>
        <div class="hero-slogan">"Güzelliğinizi tecrübenin güvenine teslim edin."</div>
        <button id="btn-profil-giris" class="yeni-orta-buton">
          👤 Profilim / Randevu
        </button>
        <div class="hero-bilgi">
          <span>Her gün 10:00 — 19:30</span>
          <div class="hero-nokta"></div>
          <span>Salı Günü Kapalı</span>
        </div>
      </div>
        <!-- YENİ MİNİ İLETİŞİM ALANI -->
        <div style="display:flex; justify-content:center; gap:20px; margin-top:32px; padding-bottom: 20px;">
          <a href="tel:+905332248451" style="display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; text-decoration:none; font-size:1.2rem; transition:all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" aria-label="Telefon">📞</a>
          <a href="https://wa.me/905332248451" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; text-decoration:none; font-size:1.2rem; transition:all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" aria-label="WhatsApp">💬</a>
          <a href="https://instagram.com/kuafordileksengul" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; text-decoration:none; font-size:1.2rem; transition:all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" aria-label="Instagram">📸</a>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Hizmet
════════════════════════════════════════════ -->
  <div class="ekran" id="b-hizmet" style="background:var(--krem);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
      <button class="geri-btn" id="btn-geri-ana-hizmet" aria-label="Ana Sayfaya Dön">← Geri</button>
    </div>
    <div class="progress">
      <div class="p-bar on"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
    </div>
    <div class="adim-h">
      <div class="adim-no">01 / 05</div>
      <div class="adim-baslik">Hizmet Seçin</div>
      <div style="font-size:.66rem;color:var(--sil);margin-top:4px;">Birden fazla hizmet seçebilirsiniz</div>
    </div>
    <div id="sepetOzet"
      style="display:none;background:var(--krem);padding:10px 18px;border-bottom:1px solid var(--cz);flex-shrink:0;">
      <div style="font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--sil);margin-bottom:6px;">
        Seçilenler</div>
      <div id="sepetOzetIcerik"></div>
    </div>
    <div class="scroll" style="background:var(--beyaz);">
      <div id="bookingHizmetListesi"></div>
    </div>
    <div class="sepet-bar" id="sepetBar">
      <div class="sepet-bilgi">
        <span class="sepet-sayi" id="sepetSayi">0 hizmet seçildi</span>
        <span class="sepet-fiyat" id="sepetFiyat">0 ₺'den</span>
      </div>
      <button class="sepet-devam" id="btn-sepet-devam">Devam Et →</button>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Tarih
════════════════════════════════════════════ -->
  <div class="ekran" id="b-tarih" style="background:var(--krem);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
      <button class="geri-btn" id="btn-geri-b-hizmet" aria-label="Hizmet Seçimine Dön">← Geri</button>
    </div>
    <div class="progress">
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
    </div>
    <div class="adim-h">
      <div class="adim-no">02 / 05</div>
      <div class="adim-baslik" id="tarihBaslik">Tarih Seçin</div>
    </div>
    <div class="scroll" style="background:var(--beyaz);">
      <div class="tarih-grid" id="tarihGrid"></div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Saat
════════════════════════════════════════════ -->
  <div class="ekran" id="b-saat" style="background:var(--krem);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
      <button class="geri-btn" id="btn-geri-b-tarih" aria-label="Tarih Seçimine Dön">← Geri</button>
    </div>
    <div class="progress">
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar"></div>
      <div class="p-bar"></div>
    </div>
    <div class="adim-h">
      <div class="adim-no">03 / 05</div>
      <div class="adim-baslik" id="saatBaslik">Saat Seçin</div>
    </div>
    <div class="scroll" style="background:var(--beyaz);">
      <div class="saat-legend">
        <span><i class="dolu-i"></i>Dolu</span>
        <span><i></i>Müsait</span>
      </div>
      <div class="saat-grid" id="saatGrid"></div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Bilgi
════════════════════════════════════════════ -->
  <div class="ekran" id="b-bilgi" style="background:var(--krem);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
      <button class="geri-btn" id="btn-geri-b-saat" aria-label="Saat Seçimine Dön">← Geri</button>
    </div>
    <div class="progress">
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar"></div>
    </div>
    <div class="adim-h">
      <div class="adim-no">04 / 05</div>
      <div class="adim-baslik">Bilgileriniz</div>
    </div>
    <div class="scroll" style="background:var(--beyaz);">
      <div class="b-form">
        <div id="bProfilInfo"
          style="display:none;background:var(--krem);border:1px solid var(--cz);border-radius:2px;padding:14px;margin-bottom:14px;">
          <div style="font-size:.95rem;font-weight:600;color:var(--yaz);">Kayıtlı müşteri bilgileri kullanılıyor.</div>
          <div style="font-size:.74rem;color:var(--sil);margin-top:8px;line-height:1.6;">Adınız, telefonunuz ve doğum
            tarihiniz profilinizden otomatik çekildi. Sadece ödeme yöntemini seçin ve isteğinizi ekleyin.</div>
        </div>
        <div id="bPersonalInfoFields">
          <div class="f-grid2">
            <div class="f-grup">
              <label class="f-lbl" for="b_isim">Adınız <span style="color:#b03c3c">*</span></label>
              <input class="f-inp" id="b_isim" type="text" placeholder="Ayşe" autocomplete="given-name">
            </div>
            <div class="f-grup">
              <label class="f-lbl" for="b_soyisim">Soyadınız <span style="color:#b03c3c">*</span></label>
              <input class="f-inp" id="b_soyisim" type="text" placeholder="Yılmaz" autocomplete="family-name">
            </div>
          </div>
          <div class="f-grup">
            <label class="f-lbl" for="b_tel">Telefon <span style="color:#b03c3c">*</span></label>
            <input class="f-inp" id="b_tel" type="tel" placeholder="05XX XXX XX XX" autocomplete="tel" maxlength="15">
          </div>
          <div class="f-grup">
            <label class="f-lbl" for="b_dogum">Doğum Tarihi <span style="color:#b03c3c">*</span></label>
            <input class="f-inp" id="b_dogum" type="text" placeholder="GG.AA.YYYY" maxlength="10" autocomplete="bday">
          </div>
        </div>
        <div class="f-grup">
          <label class="f-lbl" for="b_not">Not (opsiyonel)</label>
          <input class="f-inp" id="b_not" type="text" placeholder="Özel isteğiniz..." aria-label="Sipariş notu">
        </div>

        <div class="f-grup">
          <label class="f-lbl">Ödeme Yöntemi <span style="color:#b03c3c">*</span></label>
          <div class="odeme-grid">
            <div class="odeme-k" id="od-nakit" data-action="odemeAyarla" data-tip="Nakit"><span
                class="odeme-ico">💵</span><span class="odeme-lbl">Nakit</span></div>
            <div class="odeme-k" id="od-kart" data-action="odemeAyarla" data-tip="Kredi Kartı"><span
                class="odeme-ico">💳</span><span class="odeme-lbl">Kart</span></div>
            <div class="odeme-k" id="od-havale" data-action="odemeAyarla" data-tip="Havale"><span
                class="odeme-ico">🏦</span><span class="odeme-lbl">Havale</span></div>
          </div>
        </div>
        <button class="btn-onayla" id="btn-devam-et">Devam Et →</button>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Onay
════════════════════════════════════════════ -->
  <div class="ekran" id="b-onay" style="background:var(--krem);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
      <button class="geri-btn" id="btn-geri-b-bilgi" aria-label="Bilgi Ekranına Dön">← Geri</button>
    </div>
    <div class="progress">
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
      <div class="p-bar on"></div>
    </div>
    <div class="adim-h">
      <div class="adim-no">05 / 05</div>
      <div class="adim-baslik">Onaylayın</div>
    </div>
    <div class="scroll" style="background:var(--beyaz);">
      <div class="b-form">
        <div class="ozet-k" id="bookOzet"></div>
        <button class="btn-onayla" id="btnRandevuOnayla">Randevuyu Onayla</button>
        <div
          style="text-align:center;margin-top:12px;font-size:.6rem;color:var(--sil);letter-spacing:1px;line-height:1.6;">
          WhatsApp üzerinden onay mesajı gelecektir.</div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     BOOKING: Başarı
════════════════════════════════════════════ -->
  <div class="ekran" id="b-basari" style="background:var(--beyaz);">
    <div class="b-header">
      <div class="b-logo">Dilek Şengül</div>
    </div>
    <div class="scroll">
      <div class="basari-wrap">
        <div class="basari-cizgi"></div>
        <div class="basari-baslik">Talebiniz Alındı</div>
        <div class="basari-alt">Randevu işleminizin tamamlanması için lütfen aşağıdaki butona tıklayarak <br>WhatsApp
          üzerinden bize iletin.</div>
        <style>
          @keyframes pulseWp {
            0% {
              transform: scale(1);
            }

            50% {
              transform: scale(1.03);
            }

            100% {
              transform: scale(1);
            }
          }
        </style>
        <button class="btn-wp" id="btn-wp-onayla"
          style="background:#25D366;color:#fff;margin-bottom:8px;width:100%;animation:pulseWp 2s infinite;">💬
          WhatsApp'tan Gönder</button>
        <button class="btn-wp" id="btn-profil-don" style="background:var(--yaz);color:var(--beyaz);width:100%;">👤
          Profilime Dön</button>
        <button class="btn-secondary" id="btn-wp-iptal" style="margin-top:8px">⚠️ Randevumu İptal Etmek
          İstiyorum</button>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     MÜŞTERİ GİRİŞ / KAYIT
════════════════════════════════════════════ -->
  <div class="ekran" id="profil-giris">
    <div class="profil-giris">
      <div class="profil-giris-logo">Dilek Şengül</div>
      <div class="profil-giris-sub">Müşteri Paneli</div>
      <div style="display:flex;gap:10px;width:100%;max-width:320px;margin-bottom:28px;">
        <button id="tab-giris-btn"
          style="flex:1;padding:13px 8px;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:all .2s;">Giriş
          Yap</button>
        <button id="tab-kayit-btn"
          style="flex:1;padding:13px 8px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.5);font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:all .2s;">Yeni
          Kayıt</button>
      </div>
      <!-- Giriş -->
      <div id="tab-giris" style="width:100%;max-width:320px;">
        <form onsubmit="event.preventDefault(); profilHizliGiris();">

          <input class="profil-inp" type="tel" id="pg_tel_giris" placeholder="Telefon (05XX XXX XX XX)" maxlength="15"
            autocomplete="tel" oninput="window.telMaskele?.(this)">
          <input class="profil-inp" type="password" id="pg_sifre_giris" placeholder="Şifreniz"
            autocomplete="current-password">
          <button type="submit" class="profil-btn">Giriş Yap →</button>
        </form>
        <div class="profil-hata" id="pgHataGiris"></div>
        <div style="text-align:center;margin-top:12px;">
          <button id="btn-sifremi-unuttum"
            style="background:transparent;border:none;color:rgba(255,255,255,.8);font-family:'Jost',sans-serif;font-size:.64rem;letter-spacing:1px;cursor:pointer;text-decoration:underline;">Şifremi
            Unuttum</button>
        </div>
      </div>
      <!-- Kayıt -->
      <div id="tab-kayit" style="display:none;width:100%;max-width:320px;">
        <div id="kayit_ana_form">
          <form onsubmit="event.preventDefault(); profilKayitOl();" id="frm_kayit_ana">
            <div style="display:flex;gap:8px;">
              <input class="profil-inp" type="text" id="pg_kayit_isim" placeholder="Adınız"
                style="flex:1;margin-bottom:0;" autocomplete="given-name">
              <input class="profil-inp" type="text" id="pg_kayit_soyisim" placeholder="Soyadınız"
                style="flex:1;margin-bottom:0;" autocomplete="family-name">
            </div>
            <input class="profil-inp" type="email" id="pg_kayit_email" placeholder="E-posta"
              autocomplete="email">
            <input class="profil-inp" type="tel" id="pg_kayit_tel" placeholder="Telefon" autocomplete="tel"
              oninput="window.telMaskele?.(this)">
            <input class="profil-inp" type="text" id="pg_kayit_dogum" placeholder="Doğum Günü" autocomplete="bday">
            <input class="profil-inp" type="text" id="pg_kayit_davet" placeholder="Davet Kodu (Opsiyonel)"
              style="text-transform:uppercase;" autocomplete="off">
            <input class="profil-inp" type="password" id="pg_kayit_sifre" placeholder="Şifre"
              autocomplete="new-password">
            <input class="profil-inp" type="password" id="pg_kayit_sifre2" placeholder="Şifre tekrar"
              autocomplete="new-password">
            <button type="submit" class="profil-btn" id="btn-kayit-sms-gonder">Kayıt Ol →</button>
          </form>
        </div>

        <div class="profil-hata" id="pgHataKayit"></div>
      </div>
      <div style="text-align:center;margin-top:20px">
        <button class="geri-btn" id="btn-profil-geri"
          style="background:#111111; color:#ffffff; border:none; padding:10px 20px; border-radius:4px; font-weight: 500; cursor: pointer;">←
          Ana Sayfaya Dön</button>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     MÜŞTERİ PROFİL SAYFASI
════════════════════════════════════════════ -->
  <div class="ekran" id="profil-sayfa">
    <div class="profil-header">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
        <div>
          <div class="profil-isim" id="ps_isim">Hoş Geldiniz</div>
          <!-- rozet kaldırıldı -->
        </div>
        <button id="btn-profil-cikis"
          style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);padding:8px 12px;font-family:'Jost',sans-serif;font-size:.56rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:2px;">Çıkış</button>
      </div>
      <div class="profil-puan-kutu">
        <div>
          <div class="profil-puan-sayi" id="ps_puan">0</div>
          <div class="profil-puan-lbl">Puan Bakiyesi</div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:.64rem;color:rgba(255,255,255,.4);" id="ps_ziyaret">0 Ziyaret</div>
          <div style="font-size:.64rem;color:rgba(255,255,255,.4);margin-top:4px;" id="ps_uyelik">Üyelik: —</div>
        </div>
      </div>
      <button id="btn-profil-randevu-al"
        style="width:100%;background:var(--yaz);color:var(--beyaz);border:1px solid rgba(255,255,255,0.1);padding:14px;font-family:'Jost',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:3px;text-transform:uppercase;cursor:pointer;border-radius:2px;margin-top:14px;min-height:50px;">✂️
        Hemen Randevu Al</button>
    </div>
    <div class="scroll" style="background:var(--krem);">
      <div style="padding:14px;">
        <!-- Aktif Randevular -->
        <div class="a-kart" id="ps_aktifR_wrap">
          <div class="a-kart-b">📅 Aktif Randevularım</div>
          <div id="ps_aktifR"></div>
        </div>
        <!-- Geçmiş İşlemler -->
        <div class="a-kart">
          <div class="a-kart-b">✂️ Son İşlemlerim</div>
          <div id="ps_gecmis"></div>
        </div>
        <!-- Madde 11: Davet sistemi -->
        <div class="a-kart" id="ps_davet_k"></div>
        <!-- Madde 12: Google Yorum -->
        <div class="a-kart" id="ps_yorum_k"></div>
        <!-- Puan Programı -->
        <div class="a-kart">
          <div class="a-kart-b">⭐ Puan Programı</div>
          <div class="is-s"><span style="color:var(--sil)">Her 100 ₺ harcama</span><span>= 10 Puan</span></div>
          <div class="is-s"><span style="color:var(--sil)">🎁 Hoş Geldin Hediyesi</span><span style="color:#8a6020">50
              Puan</span></div>
          <div class="is-s"><span style="color:var(--sil)">👥 Arkadaş Daveti</span><span style="color:#8a6020">+50
              Puan</span></div>
          <div class="is-s"><span style="color:var(--sil)">⭐ Google Yorum</span><span style="color:#8a6020">+50
              Puan</span></div>
          <div style="font-size:.62rem;color:var(--sil);margin-top:8px;line-height:1.6;">Puanlar sadece kasada, admin
            tarafından uygulanır.</div>
        </div>
        <!-- WhatsApp Destek -->
        <div class="a-kart"
          style="text-align:center; padding: 24px 18px; border:none; background:transparent; box-shadow:none;">
          <div style="font-size: 1.8rem; margin-bottom: 8px;">💬</div>
          <div class="a-kart-b" style="justify-content:center; border:none; margin-bottom:4px; padding-bottom:0;">
            Yardıma mı ihtiyacınız var?</div>
          <div style="font-size:.72rem;color:var(--sil);margin-bottom:14px;">Randevularınız, işlemler veya puanlarınızla
            ilgili her türlü sorunuz için bize ulaşabilirsiniz.</div>
          <a href="https://wa.me/905332248451" target="_blank" rel="noopener noreferrer"
            style="display:inline-block;background:#25D366;color:#fff;text-decoration:none;padding:12px 24px;border-radius:999px;font-family:'Outfit',sans-serif;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;font-weight:600;">WhatsApp
            Destek</a>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
     SCRIPTS
     Sıra: firebase-config.js (type=module, defer gibi davranır) → app.js → admin.js → auth.js
     firebase-config.js yüklendikten sonra 'fbReady' custom event fırlatır.
     app.js / admin.js / auth.js bu event'i dinleyerek güvenle başlar.
════════════════════════════════════════════ -->
  <!-- 🚀 GERÇEK FIREBASE SDK (v8 compat — global firebase nesnesi) -->
  <script data-cfasync="false" src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script data-cfasync="false" src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
  <script data-cfasync="false" src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

  <!--
  KRİTİK SIRA (defer = DOM'dan sonra, sıraya göre):
  1. app.js     → window fonksiyonları + fbReady dinleyicisi kurulur
  2. firebase-config.js → Firebase başlatılır + auth state listener
  3. auth.js    → giris/kayit fonksiyonları
  4. events.js  → tüm click/input bağlamaları
-->
  <script data-cfasync="false" src="/src/store/store.js"></script>
  <script data-cfasync="false" src="/src/config/app-config.js"></script>
  <script data-cfasync="false" src="/src/utils/validators.js"></script>
  <script data-cfasync="false" src="/src/services/authService.js"></script>
  <script data-cfasync="false" src="/src/services/userService.js"></script>
  <script data-cfasync="false" src="/src/services/edgeApiService.js"></script>
  <script data-cfasync="false" src="/src/services/appointmentService.js"></script>
  <script data-cfasync="false" src="/app.js"></script>

  <!-- ══ KRİTİK: Firebase API Key Enjeksiyonu ══
       Netlify deploy'da bu script'i Build Environment Variable ile doldurabilirsiniz.
       Veya doğrudan buraya yazabilirsiniz — Firebase Web API Key halka açıktır,
       güvenlik Firebase Security Rules tarafından sağlanır.
  -->
  <script>
    window.__APP_CONFIG__ = Object.assign(
      window.__APP_CONFIG__ || {},
      {
        // ⬇️  GERÇEK FIREBASE API KEY'İNİZİ BURAYA YAZIN  ⬇️
        FIREBASE_API_KEY: "AIzaSyA3OpMuVYq-nsJyVsRVtSNn2XWc-_TaH6c"
      }
    );
  </script>

  <script data-cfasync="false" src="/firebase-config.js"></script>
  <script data-cfasync="false" src="/auth.js"></script>
  <script data-cfasync="false" src="/events.js"></script>

  <style>
    /* ── Profil sayfası ek stiller (index.html içi) ── */
    .a-kart {
      background: var(--beyaz);
      border-radius: 16px;
      padding: 18px;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .a-kart-b {
      font-family: 'Outfit', sans-serif;
      font-size: .88rem;
      color: var(--yaz);
      font-weight: 600;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1.5px solid var(--krem2);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .is-s {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid var(--krem2);
      font-size: .82rem;
    }

    .is-s:last-child {
      border-bottom: none;
    }

    .b {
      padding: 8px 12px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: .6rem;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: all .2s;
      min-height: 34px;
    }

    .ba {
      background: var(--indigo);
      color: #fff;
    }

    .ba:hover {
      background: #3730a3;
    }

    .bk {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }

    .bg {
      background: var(--krem);
      color: var(--sil);
      border: 1px solid var(--cz);
    }

    .badge {
      display: inline-block;
      padding: 3px 9px;
      font-size: .52rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      border-radius: 999px;
      font-weight: 600;
    }

    .baj-a {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .baj-t {
      background: #fef3c7;
      color: #92400e;
    }

    .baj-k {
      background: #fee2e2;
      color: #991b1b;
    }

    .bos {
      text-align: center;
      padding: 36px 16px;
      color: var(--cz);
      font-size: .78rem;
    }

    .bos .ico {
      font-size: 1.6rem;
      margin-bottom: 8px;
      opacity: .4;
    }

    /* ── iOS Safari & PWA Optimizasyonları ── */
    button,
    a,
    .ds-bento,
    .odeme-k,
    .b-hiz,
    .hiz-item {
      -webkit-tap-highlight-color: transparent;
      /* Tıklama anındaki gri yanıp sönmeyi kaldırır */
      -webkit-touch-callout: none;
      /* Uzun basılı tutunca çıkan Safari menüsünü gizler */
      user-select: none;
      /* Çift tıklamada istenmeyen metin seçimini engeller */
      -webkit-user-select: none;
    }

    .scroll {
      /* iPhone'un altındaki yatay çizginin (Home Indicator) butonların veya içeriğin üzerine binmesini engeller */
      padding-bottom: env(safe-area-inset-bottom);
    }
  </style>
</body>

</html>