t-{id} Tema Yapisi - Multi-Tenant Tema Sistemi v15

1. Felsefe

t-{id} = Tenant temasi. Sadece ozel dosyalar burada.

simple = Fallback (mevcut, zaten var). t-{id}'de yoksa buradan alir.

Ornek: t-3/homepage.blade.php var -> onu kullan, t-3/blog/show.blade.php yok -> simple'dan al

2. View Path Oncelik Sirasi

KRITIK!

DOGRU Oncelik Sirasi (ThemeService.php)

1

resources/views/themes/{tema}/{view}

Ana tema klasoru - TEK DOSYA PRENSIBI - ONCELIKLI!

2

Modules/{Modul}/views/themes/{tema}/{view}

Modul ici tema - Fallback (resources'da yoksa)

3

themes.simple.{view}

Simple tema fallback (aktif tema simple degilse)

4

{modul}::front.{view}

Son care - Modul front klasoru

3. Breakpoint Sistemi

YENI v15

Basit Anlatim

Header ve navigasyon icin xl (1280px) breakpoint kullaniyoruz. lg (1024px) kullanmak tablet boyutlarinda sorunlara yol acar!

Tailwind Breakpoint'leri

Class	Piksel	Kullanim
`sm:`	640px	Buyuk telefonlar
`md:`	768px	Tablet dikey
`lg:`	1024px	Tablet yatay / Kucuk laptop
`xl:`	1280px	HEADER BREAKPOINT!
`2xl:`	1536px	Buyuk ekranlar

DOGRU: xl Breakpoint

{{-- Desktop navigasyon (xl ve uzeri) --}}
<nav class="hidden xl:flex items-center gap-8">
    ...
</nav>

{{-- Mobil/Tablet butonlar (xl altinda) --}}
<div class="flex items-center gap-2 xl:hidden">
    ...
</div>

{{-- Desktop CTA butonlari (xl ve uzeri) --}}
<div class="hidden xl:flex items-center gap-2">
    ...
</div>

YANLIS: lg Breakpoint (Tablet Sorunu)

{{-- YANLIS! lg kullanma --}}
<nav class="hidden lg:flex">  // 1024px - tablet yatayda bozuk!
<div class="lg:hidden">          // Cift ikon sorunu!

{{-- DOGRU! xl kullan --}}
<nav class="hidden xl:flex">  // 1280px - temiz gecis
<div class="xl:hidden">          // Tek ikon

4. Grid Sistemi

YENI v15

Basit Anlatim

Mobilde 2 kolon (grid-cols-2) varsayilan! Tek kolon (grid-cols-1) kullanma - cok bos gorunur.

DOGRU Grid Kaliplari

Bolum	Class
Hizmetler	`grid-cols-2 lg:grid-cols-3`
Neden Biz?	`grid-cols-2 lg:grid-cols-3`
Cozum Surecleri	`grid-cols-2 lg:grid-cols-4`
Galeri	`grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
Blog Listesi	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`

YANLIS: Mobilde Tek Kolon

{{-- YANLIS! Mobilde cok bos --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

{{-- DOGRU! Mobilde 2 kolon --}}
<div class="grid grid-cols-2 lg:grid-cols-3">

Ornek: Hizmetler Grid

{{-- Hizmetler bolumu --}}
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
    @foreach($services as $service)
        <div class="bg-white dark:bg-slate-800 rounded-xl p-4">
            ...
        </div>
    @endforeach
</div>

// Mobil (0-1023px): 2 kolon
// Desktop (1024px+): 3 kolon

5. Typography (Line-Height)

YENI v15

Basit Anlatim

Tum paragraflar leading-relaxed (1.625) kullanmali. Farki satir yukseklikleri okumasi zor metinler olusturur!

Line-Height Degerleri

Class	Deger	Kullanim
`leading-tight`	1.25	Basliklar
`leading-snug`	1.375	Alt basliklar
`leading-relaxed`	1.625	PARAGRAFLAR - STANDART!
`leading-loose`	2	Cok seyrek

Prose Plugin Kullanimi

{{-- Icerik alanlari icin --}}
<div class="prose prose-lg max-w-none dark:prose-invert
            prose-p:leading-relaxed
            prose-li:leading-relaxed
            prose-headings:font-heading
            prose-a:text-primary-600">
    @parsewidgets($body ?? '')
</div>

{{-- Normal paragraflar icin --}}
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
    Aciklama metni...
</p>

YANLIS: Tutarsiz Line-Height

{{-- YANLIS! prose-base ve prose-lg karisik --}}
<div class="prose prose-base">  // Sayfa 1
<div class="prose prose-lg">    // Sayfa 2 - FARKLI!

{{-- DOGRU! Tutarli prose-lg --}}
<div class="prose prose-lg prose-p:leading-relaxed">

6. Header Yapisi

YENI v15

Header Katmanlari

1

Top Bar

Telefon numaralari, WhatsApp, calisma saatleri. Mobil/tablet icin sadelesilmis.

2

Main Header (sticky)

Logo, navigasyon, dark mode toggle, CTA butonlari

3

Mobile Menu (xl:hidden)

x-show ile acilir/kapanir. Navigasyon + arama butonlari

Desktop (xl+)

- Top bar: Telefon + WhatsApp + Bilgiler
- Navigasyon: Inline linkler
- CTA: Telefon + WhatsApp butonlari
- Dark mode toggle

Mobil/Tablet (xl alti)

- Top bar: Sadece numaralar (pill style)
- Hamburger menu butonu
- Dark mode toggle
- Mobil menu: Linkler + Arama butonlari

Root Admin Butonlari (Logo Yaninda)

@auth
    @if(auth()->user()->hasRole('root'))
    <div class="flex items-center gap-1 ml-2">
        {{-- Cache Sifirla --}}
        <button @click="fetch('/admin/cache/clear'...)">
            <i class="fat fa-sync-alt"></i>
        </button>
        {{-- AI Reset --}}
        <button @click="localStorage.removeItem('tenant'+tenantId+'_ai_session')">
            <i class="fat fa-robot"></i>
        </button>
    </div>
    @endif
@endauth

Header PHP Degiskenleri

@php
    $siteName = setting('site_title') ?: setting('site_company_name');
    $siteSlogan = setting('site_slogan');
    $sitePhone = setting('contact_phone_1');       // Ana telefon
    $siteMobile = setting('contact_phone_2') ?: setting('contact_whatsapp_1');
    $siteWhatsapp = setting('contact_whatsapp_1')
        ? preg_replace('/[^0-9]/', '', setting('contact_whatsapp_1')) : null;
    $whatsappUrl = whatsapp_link();  // Global helper!

    // Logo Service
    $logoService = app(\App\Services\LogoService::class);
    $logos = $logoService->getLogos();
    $hasLogo = $logos['has_light'] || $logos['has_dark'];
@endphp

7. Settings Pattern

YENI v15

v14'teki HATA DUZELTILDI!

social_whatsapp YANLIS! Dogru key: contact_whatsapp_1

Iletisim Ayarlari

Key	Aciklama	Ornek
`contact_phone_1`	Ana telefon (sabit)	0212 XXX XX XX
`contact_phone_2`	Mobil telefon	0533 XXX XX XX
`contact_whatsapp_1`	WhatsApp numarasi	0533 XXX XX XX
`contact_email_1`	E-posta	info@site.com
`contact_address_1`	Adres	Istanbul, Turkiye

Site Ayarlari

Key	Aciklama
`site_title`	Site basligi
`site_company_name`	Sirket adi
`site_slogan`	Slogan
`site_description`	Site aciklamasi

whatsapp_link() Helper

// Global helper fonksiyonu - helpers.php
function whatsapp_link($message = null) {
    $number = setting('contact_whatsapp_1');
    if (!$number) return null;

    $clean = preg_replace('/[^0-9]/', '', $number);
    $url = 'https://wa.me/' . $clean;

    if ($message) {
        $url .= '?text=' . urlencode($message);
    }

    return $url;
}

// Kullanim:
$whatsappUrl = whatsapp_link();  // https://wa.me/905331234567
$whatsappUrl = whatsapp_link('Merhaba, bilgi almak istiyorum');

// Blade'de:
@if($whatsappUrl = whatsapp_link())
    <a href="{{ $whatsappUrl }}" target="_blank">WhatsApp</a>
@endif

YANLIS Setting Key'leri

// YANLIS!
setting('social_whatsapp')   // Boyle key YOK!
setting('site_phone')        // Boyle key YOK!
setting('whatsapp')          // Boyle key YOK!

// DOGRU!
setting('contact_whatsapp_1')
setting('contact_phone_1')
setting('contact_phone_2')

8. Logo Service

YENI v15

LogoService Kullanimi

@php
    $logoService = app(\App\Services\LogoService::class);
    $logos = $logoService->getLogos();

    // Donen deger:
    [
        'has_light' => true,           // Light logo var mi?
        'has_dark' => true,            // Dark logo var mi?
        'light_logo_url' => '...',     // Light logo URL
        'dark_logo_url' => '...',      // Dark logo URL
    ]

    $hasLogo = $logos['has_light'] || $logos['has_dark'];
@endphp

Dark/Light Mode Logo Gosterimi

@if($hasLogo)
    @if($logos['has_light'] && $logos['has_dark'])
        {{-- Her iki logo da var --}}
        <img src="{{ $logos['light_logo_url'] }}" class="dark:hidden h-10">
        <img src="{{ $logos['dark_logo_url'] }}" class="hidden dark:block h-10">
    @elseif($logos['has_light'])
        {{-- Sadece light logo --}}
        <img src="{{ $logos['light_logo_url'] }}" class="h-10">
    @elseif($logos['has_dark'])
        {{-- Sadece dark logo --}}
        <img src="{{ $logos['dark_logo_url'] }}" class="h-10">
    @endif
@else
    {{-- Fallback: Icon + Site ismi --}}
    <div class="w-10 h-10 bg-primary-500 rounded-xl flex items-center justify-center">
        <i class="fat fa-blinds text-white"></i>
    </div>
    <span>{{ $siteName }}</span>
@endif

9. Page Modulu Ozgurlugu

Basit Anlatim

Page modulu OZGUR olmali! Template sadece wrapper. Her sayfanin kendine ozel tasarimi pages tablosundaki css ve js kolonlarinda saklanir.

pages Tablosu

Kolon	Tip	Aciklama
`title`	JSON	Cok dilli baslik
`body`	JSON (longText)	Cok dilli icerik (widget destekli)
`css`	TEXT	Sayfa ozel CSS
`js`	TEXT	Sayfa ozel JavaScript

show.blade.php Template

{{-- SUBHEADER (Breadcrumb + Title) --}}
<section class="bg-gray-50 dark:bg-gray-800 border-b">
    <div class="container">
        <nav>{{ breadcrumb }}</nav>
        <h1>{{ $title }}</h1>
    </div>
</section>

{{-- CONTENT - Sadece container --}}
<section class="bg-white dark:bg-gray-900 py-10">
    <div class="container">
        <div class="page-content prose prose-lg max-w-none prose-p:leading-relaxed">
            @parsewidgets($body ?? '')
        </div>
    </div>
</section>

{{-- CSS/JS veritabanindan --}}
@if(isset($item->css))<style>{!! $item->css !!}</style>@endif
@if(isset($item->js))<script>{!! $item->js !!}</script>@endif

10. Standalone Dosya Yasagi

Basit Anlatim

resources/views/themes/{tema}/ klasorunde SADECE layout kullanan dosyalar olmali. Standalone HTML dosyasi (DOCTYPE ile baslayan) YASAK!

DOGRU: Layout Kullanan Dosyalar

// resources/views/themes/t-3/homepage.blade.php
@extends('themes.t-3.layouts.app')  <-- LAYOUT VAR!

@section('content')
    {{-- Sayfa icerigi --}}
@endsection

YANLIS: Standalone

// YANLIS - Standalone
<!DOCTYPE html>
<html>
<head>...</head>  <-- LAYOUT YOK! YASAK!

KURAL

resources/views/themes/{tema}/ = Sadece homepage, ozel sayfalar
Her dosya @extends('themes.{tema}.layouts.app') ile baslamali
Modul icerikleri (blog/show, shop/show) BURAYA KOYMA!
Standalone HTML (DOCTYPE ile baslayan) YASAK!

11. Kullanici Tercihleri: ISTEMIYORUM!

Link Underline

prose-a:no-underline kullan

Inline Header

TUM sayfalar @include kullanmali

Standalone Dosya

resources/themes/ icinde DOCTYPE YASAK

Zorla Sidebar/CTA

Page modulu FREE olmali

Mobilde Tek Kolon

grid-cols-1 degil, grid-cols-2 kullan

Tutarsiz Line-Height

Her yerde leading-relaxed kullan

Yeni Tema Dosyasi Checklist

@extends('themes.{tema}.layouts.app') ile basliyor (standalone DEGIL)

Header tek dosyadan @include ile cagiriliyor

Root butonlari header'da ve TUM sayfalarda gorunuyor

BREAKPOINT: Header icin xl (1280px) kullanildi, lg DEGIL

GRID: Mobilde grid-cols-2 kullanildi, grid-cols-1 DEGIL

TYPOGRAPHY: prose-lg + prose-p:leading-relaxed kullanildi

SETTINGS: contact_phone_1, contact_phone_2, contact_whatsapp_1 kullanildi

WHATSAPP: whatsapp_link() helper kullanildi

LOGO: LogoService ile light/dark logo yonetimi yapildi

Modul icerikleri (blog/show) resources/themes/ icine KONMADI

Alpine Collapse plugin ana Alpine'dan ONCE yukleniyor

v15 Degisiklikler

1. Felsefe

2. View Path Oncelik Sirasi

DOGRU Oncelik Sirasi (ThemeService.php)

3. Breakpoint Sistemi

Basit Anlatim

Tailwind Breakpoint'leri

DOGRU: xl Breakpoint

YANLIS: lg Breakpoint (Tablet Sorunu)

4. Grid Sistemi

Basit Anlatim

DOGRU Grid Kaliplari

YANLIS: Mobilde Tek Kolon

Ornek: Hizmetler Grid

5. Typography (Line-Height)

Basit Anlatim

Line-Height Degerleri

Prose Plugin Kullanimi

YANLIS: Tutarsiz Line-Height

6. Header Yapisi

Header Katmanlari

Desktop (xl+)

Mobil/Tablet (xl alti)

Root Admin Butonlari (Logo Yaninda)

Header PHP Degiskenleri

7. Settings Pattern

v14'teki HATA DUZELTILDI!

Iletisim Ayarlari

Site Ayarlari

whatsapp_link() Helper

YANLIS Setting Key'leri

8. Logo Service

LogoService Kullanimi

Dark/Light Mode Logo Gosterimi

9. Page Modulu Ozgurlugu

Basit Anlatim

pages Tablosu

show.blade.php Template

10. Standalone Dosya Yasagi

Basit Anlatim

DOGRU: Layout Kullanan Dosyalar

YANLIS: Standalone

KURAL

11. Kullanici Tercihleri: ISTEMIYORUM!

Link Underline

Inline Header

Standalone Dosya

Zorla Sidebar/CTA

Mobilde Tek Kolon

Tutarsiz Line-Height

Yeni Tema Dosyasi Checklist