diff --git a/public/assets/img/illustrations/truncgil-odullerimiz.png b/public/assets/img/illustrations/truncgil-odullerimiz.png
new file mode 100644
index 0000000..bd3a968
Binary files /dev/null and b/public/assets/img/illustrations/truncgil-odullerimiz.png differ
diff --git a/public/assets/img/illustrations/truncgil-odullerimiz.webp b/public/assets/img/illustrations/truncgil-odullerimiz.webp
new file mode 100644
index 0000000..662c89b
Binary files /dev/null and b/public/assets/img/illustrations/truncgil-odullerimiz.webp differ
diff --git a/resources/views/templates/odullerimiz.blade.php b/resources/views/templates/odullerimiz.blade.php
index 7387afa..86c46ec 100644
--- a/resources/views/templates/odullerimiz.blade.php
+++ b/resources/views/templates/odullerimiz.blade.php
@@ -13,67 +13,107 @@
     $heroTitle = $page ? ($page->translate('title') ?: $page->title) : t('Ödüllerimiz ve Başarılarımız');
     $heroExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : t('Yenilikçi teknolojilerimizle sektöre yön veriyor, başarılarımızı küresel ödüllerle taçlandırıyoruz.');
 
-    // Timeline color palette
-    $colors = ['#e31e24', '#f5a623', '#27ae60', '#2980b9', '#8e44ad', '#1abc9c'];
+    // Timeline color palette mapping for elegant signature styles
+    $colors = [
+        'hackathon' => '#e31e24',
+        'export' => '#2980b9',
+        'innovation' => '#27ae60',
+        'design' => '#8e44ad',
+        'general' => '#f5a623'
+    ];
+    
+    $rgbColors = [
+        'hackathon' => '227, 30, 36',
+        'export' => '41, 128, 185',
+        'innovation' => '39, 174, 96',
+        'design' => '142, 68, 173',
+        'general' => '245, 166, 35'
+    ];
 
-    // Dynamic cover image pulling from page's featured image or falling back
-    $coverImage = ($page && $page->featured_image) 
-        ? asset('storage/' . $page->featured_image) 
-        : (($page && $page->featured_image_url) ? $page->featured_image_url : asset('assets/img/photos/bg4.webp'));
+    $heroTitleBefore = t('Başarılarımızı ve ') ?? 'Başarılarımızı ve ';
+    $heroHighlight = t('Ödüllerimizi ') ?? 'Ödüllerimizi ';
+    $heroTitleAfter = t('Taçlandırıyoruz') ?? 'Taçlandırıyoruz';
+    $heroCtaLabel = t('Ödülleri Keşfet') ?? 'Ödülleri Keşfet';
 @endphp
 
-<div class="grow shrink-0 bg-[#fbfcfd]">
+@include('components.company-history.fonts')
+
+<div class="grow shrink-0 bg-[#f8fafc]">
     
     <!-- Hero Section -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.55)]" data-image-src="{{ $coverImage }}" style="background-image: url('{{ $coverImage }}');">
