diff --git a/resources/views/filament/components/intern-journal-timeline.blade.php b/resources/views/filament/components/intern-journal-timeline.blade.php
index 33ab53f..07be39a 100644
--- a/resources/views/filament/components/intern-journal-timeline.blade.php
+++ b/resources/views/filament/components/intern-journal-timeline.blade.php
@@ -123,86 +123,157 @@
             this.activeDayIndex = index;
         }
     }"
-    class="mt-4"
+    style="margin-top: 1rem; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;"
 >
+    <style>
+        .jt-day-btn {
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+        }
+        .jt-day-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+        }
+        .jt-arrow-btn {
+            transition: all 0.2s ease;
+        }
+        .jt-arrow-btn:hover:not(:disabled) {
+            transform: scale(1.08);
+            background: #eff6ff !important;
+            border-color: #93c5fd !important;
+        }
+        .jt-arrow-btn:disabled {
+            opacity: 0.35;
+            cursor: not-allowed;
+        }
+        .jt-event-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .jt-event-card:hover {
+            transform: translateY(-2px) translateX(3px);
+            box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.12);
+            border-color: #bfdbfe !important;
+            background: #ffffff !important;
+        }
+        .jt-timeline-dot {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .jt-event-row:hover .jt-timeline-dot {
+            transform: scale(1.2);
+            background-color: #3b82f6 !important;
+            box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
+        }
+        .jt-event-row:hover .jt-timeline-dot-inner {
+            background-color: #ffffff !important;
+        }
+        .jt-sha-link {
+            transition: all 0.25s ease;
+        }
+        .jt-sha-link:hover {
+            background: #3b82f6 !important;
+            color: #ffffff !important;
+            border-color: #3b82f6 !important;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar {
+            height: 4px;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 9999px;
+        }
+        .jt-paginator-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e1 transparent;
+        }
+        @keyframes jt-spin {
+            to { transform: rotate(360deg); }
+        }
+        @keyframes jt-fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .jt-fade-in {
+            animation: jt-fadeIn 0.4s ease-out;
+        }
+    </style>
+
     {{-- Loader --}}
-    <div x-show="loading" x-cloak class="py-8 flex flex-col items-center justify-center">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mb-2"></div>
-        <span class="text-xs text-gray-500 font-semibold">GitHub'dan commitler yükleniyor...</span>
+    <div x-show="loading" x-cloak style="padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+        <div style="width: 2.5rem; height: 2.5rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: jt-spin 0.8s linear infinite; margin-bottom: 0.75rem;"></div>
+        <span style="font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.025em;">Commit geçmişi yükleniyor...</span>
     </div>
 
     {{-- Error --}}
-    <div x-show="errorMsg" x-cloak class="p-4 rounded-xl bg-danger-50 border border-danger-200 text-danger-600 text-xs font-semibold" x-text="errorMsg"></div>
+    <div x-show="errorMsg" x-cloak x-text="errorMsg" style="padding: 1rem 1.25rem; border-radius: 1rem; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 0.75rem; font-weight: 700;"></div>
 
     {{-- Empty --}}
-    <div x-show="isEmpty && !loading" x-cloak class="p-6 rounded-2xl border border-gray-200 text-center text-gray-400 italic text-sm">
-        Henüz hiç commit bulunamadı veya stajyerin deposu tanımlanmadı.
+    <div x-show="isEmpty && !loading" x-cloak style="padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; background: #ffffff; text-align: center; color: #94a3b8; font-style: italic; font-size: 0.875rem;">
+        Henüz hiçbir commit verisi bulunamadı veya depo adresi yapılandırılmadı.
     </div>
 
     {{-- Day Paginator --}}
-    <div x-show="commitDays.length > 0" x-cloak class="flex items-center justify-between gap-4 p-3 bg-gray-50 border border-gray-100 rounded-2xl mb-6 select-none">
-        <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === 0 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-            </svg>
+    <div x-show="commitDays.length > 0" x-cloak style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 1.5rem; margin-bottom: 1.75rem; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
+        <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
         </button>
 
-        <div class="flex-grow overflow-x-auto py-1" style="-ms-overflow-style: none; scrollbar-width: none;">
-            <div class="flex gap-2 justify-start sm:justify-center min-w-max px-2">
+        <div class="jt-paginator-scroll" style="flex: 1; overflow-x: auto; padding: 0.375rem 0;">
+            <div style="display: flex; gap: 0.625rem; justify-content: center; min-width: max-content; padding: 0 0.5rem;">
                 <template x-for="(day, index) in commitDays" :key="day.date">
