# Header & Footer Entegrasyonu

TYPO3 **v13** (13.4.x) için Play Tailwind (tema2) temasından Header ve Footer bileşenlerinin Fluid Template'e entegrasyonu rehberi. Bu belgedeki yol, modül adları ve teknik yapı **yalnızca TYPO3 v13** ile uyumludur.

---

## İçindekiler

1. [Tema Analizi](#tema-analizi)
2. [Dosya Yapısı](#dosya-yapısı)
3. [Tailwind CSS 4.0 Entegrasyonu](#tailwind-css-40-entegrasyonu)
4. [Header Dönüşümü](#header-dönüşümü)
5. [Footer Dönüşümü](#footer-dönüşümü)
6. [Layout Yapısı](#layout-yapısı)
7. [Dinamik Menü Entegrasyonu](#dinamik-menü-entegrasyonu)
   - [Header'da menü nasıl eklenir](#headerda-menü-nasıl-eklenir)
8. [Dark Mode Desteği](#dark-mode-desteği)
9. [JavaScript Entegrasyonu](#javascript-entegrasyonu)
10. [Dinamik Logo Yönetimi](#dinamik-logo-yönetimi-site-settings)
11. [Header sosyal medya linkleri (dinamik)](#header-sosyal-medya-linkleri-dinamik)

---

## Tema Analizi

### Kaynak Tema: Play Tailwind (tema2)

| Özellik        | Değer                             |
| -------------- | --------------------------------- |
| **Framework**  | Statik HTML                       |
| **CSS**        | Tailwind CSS 4.0                  |
| **Animasyon**  | WOW.js, Swiper                    |
| **Font**       | Inter (Google Fonts)              |
| **Özellikler** | Dark Mode, Sticky Header, Submenu |

### Tema Dizin Yapısı

```
tema2/
├── index.html              ← Ana sayfa (Header/Footer dahil)
├── src/
│   ├── input.css           ← Tailwind tema konfigürasyonu
│   └── css/
│       └── tailwind.css    ← Derlenmiş CSS
├── assets/
│   ├── images/
│   │   ├── logo/
│   │   │   ├── logo.svg
│   │   │   └── logo-white.svg
│   │   ├── footer/
│   │   │   ├── shape-1.svg
│   │   │   └── shape-3.svg
│   │   └── ...
│   ├── css/
│   │   ├── swiper-bundle.min.css
│   │   └── animate.css
│   └── js/
│       ├── main.js
│       ├── wow.min.js
│       └── swiper-bundle.min.js
└── package.json
```

---

## Dosya Yapısı

### TYPO3 v13 Site Package Yapısı (Sets)

v13’te site paketi **Sets** kullanır; TypoScript ve ayarlar bir Set altında toplanır. Aşağıdaki yapı TYPO3 v13 projesine uygundur.

```
packages/testproject/
├── Configuration/
│   ├── Sets/
│   │   └── SitePackage/
│   │       ├── config.yaml
│   │       ├── settings.yaml            # Constants (site.logo, site.social, page.*)
│   │       ├── setup.typoscript
│   │       ├── page.tsconfig
│   │       ├── TypoScript/
│   │       │   ├── page.typoscript      # PAGE + PAGEVIEW, dataProcessing
│   │       │   └── config.typoscript
│   │       └── PageTsConfig/BackendLayouts/
│   ├── Services.yaml                    # DataProcessor (root-page-logo)
│   └── RTE/
├── Resources/
│   ├── Private/
│   │   ├── Layouts/
│   │   │   └── Default.html
│   │   ├── Templates/
│   │   │   └── Page/
│   │   │       └── Default.html
│   │   └── Partials/
│   │       ├── Header.html
│   │       ├── Footer.html
│   │       └── Navigation/
│   │           ├── Main.html
│   │           ├── Mobile.html
│   │           └── Submenu.html
│   └── Public/
│       ├── Css/
│       │   ├── tailwind.css
│       │   ├── swiper-bundle.min.css
│       │   └── animate.css
│       ├── JavaScript/
│       │   ├── main.js
│       │   ├── wow.min.js
│       │   └── swiper-bundle.min.js
│       └── Images/
│           ├── logo/
│           │   ├── logo.svg
│           │   └── logo-white.svg
│           └── footer/
│               ├── shape-1.svg
│               └── shape-3.svg
└── ext_emconf.php
```

**TYPO3 v13 notu:** Şablonlar `Resources/Private/PageView/` (Layouts, Partials) altındadır; Constants ayrı dosyada değil **Set** içindeki `settings.yaml` ile tanımlanır. Sayfa çıktısı **PAGEVIEW** content object ile üretilir.

---

## Tailwind CSS 4.0 Entegrasyonu

### Tema Renkleri (input.css'den)

```css
@theme {
  /* Renkler */
  --color-black: #212b36;
  --color-dark-700: #090e34b3;
  --color-dark: #111928;
  --color-dark-2: #1f2a37;
  --color-dark-3: #374151;
  --color-dark-4: #4b5563;
  --color-dark-5: #6b7280;
  --color-dark-6: #9ca3af;
  --color-dark-7: #d1d5db;
  --color-dark-8: #e5e7eb;
  --color-primary: #3758f9;
  --color-blue-dark: #1b44c8;
  --color-secondary: #13c296;
  --color-body-color: #637381;
  --color-body-secondary: #8899a8;
  --color-warning: #fbbf24;
  --color-stroke: #dfe4ea;
  --color-gray-1: #f9fafb;
  --color-gray-2: #f3f4f6;
  --color-gray-7: #ced4da;

  /* Gölgeler */
  --shadow-input: 0px 7px 20px rgba(0, 0, 0, 0.03);
  --shadow-form: 0px 1px 55px -11px rgba(0, 0, 0, 0.01);
  --shadow-pricing: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
  --shadow-1: 0px 1px 3px 0px rgba(166, 175, 195, 0.4);
  --shadow-2: 0px 5px 12px 0px rgba(0, 0, 0, 0.1);
}
```

### Sticky Header Stilleri

```css
.sticky {
  @apply fixed transition z-9999 bg-white/80 dark:bg-dark/80;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sticky .navbar-logo {
  @apply py-2;
}

.sticky #navbarToggler span {
  @apply bg-dark dark:bg-white;
}

.sticky #navbarCollapse li > a {
  @apply text-dark dark:text-white hover:text-primary dark:hover:text-primary hover:opacity-100;
}

.sticky .loginBtn {
  @apply text-dark dark:text-white hover:text-primary dark:hover:text-primary hover:opacity-100;
}

.sticky .signUpBtn {
  @apply text-white bg-primary hover:bg-blue-dark hover:text-white;
}
```

---

## Header Dönüşümü

### Orijinal HTML Yapısı

```html
<div
  class="absolute top-0 left-0 z-40 flex items-center w-full bg-transparent ud-header"
>
  <div class="container px-4 mx-auto">
    <div class="relative flex items-center justify-between -mx-4">
      <!-- Logo -->
      <div class="max-w-full px-4 w-60">
        <a href="index.html" class="block w-full py-5 navbar-logo">
          <img
            src="assets/images/logo/logo-white.svg"
            alt="logo"
            class="w-full header-logo"
          />
        </a>
      </div>

      <!-- Navigation -->
      <div class="flex items-center justify-between w-full px-4">
        <!-- Mobile Toggle -->
        <button id="navbarToggler" class="...">
          <span class="..."></span>
          <span class="..."></span>
          <span class="..."></span>
        </button>

        <!-- Nav Menu -->
        <nav id="navbarCollapse" class="...">
          <ul class="blcok lg:flex 2xl:ml-20">
            <!-- Menu Items -->
          </ul>
        </nav>
      </div>

      <!-- Auth Buttons -->
      <div class="flex items-center justify-end pr-16 lg:pr-0">
        <!-- Theme Switcher -->
        <!-- Sign In / Sign Up -->
      </div>
    </div>
  </div>
</div>
```

### Dönüştürülmüş Fluid Template

```html
<!-- Resources/Private/Partials/Header.html -->
<html
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
  data-namespace-typo3-fluid="true"
>
  <div
    id="ud-header"
    class="absolute top-0 left-0 z-40 flex items-center w-full bg-transparent ud-header"
  >
    <div class="container px-4 mx-auto">
      <div class="relative flex items-center justify-between -mx-4">
        <!-- Logo -->
        <div class="max-w-full px-4 w-60">
          <a
            href="{f:uri.page(pageUid: settings.rootPageId)}"
            class="block w-full py-5 navbar-logo"
          >
            <img
              src="{f:uri.resource(path: 'Images/logo/logo-white.svg', extensionName: 'my_sitepackage')}"
              alt="{settings.siteName}"
              class="w-full header-logo dark:block"
              id="logo-light"
            />
            <img
              src="{f:uri.resource(path: 'Images/logo/logo.svg', extensionName: 'my_sitepackage')}"
              alt="{settings.siteName}"
              class="w-full header-logo hidden"
              id="logo-dark"
            />
          </a>
        </div>

        <!-- Navigation Container -->
        <div class="flex items-center justify-between w-full px-4">
          <!-- Mobile Toggle Button -->
          <button
            id="navbarToggler"
            class="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden"
            aria-label="Toggle Navigation"
          >
            <span
              class="relative my-[6px] block h-[2px] w-[30px] bg-white"
            ></span>
            <span
              class="relative my-[6px] block h-[2px] w-[30px] bg-white"
            ></span>
            <span
              class="relative my-[6px] block h-[2px] w-[30px] bg-white"
            ></span>
          </button>

          <!-- Desktop Navigation -->
          <nav
            id="navbarCollapse"
            class="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6"
          >
            <ul class="block lg:flex 2xl:ml-20">
              <f:for each="{mainMenu}" as="menuItem">
                <f:if condition="{menuItem.children}">
                  <f:then>
                    <!-- Dropdown Menu Item -->
                    <li class="relative submenu-item group">
                      <a
                        href="{menuItem.link}"
                        class="relative flex items-center justify-between py-2 mx-8 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
                      >
                        {menuItem.title}
                        <svg
                          class="ml-2 fill-current"
                          width="16"
                          height="20"
                          viewBox="0 0 16 20"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z"
                          />
                        </svg>
                      </a>

                      <!-- Submenu -->
                      <div
                        class="submenu relative left-0 top-full hidden w-[250px] rounded-xs bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full"
                      >
                        <f:for each="{menuItem.children}" as="subItem">
                          <a
                            href="{subItem.link}"
                            class="block rounded-sm px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
                          >
                            {subItem.title}
                          </a>
                        </f:for>
                      </div>
                    </li>
                  </f:then>
                  <f:else>
                    <!-- Regular Menu Item -->
                    <li class="relative group">
                      <a
                        href="{menuItem.link}"
                        class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10 {f:if(condition: menuItem.active, then: 'active')}"
                      >
                        {menuItem.title}
                      </a>
                    </li>
                  </f:else>
                </f:if>
              </f:for>
            </ul>
          </nav>
        </div>

        <!-- Right Side: Theme Switcher + Auth -->
        <div class="flex items-center justify-end pr-16 lg:pr-0">
          <!-- Theme Switcher -->
          <f:if condition="{settings.showThemeSwitcher}">
            <label
              for="themeSwitcher"
              class="inline-flex items-center cursor-pointer"
              aria-label="themeSwitcher"
            >
              <input
                type="checkbox"
                name="themeSwitcher"
                id="themeSwitcher"
                class="sr-only"
              />
              <!-- Sun Icon (Light Mode) -->
              <span class="block text-white dark:hidden">
                <svg
                  class="fill-current"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13.3125 1.50001C12.675 1.31251 12.0375 1.16251 11.3625 1.05001C10.875 0.975006 10.35 1.23751 10.1625 1.68751C9.93751 2.13751 10.05 2.70001 10.425 3.00001C13.0875 5.47501 14.0625 9.11251 12.975 12.525C11.775 16.3125 8.25001 18.975 4.16251 19.0875C3.63751 19.0875 3.22501 19.425 3.07501 19.9125C2.92501 20.4 3.15001 20.925 3.56251 21.1875C4.50001 21.75 5.43751 22.2 6.37501 22.5C7.46251 22.8375 8.58751 22.9875 9.71251 22.9875C11.625 22.9875 13.5 22.5 15.1875 21.5625C17.85 20.1 19.725 17.7375 20.55 14.8875C22.1625 9.26251 18.975 3.37501 13.3125 1.50001ZM18.9375 14.4C18.2625 16.8375 16.6125 18.825 14.4 20.0625C12.075 21.3375 9.41251 21.6 6.90001 20.85C6.63751 20.775 6.33751 20.6625 6.07501 20.55C10.05 19.7625 13.35 16.9125 14.5875 13.0125C15.675 9.56251 15 5.92501 12.7875 3.07501C17.5875 4.68751 20.2875 9.67501 18.9375 14.4Z"
                  />
                </svg>
              </span>
              <!-- Moon Icon (Dark Mode) -->
              <span class="hidden text-white dark:block">
                <svg
                  class="fill-current"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clip-path="url(#clip0_2172_3070)">
                    <path
                      d="M12 6.89999C9.18752 6.89999 6.90002 9.18749 6.90002 12C6.90002 14.8125 9.18752 17.1 12 17.1C14.8125 17.1 17.1 14.8125 17.1 12C17.1 9.18749 14.8125 6.89999 12 6.89999ZM12 15.4125C10.125 15.4125 8.58752 13.875 8.58752 12C8.58752 10.125 10.125 8.58749 12 8.58749C13.875 8.58749 15.4125 10.125 15.4125 12C15.4125 13.875 13.875 15.4125 12 15.4125Z"
                    />
                    <path
                      d="M12 4.2375C12.45 4.2375 12.8625 3.8625 12.8625 3.375V1.5C12.8625 1.05 12.4875 0.637497 12 0.637497C11.55 0.637497 11.1375 1.0125 11.1375 1.5V3.4125C11.175 3.8625 11.55 4.2375 12 4.2375Z"
                    />
                    <path
                      d="M12 19.7625C11.55 19.7625 11.1375 20.1375 11.1375 20.625V22.5C11.1375 22.95 11.5125 23.3625 12 23.3625C12.45 23.3625 12.8625 22.9875 12.8625 22.5V20.5875C12.8625 20.1375 12.45 19.7625 12 19.7625Z"
                    />
                  </g>
                </svg>
              </span>
            </label>
          </f:if>

          <!-- Auth Buttons -->
          <div class="hidden sm:flex">
            <f:if condition="{settings.showSignIn}">
              <a
                href="{f:uri.page(pageUid: settings.loginPageId)}"
                class="loginBtn px-[22px] py-2 text-base font-medium text-white hover:opacity-70"
              >
                Giriş Yap
              </a>
            </f:if>
            <f:if condition="{settings.showSignUp}">
              <a
                href="{f:uri.page(pageUid: settings.registerPageId)}"
                class="signUpBtn px-6 py-2 text-base font-medium text-white duration-300 ease-in-out rounded-md bg-white/20 hover:bg-white/100 hover:text-dark"
              >
                Kayıt Ol
              </a>
            </f:if>
          </div>
        </div>
      </div>
    </div>
  </div>
</html>
```

---

## Footer Dönüşümü

### Dönüştürülmüş Fluid Template

```html
<!-- Resources/Private/Partials/Footer.html -->
<html
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
  data-namespace-typo3-fluid="true"
>
  <footer
    class="wow fadeInUp relative z-10 bg-[#090E34] pt-20 lg:pt-[100px]"
    data-wow-delay=".15s"
  >
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <!-- Logo & Description -->
        <div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-3/12">
          <div class="w-full mb-10">
            <a
              href="{f:uri.page(pageUid: settings.rootPageId)}"
              class="mb-6 inline-block max-w-[160px]"
            >
              <img
                src="{f:uri.resource(path: 'Images/logo/logo-white.svg', extensionName: 'my_sitepackage')}"
                alt="{settings.siteName}"
                class="max-w-full"
              />
            </a>
            <p class="mb-8 max-w-[270px] text-base text-gray-7">
              {settings.footerDescription}
            </p>

            <!-- Social Icons -->
            <div class="flex items-center -mx-3">
              <f:if condition="{settings.facebookUrl}">
                <a
                  href="{settings.facebookUrl}"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="px-3 text-gray-7 hover:text-white"
                >
                  <svg
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fill-current"
                  >
                    <path
                      d="M16.294 8.86875H14.369H13.6815V8.18125V6.05V5.3625H14.369H15.8128C16.1909 5.3625 16.5003 5.0875 16.5003 4.675V1.03125C16.5003 0.653125 16.2253 0.34375 15.8128 0.34375H13.3034C10.5878 0.34375 8.69714 2.26875 8.69714 5.12187V8.1125V8.8H8.00964H5.67214C5.19089 8.8 4.74402 9.17812 4.74402 9.72812V12.2031C4.74402 12.6844 5.12214 13.1313 5.67214 13.1313H7.94089H8.62839V13.8188V20.7281C8.62839 21.2094 9.00652 21.6562 9.55652 21.6562H12.7878C12.994 21.6562 13.1659 21.5531 13.3034 21.4156C13.4409 21.2781 13.544 21.0375 13.544 20.8312V13.8531V13.1656H14.2659H15.8128C16.2596 13.1656 16.6034 12.8906 16.6721 12.4781V12.4438V12.4094L17.1534 10.0375C17.1878 9.79688 17.1534 9.52187 16.9471 9.24687C16.8784 9.075 16.569 8.90312 16.294 8.86875Z"
                    />
                  </svg>
                </a>
              </f:if>

              <f:if condition="{settings.twitterUrl}">
                <a
                  href="{settings.twitterUrl}"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="px-3 text-gray-7 hover:text-white"
                >
                  <svg
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fill-current"
                  >
                    <path
                      d="M20.1236 5.91236C20.2461 5.76952 20.0863 5.58286 19.905 5.64972C19.5004 5.79896 19.1306 5.8974 18.5837 5.95817C19.2564 5.58362 19.5693 5.04828 19.8237 4.39259C19.885 4.23443 19.7 4.09092 19.5406 4.16647C18.8931 4.47345 18.1945 4.70121 17.4599 4.83578C16.7338 4.11617 15.6988 3.6665 14.5539 3.6665C12.3554 3.6665 10.5725 5.32454 10.5725 7.36908C10.5725 7.65933 10.6081 7.94206 10.6752 8.21276C7.51486 8.06551 4.6968 6.71359 2.73896 4.64056C2.60477 4.49848 2.36128 4.51734 2.27772 4.69063C2.05482 5.15296 1.93056 5.66584 1.93056 6.20582C1.93056 7.49014 2.6332 8.62331 3.70132 9.28732C3.22241 9.27293 2.76441 9.17961 2.34234 9.02125C2.13684 8.94416 1.90127 9.07964 1.92888 9.28686C2.14084 10.8781 3.42915 12.1909 5.09205 12.5011C4.75811 12.586 4.40639 12.6311 4.04253 12.6311C3.95431 12.6311 3.86685 12.6284 3.78019 12.6231C3.55967 12.6094 3.38044 12.8067 3.47499 12.9954C4.09879 14.2404 5.44575 15.1096 7.0132 15.1367C5.65077 16.13 3.93418 16.7218 2.06882 16.7218C1.83882 16.7218 1.74015 17.0175 1.9442 17.1178C3.52016 17.8924 5.31487 18.3332 7.22182 18.3332C14.545 18.3332 18.549 12.6914 18.549 7.79843C18.549 7.63827 18.545 7.47811 18.5377 7.31945C19.1321 6.92012 19.6664 6.44528 20.1236 5.91236Z"
                    />
                  </svg>
                </a>
              </f:if>

              <f:if condition="{settings.linkedinUrl}">
                <a
                  href="{settings.linkedinUrl}"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="px-3 text-gray-7 hover:text-white"
                >
                  <svg
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fill-current"
                  >
                    <path
                      d="M18.8065 1.8335H3.16399C2.42474 1.8335 1.83334 2.42489 1.83334 3.16414V18.8362C1.83334 19.5459 2.42474 20.1668 3.16399 20.1668H18.7473C19.4866 20.1668 20.078 19.5754 20.078 18.8362V3.13457C20.1371 2.42489 19.5457 1.8335 18.8065 1.8335ZM7.24464 17.4168H4.55379V8.69371H7.24464V17.4168ZM5.88443 7.48135C4.99733 7.48135 4.31721 6.77167 4.31721 5.91414C4.31721 5.05661 5.0269 4.34694 5.88443 4.34694C6.74196 4.34694 7.45163 5.05661 7.45163 5.91414C7.45163 6.77167 6.8011 7.48135 5.88443 7.48135ZM17.4463 17.4168H14.7554V13.1883C14.7554 12.183 14.7258 10.8523 13.336 10.8523C11.9167 10.8523 11.7097 11.976 11.7097 13.0996V17.4168H9.01884V8.69371H11.6506V9.90608H11.6801C12.0645 9.1964 12.9221 8.48672 14.2527 8.48672C17.0027 8.48672 17.5054 10.2609 17.5054 12.6856V17.4168H17.4463Z"
                    />
                  </svg>
                </a>
              </f:if>
            </div>
          </div>
        </div>

        <!-- Footer Menu 1: About Us -->
        <f:if condition="{footerMenu1}">
          <div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12">
            <div class="w-full mb-10">
              <h4 class="text-lg font-semibold text-white mb-9">
                {settings.footerMenu1Title}
              </h4>
              <ul>
                <f:for each="{footerMenu1}" as="item">
                  <li>
                    <a
                      href="{item.link}"
                      class="inline-block mb-3 text-base text-gray-7 hover:text-primary"
                    >
                      {item.title}
                    </a>
                  </li>
                </f:for>
              </ul>
            </div>
          </div>
        </f:if>

        <!-- Footer Menu 2: Features -->
        <f:if condition="{footerMenu2}">
          <div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-2/12">
            <div class="w-full mb-10">
              <h4 class="text-lg font-semibold text-white mb-9">
                {settings.footerMenu2Title}
              </h4>
              <ul>
                <f:for each="{footerMenu2}" as="item">
                  <li>
                    <a
                      href="{item.link}"
                      class="inline-block mb-3 text-base text-gray-7 hover:text-primary"
                    >
                      {item.title}
                    </a>
                  </li>
                </f:for>
              </ul>
            </div>
          </div>
        </f:if>

        <!-- Footer Menu 3: Products -->
        <f:if condition="{footerMenu3}">
          <div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-2/12">
            <div class="w-full mb-10">
              <h4 class="text-lg font-semibold text-white mb-9">
                {settings.footerMenu3Title}
              </h4>
              <ul>
                <f:for each="{footerMenu3}" as="item">
                  <li>
                    <a
                      href="{item.link}"
                      class="inline-block mb-3 text-base text-gray-7 hover:text-primary"
                    >
                      {item.title}
                    </a>
                  </li>
                </f:for>
              </ul>
            </div>
          </div>
        </f:if>

        <!-- Latest Blog (Opsiyonel) -->
        <f:if condition="{latestNews}">
          <div class="w-full px-4 md:w-2/3 lg:w-6/12 xl:w-3/12">
            <div class="w-full mb-10">
              <h4 class="text-lg font-semibold text-white mb-9">
                Son Haberler
              </h4>
              <div class="flex flex-col gap-8">
                <f:for each="{latestNews}" as="news" iteration="iter">
                  <f:if condition="{iter.cycle} <= 2">
                    <a
                      href="{news.link}"
                      class="group flex items-center gap-[22px]"
                    >
                      <div class="overflow-hidden rounded-sm">
                        <f:image
                          image="{news.media.0}"
                          alt="{news.title}"
                          width="80"
                          height="60"
                        />
                      </div>
                      <span
                        class="max-w-[180px] text-base text-gray-7 group-hover:text-white"
                      >
                        {news.title -> f:format.crop(maxCharacters: 50, append:
                        '...')}
                      </span>
                    </a>
                  </f:if>
                </f:for>
              </div>
            </div>
          </div>
        </f:if>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="mt-12 border-t border-[#8890A4]/40 py-8 lg:mt-[60px]">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full px-4 md:w-2/3 lg:w-1/2">
            <div class="my-1">
              <div
                class="flex items-center justify-center -mx-3 md:justify-start"
              >
                <f:for each="{bottomMenu}" as="item">
                  <a
                    href="{item.link}"
                    class="px-3 text-base text-gray-7 hover:text-white hover:underline"
                  >
                    {item.title}
                  </a>
                </f:for>
              </div>
            </div>
          </div>
          <div class="w-full px-4 md:w-1/3 lg:w-1/2">
            <div class="flex justify-center my-1 md:justify-end">
              <p class="text-base text-gray-7">
                &copy;
                <f:format.date format="Y">now</f:format.date>
                {settings.siteName}. Tüm hakları saklıdır.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Decorative Shapes -->
    <div>
      <span class="absolute left-0 top-0 z-[-1]">
        <img
          src="{f:uri.resource(path: 'Images/footer/shape-1.svg', extensionName: 'my_sitepackage')}"
          alt=""
        />
      </span>
      <span class="absolute bottom-0 right-0 z-[-1]">
        <img
          src="{f:uri.resource(path: 'Images/footer/shape-3.svg', extensionName: 'my_sitepackage')}"
          alt=""
        />
      </span>
    </div>
  </footer>

  <!-- Back To Top -->
  <a
    href="#"
    id="backToTop"
    class="back-to-top fixed left-auto items-center justify-center hidden w-10 h-10 text-white transition duration-300 ease-in-out rounded-md shadow-md bottom-8 right-8 z-999 bg-primary hover:bg-dark"
  >
    <span
      class="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white"
    ></span>
  </a>
</html>
```

---

## Layout Yapısı

### Ana Layout Dosyası

```html
<!-- Resources/Private/Layouts/Default.html -->
<html
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
  data-namespace-typo3-fluid="true"
>
  <!DOCTYPE html>
  <html lang="{settings.language}" class="scroll-smooth">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>{pageTitle}</title>

      <!-- Favicon -->
      <link
        rel="shortcut icon"
        href="{f:uri.resource(path: 'Images/favicon.png', extensionName: 'my_sitepackage')}"
        type="image/x-icon"
      />

      <!-- Google Fonts: Inter -->
      <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@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet"
      />

      <f:render section="HeaderAssets" optional="true" />
    </head>
    <body class="dark:bg-dark">
      <!-- Header -->
      <f:render
        partial="Header"
        arguments="{mainMenu: mainMenu, settings: settings}"
      />

      <!-- Main Content -->
      <main>
        <f:render section="Main" />
      </main>

      <!-- Footer -->
      <f:render
        partial="Footer"
        arguments="{
        footerMenu1: footerMenu1, 
        footerMenu2: footerMenu2, 
        footerMenu3: footerMenu3,
        bottomMenu: bottomMenu,
        latestNews: latestNews,
        settings: settings
    }"
      />

      <f:render section="FooterAssets" optional="true" />
    </body>
  </html>
</html>
```

---

## Dinamik Menü Entegrasyonu

### Header'da menü nasıl eklenir

Header’daki menü, **sayfa ağacındaki sayfalar** ile beslenir. Veri, TypoScript’te tanımlı **MenuProcessor** ile işlenir ve Fluid’e `mainnavigation` (veya `mainMenu`) olarak aktarılır. Menüyü değiştirmek için backend’de sayfa ekleyip düzenlemeniz yeterlidir.

#### 1. Veri kaynağı (TypoScript)

Menü verisi genelde **PAGEVIEW** veya **FLUIDTEMPLATE** içinde bir **DataProcessor** ile üretilir:

```typoscript
dataProcessing {
    20 = menu
    20 {
        levels = 2          # 2 seviye: üst menü + dropdown (alt sayfalar)
        includeSpacer = 1   # “Spacer” sayfaları menüde ayrıcı olarak kullanılabilir
        as = mainnavigation # Fluid’de kullanılacak değişken adı
    }
}
```

- **levels = 2:** Birinci seviye header’da ana öğe, ikinci seviye alt sayfalar dropdown’da listelenir.
- **as = mainnavigation:** Layout/Header partial’da `{mainnavigation}` ile döngü kurulur; her öğede `link`, `title`, `active`, `children` (varsa alt sayfalar) kullanılır.

#### 2. Backend’de menü öğesi ekleme

1. **Backend** → **Web** → **Sayfalar** ile sayfa ağacına gidin.
2. Menüde görünmesini istediğiniz **üst sayfanın** altına (veya yanına) **“Yeni”** ile yeni sayfa ekleyin.
3. **Sayfa başlığı** = menüde görünecek metin (ör. “Hakkımızda”, “Ürünler”).
4. **Kaydet**; sayfa yayında ve menüde görünür sayfalar arasındaysa header menüsüne otomatik eklenir.

#### 3. Alt menü (dropdown) ekleme

- Dropdown’da görünecek öğeler = ilgili ana sayfanın **alt sayfaları**.
1. Menüde ana öğe olacak sayfayı seçin (ör. “Ürünler”).
2. Bu sayfanın **altına** “Yeni” ile alt sayfalar ekleyin (ör. “Ürün listesi”, “Kampanyalar”).
3. **levels = 2** olduğu için bu alt sayfalar Fluid’de `item.children` olarak gelir; Header partial’da dropdown olarak render edilir.
4. Sıralamayı backend’de sürükle-bırak ile değiştirebilirsiniz.

#### 4. Menüde gizleme / gösterme

- **Menüde görünmesin:** Sayfayı düzenleyin → **“Davranış”** sekmesinde **“Menüde gizle”** (İng. *Hide in menu*, alan: `nav_hide`) kutusunu **işaretleyin**. Sayfa menüde listelenmez.
- **Menüde görünsün:** “Menüde gizle” kutusu **işaretsiz** olsun; sayfa yayındaysa ve üst sayfa menüdeyse header menüsüne eklenir.
- **Sayfada listelenmesin ama menüde olsun:** Sayfa normal sayfa olarak kalır; “Menüde gizle” işaretsiz bırakılır. “Sayfada gizle” için bazı temalarda ayrı sayfa tipi (doktype) veya özel ayar kullanılır.

#### 5. Menü sırası

- Sıra = sayfa ağacındaki sıra. Backend’de **Sayfalar** modülünde sürükle-bırak ile sıralayın; header menüsü bu sıraya göre güncellenir.

#### 6. Header partial’da kullanım

Layout’ta Header’a menü verisi şu şekilde geçirilir:

```html
<f:render partial="Header" arguments="{mainnavigation: mainnavigation}" />
```

Header partial içinde örnek döngü:

```html
<nav>
    <f:for each="{mainnavigation}" as="item">
        <div>
            <f:if condition="{item.children}">
                <f:then>
                    <!-- Dropdown: ana öğe + alt linkler -->
                    <a href="{item.link}" class="more">{item.title}</a>
                    <div class="dropdown-container">
                        <f:for each="{item.children}" as="child">
                            <a href="{child.link}">{child.title}</a>
                        </f:for>
                    </div>
                </f:then>
                <f:else>
                    <a href="{item.link}">{item.title}</a>
                </f:else>
            </f:if>
        </div>
    </f:for>
</nav>
```

Özet: Menüyü backend’de **sayfa ağacı** ve **“Menüde göster”** ile yönetirsiniz; header’da görünen yapı TypoScript’teki `menu` DataProcessor ve Fluid’deki `mainnavigation` döngüsü ile oluşur.

---

### TypoScript Yapılandırması (TYPO3 v13)

v13’te sayfa çıktısı **PAGEVIEW** ile verilir; menü ve logo gibi veriler **dataProcessing** ile hazırlanır. Aşağıdaki örnek v12’deki FLUIDTEMPLATE yapısına benzer mantığı gösterir; gerçek projede Set içindeki `TypoScript/page.typoscript` kullanılır.

```typoscript
# Configuration/Sets/SitePackage/TypoScript/page.typoscript (v13)

page = PAGE
page {
    typeNum = 0
    10 = PAGEVIEW
    10 {
        paths { ... }
        dataProcessing {
            5 = root-page-logo
            5.as = headerLogo
            20 = menu
            20 { levels = 2; as = mainnavigation; includeSpacer = 1; }
        }
    }

    includeCSS { ... }
    includeJSFooter { ... }
}
```

v13’te ayarlar (site adı, sosyal medya URL’leri vb.) **settings.yaml** içinde `site.*` veya `page.*` olarak tanımlanır; panelden **Site Management > Settings** ile düzenlenir. Menü değişkeni `mainnavigation` olarak Layout/Partials’a aktarılır.

### Constants / Ayarlar (TYPO3 v13: settings.yaml)

v13’te ayrı bir constants.typoscript yerine **Set** içindeki **settings.yaml** kullanılır. Bu yapı site ayarlarına dönüşür; panelden **Site Management > Settings** ile düzenlenir (TypoScript modülünde “Constant Editor” yerine “Edit site settings” yönlendirmesi çıkar).

```yaml
# Configuration/Sets/SitePackage/settings.yaml (v13)

site:
  logo: '/assets/images/logo/logo.svg'
  social:
    facebook: ''
    instagram: ''
    twitter: ''
    pinterest: ''

page:
  pageview:
    paths: 'EXT:testproject/Resources/Private/PageView/'
  meta:
    viewport: 'width=device-width, initial-scale=1'
```

Panelden değiştirmek: **Site Management > Settings** → **Edit site settings** → ilgili alanlara URL’leri girin (örn. sosyal medya linkleri).

---

## Dark Mode Desteği

### JavaScript ile Dark Mode Toggle

```javascript
// Resources/Public/JavaScript/main.js

// ===== Dark Mode Toggle =====
document.addEventListener("DOMContentLoaded", function () {
  const themeSwitcher = document.getElementById("themeSwitcher");

  // Sistem tercihini veya localStorage'ı kontrol et
  if (
    localStorage.getItem("theme") === "dark" ||
    (!localStorage.getItem("theme") &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    document.documentElement.classList.add("dark");
    if (themeSwitcher) themeSwitcher.checked = true;
  }

  if (themeSwitcher) {
    themeSwitcher.addEventListener("change", function () {
      if (this.checked) {
        document.documentElement.classList.add("dark");
        localStorage.setItem("theme", "dark");
      } else {
        document.documentElement.classList.remove("dark");
        localStorage.setItem("theme", "light");
      }

      // Logo değiştir
      updateLogo();
    });
  }
});

function updateLogo() {
  const isDark = document.documentElement.classList.contains("dark");
  const logoLight = document.getElementById("logo-light");
  const logoDark = document.getElementById("logo-dark");

  if (logoLight && logoDark) {
    if (isDark) {
      logoLight.classList.remove("hidden");
      logoDark.classList.add("hidden");
    } else {
      logoLight.classList.add("hidden");
      logoDark.classList.remove("hidden");
    }
  }
}
```

---

## JavaScript Entegrasyonu

### main.js İçeriği

```javascript
// Resources/Public/JavaScript/main.js

document.addEventListener("DOMContentLoaded", function () {
  // ===== WOW.js Initialization =====
  if (typeof WOW !== "undefined") {
    new WOW().init();
  }

  // ===== Navbar Toggle =====
  const navbarToggler = document.getElementById("navbarToggler");
  const navbarCollapse = document.getElementById("navbarCollapse");

  if (navbarToggler && navbarCollapse) {
    navbarToggler.addEventListener("click", function () {
      navbarToggler.classList.toggle("navbarTogglerActive");
      navbarCollapse.classList.toggle("hidden");
    });
  }

  // ===== Sticky Header =====
  const header = document.getElementById("ud-header");
  const headerHeight = 80;

  function handleScroll() {
    if (window.scrollY >= headerHeight) {
      header?.classList.add("sticky");
    } else {
      header?.classList.remove("sticky");
    }
  }

  window.addEventListener("scroll", handleScroll);

  // ===== Smooth Scroll =====
  const menuScrollLinks = document.querySelectorAll(".ud-menu-scroll");

  menuScrollLinks.forEach(function (link) {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.getAttribute("href");
      const target = document.querySelector(targetId);

      if (target) {
        target.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }

      // Mobil menüyü kapat
      if (navbarCollapse && !navbarCollapse.classList.contains("hidden")) {
        navbarCollapse.classList.add("hidden");
        navbarToggler?.classList.remove("navbarTogglerActive");
      }
    });
  });

  // ===== Active Menu Highlight =====
  function highlightActiveSection() {
    const sections = document.querySelectorAll(".ud-menu-scroll");
    const scrollPos = window.pageYOffset || document.documentElement.scrollTop;

    sections.forEach(function (link) {
      const targetId = link.getAttribute("href");
      const target = document.querySelector(targetId);

      if (target) {
        const offsetTop = target.offsetTop - 100;
        const offsetBottom = offsetTop + target.offsetHeight;

        if (scrollPos >= offsetTop && scrollPos < offsetBottom) {
          link.classList.add("active");
        } else {
          link.classList.remove("active");
        }
      }
    });
  }

  window.addEventListener("scroll", highlightActiveSection);

  // ===== Back to Top =====
  const backToTop = document.getElementById("backToTop");

  function toggleBackToTop() {
    if (window.scrollY > 400) {
      backToTop?.classList.remove("hidden");
      backToTop?.classList.add("flex");
    } else {
      backToTop?.classList.add("hidden");
      backToTop?.classList.remove("flex");
    }
  }

  window.addEventListener("scroll", toggleBackToTop);

  if (backToTop) {
    backToTop.addEventListener("click", function (e) {
      e.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    });
  }

  // ===== Submenu Toggle (Mobile) =====
  const submenuItems = document.querySelectorAll(".submenu-item");

  submenuItems.forEach(function (item) {
    const trigger = item.querySelector("a");
    const submenu = item.querySelector(".submenu");

    if (trigger && submenu && window.innerWidth < 1024) {
      trigger.addEventListener("click", function (e) {
        e.preventDefault();
        submenu.classList.toggle("hidden");
      });
    }
  });
});
```

---

## Asset Kopyalama Komutları

```bash
# Logo dosyaları
mkdir -p packages/my_sitepackage/Resources/Public/Images/logo
cp tema2/assets/images/logo/logo.svg packages/my_sitepackage/Resources/Public/Images/logo/
cp tema2/assets/images/logo/logo-white.svg packages/my_sitepackage/Resources/Public/Images/logo/

# Footer shapes
mkdir -p packages/my_sitepackage/Resources/Public/Images/footer
cp tema2/assets/images/footer/shape-1.svg packages/my_sitepackage/Resources/Public/Images/footer/
cp tema2/assets/images/footer/shape-3.svg packages/my_sitepackage/Resources/Public/Images/footer/

# Favicon
cp tema2/assets/images/favicon.png packages/my_sitepackage/Resources/Public/Images/

# CSS dosyaları
mkdir -p packages/my_sitepackage/Resources/Public/Css
cp tema2/src/css/tailwind.css packages/my_sitepackage/Resources/Public/Css/
cp tema2/assets/css/animate.css packages/my_sitepackage/Resources/Public/Css/
cp tema2/assets/css/swiper-bundle.min.css packages/my_sitepackage/Resources/Public/Css/

# JavaScript dosyaları
mkdir -p packages/my_sitepackage/Resources/Public/JavaScript
cp tema2/assets/js/main.js packages/my_sitepackage/Resources/Public/JavaScript/
cp tema2/assets/js/wow.min.js packages/my_sitepackage/Resources/Public/JavaScript/
cp tema2/assets/js/swiper-bundle.min.js packages/my_sitepackage/Resources/Public/JavaScript/
```

---

## Özet: Dönüşüm Kontrol Listesi

| Tema2 Öğesi          | TYPO3 Fluid Karşılığı  | Durum |
| -------------------- | ---------------------- | ----- |
| Header (Navbar)      | `Partials/Header.html` | ✅    |
| Footer               | `Partials/Footer.html` | ✅    |
| Layout               | `Layouts/Default.html` | ✅    |
| Desktop Navigation   | Submenu desteği ile    | ✅    |
| Mobile Navigation    | Toggle ile             | ✅    |
| Dark Mode            | Theme Switcher         | ✅    |
| Sticky Header        | JavaScript             | ✅    |
| Smooth Scroll        | JavaScript             | ✅    |
| Back to Top          | JavaScript             | ✅    |
| WOW.js Animasyonları | JavaScript             | ✅    |
| Social Icons         | SVG inline             | ✅    |
| Footer Menus         | MenuProcessor          | ✅    |
| Tailwind CSS 4.0     | CSS dosyası            | ✅    |

---

## Kaynaklar

- [TYPO3 Fluid Template Dokümantasyonu](file:///Users/musayazlik/Projects/typo3v13/docs/fluid-template-yazim-kurallari.md)
- [Play Tailwind Demo](https://play-tailwind.tailgrids.com/)
- [Tailwind CSS 4.0 Dokümantasyonu](https://tailwindcss.com/docs)
- [TYPO3 MenuProcessor](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/MenuProcessor.html)

---

## Dinamik Logo Yönetimi (Panelden Logo)

Header’daki logo iki şekilde panelden yönetilebilir: **Ana sayfa Resources ile dosya ekleme (önerilen)** veya **Site Management > Settings ile logo yolu**.

### 1. Ana sayfa Resources ile logo (önerilen – kullanıcı dosya ekler)

Header logosu, **Ana sayfa (Home)** sayfasının **Resources** sekmesindeki **Files / Media** alanından alınır. Bu alana eklediğiniz ilk dosya otomatik olarak header’da logo olarak gösterilir.

**Backend’de yapılacaklar (TYPO3 v13):**

1. TYPO3 v13 Backend’de **Web** modülüne girin; sol menüden **Page** (Sayfa) seçin.
2. Sayfa ağacında **Ana sayfayı (Home)** seçin (sitenin kök sayfası).
3. **Düzenle (Edit)** ile sayfayı açın.
4. **Resources** sekmesine tıklayın.
5. **Files** bölümünde **Media** altındaki seçeneklerden birini kullanın:
   - **Select & upload files** ile bilgisayardan logo dosyası yükleyin, veya
   - **Create new relation** / **Add media by URL** ile mevcut medyadan veya URL’den ekleyin.
6. Eklenen dosya listede ilk sırada olsun (bu dosya logo olarak kullanılır). Gerekirse sırayı sürükleyerek değiştirin.
7. **Save** ile kaydedin.

Bu alana eklediğiniz logo dosyası (ör. `Logo.png`) frontend’de header’da görünür. Teknik olarak `RootPageLogoProcessor`, kök sayfanın `media` alanındaki ilk dosyayı okur ve `headerLogo` olarak şablona verir. Öncelik sırası: (1) Ana sayfa Resources’taki dosya, (2) Site ayarlarındaki (Settings) `site.logo` yolu, (3) varsayılan `/assets/images/logo/logo.svg`.

### 2. Site Settings ile logo yolu

Varsayılan yol `settings.yaml` içinde tanımlıdır:

**Dosya:** `packages/testproject/Configuration/Sets/SitePackage/settings.yaml`

```yaml
site:
  logo: '/assets/images/logo/logo.svg'
```

**Panelden yol değiştirmek (TYPO3 v13):**

1. **Site Management > Settings** modülüne gidin.
2. **Edit site settings** ile site ayarlarını açın; logo yolu (varsa “Logo” / `site.logo` alanı) veya ilgili site ayarını girin (örn. `/fileadmin/logo/yeni-logo.svg`).
3. Kaydedin; gerekirse **Flush TYPO3 and PHP cache** ile önbelleği temizleyin.

**Not:** v13’te TypoScript modülünde “Constant Editor” açıldığında “Site Settings available – Edit site settings via Site Management >> Settings” mesajı çıkar. Logo ve sosyal medya gibi değerler **Site Management > Settings** üzerinden düzenlenir; ayrı bir “Constants” sekmesi yoktur.

### 3. Layout ve Header önceliği

- **Layout:** Header’a `logo` (settings.site.logo) ve `headerLogo` (Ana sayfa Resources’taki ilk dosya) geçilir.
- **Header:** Gösterim sırası: (1) Ana sayfa Resources’ta dosya varsa `headerLogo` ile (`f:image`); (2) yoksa site ayarlarındaki `logo` yolu ile `<img src="">`; (3) ikisi de yoksa varsayılan `/assets/images/logo/logo.svg`.

### 4. Teknik uygulama – kullanılan dosyalar

Dinamik logo için aşağıdaki üç alan kullanılır: DataProcessor sınıfı, servis kaydı ve site set ayarları.

#### 4.1 RootPageLogoProcessor.php

**Dosya:** `packages/testproject/Classes/DataProcessing/RootPageLogoProcessor.php`

- **Görevi:** Kök sayfanın **Kaynaklar (media)** alanındaki ilk dosyayı okur ve view’a FAL nesnesi olarak verir.
- **Çalışma:** Request’ten `site` ve `frontend.page.information` alır; sitenin `rootPageId`’si ile root line içinden kök sayfa kaydını bulur; `FileCollector` ile `pages.media` ilişkisinden dosyaları toplar; ilk dosyayı `as` ile belirtilen değişkene (varsayılan: `headerLogo`) yazar.
- **TypoScript’te kullanım:** PAGEVIEW `dataProcessing` içinde `5 = root-page-logo` ve `5.as = headerLogo` (identifier: `root-page-logo`).

#### 4.2 Services.yaml (DataProcessor kaydı)

**Dosya:** `packages/testproject/Configuration/Services.yaml`

- **Görevi:** `RootPageLogoProcessor` sınıfını TYPO3 DataProcessor olarak kaydeder; böylece TypoScript’te `root-page-logo` adıyla kullanılabilir.
- **Örnek içerik:**

```yaml
services:
  _defaults:
    autowire: true
    autoconfigure: true

  Gfdhfhgfgg\Testproject\DataProcessing\RootPageLogoProcessor:
    tags:
      - { name: 'data.processor', identifier: 'root-page-logo' }
```

- **identifier:** `root-page-logo` — TypoScript’te `dataProcessing.5 = root-page-logo` ile eşleşir.

#### 4.3 settings.yaml (varsayılan logo yolu)

**Dosya:** `packages/testproject/Configuration/Sets/SitePackage/settings.yaml`

- **Görevi:** Header’da Ana sayfa Resources’ta dosya yokken kullanılacak varsayılan logo **yolunu** tanımlar (site ayarlarında `site.logo`).
- **İlgili bölüm:**

```yaml
# Logo: Header'da kullanılır. Panelden değiştirmek için: Site Management > Settings → Edit site settings.
site:
  logo: '/assets/images/logo/logo.svg'
```

- **Panelden değiştirmek:** **Site Management > Settings** → Edit site settings ile logo yolu (veya ilgili site ayarı) girilebilir. Ana sayfa Resources’ta dosya varsa bu yol kullanılmaz; öncelik Resources’taki dosyadadır.

---

## Header sosyal medya linkleri (dinamik)

Header’daki sosyal medya ikonları (Facebook, Instagram, Twitter, Pinterest) panelden verilen URL’lere göre dinamik gösterilir. URL tanımlı olanlar link olarak çıkar; boş olanlar hiç gösterilmez.

### Ayarlar (settings.yaml)

**Dosya:** `packages/testproject/Configuration/Sets/SitePackage/settings.yaml`

```yaml
site:
  social:
    facebook: ''
    instagram: ''
    twitter: ''
    pinterest: ''
```

Varsayılan değerler boş olduğu için başta hiçbir ikon çıkmaz. Panelden doldurulunca ilgili ikonlar link ile görünür.

### Panelden nasıl düzenlenir? (TYPO3 v13)

1. Backend’de **Site Management > Settings** modülüne gidin.
2. **Edit site settings** (veya “Site ayarlarını düzenle”) ile site ayarlarını açın.
3. Logo ve sosyal medya URL’leri için ilgili alanları doldurun. Alanlar doğrudan formda yoksa, Set’teki `settings.yaml` (site.social.*) değerleri bu modülde “Site Settings” olarak yönetilebilir; ekrandaki talimatları izleyin.

   ```
   site.social.facebook = https://www.facebook.com/sayfaniz
   site.social.instagram = https://www.instagram.com/sayfaniz
   site.social.twitter = https://twitter.com/sayfaniz
   site.social.pinterest = https://www.pinterest.com/sayfaniz
   ```

4. Kullanmak istemediğiniz ağı boş bırakın veya satırı silin; o ikon header’da gösterilmez.
5. Kaydedin ve önbelleği temizleyin.

### Teknik not

- Layout, Header partial’ına `social: settings.site.social` ile bu değerleri geçirir.
- Header’da her ikon `f:if condition="{social.facebook}"` benzeri koşulla sarılıdır; sadece URL dolu olanlar render edilir. Linkler `target="_blank"` ve `rel="noopener noreferrer"` ile açılır.