-        <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
-            <div class="flex flex-wrap mx-[-15px]">
-                <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                    <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.6rem] !mb-4 !text-white">{{ $heroTitle }}</h1>
-                    <p class="lead !text-[1.05rem] !leading-[1.6] !text-white opacity-90 max-w-2xl mx-auto mb-6">{{ $heroExcerpt }}</p>
-                    <nav class="inline-block" aria-label="breadcrumb">
-                        <ol class="breadcrumb flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px] justify-center">
-                            <li class="breadcrumb-item flex !text-[#c3c3c3]"><a class="!text-white hover:text-[#e31e24]" href="{{ url('/') }}">{{ t('Anasayfa') }}</a></li>
-                            <li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">{{ t('Ödüllerimiz') }}</li>
-                        </ol>
-                    </nav>
+    <section class="company-history-fonts company-history-hero wrapper bg-gradient-yellow relative overflow-hidden pb-12 pt-6">
+        <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(254,243,199,0.4),transparent_50%)]"></div>
+        <div class="container pt-10 xl:pt-[5rem] lg:pt-[5rem] md:pt-[5rem] pb-10 xl:pb-14 lg:pb-14 md:pb-14 relative z-10">
+            <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full order-last lg:order-first">
+                    <figure class="m-0 p-0 relative group">
+                        <div class="absolute -inset-1 bg-gradient-to-r from-red-500 to-amber-500 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
+                        <picture class="relative block bg-white/40 backdrop-blur-md p-4 rounded-2xl border border-white/50 shadow-xl">
+                            <img
+                                class="w-auto max-w-full h-auto rounded-xl transform hover:scale-[1.02] transition-all duration-500"
+                                src="{{ asset('assets/img/illustrations/truncgil-odullerimiz.webp') }}"
+                                alt="{{ t('Ödüllerimiz') }}"
+                                style="max-height: 420px; object-fit: contain; width: 100%;"
+                                loading="eager"
+                                fetchpriority="high"
+                                decoding="async"
+                            >
+                        </picture>
+                    </figure>
+                </div>
+
+                <div class="md:w-10/12 lg:w-6/12 xl:w-6/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:!text-left xl:!text-left">
+                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#e31e24]/10 text-[#e31e24] mb-4">
+                        <i class="uil uil-trophy"></i> {{ t('Gurur Tablomuz') }}
+                    </span>
+                    <h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0 !leading-[1.2]">
+                        {{ $heroTitleBefore }}<span class="company-history-hero__highlight text-[#e31e24]">{{ $heroHighlight }}</span>{{ $heroTitleAfter }}
+                    </h1>
+                    <p class="lead !text-[1.05rem] !leading-[1.7] text-gray-600 mb-8 max-w-xl mx-auto lg:mx-0">{{ $heroExcerpt }}</p>
+                    <div class="flex flex-wrap justify-center lg:justify-start gap-4">
+                        <a
+                            href="#awards-timeline-section"
+                            class="company-history-hero__cta btn btn-red !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#c8191f] hover:!border-[#c8191f] !rounded-[50rem] px-8 py-3.5 text-sm font-bold shadow-lg shadow-red-500/20 hover:shadow-red-500/30 hover:translate-y-[-0.15rem] transition-all duration-300"
+                        >
+                            {{ $heroCtaLabel }} <i class="uil uil-arrow-down ml-1"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Main Content wrapper with Timeline -->
-    <section class="wrapper !bg-[#f4f6f8] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#f4f6f8] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
-        <div class="container pb-16">
-            <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem] relative z-10">
-                
-                <!-- Category Filters -->
-                <div class="flex flex-wrap justify-center gap-2 mb-14" id="awards-filter-tabs">
-                    <button class="filter-btn active px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="all">
-                        {{ t('Tüm Ödüller') }}
+    <section id="awards-timeline-section" class="wrapper !bg-[#f8fafc] py-16 relative">
+        <div class="container">
+            
+            <!-- Elegant Interactive Filter Tabs -->
+            @if(count($categories) > 0)
+            <div id="awards-filter-tabs" class="flex justify-center mb-16 relative z-10">
+                <div class="inline-flex flex-wrap justify-center gap-2 p-1.5 bg-white/80 backdrop-blur-md rounded-2xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-slate-100">
+                    <button class="filter-btn px-5 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider transition-all duration-300 active" data-filter="all">
+                        <i class="uil uil-apps mr-1 text-sm align-middle"></i> {{ t('Tümü') }}
                     </button>