-                    <button type="button" @click="selectDay(index)" :class="index === activeDayIndex ? 'text-primary-700 bg-primary-50 border-primary-200 font-extrabold shadow-sm' : 'bg-white hover:bg-gray-50 text-gray-600 border-gray-200 font-semibold hover:text-primary-600'" class="px-5 py-2 rounded-xl transition-all flex flex-col items-center justify-center border">
-                        <span class="text-xs" x-text="day.dayNum + '. Gün'"></span>
-                        <span class="text-[9px] mt-0.5 opacity-70 font-medium" x-text="day.formattedDate"></span>
+                    <button type="button" @click="selectDay(index)" class="jt-day-btn" :style="index === activeDayIndex
+                        ? 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #93c5fd; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);'
+                        : 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-weight: 600;'">
+                        <span style="font-size: 0.75rem; line-height: 1.2;" x-text="day.dayNum + '. Gün'"></span>
+                        <span style="font-size: 0.6rem; margin-top: 0.125rem; opacity: 0.7; font-weight: 500;" x-text="day.formattedDate"></span>
                     </button>
                 </template>
             </div>
         </div>
 
-        <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === commitDays.length - 1 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-            </svg>
+        <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
         </button>
     </div>
 
     {{-- Active Day Card --}}
-    <div x-show="activeDay" x-cloak class="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
+    <div x-show="activeDay" x-cloak class="jt-fade-in" :key="activeDayIndex" style="background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.75rem 2rem; box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);">
         {{-- Day Header --}}
-        <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-100 dark:border-gray-800">
-            <div class="flex items-center gap-3">
-                <span class="text-base font-extrabold text-primary-600 bg-primary-50 dark:bg-primary-950/20 px-4 py-1.5 rounded-full" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
-                <span class="text-sm font-semibold text-gray-400 flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 mr-1">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-                    </svg>
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1f5f9;">
+            <div style="display: flex; align-items: center; gap: 0.875rem;">
+                <span style="font-size: 0.875rem; font-weight: 800; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 0.5rem 1.125rem; border-radius: 1rem; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
+                <span style="font-size: 0.8125rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #60a5fa;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                     <span x-text="activeDay ? activeDay.formattedDate : ''"></span>
                 </span>
             </div>
-            <span class="text-xs font-bold text-gray-400 bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-800 px-2.5 py-1 rounded-lg" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
+            <span style="font-size: 0.6875rem; font-weight: 700; color: #94a3b8; background: #f8fafc; border: 1px solid #f1f5f9; padding: 0.375rem 0.875rem; border-radius: 0.625rem;" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
         </div>
 
         {{-- Timeline --}}
-        <div class="relative pl-6 sm:pl-8" style="position: relative;">
-            <div style="content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background-color: rgb(241 245 249);"></div>
-            <div class="space-y-6">
+        <div style="position: relative; padding-left: 2.25rem;">
+            {{-- Gradient Timeline Line --}}
+            <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3b82f6 0%, #818cf8 40%, #c7d2fe 100%); border-radius: 2px;"></div>
+
+            <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                 <template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci">
-                    <div class="relative group">
+                    <div class="jt-event-row" style="position: relative;">
                         {{-- Timeline Dot --}}
-                        <div class="absolute top-1.5 w-6 h-6 rounded-full bg-white border-2 border-primary-500 flex items-center justify-center transition-all group-hover:bg-primary-500" style="left: -31px;">
-                            <div class="w-2 h-2 rounded-full bg-primary-500 group-hover:bg-white transition-all"></div>
+                        <div class="jt-timeline-dot" style="position: absolute; left: -32px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2.5px solid #3b82f6; display: flex; align-items: center; justify-content: center; z-index: 1;">
+                            <div class="jt-timeline-dot-inner" style="width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;"></div>
                         </div>
                         {{-- Event Card --}}
-                        <div class="p-4 bg-gray-50/50 hover:bg-primary-50/10 border border-gray-200 hover:border-primary-100 rounded-2xl transition-all shadow-sm">
-                            <div class="flex items-center justify-between gap-4 mb-2">
-                                <span class="text-xs font-bold text-gray-400 flex items-center gap-1">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
+                        <div class="jt-event-card" style="padding: 1.125rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
+                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.625rem;">
+                                <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                     <span x-text="commit.time"></span>
                                 </span>
-                                <a :href="commit.url" target="_blank" class="text-xs font-mono font-bold text-primary-600 hover:text-primary-700 bg-primary-50 hover:bg-primary-100 px-2.5 py-0.5 rounded-lg border border-primary-100 transition-colors" x-text="commit.sha"></a>
+                                <a :href="commit.url" target="_blank" class="jt-sha-link" x-text="commit.sha" style="font-size: 0.6875rem; font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid #bfdbfe; text-decoration: none;"></a>
                             </div>
-                            <p class="text-sm font-bold text-gray-700 leading-relaxed whitespace-pre-line" x-text="commit.message"></p>
+                            <p style="font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.6; white-space: pre-line; margin: 0;" x-text="commit.message"></p>
                         </div>
                     </div>
                 </template>
