@armoyu/ui 1.0.1 → 1.0.2

package/src/components/modules/profile/CloudStorageModal.tsx

@@ -1,200 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-interface CloudStorageModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSelectMedia?: (url: string, type: 'image'|'video') => void;
-}
-
-export function CloudStorageModal({ isOpen, onClose, onSelectMedia }: CloudStorageModalProps) {
-  const [mounted, setMounted] = useState(false);
-  const [activeCategory, setActiveCategory] = useState<'all' | 'image' | 'video'>('all'); // Simplified for mock display
-  const [dragActive, setDragActive] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
-  if (!isOpen || !mounted) return null;
-
-  // Mock Cloud Files
-  const mockFiles = [
-    { id: '1', type: 'image' as const, url: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2670&auto=format&fit=crop', name: 'Valorant_Clip_1.jpg', size: '2.4 MB', date: '12 Eki' },
-    { id: '2', type: 'video' as const, url: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4', name: 'CS2_Aces.mp4', size: '14.1 MB', date: '05 Eki' },
-    { id: '3', type: 'image' as const, url: 'https://images.unsplash.com/photo-1587831990711-23ca6441447b?q=80&w=2698&auto=format&fit=crop', name: 'Setup_Photo.png', size: '4.8 MB', date: '28 Eyl' },
-    { id: '4', type: 'image' as const, url: 'https://images.unsplash.com/photo-1614680376593-902f74cf0d41?q=80&w=2574&auto=format&fit=crop', name: 'Minecraft_Bas...jpg', size: '1.2 MB', date: '15 Eyl' },
-    { id: '5', type: 'image' as const, url: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2672&auto=format&fit=crop', name: 'Coding_Session.jpg', size: '3.5 MB', date: '02 Eyl' }
-  ];
-
-  const filteredFiles = activeCategory === 'all' ? mockFiles : mockFiles.filter(f => f.type === activeCategory);
-
-  // Mock Storage Math
-  const storageData = { total: 5000, used: 2400, photos: 1200, videos: 800, audios: 200, documents: 200 };
-  const pPhotos = (storageData.photos / storageData.total) * 100;
-  const pVideos = (storageData.videos / storageData.total) * 100;
-  const pAudios = (storageData.audios / storageData.total) * 100;
-  const pDocs = (storageData.documents / storageData.total) * 100;
-
-  const modalContent = (
-    <div className="fixed inset-0 z-[9999] p-4 md:p-8 xl:p-12 flex items-center justify-center animate-in fade-in duration-200">
-      
-      {/* Background Dim */}
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
-      
-      {/* Cloud Window Wrapper */}
-      <div className="relative w-full max-w-6xl h-full max-h-[85vh] bg-white dark:bg-[#0a0a0e] border border-gray-200 dark:border-white/10 rounded-[2rem] shadow-2xl flex flex-col md:flex-row overflow-hidden animate-in zoom-in-95 duration-300">
-        
-        {/* Left Column (Sidebar) */}
-        <div className="w-full md:w-64 border-r border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-[#121216] flex flex-col shrink-0">
-          <div className="p-6 md:p-8 pb-4">
-            <h2 className="text-2xl font-black text-armoyu-text tracking-tight flex items-center gap-3">
-               <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" className="text-blue-500"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path></svg>
-               Cloud
-            </h2>
-          </div>
-
-          <nav className="flex-1 px-4 space-y-1.5 overflow-y-auto hide-scrollbar">
-            <button 
-              onClick={() => setActiveCategory('all')} 
-              className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-xl font-bold text-sm transition-all ${activeCategory === 'all' ? 'bg-blue-500 text-white shadow-md shadow-blue-500/20' : 'text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5'}`}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
-              Tümü
-            </button>
-            <button 
-              onClick={() => setActiveCategory('image')} 
-              className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-xl font-bold text-sm transition-all ${activeCategory === 'image' ? 'bg-blue-500 text-white shadow-md shadow-blue-500/20' : 'text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5'}`}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-              Fotoğraflar
-            </button>
-            <button 
-              onClick={() => setActiveCategory('video')} 
-              className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-xl font-bold text-sm transition-all ${activeCategory === 'video' ? 'bg-blue-500 text-white shadow-md shadow-blue-500/20' : 'text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5'}`}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
-              Videolar
-            </button>
-            <button 
-              onClick={() => {}} 
-              className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-xl font-bold text-sm transition-all text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5`}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
-              Sesler
-            </button>
-          </nav>
-
-          {/* Storage Capacity Bar Mini Widget */}
-          <div className="p-6 border-t border-gray-200 dark:border-white/10 hidden md:block group">
-             <div className="mb-2 flex justify-between items-end">
-               <span className="text-xs font-bold text-armoyu-text-muted group-hover:text-armoyu-text transition-colors">Depolama</span>
-               <span className="text-xs font-black text-armoyu-text">{(storageData.used / 1000).toFixed(1)}GB <span className="text-[10px] text-armoyu-text-muted font-bold">/ {(storageData.total / 1000).toFixed(1)}GB</span></span>
-             </div>
-             <div className="w-full h-2.5 bg-black/5 dark:bg-white/10 rounded-full overflow-hidden flex gap-0.5 shadow-inner">
-               <div style={{width: `${pPhotos}%`}} className="bg-blue-500 h-full" title="Fotoğraflar" />
-               <div style={{width: `${pVideos}%`}} className="bg-purple-500 h-full" title="Videolar" />
-               <div style={{width: `${pAudios}%`}} className="bg-emerald-500 h-full" title="Sesler" />
-               <div style={{width: `${pDocs}%`}} className="bg-orange-500 h-full" title="Belgeler" />
-             </div>
-          </div>
-        </div>
-
-        {/* Right Column (Main Viewspace) */}
-        <div className="flex-1 flex flex-col min-w-0 bg-white dark:bg-[#0a0a0e]">
-          
-          {/* Top Bar Navigation */}
-          <div className="flex justify-between items-center p-4 md:px-8 border-b border-gray-200 dark:border-white/10 shrink-0">
-            <h3 className="font-extrabold text-armoyu-text text-lg tracking-tight">
-              {activeCategory === 'all' ? 'Tüm Dosyalar' : 
-               activeCategory === 'image' ? 'Fotoğraflar' : 
-               activeCategory === 'video' ? 'Videolar' : 'Dosyalarım'}
-            </h3>
-            <button onClick={onClose} className="p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/5 text-armoyu-text-muted transition-colors">
-              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-
-          {/* Scrollable Container */}
-          <div className="flex-1 overflow-y-auto px-4 md:px-8 py-6 hide-scrollbar">
-            <div className="space-y-8 max-w-5xl mx-auto">
-              
-              {/* Row 1: Upload Modül (Kategori Seçimli) */}
-              <div 
-                className={`border-2 border-dashed rounded-[2rem] p-6 lg:p-8 flex flex-col md:flex-row items-center justify-between gap-6 transition-all group ${dragActive ? 'border-blue-500 bg-blue-500/10' : 'border-black/10 dark:border-white/10 hover:border-blue-500/50 bg-black/5 dark:bg-white/5'}`}
-                onDragEnter={() => setDragActive(true)}
-                onDragLeave={() => setDragActive(false)}
-                onDragOver={(e) => e.preventDefault()}
-                onDrop={(e) => { e.preventDefault(); setDragActive(false); /* file handle logic */ }}
-              >
-                <div className="flex items-center gap-5">
-                  <div className="w-16 h-16 rounded-[1.25rem] bg-white dark:bg-[#1a1a24] shadow-[0_4px_20px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.03)] flex flex-shrink-0 items-center justify-center group-hover:scale-105 transition-transform">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-blue-500"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
-                  </div>
-                  <div>
-                    <h3 className="font-black text-armoyu-text text-lg mb-1">Yeni İçerik Yükle</h3>
-                    <p className="text-xs font-bold text-armoyu-text-muted">Görsel veya Dosyaları Sürükleyin (Maks 100MB)</p>
-                  </div>
-                </div>
-                
-                <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto shrink-0">
-                  <select className="bg-white dark:bg-[#1a1a24] border border-gray-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm font-bold text-armoyu-text outline-none cursor-pointer focus:border-blue-500 transition-colors shadow-sm">
-                    <option value="image">Fotoğraflar İçin</option>
-                    <option value="video">Videolar İçin</option>
-                    <option value="audio">Sesler İçin</option>
-                  </select>
-                  <button className="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white text-sm font-bold rounded-xl shadow-[0_0_15px_rgba(37,99,235,0.3)] hover:shadow-[0_0_20px_rgba(37,99,235,0.5)] transition-all">
-                    Seç ve Yükle
-                  </button>
-                </div>
-              </div>
-
-              {/* Row 2: Gallery Mappings */}
-              <div>
-                <h4 className="text-sm font-bold text-armoyu-text-muted mb-4 uppercase tracking-wider">{filteredFiles.length} İçerik Görüntüleniyor</h4>
-                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                  {filteredFiles.map(file => (
-                    <div 
-                      key={file.id} 
-                      className="group relative aspect-square rounded-2xl overflow-hidden bg-black/5 dark:bg-white/5 border border-transparent hover:border-blue-500/50 cursor-pointer shadow-sm hover:shadow-lg transition-all"
-                      onClick={() => onSelectMedia && onSelectMedia(file.url, file.type)}
-                    >
-                      {file.type === 'image' ? (
-                        <img src={file.url} alt={file.name} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
-                      ) : (
-                        <div className="w-full h-full relative">
-                          <video src={file.url} className="w-full h-full object-cover" />
-                          <div className="absolute inset-0 flex items-center justify-center bg-black/20">
-                            <div className="w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white border border-white/20">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                      
-                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
-                        <p className="text-white font-bold text-sm truncate mb-0.5">{file.name}</p>
-                        <p className="text-white/70 font-bold text-[10px]">{file.size} • {file.date}</p>
-                        
-                        <button 
-                          className="mt-3 w-full py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs font-bold rounded-xl transition-colors shadow-md flex items-center justify-center gap-1.5"
-                          onClick={(e) => { e.stopPropagation(); onSelectMedia && onSelectMedia(file.url, file.type); }}
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
-                          Paylaşıma Ekle
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  );
-
-  return createPortal(modalContent, document.body);
-}

package/src/components/modules/profile/EditProfileModal.tsx

@@ -1,191 +0,0 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-interface EditProfileModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  user: any; // Genişletilebilir nesne prop
-}
-
-export function EditProfileModal({ isOpen, onClose, user }: EditProfileModalProps) {
-  const [formData, setFormData] = useState({
-    profession: '',
-    email: 'kullanici@armoyu.com',
-    phone: '',
-    birthDate: '',
-    country: 'Türkiye',
-    city: 'İstanbul',
-  });
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
-  };
-
-  const handleSave = () => {
-    // API logic buraya eklenecek
-    onClose();
-  };
-
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-
-  if (!isOpen || !mounted) return null;
-
-  const modalContent = (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center animate-in fade-in duration-200">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      
-      <div className="relative w-full max-w-2xl bg-white dark:bg-[#0a0a0e] border border-gray-200 dark:border-white/10 rounded-[2rem] shadow-2xl p-6 md:p-8 animate-in zoom-in-95 duration-300 mx-4 max-h-[90vh] overflow-y-auto hide-scrollbar flex flex-col">
-        
-        {/* Sticky Header */}
-        <div className="flex justify-between items-center mb-6 shrink-0 sticky top-0 bg-white dark:bg-[#0a0a0e] z-10 pt-2 pb-4 border-b border-gray-200 dark:border-white/5">
-          <h2 className="text-xl md:text-2xl font-black text-armoyu-text tracking-tight">Profili Düzenle</h2>
-          <button onClick={onClose} className="p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/5 text-armoyu-text-muted transition-colors border border-transparent hover:border-armoyu-card-border">
-             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-
-        <div className="space-y-8 pb-8 flex-1">
-           {/* Primary Info Veri Girişi */}
-           <div className="space-y-5">
-             <h3 className="text-lg font-bold text-armoyu-text border-b border-gray-200 dark:border-white/5 pb-2">Temel Bilgiler</h3>
-             
-             <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">E-Posta Adresi</label>
-                 <input type="email" name="email" value={formData.email} onChange={handleChange} className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors" />
-               </div>
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">Cep Numarası</label>
-                 <input type="tel" name="phone" value={formData.phone} onChange={handleChange} placeholder="+90 555 555 55 55" className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors" />
-               </div>
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">Meslek / Unvan</label>
-                 <select name="profession" value={formData.profession} onChange={handleChange} className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors appearance-none">
-                   <option value="">Seçiniz...</option>
-                   <option value="Öğrenci">Öğrenci</option>
-                   <option value="Öğretmen / Eğitmen">Öğretmen / Eğitmen</option>
-                   <option value="Yazılım Geliştirici">Yazılım Geliştirici</option>
-                   <option value="Mühendis">Mühendis</option>
-                   <option value="Tasarımcı / Grafiker">Tasarımcı / Grafiker</option>
-                   <option value="Mimar">Mimar</option>
-                   <option value="İçerik Üreticisi (YouTuber/Yayıncı)">İçerik Üreticisi (YouTuber/Yayıncı)</option>
-                   <option value="e-Spor Oyuncusu">e-Spor Oyuncusu</option>
-                   <option value="Doktor / Sağlık Çalışanı">Doktor / Sağlık Çalışanı</option>
-                   <option value="Avukat / Hukukçu">Avukat / Hukukçu</option>
-                   <option value="Muhasebeci / Finans">Muhasebeci / Finans</option>
-                   <option value="Satış / Pazarlama">Satış / Pazarlama</option>
-                   <option value="Serbest Çalışan (Freelancer)">Serbest Çalışan (Freelancer)</option>
-                   <option value="Girişimci / İş İnsanı">Girişimci / İş İnsanı</option>
-                   <option value="Diğer">Diğer</option>
-                 </select>
-               </div>
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">Doğum Tarihi</label>
-                 <input type="date" name="birthDate" value={formData.birthDate} onChange={handleChange} className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors" />
-               </div>
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">Ülke</label>
-                 <select name="country" value={formData.country} onChange={handleChange} className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors appearance-none">
-                   <option value="Türkiye">Türkiye</option>
-                   <option value="Azerbaycan">Azerbaycan</option>
-                   <option value="Almanya">Almanya</option>
-                   <option value="Diğer">Diğer</option>
-                 </select>
-               </div>
-               <div className="space-y-2">
-                 <label className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider">İl / Şehir</label>
-                 <input type="text" name="city" value={formData.city} onChange={handleChange} placeholder="Örn: İstanbul" className="w-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-armoyu-text font-bold outline-none focus:border-blue-500 shadow-inner transition-colors" />
-               </div>
-             </div>
-           </div>
-
-           {/* Bağlı Hesaplar (Sosyal Medya ve Oyun) */}
-           <div className="space-y-5">
-             <h3 className="text-lg font-bold text-armoyu-text border-b border-gray-200 dark:border-white/5 pb-2">Bağlı Hesaplar</h3>
-             <p className="text-xs font-bold text-armoyu-text-muted mb-4 leading-relaxed">Diğer platformlardaki hesaplarınızı bağlayarak profilinizde sergileyebilir ve arkadaşlarınızın sizi kolayca bulmasını sağlayabilirsiniz.</p>
-             
-             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                
-                {/* Discord (Bağlanmış Durum Simülasyonu) */}
-                <button className="flex items-center gap-3 w-full p-3.5 rounded-2xl bg-[#5865F2]/5 hover:bg-[#5865F2]/10 dark:bg-[#5865F2]/20 dark:hover:bg-[#5865F2]/30 border border-[#5865F2]/30 transition-all group shadow-sm hover:shadow-md">
-                  <div className="w-12 h-12 rounded-xl bg-[#5865F2] flex items-center justify-center text-white shrink-0 shadow-[0_0_15px_rgba(88,101,242,0.4)]">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2498-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8745-.6177-1.2498a.077.077 0 00-.0788-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
-                  </div>
-                  <div className="flex-1 text-left">
-                    <div className="font-bold text-[15px] text-armoyu-text">Discord</div>
-                    <div className="text-[11px] font-bold text-blue-500 uppercase tracking-wider">Bağlandı</div>
-                  </div>
-                  <div className="px-3.5 py-2 rounded-xl border border-red-500/20 text-red-500 text-xs font-black bg-red-500/5 hover:bg-red-500/10 transition-colors shadow-sm">İptal Et</div>
-                </button>
-
-                {/* Steam */}
-                <button className="flex items-center gap-3 w-full p-3.5 rounded-2xl bg-[#171a21]/5 hover:bg-[#171a21]/10 dark:bg-[#171a21]/80 dark:hover:bg-[#171a21] border border-gray-200 dark:border-white/5 transition-all group shadow-sm hover:shadow-md">
-                  <div className="w-12 h-12 rounded-xl bg-[#171a21] flex items-center justify-center text-white shrink-0 shadow-sm">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M11.97 0C5.35 0 0 5.37 0 12c0 2.87 1.02 5.51 2.71 7.55l3.82-5.59c-.06-.31-.08-.63-.08-.96 0-3.32 2.68-6 6-6s6 2.68 6 6-2.68 6-6 6c-.84 0-1.63-.17-2.36-.5l-3.23 4.74A11.961 11.961 0 0 0 11.97 24c6.62 0 12-5.37 12-12s-5.38-12-12-12m6.25 11.89c0 1.6-1.29 2.89-2.89 2.89a2.89 2.89 0 0 1-2.89-2.89c0-1.6 1.29-2.89 2.89-2.89s2.89 1.29 2.89 2.89M8.38 14.88c-.85.34-1.8.1-2.38-.6a2.031 2.031 0 0 1 .59-2.85c.85-.34 1.8-.1 2.38.6.59.71.26 2.5-.59 2.85"/></svg>
-                  </div>
-                  <div className="flex-1 text-left">
-                    <div className="font-bold text-[15px] text-armoyu-text">Steam</div>
-                    <div className="text-[11px] font-bold text-armoyu-text-muted uppercase tracking-wider">Bağlanmadı</div>
-                  </div>
-                  <div className="px-3.5 py-2 rounded-xl bg-black/5 dark:bg-white/5 text-xs font-black text-armoyu-text group-hover:bg-armoyu-text group-hover:text-white dark:group-hover:text-[#0a0a0e] transition-colors border border-black/5 dark:border-white/10 shadow-sm">Bağla</div>
-                </button>
-                
-                {/* Instagram */}
-                <button className="flex items-center gap-3 w-full p-3.5 rounded-2xl bg-pink-500/5 hover:bg-pink-500/10 dark:bg-pink-500/10 dark:hover:bg-pink-500/15 border border-pink-500/20 transition-all group shadow-sm hover:shadow-md">
-                  <div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-500 flex items-center justify-center text-white shrink-0 shadow-[0_0_15px_rgba(236,72,153,0.4)]">
-                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
-                  </div>
-                  <div className="flex-1 text-left">
-                    <div className="font-bold text-[15px] text-armoyu-text">Instagram</div>
-                    <div className="text-[11px] font-bold text-armoyu-text-muted uppercase tracking-wider">Bağlanmadı</div>
-                  </div>
-                  <div className="px-3.5 py-2 rounded-xl bg-black/5 dark:bg-white/5 text-xs font-black text-armoyu-text group-hover:bg-armoyu-text group-hover:text-white dark:group-hover:text-[#0a0a0e] transition-colors border border-black/5 dark:border-white/10 shadow-sm">Bağla</div>
-                </button>
-
-                {/* LinkedIn */}
-                <button className="flex items-center gap-3 w-full p-3.5 rounded-2xl bg-[#0077b5]/5 hover:bg-[#0077b5]/10 dark:bg-[#0077b5]/10 dark:hover:bg-[#0077b5]/20 border border-[#0077b5]/20 transition-all group shadow-sm hover:shadow-md">
-                  <div className="w-12 h-12 rounded-xl bg-[#0077b5] flex items-center justify-center text-white shrink-0 shadow-[0_0_15px_rgba(0,119,181,0.4)]">
-                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
-                  </div>
-                  <div className="flex-1 text-left">
-                    <div className="font-bold text-[15px] text-armoyu-text">LinkedIn</div>
-                    <div className="text-[11px] font-bold text-armoyu-text-muted uppercase tracking-wider">Bağlanmadı</div>
-                  </div>
-                  <div className="px-3.5 py-2 rounded-xl bg-black/5 dark:bg-white/5 text-xs font-black text-armoyu-text group-hover:bg-armoyu-text group-hover:text-white dark:group-hover:text-[#0a0a0e] transition-colors border border-black/5 dark:border-white/10 shadow-sm">Bağla</div>
-                </button>
-
-                {/* Facebook */}
-                <button className="flex items-center gap-3 w-full p-3.5 rounded-2xl bg-[#1877F2]/5 hover:bg-[#1877F2]/10 dark:bg-[#1877F2]/10 dark:hover:bg-[#1877F2]/20 border border-[#1877F2]/20 transition-all group shadow-sm hover:shadow-md">
-                  <div className="w-12 h-12 rounded-xl bg-[#1877F2] flex items-center justify-center text-white shrink-0 shadow-[0_0_15px_rgba(24,119,242,0.4)]">
-                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
-                  </div>
-                  <div className="flex-1 text-left">
-                    <div className="font-bold text-[15px] text-armoyu-text">Facebook</div>
-                    <div className="text-[11px] font-bold text-armoyu-text-muted uppercase tracking-wider">Bağlanmadı</div>
-                  </div>
-                  <div className="px-3.5 py-2 rounded-xl bg-black/5 dark:bg-white/5 text-xs font-black text-armoyu-text group-hover:bg-armoyu-text group-hover:text-white dark:group-hover:text-[#0a0a0e] transition-colors border border-black/5 dark:border-white/10 shadow-sm">Bağla</div>
-                </button>
-
-             </div>
-           </div>
-
-        </div>
-
-        {/* Footer Actions Tab */}
-        <div className="flex gap-4 pt-6 mt-auto sticky bottom-0 bg-white dark:bg-[#0a0a0e] pb-2 z-10 w-full shrink-0 border-t border-gray-200 dark:border-white/5">
-          <button onClick={onClose} className="flex-1 py-3.5 text-sm font-black text-armoyu-text bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-2xl transition-colors border border-black/5 dark:border-white/5 shadow-sm">
-            İptal
-          </button>
-          <button onClick={handleSave} className="flex-1 py-3.5 text-sm font-black text-white bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 rounded-2xl transition-all shadow-[0_0_20px_rgba(37,99,235,0.4)]">
-            Değişiklikleri Kaydet
-          </button>
-        </div>
-
-      </div>
-    </div>
-  );
-
-  return createPortal(modalContent, document.body);
-}