<!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.0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="cache-control" content="no-cache" />
    <meta name="expires" content="0" />
    <meta name="pragma" content="no-cache" />
    <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>

    <!-- Preload critical resources -->
    <link rel="preload" as="image" href="/home-partner-logo.png?v=202606273">

    <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;
      }

      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;
      }

      /* Handle safe area insets for iOS */
      @supports (padding: env(safe-area-inset-bottom)) {
        body {
          padding-bottom: env(safe-area-inset-bottom);
        }
      }
    </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 pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }

      @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }

      #initial-splash img {
        width: auto;
        height: 80px;
        max-width: min(92vw, 28rem);
        -o-object-fit: contain;
           object-fit: contain;
        margin-bottom: 24px;
        animation: pulse 2s ease-in-out infinite;
      }

      #initial-splash .dots {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }

      #initial-splash .dot {
        width: 8px;
        height: 8px;
        background: linear-gradient(to right, #4b5563, #b45309);
        border-radius: 50%;
        animation: bounce 1.4s ease-in-out infinite;
      }

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

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

      /* Hide splash when React loads */
      .app-loaded #initial-splash {
        display: none;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-CCkNXsGP.js"></script>
    <link rel="preload" as="style" href="/assets/index-CqH2foJ0.css" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/assets/index-CqH2foJ0.css"></noscript>>
  </head>
  <body>
    <!-- Inline splash screen - visible immediately -->
    <div id="initial-splash">
      <img src="/home-partner-logo.png?v=202606273" alt="eWorks Studio" />
      <div class="dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div class="text">Yükleniyor...</div>
    </div>

    <div id="root"></div>
    
    <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.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>