diff --git a/resources/views/livewire/intern-journal-timeline.blade.php b/resources/views/livewire/intern-journal-timeline.blade.php
index 85c9a29..3f8484d 100644
--- a/resources/views/livewire/intern-journal-timeline.blade.php
+++ b/resources/views/livewire/intern-journal-timeline.blade.php
@@ -103,75 +103,157 @@
             this.activeDayIndex = i;
         }
     }"
-    class="mt-4"
+    style="margin-top: 1rem; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;"
 >
+    <style>
+        .jt-day-btn {
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+        }
+        .jt-day-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+        }
+        .jt-arrow-btn {
+            transition: all 0.2s ease;
+        }
+        .jt-arrow-btn:hover:not(:disabled) {
+            transform: scale(1.08);
+            background: #eff6ff;
+            border-color: #93c5fd;
+        }
+        .jt-arrow-btn:disabled {
+            opacity: 0.35;
+            cursor: not-allowed;
+        }
+        .jt-event-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .jt-event-card:hover {
+            transform: translateY(-2px) translateX(3px);
+            box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.12);
+            border-color: #bfdbfe !important;
+            background: #ffffff !important;
+        }
+        .jt-timeline-dot {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .jt-event-row:hover .jt-timeline-dot {
+            transform: scale(1.2);
+            background-color: #3b82f6 !important;
+            box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
+        }
+        .jt-event-row:hover .jt-timeline-dot-inner {
+            background-color: #ffffff !important;
+        }
+        .jt-sha-link {
+            transition: all 0.25s ease;
+        }
+        .jt-sha-link:hover {
+            background: #3b82f6 !important;
+            color: #ffffff !important;
+            border-color: #3b82f6 !important;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar {
+            height: 4px;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .jt-paginator-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 9999px;
+        }
+        .jt-paginator-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e1 transparent;
+        }
+        @keyframes jt-spin {
+            to { transform: rotate(360deg); }
+        }
+        @keyframes jt-fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .jt-fade-in {
+            animation: jt-fadeIn 0.4s ease-out;
+        }
+    </style>
+
     {{-- Loader --}}
-    <div x-show="loading" x-cloak class="py-8 flex flex-col items-center justify-center">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mb-2"></div>
-        <span class="text-xs text-gray-500 font-semibold">GitHub'dan commitler yükleniyor...</span>
+    <div x-show="loading" x-cloak style="padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+        <div style="width: 2.5rem; height: 2.5rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: jt-spin 0.8s linear infinite; margin-bottom: 0.75rem;"></div>
+        <span style="font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.025em;">Commit geçmişi yükleniyor...</span>
     </div>
 
     {{-- Error --}}
-    <div x-show="errorMsg" x-cloak class="p-4 rounded-xl bg-danger-50 border border-danger-200 text-danger-600 text-xs font-semibold" x-text="errorMsg"></div>
+    <div x-show="errorMsg" x-cloak x-text="errorMsg" style="padding: 1rem 1.25rem; border-radius: 1rem; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 0.75rem; font-weight: 700;"></div>
 
     {{-- Empty --}}
-    <div x-show="isEmpty && !loading" x-cloak class="p-6 rounded-2xl border border-gray-200 text-center text-gray-400 italic text-sm">
-        Henüz hiç commit bulunamadı veya stajyerin deposu tanımlanmadı.
+    <div x-show="isEmpty && !loading" x-cloak style="padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; background: #ffffff; text-align: center; color: #94a3b8; font-style: italic; font-size: 0.875rem;">
+        Henüz hiçbir commit verisi bulunamadı veya depo adresi yapılandırılmadı.
     </div>
 
     {{-- Day Paginator --}}
-    <div x-show="commitDays.length > 0" x-cloak class="flex items-center justify-between gap-4 p-3 bg-gray-50 border border-gray-100 rounded-2xl mb-6 select-none">
-        <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === 0 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
+    <div x-show="commitDays.length > 0" x-cloak style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 1.5rem; margin-bottom: 1.75rem; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
+        <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
         </button>
 
-        <div class="flex-grow overflow-x-auto py-1" style="-ms-overflow-style: none; scrollbar-width: none;">
-            <div class="flex gap-2 justify-start sm:justify-center min-w-max px-2">
+        <div class="jt-paginator-scroll" style="flex: 1; overflow-x: auto; padding: 0.375rem 0;">
+            <div style="display: flex; gap: 0.625rem; justify-content: center; min-width: max-content; padding: 0 0.5rem;">
                 <template x-for="(day, index) in commitDays" :key="day.date">
