diff --git a/app/Console/Commands/SyncSpotifyMusicProductions.php b/app/Console/Commands/SyncSpotifyMusicProductions.php
index b65a2fa..7985212 100644
--- a/app/Console/Commands/SyncSpotifyMusicProductions.php
+++ b/app/Console/Commands/SyncSpotifyMusicProductions.php
@@ -168,12 +168,17 @@ class SyncSpotifyMusicProductions extends Command
 
         $slug = Str::slug($title);
 
-        $bySlug = MusicProduction::where('slug', '=', $slug, 'and')->first();
+        $bySlug = MusicProduction::query()
+            ->where('slug', $slug)
+            ->first();
+
         if ($bySlug) {
             return $bySlug;
         }
 
-        return MusicProduction::whereRaw('LOWER(title) = ?', [Str::lower($title)], 'and')->first();
+        return MusicProduction::query()
+            ->whereRaw('LOWER(title) = ?', [Str::lower($title)], 'and')
+            ->first();
     }
 
     protected function parseReleaseDate(?string $date, string $precision = 'day'): ?Carbon
diff --git a/app/Console/Commands/SyncYoutubeReleases.php b/app/Console/Commands/SyncYoutubeReleases.php
index 2bc7e5a..58497ad 100644
--- a/app/Console/Commands/SyncYoutubeReleases.php
+++ b/app/Console/Commands/SyncYoutubeReleases.php
@@ -171,15 +171,17 @@ class SyncYoutubeReleases extends Command
 
         $slug = Str::slug($title);
 
-        $bySlug = MusicProduction::whereNull('youtube_video_id')
-            ->where('slug', '=', $slug, 'and')
+        $bySlug = MusicProduction::query()
+            ->whereNull('youtube_video_id', 'and', false)
+            ->where('slug', '=', $slug)
             ->first();
 
         if ($bySlug) {
             return $bySlug;
         }
 
-        return MusicProduction::whereNull('youtube_video_id')
+        return MusicProduction::query()
+            ->whereNull('youtube_video_id', 'and', false)
             ->whereRaw('LOWER(title) = ?', [Str::lower($title)], 'and')
             ->first();
     }
diff --git a/app/Http/Controllers/MusicProductionController.php b/app/Http/Controllers/MusicProductionController.php
index e9bfc47..5953690 100644
--- a/app/Http/Controllers/MusicProductionController.php
+++ b/app/Http/Controllers/MusicProductionController.php
@@ -4,10 +4,9 @@ namespace App\Http\Controllers;
 
 use App\Models\MusicProduction;
 use App\Models\Setting;
-use App\Models\HeaderTemplate;
 use App\Models\FooterTemplate;
 use App\Services\TemplateService;