-                    @if(in_array('hackathon', $categories))
-                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="hackathon">
-                            {{ t('Hackathon / Yarışma') }}
+                    @foreach($categories as $cat)
+                        @php
+                            $labelKey = 'awards.category_' . $cat;
+                            $label = Lang::has($labelKey) ? __($labelKey) : ucfirst($cat);
+                            $icon = 'uil-award';
+                            if($cat === 'hackathon') $icon = 'uil-trophy';
+                            elseif($cat === 'export') $icon = 'uil-globe';
+                            elseif($cat === 'innovation') $icon = 'uil-lightbulb';
+                            elseif($cat === 'design') $icon = 'uil-palette';
+                        @endphp
+                        <button class="filter-btn px-5 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider transition-all duration-300 text-gray-500 hover:text-gray-900 hover:bg-slate-50" data-filter="{{ $cat }}">
+                            <i class="uil {{ $icon }} mr-1 text-sm align-middle"></i> {{ $label }}
                         </button>
-                    @endif
-                    @if(in_array('export', $categories))
-                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="export">
-                            {{ t('İhracat / Başarı') }}
-                        </button>
-                    @endif
-                    @if(in_array('innovation', $categories))
-                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="innovation">
-                            {{ t('İnovasyon / Ar-Ge') }}
-                        </button>
-                    @endif
-                    @if(in_array('design', $categories))
-                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="design">
-                            {{ t('Tasarım') }}
-                        </button>
-                    @endif
+                    @endforeach
                 </div>
+            </div>
+            @endif
 
+            <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto relative z-10">
+                
                 <!-- Timeline Container -->
                 <div class="awards-timeline" data-timeline-animate>
                     <div class="awards-timeline__start awards-timeline__reveal">
@@ -83,11 +123,13 @@
                     <div class="awards-timeline__track">
                         @foreach($awards as $index => $award)
                             @php
-                                $color = $colors[$index % count($colors)];
+                                $catType = $award->category ?: 'general';
+                                $color = $colors[$catType] ?? '#f5a623';
+                                $rgb = $rgbColors[$catType] ?? '245, 166, 35';
                                 $position = $index % 2 === 0 ? 'right' : 'left';
                                 $imgSrc = str_starts_with($award->image, 'assets/') ? asset($award->image) : asset('storage/' . $award->image);
                             @endphp
-                            <article class="awards-timeline__item awards-timeline__item--{{ $position }} awards-timeline__reveal" style="--item-color: {{ $color }};" data-category="{{ $award->category }}">
+                            <article class="awards-timeline__item awards-timeline__item--{{ $position }} awards-timeline__reveal" style="--item-color: {{ $color }}; --item-color-rgb: {{ $rgb }};" data-category="{{ $award->category }}">
                                 
                                 <!-- Timeline Axis Dot & Line -->
                                 <div class="awards-timeline__axis">
@@ -96,46 +138,51 @@
 
                                 <!-- Timeline Card -->
                                 <div class="awards-timeline__side awards-timeline__side--inner">
-                                    <div class="awards-timeline__content bg-white rounded-[0.8rem] border border-[rgba(30,34,40,0.06)] hover:translate-y-[-0.25rem] transition-all duration-300 hover:shadow-[0_1rem_2.5rem_rgba(30,34,40,0.08)] flex flex-col overflow-hidden group">
+                                    <div class="awards-timeline__content bg-white rounded-2xl border border-slate-100/80 transition-all duration-300 flex flex-col overflow-hidden group">
                                         
                                         <!-- Ceremony Photo Banner -->
-                                        <div class="award-photo-wrapper" style="width: 100%; height: 240px; overflow: hidden; position: relative; background: #eef1f4;">
-                                            <img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;" class="award-photo-img group-hover:scale-105" />
+                                        <div class="award-photo-wrapper relative overflow-hidden bg-slate-100" style="width: 100%; height: 260px;">
+                                            <img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);" class="award-photo-img group-hover:scale-105" />
+                                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80"></div>
+                                            
                                             <!-- Badge on Image -->
-                                            <div style="position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;">
-                                                <span class="badge bg-[#1e2229]/80 !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;">
+                                            <div class="absolute top-4 left-4 flex flex-wrap gap-2">
+                                                <span class="badge backdrop-blur-md bg-white/90 text-slate-800 text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
                                                     {{ $award->category === 'hackathon' ? t('Yarışma') : ($award->category === 'export' ? t('İhracat') : t('Başarı')) }}
                                                 </span>
                                                 @if($award->is_featured)
