<!doctype html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/profilephoto.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    <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="black-translucent">
    <meta name="theme-color" content="#ffffff">
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/profilephoto.png" />
    <title>eWorks Studio</title>

    <!-- Firma adı + nav sekme fontları (Austin yoksa DM Serif Display) -->
    <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=Berkshire+Swash&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />

    <!-- Preload login logos so they paint with the form -->
    <link rel="preload" as="image" type="image/webp" href="/home-partner-logo-sm.webp?v=202608131">
    <link rel="preload" as="image" type="image/webp" href="/app-store-badges-sm.webp?v=202608131">

    <style>
      /* System fonts for better performance in WKWebView */
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }
    </style>
    
    <style>
      /* Full-width app styling */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html:not(.android-webview), body:not(.android-webview) {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        background-color: white;
      }

      body:not(.android-webview) #root {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        background-color: white;
      }

      /* Android WebView: match iOS layout */
      html.android-webview, body.android-webview {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        background-color: white;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
             text-size-adjust: 100%;
      }

      body.android-webview #root {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        background-color: white;
      }

      /* Mobile optimizations */
      html {
        font-size: 14px;
      }

      body {
        font-size: 14px;
        line-height: 1.4;
      }


      /* Prevent iframe scrolling issues */
      body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
        touch-action: pan-x pan-y;
      }

      /* Prevent bottom bar from moving */
      * {
        overscroll-behavior: contain;
      }
    </style>
    <style>
      /* Inline splash screen - shows immediately on page load */
      #initial-splash {
        position: fixed;
        inset: 0;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        animation: fadeIn 0.3s ease-in;
      }

      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes splash-logo-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
      }

      @keyframes splash-dot-wave {
        0%, 80%, 100% {
          transform: translateY(0) scale(0.72);
          opacity: 0.28;
          box-shadow: 0 0 0 0 rgba(242, 138, 46, 0);
        }
        40% {
          transform: translateY(-6px) scale(1);
          opacity: 1;
          box-shadow: 0 4px 10px rgba(242, 138, 46, 0.35);
        }
      }

      #initial-splash img {
        width: auto;
        height: 80px;
        max-width: min(92vw, 28rem);
        -o-object-fit: contain;
           object-fit: contain;
        margin-bottom: 24px;
      }

      #initial-splash .splash-dots {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        height: 18px;
      }

      #initial-splash .splash-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #f28a2e;
        animation: splash-dot-wave 1.15s cubic-bezier(0.45, 0, 0.2, 1) infinite;
      }

      #initial-splash .splash-dot:nth-child(1) { animation-delay: 0ms; }
      #initial-splash .splash-dot:nth-child(2) { animation-delay: 140ms; }
      #initial-splash .splash-dot:nth-child(3) { animation-delay: 280ms; }

      #initial-splash .splash-loading-text {
        margin-top: 16px;
        font-size: 18px;
        font-weight: 500;
        background: linear-gradient(90deg, #4b5563, #b45309);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      /* Hide splash when React loads */
      .app-loaded #initial-splash {
        display: none;
      }

      #initial-splash.boot-login-mode {
        justify-content: center;
        padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
      }

      #boot-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #boot-login {
        display: none;
        width: 100%;
        max-width: 24rem;
      }

      #initial-splash.boot-login-mode #boot-loading {
        display: none;
      }

      #initial-splash.boot-login-mode #boot-login {
        display: block;
      }

      #initial-splash .boot-login-card img {
        height: 96px;
        margin: 0 auto 1rem;
        animation: none;
      }

      .boot-login-card {
        background: #fff;
        border-radius: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
      }

      .boot-login-card .boot-login-lead {
        text-align: center;
        color: #4b5563;
        font-size: 14px;
        margin-bottom: 1.5rem;
      }

      .boot-login-card label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 4px;
      }

      .boot-login-card input[type="text"],
      .boot-login-card input[type="password"] {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 16px;
        margin-bottom: 14px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
      }

      .boot-login-remember {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        color: #374151;
      }

      .boot-login-card button[type="submit"] {
        width: 100%;
        padding: 12px 16px;
        border: 0;
        border-radius: 12px;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        background: linear-gradient(90deg, #4b5563, #b45309);
      }

      .boot-login-card .boot-login-stores {
        display: block;
        height: 30px;
        width: auto;
        max-width: 100%;
        margin: 18px auto 0;
        -o-object-fit: contain;
           object-fit: contain;
        animation: none;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-D9VgA7aK.js"></script>
    <link rel="preload" as="style" href="/assets/index-CSOO57AS.css" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/assets/index-CSOO57AS.css"></noscript>>
  </head>
  <body>
    <!-- Inline splash: loading if session exists, login form otherwise (before JS bundle) -->
    <div id="initial-splash">
      <div id="boot-loading">
        <img src="/home-partner-logo-sm.webp?v=202608131" alt="eWorks Studio" />
        <div class="splash-dots">
          <span class="splash-dot"></span>
          <span class="splash-dot"></span>
          <span class="splash-dot"></span>
        </div>
        <div class="splash-loading-text">Yükleniyor...</div>
      </div>
      <div id="boot-login">
        <div class="boot-login-card">
          <img src="/home-partner-logo-sm.webp?v=202608131" alt="eWorks Studio" />
          <p class="boot-login-lead">Hesabınıza giriş yapın</p>
          <form id="boot-login-form" autocomplete="on">
            <label for="boot-username">Kullanıcı Adı</label>
            <input id="boot-username" name="username" type="text" maxlength="50" autocomplete="username" spellcheck="false" placeholder="Kullanıcı adınızı girin" />
            <label for="boot-password">Şifre</label>
            <input id="boot-password" name="password" type="password" autocomplete="current-password" placeholder="Şifrenizi girin" />
            <label class="boot-login-remember">
              <input id="boot-remember" name="remember-me" type="checkbox" />
              Beni hatırla
            </label>
            <button type="submit">Giriş Yap</button>
          </form>
          <img
            class="boot-login-stores"
            src="/app-store-badges-sm.webp?v=202608131"
            alt="App Store and Google Play"
            width="646"
            height="96"
          />
        </div>
      </div>
    </div>

    <div id="root"></div>
    <script>
      (function () {
        window.__eworksBootLogin = { username: '', password: '', rememberMe: false, submitted: false };
        var path = (location.pathname || '/').replace(/\/+$/, '') || '/';
        var publicPath =
          path === '/tanitim' ||
          path === '/privacy-policy' ||
          path === '/sales-agreement' ||
          path === '/kvkk' ||
          path === '/membership-agreement' ||
          path === '/delivery-terms' ||
          path.indexOf('/shared-calendar/') === 0 ||
          path.indexOf('/shared-contract/') === 0 ||
          path.indexOf('/shared-offer/') === 0 ||
          path.indexOf('/gallery/') === 0 ||
          path.indexOf('/portal/') === 0;
        var cookies = document.cookie || '';
        var hasSession =
          cookies.indexOf('eworks_has_session=') !== -1 ||
          cookies.indexOf('eworks_refresh_token_js=') !== -1;
        if (publicPath || hasSession) return;

        var splash = document.getElementById('initial-splash');
        if (splash) splash.classList.add('boot-login-mode');

        try {
          if (localStorage.getItem('rememberMe') === 'true') {
            var savedUser = localStorage.getItem('rememberedUsername') || '';
            var savedPass = localStorage.getItem('rememberedPassword') || '';
            var userInput = document.getElementById('boot-username');
            var passInput = document.getElementById('boot-password');
            var rememberInput = document.getElementById('boot-remember');
            if (userInput) userInput.value = savedUser;
            if (passInput) passInput.value = savedPass;
            if (rememberInput) rememberInput.checked = true;
            window.__eworksBootLogin.username = savedUser;
            window.__eworksBootLogin.password = savedPass;
            window.__eworksBootLogin.rememberMe = true;
          }
        } catch (e) {}

        function syncBootLogin() {
          var userInput = document.getElementById('boot-username');
          var passInput = document.getElementById('boot-password');
          var rememberInput = document.getElementById('boot-remember');
          window.__eworksBootLogin.username = userInput ? userInput.value : '';
          window.__eworksBootLogin.password = passInput ? passInput.value : '';
          window.__eworksBootLogin.rememberMe = !!(rememberInput && rememberInput.checked);
        }

        var form = document.getElementById('boot-login-form');
        if (form) {
          form.addEventListener('input', syncBootLogin);
          form.addEventListener('submit', function (e) {
            e.preventDefault();
            syncBootLogin();
            window.__eworksBootLogin.submitted = true;
            var btn = form.querySelector('button[type="submit"]');
            if (btn) {
              btn.disabled = true;
              btn.textContent = 'Giriş yapılıyor...';
            }
          });
        }
      })();
    </script>
    
    <script>
      // WKWebView optimization (only for iOS WebView)
      const userAgent = navigator.userAgent || '';
      const isAndroidApp = userAgent.includes('EworksAndroidApp') || (/Android/i.test(userAgent) && /wv/.test(userAgent));
      const isIOSDevice = /iPhone|iPad|iPod/.test(userAgent);
      if (isIOSDevice && !isAndroidApp) {
        console.log('📱 Running in iOS WKWebView mode');
      }
      if (isAndroidApp) {
        document.documentElement.classList.add('android-webview');
        document.body.classList.add('android-webview');
        const unregisterAndroidServiceWorker = () => {
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations()
              .then((registrations) => {
                registrations.forEach((registration) => registration.unregister());
              })
              .catch(() => {});
          }
          if ('caches' in window) {
            caches.keys()
              .then((keys) => keys.forEach((key) => caches.delete(key)))
              .catch(() => {});
          }
        };
        const hideSplash = () => {
          const splash = document.getElementById('initial-splash');
          if (splash && splash.classList.contains('boot-login-mode')) {
            return;
          }
          if (splash) {
            splash.remove();
          }
          document.body.classList.add('app-loaded');
        };
        unregisterAndroidServiceWorker();
        const hideSplashIfRendered = () => {
          const splash = document.getElementById('initial-splash');
          if (!splash) return;
          const root = document.getElementById('root');
          const hasContent = !!(root && root.children.length > 0);
          if (hasContent) {
            splash.remove();
            document.body.classList.add('app-loaded');
          }
        };
        hideSplash();
        document.addEventListener('DOMContentLoaded', hideSplash, { once: true });
        window.addEventListener('load', hideSplash, { once: true });
        window.addEventListener('load', unregisterAndroidServiceWorker, { once: true });
        window.setTimeout(hideSplash, 500);
        const splashInterval = window.setInterval(() => {
          hideSplashIfRendered();
          const splash = document.getElementById('initial-splash');
          if (!splash) {
            window.clearInterval(splashInterval);
          }
        }, 500);
      }

      // Debug localStorage availability
      try {
        localStorage.setItem('test', 'test');
        localStorage.removeItem('test');
        console.log('💾 localStorage is available');
      } catch (e) {
        console.warn('❌ localStorage is not available:', e);
      }

      // Debug safe area insets
      setTimeout(() => {
        const root = document.documentElement;
        const style = getComputedStyle(root);
        console.log('🔍 Safe Area Debug:');
        console.log('  - Top:', style.getPropertyValue('--safe-area-inset-top'));
        console.log('  - Bottom:', style.getPropertyValue('--safe-area-inset-bottom'));
        console.log('  - Left:', style.getPropertyValue('--safe-area-inset-left'));
        console.log('  - Right:', style.getPropertyValue('--safe-area-inset-right'));
        console.log('  - Window Height:', window.innerHeight);
        console.log('  - Screen Height:', window.screen.height);
      }, 1000);
    </script>
  </body>
</html>