-use Illuminate\Http\Request;
+use Illuminate\Support\Str;
 
 class MusicProductionController extends Controller
 {
@@ -15,7 +14,7 @@ class MusicProductionController extends Controller
     {
         // Get Settings
         $settings = new \stdClass();
-        $allSettings = Setting::where('is_active', '=', true, 'and')->get();
+        $allSettings = Setting::query()->where('is_active', true)->get();
         foreach ($allSettings as $setting) {
             $settings->{$setting->key} = $setting->value;
         }
@@ -25,30 +24,12 @@ class MusicProductionController extends Controller
             ->ordered()
             ->paginate(9); // Using 9 for nice grid layout (3 per row)
 
-        // --- Header Logic ---
-        $renderedHeader = null;
-        $defaultHeaderId = $settings->default_header ?? null;
-        
-        if ($defaultHeaderId) {
-            $headerTemplate = HeaderTemplate::find($defaultHeaderId);
-            if ($headerTemplate) {
-                $templateDefaults = $headerTemplate->default_data ?? [];
-                $mergedHeaderData = array_merge($templateDefaults, []);
-                
-                $renderedHeader = TemplateService::replacePlaceholders(
-                    $headerTemplate->html_content,
-                    $mergedHeaderData,
-                    null
-                );
-            }
-        }
-
         // --- Footer Logic ---
         $renderedFooter = null;
         $defaultFooterId = $settings->default_footer ?? null;
         
         if ($defaultFooterId) {
-            $footerTemplate = FooterTemplate::find($defaultFooterId);
+            $footerTemplate = FooterTemplate::query()->find($defaultFooterId);
             if ($footerTemplate) {
                 $templateDefaults = $footerTemplate->default_data ?? [];
                 $mergedFooterData = array_merge($templateDefaults, []);
@@ -64,10 +45,16 @@ class MusicProductionController extends Controller
         $meta = [
             'title' => __('music_productions.nav-music-productions'),
             'description' => __('music_productions.meta-index-description'),
-            'image' => asset('assets/img/photos/about28.jpg'),
+            'image' => asset('assets/music-production.png'),
         ];
 
-        return view('front.music-productions.index', compact('productions', 'settings', 'renderedHeader', 'renderedFooter', 'meta'));
+        return view('front.music-productions.index', [
+            'productions' => $productions,
+            'settings' => $settings,
+            'header' => 'partials.header-center-nav',
+            'renderedFooter' => $renderedFooter,
+            'meta' => $meta,
+        ]);
     }
 
     public function show($slug)
@@ -78,7 +65,7 @@ class MusicProductionController extends Controller
 
         // Get Settings
         $settings = new \stdClass();
-        $allSettings = Setting::where('is_active', '=', true, 'and')->get();
+        $allSettings = Setting::query()->where('is_active', true)->get();
         foreach ($allSettings as $setting) {
             $settings->{$setting->key} = $setting->value;
         }
@@ -108,30 +95,12 @@ class MusicProductionController extends Controller
             ->orderBy('id', 'asc')
             ->first();
 
-        // --- Header Logic ---
-        $renderedHeader = null;
-        $defaultHeaderId = $settings->default_header ?? null;
-        
-        if ($defaultHeaderId) {
-            $headerTemplate = HeaderTemplate::find($defaultHeaderId);
-            if ($headerTemplate) {
-                $templateDefaults = $headerTemplate->default_data ?? [];
-                $mergedHeaderData = array_merge($templateDefaults, []);
-                
-                $renderedHeader = TemplateService::replacePlaceholders(
-                    $headerTemplate->html_content,
-                    $mergedHeaderData,
-                    $production
-                );
-            }
-        }
-
         // --- Footer Logic ---
         $renderedFooter = null;
         $defaultFooterId = $settings->default_footer ?? null;
         
         if ($defaultFooterId) {
-            $footerTemplate = FooterTemplate::find($defaultFooterId);
+            $footerTemplate = FooterTemplate::query()->find($defaultFooterId);
             if ($footerTemplate) {
                 $templateDefaults = $footerTemplate->default_data ?? [];
                 $mergedFooterData = array_merge($templateDefaults, []);
@@ -146,10 +115,18 @@ class MusicProductionController extends Controller
 
         $meta = [
             'title' => $production->translate('title'),
-            'description' => \Str::limit(strip_tags($production->translate('content')), 160),
+            'description' => Str::limit(strip_tags($production->translate('content')), 160),
             'image' => $production->cover_image_url,
         ];
 
-        return view('front.music-productions.show', compact('production', 'prev', 'next', 'settings', 'renderedHeader', 'renderedFooter', 'meta'));
+        return view('front.music-productions.show', [
+            'production' => $production,
+            'prev' => $prev,
+            'next' => $next,
+            'settings' => $settings,
+            'header' => 'partials.header-center-nav',
+            'renderedFooter' => $renderedFooter,
+            'meta' => $meta,
+        ]);
     }
 }
diff --git a/public/assets/music-production.png b/public/assets/music-production.png
new file mode 100644
index 0000000..51347ac
Binary files /dev/null and b/public/assets/music-production.png differ
diff --git a/resources/views/front/music-productions/index.blade.php b/resources/views/front/music-productions/index.blade.php
index dc32d56..8b2da9e 100644
--- a/resources/views/front/music-productions/index.blade.php
+++ b/resources/views/front/music-productions/index.blade.php
@@ -4,11 +4,18 @@
 {{-- demo28.html: hero + itemgrid --}}
 <section class="wrapper bg-gradient-blend">
   <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-14 md:pb-32 xl:pb-40 lg:pb-40">
-    <div class="flex flex-wrap mx-[-15px]">
-      <div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-        <div class="img-mask mask-2">
-          <img src="{{ asset('assets/img/photos/about28.jpg') }}" alt="{{ __('music_productions.meta-index-title') }}">
-        </div>
+    <div class="flex flex-wrap mx-[-15px] justify-center">
+      <div class="w-full md:w-10/12 lg:w-9/12 xl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full">
+        <figure class="!mb-0 flex justify-center">
+          <img
+            class="w-full h-auto max-w-full object-contain"
+            src="{{ asset('assets/music-production.png') }}"
+            alt="{{ __('music_productions.meta-index-title') }}"
+            width="1056"
+            height="576"
+            loading="eager"
+          >
+        </figure>
       </div>
       <!-- /column -->
     </div>
@@ -82,19 +89,19 @@
           @endphp
           <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full {{ $variant['filter'] }} px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-              <figure class="card-img-top itooltip {{ $variant['tooltip'] }}" title='<h5 class="!mb-0">{{ e(__('music_productions.view_details_tooltip')) }}</h5>'>
-                <a href="{{ $detailUrl }}">
+              <figure class="card-img-top music-production-cover itooltip {{ $variant['tooltip'] }}" title='<h5 class="!mb-0">{{ e(__('music_productions.view_details_tooltip')) }}</h5>'>
+                <a href="{{ $detailUrl }}" class="music-production-cover__link">
                   @if($production->cover_image_url)
-                    <img src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}">
+                    <img src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}" loading="lazy">
                   @else
-                    <img src="{{ asset('assets/img/photos/pd6.jpg') }}" alt="{{ $production->translate('title') }}">
+                    <img src="{{ asset('assets/img/photos/pd6.jpg') }}" alt="{{ $production->translate('title') }}" loading="lazy">
                   @endif
                 </a>
               </figure>
               <div class="card-body p-7">
                 <div class="post-header">
                   <div class="{{ $variant['label_class'] }}">{{ $categoryLabel }}</div>
-                  <h3 class="!mb-0">{{ $production->translate('title') }}</h3>
+                  <h3 class="!mb-0 truncate" title="{{ $production->translate('title') }}">{{ $production->translate('title') }}</h3>
                 </div>
                 <!-- /.post-header -->
               </div>
@@ -141,6 +148,29 @@
 
 @push('styles')
 <style>
+/* 1:1 kapak karesi — dikdörtgen görseli kırpar, yan boşluk bırakmaz */
+.projects-masonry .music-production-cover {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 0;
+  border-radius: 0.4rem 0.4rem 0 0;
+}
+.projects-masonry .music-production-cover__link {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.projects-masonry .music-production-cover img {
+  display: block;
+  width: 100%;
+  height: 100% !important;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 0.4rem 0.4rem 0 0;
+}
+
 .pagination-wrapper .pagination {
   display: flex;
   gap: 0.35rem;
diff --git a/resources/views/partials/header-center-nav.blade.php b/resources/views/partials/header-center-nav.blade.php
new file mode 100644
index 0000000..faf8541
--- /dev/null
+++ b/resources/views/partials/header-center-nav.blade.php
@@ -0,0 +1,89 @@
+{{-- demo28.html: center-nav transparent position-absolute navbar-light --}}
+<header class="relative wrapper">
+  <nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-light">
+    <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+      <div class="navbar-brand w-full">
+        <a href="{{ url('/') }}">
+          <img src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" loading="lazy">
+        </a>
+      </div>
+      <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+        <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+          <a href="{{ url('/') }}">
+            <img class="!h-[2.2rem]" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" loading="lazy">
+          </a>
+          <button type="button" class="btn-close !text-white" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
+        </div>
+        <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
+          @include('components.custom.menu')
+          <div class="offcanvas-footer xl:!hidden lg:!hidden !mt-auto">
+            <div>
+              <a href="mailto:{{ setting('contact_email') }}" class="link-inverse">{{ setting('contact_email') }}</a>
+              <br>
+              <a href="tel:{{ setting('contact_phone') }}">{{ setting('contact_phone') }}</a>
+              <br>
+              @php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
+              <nav class="nav social social-white !mt-4">
+                @if(!empty($social_media['Twitter']))
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                @endif
+                @if(!empty($social_media['Facebook']))
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                @endif
+                @if(!empty($social_media['Instagram']))
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                @endif
+                @if(!empty($social_media['Youtube']))
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                @endif
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navbar-other w-full !flex !ml-auto">
+        <ul class="navbar-nav !flex-row !items-center !ml-auto">
+          <li class="nav-item hidden xl:!flex lg:!flex">
+            @include('components.custom.language-selector')
+          </li>
+          <li class="nav-item hidden xl:!block lg:!block">
+            @php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
+            <nav class="nav social social-muted justify-end text-right">
+              @if(!empty($social_media['Twitter']))
+                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+              @endif
+              @if(!empty($social_media['Facebook']))
+                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+              @endif
+              @if(!empty($social_media['Instagram']))
+                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
+              @endif
+              @if(!empty($social_media['Youtube']))
+                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
+              @endif
+            </nav>
+          </li>
+          <li class="nav-item xl:!hidden lg:!hidden">
+            <button class="hamburger offcanvas-nav-btn" type="button" data-bs-toggle="offcanvas" data-bs-target=".offcanvas-nav"><span></span></button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  var offcanvases = document.querySelectorAll('.offcanvas-nav');
+  var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
+  if (offcanvases.length > 0 && hamburgers.length > 0) {
+    offcanvases.forEach(function (oc) {
+      oc.addEventListener('show.bs.offcanvas', function () {
+        hamburgers.forEach(function (h) { h.classList.add('is-active'); });
+      });
+      oc.addEventListener('hide.bs.offcanvas', function () {
+        hamburgers.forEach(function (h) { h.classList.remove('is-active'); });
+      });
+    });
+  }
+});
+</script>