v16 - Container + Subheader + Grid Mantigi

t-{id} Tema Yapisi

Multi-Tenant Tema Sistemi - Kapsamli Referans Dokumani

v16 Degisiklikler

CONTAINER: ixtif standardi - container mx-auto px-4 sm:px-4 md:px-2
SUBHEADER: Minimal subheader pattern - Breadcrumb + H1 (gradient header KALDIRILDI)
GRID: Modul tipine gore - Gorsel modullerde grid-cols-2, text modullerde grid-cols-1
TYPOGRAPHY: prose-base + font-body + font-heading + dark:prose-invert
BREAKPOINTS: Header xl (1280px) breakpoint sistemi - lg yerine xl kullanilmali
SETTINGS: contact_phone_1, contact_phone_2, contact_whatsapp_1 pattern'i
LOGO: LogoService light/dark logo yonetimi
HELPER: whatsapp_link() global helper fonksiyonu

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)

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

Ana tema klasoru - TEK DOSYA PRENSIBI - ONCELIKLI!

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

Modul ici tema - Fallback (resources'da yoksa)

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

Simple tema fallback - MODUL ICINDE

{modul}::front.{view}

Son care - Modul front klasoru

3. Container Pattern (ixtif Standardi)

YENI v16

Basit Anlatim

Tum sayfalarda ayni container genisligi kullanilmali. ixtif.com header genisligi referans alinmistir.

DOGRU: ixtif Standardi

{{-- TUM sayfalar bu container'i kullanmali --}}
<div class="container mx-auto px-4 sm:px-4 md:px-2">
    ...
</div>

// Mobil (0-767px): px-4 (16px)
// Tablet (768px+): px-4 (16px)
// Desktop (md/768px+): px-2 (8px) - daha dar padding

YANLIS: Eski Genis Padding

{{-- YANLIS! Fazla padding, tutarsiz --}}
<div class="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

{{-- DOGRU! --}}
<div class="container mx-auto px-4 sm:px-4 md:px-2">

4. Minimal Subheader Pattern

YENI v16

Basit Anlatim

Gradient header KALDIRILDI! Yerine minimal subheader: Breadcrumb + H1 baslik, gri arkaplan.

DOGRU: Minimal Subheader

{{-- MINIMAL SUBHEADER --}}
<section class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="container mx-auto px-4 sm:px-4 md:px-2 py-4">
        {{-- Breadcrumb --}}
        <nav class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            @foreach($breadcrumbsArray as $index => $crumb)
                @if(isset($crumb['url']))
                    <a href="{{ $crumb['url'] }}" class="hover:text-primary-600">{{ $crumb['label'] }}</a>
                    @if($index < count($breadcrumbsArray) - 1)
                        <span class="mx-2">/</span>
                    @endif
                @else
                    <span class="text-gray-900 dark:text-white font-medium">{{ $crumb['label'] }}</span>
                @endif
            @endforeach
        </nav>
        {{-- H1 Baslik --}}
        <h1 class="text-2xl md:text-3xl font-bold font-heading text-gray-900 dark:text-white">
            {{ $title }}
        </h1>
    </div>
</section>

YANLIS: Gradient Header (KALDIRILDI)

{{-- YANLIS! Gradient header kullanma --}}
<section class="bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900 py-12 md:py-16">
    <h1 class="text-3xl md:text-5xl lg:text-6xl">...</h1>
    <div class="h-1 w-24 bg-gradient-to-r">...</div>
</section>

{{-- DOGRU! Minimal subheader --}}
<section class="bg-gray-50 dark:bg-gray-800 border-b py-4">

Breadcrumb Array Ornegi

@php
    $breadcrumbsArray = [
        ['label' => __('blog::front.general.home'), 'url' => url('/')],
        ['label' => __('blog::front.general.blogs'), 'url' => url($blogIndexUrl)],
        ['label' => $title]  // Son eleman URL'siz (aktif sayfa)
    ];
@endphp

5. Breakpoint Sistemi

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>

6. Grid Sistemi (Modul Tipine Gore)

GUNCELLENDI v16

Basit Anlatim

Grid yapisi modul tipine gore degisir. Gorsel agirlikli modullerde 2 kolon, text agirlikli modullerde 1 kolon mobilde daha okunabilir.

Gorsel Agirlikli Moduller

Sadece gorsel + baslik, az text

Service	`grid-cols-2 md:grid-cols-3`
Portfolio	`grid-cols-2 md:grid-cols-3`
Galeri	`grid-cols-2 md:grid-cols-3 lg:grid-cols-4`

Text Agirlikli Moduller

Baslik + aciklama + tarih + okuma suresi

Blog	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
Page	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
Announcement	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
Payment	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`

Neden Farkli Grid?

Gorsel Moduller (grid-cols-2)

Card icinde sadece resim ve baslik var. Mobilde 2 kolon gayet okunabilir ve alan verimli kullanilir.

Text Moduller (grid-cols-1)

Card icinde resim + baslik + aciklama + tarih + okuma suresi var. Mobilde 2 kolon cok dar, text okunmaz.

7. Typography (Prose Styling)

GUNCELLENDI v16

Basit Anlatim

Icerik alanlari icin prose-base (prose-lg degil) + font-body/font-heading + dark:prose-invert kullanilmali.

DOGRU: Prose Styling

{{-- Icerik alanlari icin --}}
<div class="prose prose-base max-w-none font-body dark:prose-invert
          prose-headings:font-heading prose-headings:text-gray-900 dark:prose-headings:text-white
          prose-p:text-gray-600 dark:prose-p:text-gray-300
          prose-a:text-primary-600 dark:prose-a:text-primary-400 hover:prose-a:underline
          prose-strong:text-gray-900 dark:prose-strong:text-white
          prose-ul:text-gray-600 dark:prose-ul:text-gray-300
          prose-ol:text-gray-600 dark:prose-ol:text-gray-300
          prose-blockquote:border-l-primary-500
          prose-img:rounded-xl prose-img:shadow-lg">
    @parsewidgets($body ?? '')
</div>

Onemli Noktalar

prose-base kullan (prose-lg cok buyuk)
font-body icerik icin, font-heading basliklar icin
dark:prose-invert dark mode icin
Dark mode'da prose-p:text-gray-300 (gray-400 cok soluk)

YANLIS: Eski Prose

{{-- YANLIS! --}}
<div class="prose prose-lg md:prose-xl">  // Cok buyuk
<div class="prose dark:prose-p:text-gray-400">  // Cok soluk

{{-- DOGRU! --}}
<div class="prose prose-base font-body dark:prose-invert">

8. Header Yapisi

Header Katmanlari

Top Bar

Telefon numaralari, WhatsApp, calisma saatleri

Main Header (sticky)

Logo, navigasyon, dark mode toggle, CTA butonlari

Mobile Menu (xl:hidden)

x-show ile acilir/kapanir

9. Settings Pattern

Iletisim Ayarlari

Key	Aciklama
`contact_phone_1`	Ana telefon (sabit)
`contact_phone_2`	Mobil telefon
`contact_whatsapp_1`	WhatsApp numarasi
`contact_email_1`	E-posta

whatsapp_link() Helper

// 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!

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

10. Logo Service

LogoService Kullanimi

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

@if($hasLogo)
    @if($logos['has_light'] && $logos['has_dark'])
        <img src="{{ $logos['light_logo_url'] }}" class="dark:hidden h-10">
        <img src="{{ $logos['dark_logo_url'] }}" class="hidden dark:block h-10">
    @endif
@endif

Yeni Tema Dosyasi Checklist

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

CONTAINER: container mx-auto px-4 sm:px-4 md:px-2 kullanildi

SUBHEADER: Minimal subheader (breadcrumb + h1) kullanildi, gradient DEGIL

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

GRID: Gorsel modullerde grid-cols-2, text modullerde grid-cols-1

TYPOGRAPHY: prose-base + font-body + dark:prose-invert kullanildi

SETTINGS: contact_phone_1, contact_whatsapp_1 kullanildi

LOGO: LogoService ile light/dark logo yonetimi yapildi