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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />

  <!-- Preconnect & DNS-Prefetch (Consolidated) -->
  <link rel="preconnect" href="https://wsrv.nl" />
  <link rel="preconnect" href="https://media.saffetcelik.com.tr" crossorigin />
  <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin />
  <link rel="dns-prefetch" href="https://www.googletagmanager.com" />

  <!-- Theme Detection Script -->
  <script>
    (function () {
      try {
        const root = document.documentElement;
        const savedTheme = localStorage.getItem('vite-ui-theme');
        root.classList.remove('light', 'dark');
        if (savedTheme === 'dark' || savedTheme === 'light') {
          root.classList.add(savedTheme);
        } else {
          root.classList.add(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        }
      } catch (e) {
        document.documentElement.classList.add(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      }
    })();
  </script>

  <!-- Critical JS Bundle -->

  <!-- Primary Meta Tags -->
  <title>Saffet Çelik - Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı</title>
  <meta name="title" content="Saffet Çelik - Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı" />
  <meta name="description"
    content="Avukatlar ve mahkemeler için yapay zeka destekli hukuki araçlar. UDF dönüştürücü, emsal karar arama, belge özetleme ve 30+ ücretsiz uygulama." />
  <meta name="keywords"
    content="udf dönüştürücü, hukuki teknoloji, yapay zeka hukuk, emsal karar arama, saffet çelik" />
  <meta name="author" content="Saffet Çelik" />

  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="language" content="tr" />
  <meta name="geo.region" content="TR" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://saffetcelik.com.tr/" />
  <meta property="og:title" content="Saffet Çelik - Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı" />
  <meta property="og:description" content="Avukatlar ve mahkemeler için yapay zeka destekli hukuki araçlar." />
  <meta property="og:image" content="https://saffetcelik.com.tr/og.webp" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <meta property="og:locale" content="tr_TR" />
  <meta property="og:site_name" content="Saffet Çelik" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://saffetcelik.com.tr/" />
  <meta property="twitter:title" content="Saffet Çelik - Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı" />
  <meta property="twitter:description" content="Avukatlar ve mahkemeler için yapay zeka destekli hukuki araçlar." />
  <meta property="twitter:image" content="https://saffetcelik.com.tr/og.webp" />
  <meta property="twitter:creator" content="@saffetceliktr" />

  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#3b82f6" />

  <!-- Canonical & RSS -->
  <link rel="canonical" href="https://saffetcelik.com.tr/" />
  <link rel="alternate" type="application/rss+xml" title="Saffet Çelik - Haber RSS"
    href="https://saffetcelik.com.tr/news-rss.xml" />

  <style>
    /* Critical base styles - Sistem fontları kullanılıyor (font-display: swap gereksiz) */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
    }

    body {
      margin: 0;
      background-color: #f9fafb
    }

    #root {
      min-height: 100vh
    }

    /* Critical gradient for hero */
    .gradient-primary {
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%)
    }

    /* Hero section critical styles */
    .text-white {
      color: #fff
    }

    .py-16 {
      padding-top: 4rem;
      padding-bottom: 4rem
    }

    .relative {
      position: relative
    }

    .overflow-hidden {
      overflow: hidden
    }

    .max-w-7xl {
      max-width: 80rem
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem
    }

    .grid {
      display: grid
    }

    .items-center {
      align-items: center
    }

    .gap-12 {
      gap: 3rem
    }

    .font-bold {
      font-weight: 700
    }

    .text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem
    }

    .mb-6 {
      margin-bottom: 1.5rem
    }

    .leading-tight {
      line-height: 1.25
    }

    /* Loading spinner */
    .animate-spin {
      animation: spin 1s linear infinite
    }

    @keyframes spin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    /* Prevent layout shift - LCP image */
    img {
      max-width: 100%;
      height: auto;
      display: block
    }

    /* Button critical styles */
    .rounded-xl {
      border-radius: 0.75rem
    }

    .px-8 {
      padding-left: 2rem;
      padding-right: 2rem
    }

    .py-4 {
      padding-top: 1rem;
      padding-bottom: 1rem
    }

    .min-h-\[52px\] {
      min-height: 52px
    }

    .bg-white {
      background-color: #fff
    }

    .text-blue-600 {
      color: #2563eb
    }

    .font-semibold {
      font-weight: 600
    }

    /* Dark mode base */
    @media(prefers-color-scheme:dark) {
      body {
        background-color: #111827
      }
      /* SSR skeleton dark mode - CLS önleme */
      #ssr-skeleton {
        background: #111827 !important;
      }
    }

    /* Mobile responsive */
    @media(min-width:1024px) {
      .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
      }

      .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1
      }
    }

    /* 🚀 CLS Prevention - Sayfa zıplamasını kesinlikle önleyen stiller */

    /* 1. Projeler Alanını Sabitle - Skeleton yaklaşımı ile CLS 0
         Not: min-height: 100vh vererek ekranda her zaman en az 1 viewport yer ayrılıyor */
    #projects {
      min-height: 100vh !important;
      height: auto;
      overflow: hidden;
      box-sizing: border-box
    }

    #projects .grid {
      min-height: 600px !important;
      display: grid
    }

    #projects .grid>div,
    #projects .grid>a {
      min-height: 280px !important;
      box-sizing: border-box
    }

    @media(max-width:1024px) {
      #projects {
        min-height: 100vh !important
      }
    }

    @media(max-width:768px) {
      #projects {
        min-height: 100vh !important
      }
    }

    /* 2. Hero/Profil Görselini Sabitle - aspect-ratio ile oran kilidi */
    img[src*="sc.webp"] {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 690/884 !important;
      min-height: 350px !important;
      -o-object-fit: cover !important;
         object-fit: cover !important
    }

    /* 3. About section sabitlenmesi */
    #about {
      min-height: 700px !important;
      box-sizing: border-box
    }

    @media(max-width:768px) {
      #about {
        min-height: 1000px !important
      }
    }

    /* 4. Sayfa yüklenirken render optimizasyonu */
    /* body{content-visibility:auto} -- KALDIRILDI: position:fixed elementler icin containing block olusturuyor ve dialog/toast/modal konumlarini bozuyor */

    /* 5. Blog sayfası CLS önleme */
    /* 5.1 Blog kartları resim alanı */
    [class*="aspect-[16"] {
      aspect-ratio: 16/9;
      min-height: 150px;
      contain: layout;
      background: #e5e7eb
    }

    .dark [class*="aspect-[16"] {
      background: #374151
    }

    /* 5.4 Blog list view kartları */
    .blog-card-list {
      min-height: 192px;
      contain: layout style
    }

    @media(min-width:640px) {
      .blog-card-list {
        min-height: 224px
      }
    }

    /* 5.5 Blog grid view kartları */
    .blog-card-grid {
      min-height: 380px;
      contain: layout style
    }

    /* 5.6 Sidebar alanı */
    .blog-sidebar {
      min-height: 400px;
      contain: layout style
    }

    /* 7. Blog resimlerini kilitle */

    .blog-image-wrapper img,
    article img {
      aspect-ratio: 16/9 !important;
      width: 100% !important;
      height: auto !important;
      display: block !important;
      background: #eee !important;
      -o-object-fit: cover !important;
         object-fit: cover !important
    }

    /* 8. Ana içerik - CLS önleme */
    main {
      display: block
    }

    /* 9. Hero Image Wrapper - LCP görseli için sabit alan */
    .hero-image-wrapper {
      aspect-ratio: 16/9;
      background-color: #e5e7eb;
      width: 100%;
      overflow: hidden;
      display: block;
      contain: layout style
    }

    .dark .hero-image-wrapper {
      background-color: #374151
    }

    img.hero-image {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      display: block
    }

    /* 10. Header sabit yükseklik - CLS önleme */
    header {
      min-height: 52px;
      contain: layout;
    }

    @media(min-width:768px) {
      header {
        min-height: 52px
      }
    }

    /* 11. Footer sabit yükseklik */
    footer {
      min-height: 200px;
      contain: layout;
    }

    /* 12. Card bileşenleri için temel stiller */
    .card,
    [class*="Card"] {
      contain: layout style;
      overflow: hidden
    }

    /* 13. Skeleton/Loading durumları için placeholder */
    .skeleton,
    .animate-pulse {
      background: linear-gradient(90deg, #f0f0f0 25%, #e5e5e5 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite
    }

    .dark .skeleton,
    .dark .animate-pulse {
      background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
      background-size: 200% 100%
    }

    @keyframes skeleton-shimmer {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    /* 14. Tüm görseller için aspect-ratio koruması */
    img[loading="lazy"] {
      background: #e5e7eb;
      min-height: 100px
    }

    .dark img[loading="lazy"] {
      background: #374151
    }

    /* 15. Main content area - Blog sayfası için */
    main[class*="max-w-7xl"] {
      min-height: calc(100vh - 96px)
    }

    /* 16. Homepage Content Area - CLS önleme */
    .flex.flex-col.lg\:flex-row.gap-5.mt-4 {
      min-height: 800px
    }

    /* 17. Sidebar - CLS önleme */
    aside.w-full.lg\:w-72 {
      min-height: 400px
    }

    /* 18. Theme Toggle - CLS önleme */
    .theme-toggle {
      width: 48px;
      height: 24px;
      display: inline-block
    }

    /* 19. News Slider Wrapper - CLS önleme (SSR ile uyumlu) */
    .news-slider-wrapper {
      aspect-ratio: 16/9;
      background: #f3f4f6;
      border-radius: 1rem;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .news-slider-wrapper {
        aspect-ratio: 21/9;
      }
    }

    @media (min-width: 1024px) {
      .news-slider-wrapper {
        aspect-ratio: 25/9;
      }
    }

    .dark .news-slider-wrapper {
      background: #1f2937
    }

    /* 20. Tabs Bar Wrapper - CLS önleme */
    .tabs-bar-wrapper {
      min-height: 68px
    }
  </style>



  <!-- Google Analytics 4 - G-KRC4CXT5PE (Ertelenmiş yükleme - FCP/LCP optimizasyonu) -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { window.dataLayer.push(arguments); }
    window.gtag = gtag;
    gtag('js', new Date());
    gtag('config', 'G-KRC4CXT5PE', {
      send_page_view: true,
      anonymize_ip: true,
      linker: {
        domains: [
          'saffetcelik.com.tr',
          'bilirkisilik.saffetcelik.com.tr',
          'hesap.saffetcelik.com.tr',
          'ozet.saffetcelik.com.tr',
          'uzlastirma.saffetcelik.com.tr'
        ]
      }
    });
    // GA script'ini sayfa idle olunca yükle (146 KiB render'ı bloklamaz)
    function __loadGA() {
      var s = document.createElement('script');
      s.src = 'https://www.googletagmanager.com/gtag/js?id=G-KRC4CXT5PE';
      s.async = true;
      document.head.appendChild(s);
    }
    if ('requestIdleCallback' in window) {
      requestIdleCallback(__loadGA);
    } else {
      setTimeout(__loadGA, 3000);
    }
  </script>

  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Saffet Çelik",
      "jobTitle": "Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı",
      "description": "Avukatlar ve mahkemeler için yapay zeka destekli hukuki araçlar geliştiren uzman. UDF dönüştürücü, emsal karar arama, belge özetleme ve 30+ ücretsiz uygulama.",
      "url": "https://saffetcelik.com.tr/",
      "email": "iletisim@saffetcelik.com.tr",
      "sameAs": [
        "https://github.com/saffetcelik",
        "https://twitter.com/saffetceliktr",
        "https://instagram.com/saffetcelik.com.tr",
        "https://youtube.com/@saffetceliktr"
      ],
      "knowsAbout": [
        "Hukuki Teknoloji",
        "Yapay Zeka",
        "Web Geliştirme",
        "Masaüstü Uygulamaları",
        "Otomasyon Sistemleri",
        "React",
        "JavaScript",
        "Python",
        "Electron"
      ],
      "worksFor": {
        "@type": "Organization",
        "name": "Freelance"
      }
    }
    </script>
  <script type="module" crossorigin src="/assets/index-B2jifrG5.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-Cxk3uHXI.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-query-CJANN5QY.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-radix-Ba4HgrcW.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-icons-BWMUCoNM.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-forms-D1AdWoUk.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-motion-DW9he5fk.js">
  <link rel="preload" as="style" href="/assets/index-Ccx8TwWO.css" onload="this.onload=null;this.rel='stylesheet'" crossorigin ><noscript><link rel="stylesheet" href="/assets/index-Ccx8TwWO.css" crossorigin ></noscript>
</head>

<body>
  <div id="root"></div>

  <noscript>
    <div style="padding: 20px; text-align: center;">
      <h1>Saffet Çelik - Hukuki Teknoloji & Yapay Zeka Otomasyon Uzmanı</h1>
      <p>Web sitemizi tam özellikleriyle kullanabilmek için lütfen tarayıcınızda JavaScript'i etkinleştirin.</p>
      <nav>
        <ul style="list-style: none; padding: 0;">
          <li><a href="/uygulamalar">Hukuki Uygulamalar</a></li>
          <li><a href="/blog">Hukuk ve Teknoloji Yazıları</a></li>
          <li><a href="/haberler">Güncel Hukuk Haberleri</a></li>
          <li><a href="/iletisim">İletişim</a></li>
        </ul>
      </nav>
    </div>
  </noscript>
</body>

</html>