-                                                    <span class="badge bg-[#f5a623] !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;">
+                                                    <span class="badge backdrop-blur-md bg-[#f5a623] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
                                                         <i class="uil uil-star"></i> {{ t('Öne Çıkan') }}
                                                     </span>
                                                 @endif
                                             </div>
                                         </div>
 
-                                        <!-- Card Info Padding Content -->
-                                        <div class="p-6 md:p-8 flex flex-col gap-3 text-start">
-                                            <div style="font-size: 0.72rem; color: #959ca9; font-weight: 600;">
-                                                <i class="uil uil-calendar-alt"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
+                                        <!-- Card Content -->
+                                        <div class="p-6 md:p-8 flex flex-col gap-4 text-start relative">
+                                            <div class="flex items-center gap-1.5 text-[0.72rem] text-slate-400 font-bold">
+                                                <i class="uil uil-calendar-alt text-[#e31e24]"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
                                             </div>
 
-                                            <h3 class="text-base font-extrabold text-gray-900 mb-1 leading-snug group-hover:text-[#e31e24] transition-colors duration-300">
+                                            <h3 class="text-lg font-black text-slate-850 mb-1 leading-snug group-hover:text-[#e31e24] transition-colors duration-300">
                                                 {{ $award->translate('title') }}
                                             </h3>
 
-                                            <p class="text-xs leading-relaxed text-gray-500 mb-2">
+                                            <p class="text-xs leading-relaxed text-slate-500">
                                                 {{ $award->translate('description') }}
                                             </p>
 
                                             <!-- Footer elements -->
