saat eklendi ve widget tasarıı düzeltildi.

src/pages/desktop.js

@@ -17,19 +17,20 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
   });
 
   const html = `
-    <div class="flex justify-end w-full max-w-6xl h-full items-start pt-4">
+    <!-- Paneli Tam Sağa Yapıştırma ve Boyunu Uzatma Kapsayıcısı -->
-      <!-- Windows Vista Tarzı Entegre Tek Kolon Sidebar -->
+    <div class="fixed top-0 right-0 h-screen w-80 md:w-96 bg-slate-900/85 border-l border-white/10 p-6 shadow-2xl z-20 flex flex-col justify-between overflow-y-auto">
-      <div class="w-full max-w-sm bg-slate-900/80 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
       
-        <!-- Header -->
+      <div class="space-y-6">
-        <div class="flex items-center justify-between pb-3 border-b border-white/10">
+        <!-- CANLI DİJİTAL SAAT WİDGET'I -->
-          <h2 class="text-base font-bold text-white flex items-center gap-2">
+        <div class="bg-slate-950/60 border border-white/10 p-5 rounded-3xl text-center space-y-1 shadow-inner">
-            <span>🖥️</span> Masaüstü Araçları
+          <p class="text-xs font-semibold text-indigo-400 tracking-widest uppercase">CANLI SAAT</p>
-          </h2>
+          <div id="liveClock" class="text-4xl font-black text-white tracking-wider font-mono">
-          <span class="text-xs text-slate-400 font-medium">${selectedCity}</span>
+            00:00:00
+          </div>
+          <p class="text-[11px] text-slate-400 font-medium">${dateStr}</p>
         </div>
 
-        <!-- YENİ: GENEL KAZA İLERLEME WİDGET'I -->
+        <!-- GENEL KAZA İLERLEME WİDGET'I -->
         <div id="desktopKazaProgressWidget" class="bg-slate-950/60 border border-white/10 p-4 rounded-2xl space-y-2">
           <div class="flex items-center justify-between text-xs">
             <span class="font-bold text-indigo-300 flex items-center gap-1.5">
@@ -43,50 +44,51 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
           <p id="desktopKazaSub" class="text-[10px] text-slate-400 text-right">Yükleniyor...</p>
         </div>
 
-        <!-- Bölüm 1: Hicri Takvim -->
+        <hr class="border-white/5" />
+
+        <!-- HİCRİ TAKVİM -->
         <div class="space-y-1">
           <div class="flex items-center gap-2 text-xs font-semibold text-emerald-400">
             <span>📅</span> HİCRİ TAKVİM
           </div>
           <p class="text-white font-bold text-base">${hijri.day} ${hijri.monthName} ${hijri.year}</p>
-          <p class="text-xs text-slate-400">${dateStr} / ${hijri.weekday}</p>
+          <p class="text-xs text-slate-400">${hijri.weekday}</p>
         </div>
 
         <hr class="border-white/5" />
 
-        <!-- Bölüm 2: Hava Durumu -->
+        <!-- HAVA DURUMU -->
         <div class="space-y-1" id="weatherWidget">
           <div class="text-xs text-slate-400">Hava durumu yükleniyor...</div>
         </div>
 
         <hr class="border-white/5" />
 
-        <!-- Bölüm 3: İmsakiye -->
+        <!-- İMSAKİYE & VAKİTLER -->
         <div class="space-y-2" id="imsakiyeWidget">
           <div class="text-xs text-slate-400">Namaz vakitleri yükleniyor...</div>
         </div>
-
-        <hr class="border-white/5" />
-
-        <!-- Bölüm 4: Kaza Kısayolu -->
-        <div id="kazaShortcut" class="bg-indigo-600/30 hover:bg-indigo-600/50 border border-indigo-500/30 p-3.5 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <span class="text-xl group-hover:scale-110 transition-transform">📿</span>
-            <div>
-              <h3 class="text-xs font-bold text-white">Kaza Namazı Takibi</h3>
-              <p class="text-[10px] text-indigo-300">Detaylı sayaç & takip</p>
-            </div>
-          </div>
-          <span class="text-slate-400 group-hover:translate-x-1 transition-transform text-xs">➔</span>
-        </div>
-
       </div>
+
+      <!-- KAZA NAMAZI KISAYOLU (ALT KISIM) -->
+      <div id="kazaShortcut" class="mt-6 bg-indigo-600/30 hover:bg-indigo-600/50 border border-indigo-500/30 p-3.5 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-xl group-hover:scale-110 transition-transform">📿</span>
+          <div>
+            <h3 class="text-xs font-bold text-white">Kaza Namazı Takibi</h3>
+            <p class="text-[10px] text-indigo-300">Detaylı sayaç & takip</p>
+          </div>
+        </div>
+        <span class="text-slate-400 group-hover:translate-x-1 transition-transform text-xs">➔</span>
+      </div>
+
     </div>
   `;
 
   return {
     html,
     initEvents: (container) => {
+      startClock(container);
       loadWeather(container, selectedCity);
       loadImsakiye(container, selectedCity);
       if (pb) loadDesktopKazaProgress(container, pb);
@@ -100,6 +102,20 @@ export function renderDesktop(selectedCity = "Edremit", pb) {
   };
 }
 
+// Canlı Saat Mantığı (Saniyede Bir Güncellenir)
+function startClock(container) {
+  const clockEl = container.querySelector("#liveClock");
+  if (!clockEl) return;
+
+  const update = () => {
+    const now = new Date();
+    clockEl.textContent = now.toLocaleTimeString("tr-TR");
+  };
+
+  update();
+  setInterval(update, 1000);
+}
+
 async function loadDesktopKazaProgress(container, pb) {
   const user = pb.authStore.model;
   if (!user) return;