-                    <button type="button" @click="selectDay(index)" :class="index === activeDayIndex ? 'text-primary-700 bg-primary-50 border-primary-200 font-extrabold shadow-sm' : 'bg-white hover:bg-gray-50 text-gray-600 border-gray-200 font-semibold hover:text-primary-600'" class="px-5 py-2 rounded-xl transition-all flex flex-col items-center justify-center border">
-                        <span class="text-xs" x-text="day.dayNum + '. Gün'"></span>
-                        <span class="text-[9px] mt-0.5 opacity-70 font-medium" x-text="day.formattedDate"></span>
+                    <button type="button" @click="selectDay(index)" class="jt-day-btn" :style="index === activeDayIndex
+                        ? 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #93c5fd; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);'
+                        : 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-weight: 600;'">
+                        <span style="font-size: 0.75rem; line-height: 1.2;" x-text="day.dayNum + '. Gün'"></span>
+                        <span style="font-size: 0.6rem; margin-top: 0.125rem; opacity: 0.7; font-weight: 500;" x-text="day.formattedDate"></span>
                     </button>
                 </template>
             </div>
         </div>
 
-        <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === commitDays.length - 1 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
+        <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
         </button>
     </div>
 
     {{-- Active Day Card --}}
-    <div x-show="activeDay" x-cloak class="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
-        <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-100 dark:border-gray-800">
-            <div class="flex items-center gap-3">
-                <span class="text-base font-extrabold text-primary-600 bg-primary-50 dark:bg-primary-950/20 px-4 py-1.5 rounded-full" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
-                <span class="text-sm font-semibold text-gray-400 flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>
+    <div x-show="activeDay" x-cloak class="jt-fade-in" :key="activeDayIndex" style="background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.75rem 2rem; box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);">
+        {{-- Day Header --}}
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1f5f9;">
+            <div style="display: flex; align-items: center; gap: 0.875rem;">
+                <span style="font-size: 0.875rem; font-weight: 800; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 0.5rem 1.125rem; border-radius: 1rem; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
+                <span style="font-size: 0.8125rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #60a5fa;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                     <span x-text="activeDay ? activeDay.formattedDate : ''"></span>
                 </span>
             </div>
-            <span class="text-xs font-bold text-gray-400 bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-800 px-2.5 py-1 rounded-lg" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
+            <span style="font-size: 0.6875rem; font-weight: 700; color: #94a3b8; background: #f8fafc; border: 1px solid #f1f5f9; padding: 0.375rem 0.875rem; border-radius: 0.625rem;" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
         </div>
 
         {{-- Timeline --}}
-        <div class="relative pl-6 sm:pl-8">
-            <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background-color: rgb(229, 231, 235);"></div>
-            <div class="space-y-6">
+        <div style="position: relative; padding-left: 2.25rem;">
+            {{-- Gradient Timeline Line --}}
+            <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3b82f6 0%, #818cf8 40%, #c7d2fe 100%); border-radius: 2px;"></div>
+
+            <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                 <template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci">
-                    <div class="relative group">
-                        <div class="absolute top-1.5 w-6 h-6 rounded-full bg-white border-2 border-primary-500 flex items-center justify-center transition-all group-hover:bg-primary-500" style="left: -31px;">
-                            <div class="w-2 h-2 rounded-full bg-primary-500 group-hover:bg-white transition-all"></div>
+                    <div class="jt-event-row" style="position: relative;">
+                        {{-- Timeline Dot --}}
+                        <div class="jt-timeline-dot" style="position: absolute; left: -32px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2.5px solid #3b82f6; display: flex; align-items: center; justify-content: center; z-index: 1;">
+                            <div class="jt-timeline-dot-inner" style="width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;"></div>
                         </div>
-                        <div class="p-4 bg-gray-50/50 hover:bg-primary-50/10 border border-gray-200 hover:border-primary-100 rounded-2xl transition-all shadow-sm">
-                            <div class="flex items-center justify-between gap-4 mb-2">
-                                <span class="text-xs font-bold text-gray-400 flex items-center gap-1">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                        {{-- Event Card --}}
+                        <div class="jt-event-card" style="padding: 1.125rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
+                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.625rem;">
+                                <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                     <span x-text="commit.time"></span>
                                 </span>
-                                <a :href="commit.url" target="_blank" class="text-xs font-mono font-bold text-primary-600 hover:text-primary-700 bg-primary-50 hover:bg-primary-100 px-2.5 py-0.5 rounded-lg border border-primary-100 transition-colors" x-text="commit.sha"></a>
+                                <a :href="commit.url" target="_blank" class="jt-sha-link" x-text="commit.sha" style="font-size: 0.6875rem; font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid #bfdbfe; text-decoration: none;"></a>
                             </div>
-                            <p class="text-sm font-bold text-gray-700 leading-relaxed whitespace-pre-line" x-text="commit.message"></p>
+                            <p style="font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.6; white-space: pre-line; margin: 0;" x-text="commit.message"></p>
                         </div>
                     </div>
                 </template>