-                                            <div class="flex items-center justify-between pt-3 border-t border-gray-100 mt-2">
-                                                <span class="text-[0.72rem] font-bold text-gray-600 flex items-center gap-1">
-                                                    <i class="uil uil-award text-[#e31e24] text-sm"></i> {{ $award->translate('issuer') }}
+                                            <div class="flex items-center justify-between pt-4 border-t border-slate-100 mt-2">
+                                                <span class="text-[0.72rem] font-black text-slate-700 flex items-center gap-1.5">
+                                                    <span class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-[#e31e24]">
+                                                        <i class="uil uil-award text-[0.85rem]"></i>
+                                                    </span>
+                                                    {{ $award->translate('issuer') }}
                                                 </span>
                                                 @if($award->external_link)
-                                                    <a href="{{ $award->external_link }}" target="_blank" class="text-[0.72rem] font-bold text-[#e31e24] hover:underline flex items-center gap-0.5">
-                                                        {{ t('Doğrula') }} <i class="uil uil-external-link-alt"></i>
+                                                    <a href="{{ $award->external_link }}" target="_blank" class="verify-link text-[0.72rem] font-extrabold text-[#e31e24] flex items-center gap-1">
+                                                        {{ t('Doğrula') }} <i class="uil uil-external-link-alt transform group-hover:translate-x-0.5 group-hover:translate-y-[-0.5px] transition-transform duration-300"></i>
                                                     </a>
                                                 @endif
                                             </div>
@@ -144,7 +191,7 @@
                                     </div>
                                 </div>
 
-                            </article>
+                             </article>
                         @endforeach
                     </div>
 
@@ -153,60 +200,22 @@
                     </div>
                 </div>
 
-                <!-- Standards and Trust elements -->
-                <div class="my-16 border-t border-gray-200/60 pt-16">
-                    <div class="text-center mb-8">
-                        <span class="badge bg-pale-red text-red !rounded-[50rem] uppercase tracking-wider font-semibold text-[0.7rem] px-3 py-1 mb-2 inline-block">{{ t('GÜVEN & STANDARTLAR') }}</span>
-                        <h3 class="!text-[calc(1.2rem_+_0.6vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] text-[#1e2229]">{{ t('Standartlarımız ve Sertifikalarımız') }}</h3>
-                        <p class="text-xs text-gray-500 leading-relaxed max-w-xl mx-auto mt-2">{{ t('Bir teknoloji şirketi olarak, geliştirdiğimiz tüm sistemlerde ulusal ve uluslararası güvenlik ve kalite standartlarına tam uyum sağlıyoruz.') }}</p>
-                    </div>
-
-                    <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12 mt-10">
-                        <!-- ISO 27001 -->
-                        <div class="flex flex-col items-center max-w-[120px] text-center group">
-                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
-                                <i class="uil uil-shield-check text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
-                            </div>
-                            <span class="text-xs font-bold text-gray-700 leading-tight">ISO 27001</span>
-                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Bilgi Güvenliği') }}</span>
-                        </div>
-                        <!-- ISO 9001 -->
-                        <div class="flex flex-col items-center max-w-[120px] text-center group">
-                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
-                                <i class="uil uil-check-square text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
-                            </div>
-                            <span class="text-xs font-bold text-gray-700 leading-tight">ISO 9001</span>
-                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Kalite Yönetimi') }}</span>
-                        </div>
-                        <!-- KVKK / GDPR -->
-                        <div class="flex flex-col items-center max-w-[120px] text-center group">
-                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
-                                <i class="uil uil-lock text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
-                            </div>
-                            <span class="text-xs font-bold text-gray-700 leading-tight">KVKK / GDPR</span>
-                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Veri Güvenliği') }}</span>
-                        </div>
-                        <!-- Teknopark -->
-                        <div class="flex flex-col items-center max-w-[120px] text-center group">
-                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
-                                <i class="uil uil-building text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
-                            </div>
-                            <span class="text-xs font-bold text-gray-700 leading-tight">Teknopark</span>
-                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Ar-Ge Liderliği') }}</span>
-                        </div>
-                    </div>
-                </div>
-
                 <!-- Employer Branding Closing CTA -->
-                <div class="my-16 bg-gradient-to-r from-red to-rose-600 rounded-[1rem] p-8 md:p-12 !text-white text-center shadow-lg relative overflow-hidden group">
-                    <div class="absolute -right-16 -top-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div>
-                    <div class="absolute -left-16 -bottom-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div>
+                <div class="my-20 bg-gradient-to-br from-[#e31e24] via-[#ea3c41] to-[#f43f5e] rounded-3xl p-8 md:p-14 !text-white text-center shadow-xl shadow-red-500/10 relative overflow-hidden group">
+                    <div class="absolute -right-12 -top-12 w-64 h-64 rounded-full bg-white/10 opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
+                    <div class="absolute -left-12 -bottom-12 w-64 h-64 rounded-full bg-white/10 opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
                     
-                    <h3 class="text-xl md:text-2xl font-bold !text-white mb-3 relative z-10">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
-                    <p class="text-sm leading-relaxed max-w-xl mx-auto mb-6 opacity-90 relative z-10">{{ t('Geleceği yenilikçi teknolojilerle şekillendiren bu harika ekibin bir parçası olmak, bizimle yeni ödüllere koşmak ister misin?') }}</p>
-                    <a href="{{ url('/kariyer') }}" class="btn btn-white !rounded-[50rem] px-6 py-2.5 text-xs font-bold hover:translate-y-[-0.15rem] hover:shadow-md transition-all relative z-10 !bg-white !text-[#e31e24] hover:!bg-gray-50 border-0">
-                        {{ t('Aramıza Katıl') }} <i class="uil uil-arrow-right ml-1"></i>
-                    </a>
+                    <div class="relative z-10 max-w-2xl mx-auto flex flex-col items-center">
+                        <div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6 border border-white/20 shadow-inner group-hover:rotate-12 transition-transform duration-500">
+                            <i class="uil uil-rocket text-2xl text-white"></i>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-black !text-white mb-4 tracking-tight leading-tight">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
+                        <p class="text-sm md:text-base leading-relaxed mb-8 text-white/90 font-medium max-w-xl">{{ t('Geleceği yenilikçi teknolojilerle şekillendiren bu harika ekibin bir parçası olmak, bizimle yeni ödüllere koşmak ister misin?') }}</p>
+                        <a href="{{ url('/kariyer') }}" class="inline-flex items-center gap-2 bg-white text-[#e31e24] px-8 py-3.5 rounded-full text-xs font-black uppercase tracking-wider hover:translate-y-[-0.2rem] hover:shadow-2xl hover:shadow-white/20 transition-all duration-350 border-0 group/btn">
+                            {{ t('Aramıza Katıl') }} 
+                            <i class="uil uil-arrow-right text-base transform group-hover/btn:translate-x-1 transition-transform"></i>
+                        </a>
+                    </div>
                 </div>
 
             </div>
@@ -216,11 +225,17 @@
 
 @push('styles')
 <style>
+    /* Premium Interactive Filter styling */
+    .filter-btn {
+        background: transparent;
+        border: 0;
+        color: #64748b;
+    }
     .filter-btn.active {
         background-color: #e31e24 !important;
         border-color: #e31e24 !important;
         color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2);
+        box-shadow: 0 10px 20px -5px rgba(227, 30, 36, 0.35);
     }
     
     /* Timeline Design System drawing inspiration from hakkimizda */
