From 752876fed955ac61f043188a24dbde58b837a964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Fri, 22 May 2026 08:09:31 +0300
Subject: [PATCH] refactor: simplify header structure and enhance app
 development hero section styles for improved responsiveness and visual
 consistency

---
 .../partials/header-app-development.blade.php |  2 +-
 .../services/app-development.blade.php        | 47 ++++++++++++++++---
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/resources/views/partials/header-app-development.blade.php b/resources/views/partials/header-app-development.blade.php
index a650005..c48c025 100644
--- a/resources/views/partials/header-app-development.blade.php
+++ b/resources/views/partials/header-app-development.blade.php
@@ -1,5 +1,5 @@
 {{-- Uygulama Geliştirme sayfası (demo29): center-nav transparent position-absolute navbar-light caret-none --}}
-<header class="relative wrapper">
+<header>
   <nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-light caret-none">
     <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
       <div class="navbar-brand w-full">
diff --git a/resources/views/templates/services/app-development.blade.php b/resources/views/templates/services/app-development.blade.php
index ba0c17b..49cc9ca 100644
--- a/resources/views/templates/services/app-development.blade.php
+++ b/resources/views/templates/services/app-development.blade.php
@@ -96,6 +96,20 @@
         flex-shrink: 0;
     }
 
+    /* Header — masaüstünde şeffaf, hero arka planı üstten başlasın */
+    body:has(.app-dev-hero) > header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 1030;
+        background: transparent !important;
+    }
+    body:has(.app-dev-hero) > header .navbar.transparent:not(.fixed):not(.navbar-clone) {
+        background: transparent !important;
+        box-shadow: none !important;
+    }
+
     /* Hero — metin üstte, görsel altta */
     .app-dev-hero .app-dev-hero-text {
         position: relative;
@@ -105,23 +119,23 @@
         position: relative;
         z-index: 2;
         width: 100%;
-        max-width: 42rem;
+        max-width: 32rem;
         margin-left: auto;
         margin-right: auto;
     }
     @media (min-width: 768px) {
         .app-dev-hero .app-dev-hero-image {
-            max-width: 48rem;
+            max-width: 36rem;
         }
     }
     @media (min-width: 1200px) {
         .app-dev-hero .app-dev-hero-image {
-            max-width: 56rem;
+            max-width: 42rem;
         }
     }
     @media (min-width: 1400px) {
         .app-dev-hero .app-dev-hero-image {
-            max-width: 62rem;
+            max-width: 46rem;
         }
     }
     .app-dev-hero .app-dev-hero-image img {
@@ -129,6 +143,25 @@
         max-width: 100%;
         height: auto;
     }
+    .app-dev-hero > .container {
+        padding-bottom: 0 !important;
+    }
+    .app-dev-hero .divider {
+        margin-bottom: -2.5rem;
+    }
+    @media (min-width: 992px) {
+        .app-dev-hero .divider {
+            margin-bottom: -3.5rem;
+        }
+    }
+    .app-dev-features-start {
+        padding-top: 3rem !important;
+    }
+    @media (min-width: 992px) {
+        .app-dev-features-start {
+            padding-top: 4rem !important;
+        }
+    }
 </style>
 @endpush
 
@@ -290,7 +323,7 @@
 
 {{-- Hero --}}
 <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)] app-dev-hero" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
-    <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-6 xl:pb-8">
+    <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-0">
         <div class="flex flex-col mx-0 !mt-[-50px] items-center text-center">
             <div class="w-full xl:w-10/12 lg:w-10/12 xxl:w-8/12 flex-[0_0_auto] max-w-full !relative !mt-[50px] app-dev-hero-text" data-cues="slideInDown" data-group="page-title" data-delay="700">
                 <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -12%; left: 4%" alt="" loading="lazy">
@@ -302,7 +335,7 @@
                     {!! t('Trunçgil Teknoloji olarak Android, iOS, Windows, macOS, Huawei AppGallery, Meta Quest ve web için uygulamalarınızı fikirden yayına kadar hayata geçiriyoruz.') !!}
                 </p>
             </div>
-            <div class="app-dev-hero-image !mt-8 xl:!mt-10 lg:!mt-10 md:!mt-10 !mb-[-4rem] xl:!mb-[-6rem] lg:!mb-[-5rem]" data-cues="slideInDown" data-delay="600">
+            <div class="app-dev-hero-image !mt-6 xl:!mt-8 lg:!mt-8 md:!mt-8 !mb-[-4rem] xl:!mb-[-5rem] lg:!mb-[-4.5rem]" data-cues="slideInDown" data-delay="600">
                 <figure class="m-0 p-0">
                     <x-front.page-hero-image
                         :hero="$pageHero"
@@ -325,7 +358,7 @@
 
 {{-- Features --}}
 <section class="wrapper !bg-[#ffffff] app-dev-section">
-    <div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
+    <div class="container app-dev-features-start pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 !mt-[-50px] !mb-10 xl:!mb-14 items-center justify-center app-dev-platform-strip">
             @foreach($platforms as $platform)
             <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">