ai ile yapılan daha büyük güncelleme

src/main.js

@@ -10,7 +10,7 @@ const app = document.getElementById("app");
 
 let activeTab = "desktop";
 let sidebarOpen = window.innerWidth >= 768;
-let selectedCity = localStorage.getItem("selected_city") || "İstanbul";
+let selectedCity = localStorage.getItem("selected_city");
 
 async function render() {
   const user = pb.authStore.model;
@@ -61,7 +61,7 @@ async function render() {
       <div class="absolute inset-0 z-0 bg-center bg-no-repeat transition-all duration-700" 
         style="background-image: url('${currentBg}'); background-size: 1920px 1080px;">
       </div>
-      <div class="absolute inset-0 z-10 bg-slate-950/50 backdrop-blur-[2px]"></div>
+      <div class="absolute inset-0 z-10 bg-slate-950/50"></div>
 
       <button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-white/10 hover:bg-white/20 text-white p-3 rounded-xl transition-all">
         ${sidebarOpen ? "✕" : "☰"}
@@ -69,26 +69,26 @@ async function render() {
 
       ${sidebarOpen ? `<div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>` : ""}
 
-      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between transition-all duration-300 overflow-hidden">
+      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col ${sidebarOpen ? "" : "md:items-center"} justify-between transition-all duration-300 overflow-hidden">
         <div>
           <div class="flex items-center justify-between mb-6">
             <h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:block"}">Dashboard OS</h1>
           </div>
-          <nav class="space-y-2">
+          <nav class="space-y-2 w-full">
-            <button id="navDesktop" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
+            <button id="navDesktop" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
               <span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Masaüstü</span>
             </button>
-            <button id="navKaza" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "kaza" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
+            <button id="navKaza" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "kaza" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
               <span>🕌</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Kaza Namaz</span>
             </button>
-            <button id="navSettings" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
+            <button id="navSettings" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">
               <span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:block"}">Ayarlar</span>
             </button>
           </nav>
         </div>
 
-        <div class="space-y-3 pt-4 border-t border-white/10">
+        <div class="space-y-3 pt-4 border-t border-white/10 w-full">
-          <div id="profileBtn" class="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
+          <div id="profileBtn" class="flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
             ${
               avatarUrl
                 ? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md flex-shrink-0" />`

src/pages/desktop.js

@@ -13,6 +13,7 @@ export function renderDesktop(selectedCity = "İstanbul") {
   });
 
   const html = `
+    <div class="flex justify-end w-full">
       <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 w-full max-w-6xl">
       <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
         <div class="flex items-center gap-3">
@@ -121,7 +122,11 @@ async function loadImsakiye(container, selectedCity) {
 
   widget.innerHTML = `
     🌅 İmsak: <span class="text-white font-semibold">${times.imsak}</span><br />
-    🕌 İftar: <span class="text-emerald-300 font-semibold">${times.maghrib}</span>
+    🌅 Güneş: <span class="text-white font-semibold">${times.sunrise}</span><br />
+    🌅 Öğle: <span class="text-white font-semibold">${times.dhuhr}</span><br />
+    🌅 İkindi: <span class="text-white font-semibold">${times.asr}</span><br />
+    🕌 Akşam: <span class="text-emerald-300 font-semibold">${times.maghrib}</span>
+    🌅 Yatsı: <span class="text-white font-semibold">${times.isha}</span><br />
   `;
 }
 

src/pages/kaza.js

@@ -66,15 +66,18 @@ export function renderKaza(pb) {
         </div>
 
         <div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl mb-6">
-          <h3 class="text-sm font-semibold text-slate-300 mb-3">Kaza Namaz Ekle</h3>
+          <h3 class="text-sm font-semibold text-slate-300 mb-3">Kaza Namaz Ekle / Çıkar</h3>
           <form id="addKazaForm" class="flex items-center gap-3">
             <select id="kazaPrayerType" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm">
               ${PRAYERS.map((p) => `<option value="${p.id}">${p.name}</option>`).join("")}
             </select>
             <input type="number" id="kazaCount" min="1" value="1" required class="w-20 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm" />
-            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all">
+            <button type="button" id="addKazaBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all">
               Ekle
             </button>
+            <button type="button" id="removeKazaBtn" class="bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all">
+              Çıkar
+            </button>
           </form>
           <p id="kazaMsg" class="text-xs mt-2 hidden"></p>
         </div>
@@ -146,10 +149,11 @@ export function renderKaza(pb) {
       } else {
         refreshKazaStats(container, pb, profile);
 
-        const addForm = container.querySelector("#addKazaForm");
+        const addBtn = container.querySelector("#addKazaBtn");
-        if (addForm) {
+        const removeBtn = container.querySelector("#removeKazaBtn");
-          addForm.addEventListener("submit", async (e) => {
+
-            e.preventDefault();
+        if (addBtn) {
+          addBtn.addEventListener("click", async () => {
             const prayerId = container.querySelector("#kazaPrayerType").value;
             const countInput = container.querySelector("#kazaCount");
             const count = Math.max(1, parseInt(countInput?.value || "1", 10));
@@ -163,21 +167,50 @@ export function renderKaza(pb) {
                 date: new Date().toISOString().split("T")[0],
               });
 
-              if (msg) {
+              showKazaMsg(msg, `${count} kaza namaz eklendi!`, true);
-                msg.textContent = `${count} kaza namaz eklendi!`;
-                msg.className = "text-xs mt-2 text-emerald-400";
-                msg.classList.remove("hidden");
-              }
-
               if (countInput) countInput.value = "1";
-              refreshKazaStats(container, pb, profile);
+              await refreshKazaStats(container, pb, profile);
             } catch (err) {
               console.error("Kaza eklenemedi:", err);
-              if (msg) {
+              showKazaMsg(msg, "Eklenemedi. PocketBase bağlantısını kontrol et.", false);
-                msg.textContent = "Eklenemedi. PocketBase bağlantısını kontrol et.";
-                msg.className = "text-xs mt-2 text-rose-400";
-                msg.classList.remove("hidden");
             }
+          });
+        }
+
+        if (removeBtn) {
+          removeBtn.addEventListener("click", async () => {
+            const prayerId = container.querySelector("#kazaPrayerType").value;
+            const countInput = container.querySelector("#kazaCount");
+            const count = Math.max(1, parseInt(countInput?.value || "1", 10));
+            const msg = container.querySelector("#kazaMsg");
+
+            try {
+              const records = await pb.collection("kaza_logs").getFullList({
+                filter: `user = "${pb.authStore.model.id}" && prayerId = "${prayerId}"`,
+                sort: "-createdAt",
+              });
+
+              let remaining = count;
+              for (const record of records) {
+                if (remaining <= 0) break;
+                const recordCount = record.count || 1;
+                if (recordCount > remaining) {
+                  await pb.collection("kaza_logs").update(record.id, {
+                    count: recordCount - remaining,
+                  });
+                  remaining = 0;
+                } else {
+                  await pb.collection("kaza_logs").delete(record.id);
+                  remaining -= recordCount;
+                }
+              }
+
+              showKazaMsg(msg, `${count} kaza namaz çıkarıldı!`, true);
+              if (countInput) countInput.value = "1";
+              await refreshKazaStats(container, pb, profile);
+            } catch (err) {
+              console.error("Kaza çıkarılamadı:", err);
+              showKazaMsg(msg, "Çıkarılamadı. PocketBase bağlantısını kontrol et.", false);
             }
           });
         }
@@ -227,6 +260,7 @@ async function refreshKazaStats(container, pb, profile) {
   const todayKey = new Date().toISOString().split("T")[0];
   const todayLogs = logs.filter((l) => l.date === todayKey);
   profile.todayLogs = todayLogs;
+  localStorage.setItem("kaza_profile", JSON.stringify(profile));
 
   if (logsContainer) {
     logsContainer.innerHTML = logs
@@ -243,3 +277,9 @@ async function refreshKazaStats(container, pb, profile) {
       .join("") || '<p class="text-xs text-slate-500">Henüz kayıt yok.</p>';
   }
 }
+
+function showKazaMsg(el, text, success) {
+  el.textContent = text;
+  el.className = `text-xs mt-2 ${success ? "text-emerald-400" : "text-rose-400"}`;
+  el.classList.remove("hidden");
+}

src/utils/locations.js

@@ -29,6 +29,14 @@ export const TURKISH_CITIES = [
   { name: "Isparta", lat: 37.7648, lon: 30.5566 },
   { name: "Bolu", lat: 40.7356, lon: 31.6061 },
   { name: "Zonguldak", lat: 41.4564, lon: 31.7987 },
+  { name: "Edremit", lat: 39.5961, lon: 27.0244 },
+  { name: "Bandırma", lat: 40.3210, lon: 27.9765 },
+  { name: "Ayvalık", lat: 39.3186, lon: 26.6956 },
+  { name: "Gönen", lat: 40.0500, lon: 27.9167 },
+  { name: "Burhaniye", lat: 39.5000, lon: 26.9667 },
+  { name: "Kadıköy", lat: 40.9833, lon: 29.0833 },
+  { name: "Beşiktaş", lat: 41.0436, lon: 29.0053 },
+  { name: "Üsküdar", lat: 41.0267, lon: 29.0167 },
 ];
 
 export function getCityByName(name) {