@@ -245,14 +260,15 @@
     .awards-timeline__start span,
     .awards-timeline__finish span {
         display: inline-block;
-        padding: 0.45rem 1.4rem;
-        border: 2px solid #cbd5e0;
+        padding: 0.55rem 1.6rem;
+        border: 2px solid #e2e8f0;
         border-radius: 999px;
         font-size: 0.72rem;
-        font-weight: 700;
-        letter-spacing: 0.16em;
-        color: #4a5568;
+        font-weight: 850;
+        letter-spacing: 0.2em;
+        color: #475569;
         background: #fff;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
     }
 
     .awards-timeline__track {
@@ -268,7 +284,7 @@
         bottom: 0;
         width: 4px;
         transform: translateX(-50%);
-        background: linear-gradient(to bottom, #e31e24, #f5a623, #27ae60, #2980b9);
+        background: linear-gradient(180deg, #e31e24, #f5a623, #27ae60, #2980b9, #8e44ad);
         border-radius: 4px;
         z-index: 0;
     }
@@ -278,10 +294,10 @@
         display: grid;
         grid-template-columns: 1fr 40px 1fr;
         align-items: center;
-        gap: 0 2rem;
-        margin-bottom: 2.75rem;
+        gap: 0 2.5rem;
+        margin-bottom: 3.5rem;
         z-index: 1;
-        transition: all 0.45s ease;
+        transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .awards-timeline__item:last-child {
@@ -296,17 +312,19 @@
     }
 
     .awards-timeline__dot {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         border-radius: 50%;
         background: var(--item-color);
-        border: 3px solid #fff;
+        border: 4px solid #fff;
         box-shadow: 0 0 0 2px var(--item-color);
-        transition: all 0.3s ease;
+        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
     }
-
+    
     .awards-timeline__item:hover .awards-timeline__dot {
         transform: scale(1.3);
+        box-shadow: 0 0 0 6px rgba(var(--item-color-rgb), 0.25), 0 0 0 2px var(--item-color);
     }
 
     /* Alternating Right side */
@@ -321,11 +339,27 @@
         text-align: right;
     }
 
+    /* Custom premium card shadow on hover */
+    .awards-timeline__content {
+        box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02), 0 2px 6px -1px rgba(0, 0, 0, 0.01);
+    }
+    
+    .awards-timeline__item:hover .awards-timeline__content {
+        transform: translateY(-6px);
+        border-color: rgba(var(--item-color-rgb), 0.2);
+        box-shadow: 0 20px 35px -10px rgba(var(--item-color-rgb), 0.12), 0 10px 15px -5px rgba(0,0,0,0.02);
+    }
+    
+    .verify-link:hover {
+        text-decoration: none;
+        opacity: 0.85;
+    }
+
     /* Animations reveal */
     .awards-timeline__reveal {
         opacity: 0;
-        transform: translate3d(0, 32px, 0);
-        transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
+        transform: translate3d(0, 40px, 0);
+        transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
         will-change: opacity, transform;
     }
 
@@ -348,6 +382,7 @@
         .awards-timeline__item {
             grid-template-columns: 40px 1fr;
             gap: 0 1rem;
+            margin-bottom: 2.5rem;
         }
 
         .awards-timeline__axis {
@@ -368,47 +403,73 @@
 @push('scripts')
 <script>
     document.addEventListener('DOMContentLoaded', function() {
-        const filterButtons = document.querySelectorAll('.filter-btn');
-        const awardCards = document.querySelectorAll('.awards-timeline__item');
-
-        filterButtons.forEach(button => {
-            button.addEventListener('click', function() {
-                filterButtons.forEach(btn => btn.classList.remove('active'));
-                this.classList.add('active');
-
-                const filterValue = this.getAttribute('data-filter');
-
-                awardCards.forEach(card => {
-                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
-                        card.classList.remove('hidden-by-filter');
-                    } else {
-                        card.classList.add('hidden-by-filter');
-                    }
-                });
-            });
-        });
-
-        // Reveal animation on scroll drawing inspiration from hakkimizda.blade.php
+        // Reveal animation on scroll
         const revealElements = document.querySelectorAll('.awards-timeline__reveal');
         
-        if (revealElements.length > 0) {
-            const observer = new IntersectionObserver(function (entries) {
-                entries.forEach(function (entry) {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('is-visible');
-                        observer.unobserve(entry.target);
+        const revealObserver = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('is-visible');
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: '0px 0px -8% 0px',
+            threshold: 0.05,
+        });
+
+        revealElements.forEach(function (element) {
+            revealObserver.observe(element);
+        });
+
+        // Filter Logic
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const timelineItems = document.querySelectorAll('.awards-timeline__item');
+
+        filterButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const filter = this.getAttribute('data-filter');
+                
+                // Toggle active filter classes
+                filterButtons.forEach(b => {
+                    b.classList.remove('active', 'bg-red', 'text-white');
+                    b.classList.add('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');
+                });
+                
+                this.classList.add('active');
+                this.classList.remove('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');
+
+                let visibleIndex = 0;
+                
+                timelineItems.forEach(item => {
+                    const category = item.getAttribute('data-category');
+                    if (filter === 'all' || category === filter) {
+                        item.classList.remove('hidden-by-filter');
+                        
+                        // Re-assign alignment based on visibility index
+                        item.classList.remove('awards-timeline__item--left', 'awards-timeline__item--right');
+                        if (visibleIndex % 2 === 0) {
+                            item.classList.add('awards-timeline__item--right');
+                        } else {
+                            item.classList.add('awards-timeline__item--left');
+                        }
+                        visibleIndex++;
+                        
+                        // Re-observe since they might be newly visible
+                        revealObserver.observe(item);
+                    } else {
+                        item.classList.add('hidden-by-filter');
+                        revealObserver.unobserve(item);
                     }
                 });
-            }, {
-                root: null,
-                rootMargin: '0px 0px -10% 0px',
-                threshold: 0.1,
-            });
 
-            revealElements.forEach(function (element) {
-                observer.observe(element);
+                // Scroll slightly to timeline section if filter is clicked and user is above/below it
+                const targetSec = document.getElementById('awards-timeline-section');
+                if (window.scrollY > targetSec.offsetTop || window.scrollY + window.innerHeight < targetSec.offsetTop) {
+                    targetSec.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
             });
-        }
+        });
     });
 </script>
 @endpush