import { useState, useEffect, useRef } from "react";

/* ═══════════════════════════════════════════════════════════
   DESIGN: Editorial — warm ivory base · ink-black type
   Inspired by Stripe/Linear but warmer & more characterful
   Font vibe: geometric sans, tight tracking, bold numbers
═══════════════════════════════════════════════════════════ */
const G = {
  // Surfaces — clean white base, subtle depth
  canvas:  "#F4F6F8",   // app background
  surface: "#FFFFFF",   // card / panel
  raised:  "#FFFFFF",   // modal / elevated
  sidebar: "#111318",   // sidebar dark

  // Ink
  ink0:    "#0D1117",   // headings — near black
  ink1:    "#24292F",   // body
  ink2:    "#57606A",   // secondary / helper
  ink3:    "#AFB8C1",   // placeholder / muted

  // Borders
  border:  "#D0D7DE",   // default divider
  border2: "#B1BAC4",   // stronger

  // Accents
  accent:  "#0969DA",   // GitHub-style blue
  accentL: "#DDF4FF",   // blue tint
  accentT: "#0969DA",
  green:   "#1A7F37",
  greenL:  "#DCFFE4",
  red:     "#CF222E",
  redL:    "#FFEBE9",
  amber:   "#9A6700",
  amberL:  "#FFF8C5",
  teal:    "#0969A2",
  tealL:   "#DDF4FF",
  purple:  "#8250DF",
  purpleL: "#FBEFFF",
  rose:    "#BF3989",
  roseL:   "#FFEFF7",

  // Admin / User accent
  adminAccent: "#4C00FF",
  userAccent:  "#4C00FF",
};

/* ─── helpers ─── */
const fmt  = n => "₺" + Number(n).toLocaleString("tr-TR",{minimumFractionDigits:2,maximumFractionDigits:2});
const fmtK = n => n>=1000 ? "₺"+(n/1000).toFixed(1)+"K" : "₺"+n;
const init = n => n.split(" ").map(w=>w[0]).join("").slice(0,2).toUpperCase();
const slug = s => s.toLowerCase()
  .replace(/ğ/g,"g").replace(/ü/g,"u").replace(/ş/g,"s")
  .replace(/ı/g,"i").replace(/ö/g,"o").replace(/ç/g,"c")
  .replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"");
const uid  = () => Math.random().toString(36).slice(2,7);

// Türkiye illeri
const TR_CITIES = ["Adana","Adıyaman","Afyonkarahisar","Ağrı","Amasya","Ankara","Antalya","Artvin","Aydın","Balıkesir","Bilecik","Bingöl","Bitlis","Bolu","Burdur","Bursa","Çanakkale","Çankırı","Çorum","Denizli","Diyarbakır","Edirne","Elazığ","Erzincan","Erzurum","Eskişehir","Gaziantep","Giresun","Gümüşhane","Hakkari","Hatay","Isparta","Mersin","İstanbul","İzmir","Kars","Kastamonu","Kayseri","Kırklareli","Kırşehir","Kocaeli","Konya","Kütahya","Malatya","Manisa","Kahramanmaraş","Mardin","Muğla","Muş","Nevşehir","Niğde","Ordu","Rize","Sakarya","Samsun","Siirt","Sinop","Sivas","Tekirdağ","Tokat","Trabzon","Tunceli","Şanlıurfa","Uşak","Van","Yozgat","Zonguldak","Aksaray","Bayburt","Karaman","Kırıkkale","Batman","Şırnak","Bartın","Ardahan","Iğdır","Yalova","Karabük","Kilis","Osmaniye","Düzce"];

// Alan adı format doğrulama
// Geçerli: siteniz.com, sub.domain.com.tr, my-site.io vb.
const isValidDomain = val => {
  if(!val||val.length<4) return false;
  return /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)+$/.test(val) && val.includes(".");
};

// Telefon formatı: 05XX XXX XX XX — 05 ile başlamak zorunlu, tam 11 hane
const fmtPhone = (val="") => {
  // Sadece rakamları al, max 11 hane
  const digits = val.replace(/\D/g,"").slice(0,11);
  if(!digits) return "";
  // 05 ile başlamıyorsa düzelt
  let d = digits;
  if(d.length>=1 && d[0]!=="0") d = "0"+d.slice(0,10);
  if(d.length>=2 && d[1]!=="5") d = d[0]+"5"+d.slice(2,11);
  // Formatla: 05XX XXX XX XX
  if(d.length<=4)       return d;
  else if(d.length<=7)  return d.slice(0,4)+" "+d.slice(4);
  else if(d.length<=9)  return d.slice(0,4)+" "+d.slice(4,7)+" "+d.slice(7);
  else                  return d.slice(0,4)+" "+d.slice(4,7)+" "+d.slice(7,9)+" "+d.slice(9);
};
// 11 hane tam doldu mu kontrolü
const isPhoneValid = (val="") => val.replace(/\D/g,"").length===11 && val.replace(/\D/g,"").startsWith("05");

// Profil tamamlanmış mı? (fatura bilgileri dolu mu?)
const isProfileComplete = (b) =>
  !!(b && b.name && b.email && b.phone && b.address && b.city && isPhoneValid(b.phone));

const onPhoneKey = e => {
  const allowed = ["Backspace","Delete","Tab","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"];
  if(allowed.includes(e.key)) return;
  if(e.ctrlKey||e.metaKey) return;
  if(!/[\d]/.test(e.key)) e.preventDefault();
};

/* ─── static data ─── */
const CUSTOMERS = [
  {id:1,name:"Ahmet Yılmaz",email:"ahmet@yazilimevi.com",phone:"0532 111 22 33",company:"Yazılım Evi Ltd.",taxNo:"1234567890",status:"active",balance:0,joined:"2023-03-15"},
  {id:2,name:"Zeynep Kaya",email:"zeynep@marketingpro.com.tr",phone:"0541 222 33 44",company:"Marketing Pro A.Ş.",taxNo:"2345678901",status:"active",balance:1416,joined:"2022-11-01"},
  {id:3,name:"Mert Arslan",email:"mert@dijital.io",phone:"0505 333 44 55",company:"Dijital IO",taxNo:"3456789012",status:"active",balance:0,joined:"2024-01-20"},
  {id:4,name:"Selin Baştürk",email:"selin@eticaret.net",phone:"0553 444 55 66",company:"E-Ticaret Net",taxNo:"4567890123",status:"suspended",balance:1050.2,joined:"2021-07-10"},
  {id:5,name:"Cem Tuncer",email:"cem@bulutsis.com",phone:"0542 555 66 77",company:"Bulut Sistemleri A.Ş.",taxNo:"5678901234",status:"active",balance:0,joined:"2023-09-05"},
  {id:6,name:"Deniz Polat",email:"deniz@teknoloji.biz",phone:"0501 666 77 88",company:"Teknoloji Biz",taxNo:"6789012345",status:"inactive",balance:206.5,joined:"2020-05-22"},
];
// ── REACTIVE INVOICES & ORDERS STATE ─────────────────────────────────────────
let _invoices = [
  {id:"INV-2026-0412",customerId:1,customer:"Ahmet Yılmaz",amount:450,tax:81,total:531,status:"paid",date:"2026-04-03",due:"2026-04-10",service:"Business Hosting",efatura:true,orderId:"ORD-1041"},
  {id:"INV-2026-0411",customerId:2,customer:"Zeynep Kaya",amount:1200,tax:216,total:1416,status:"pending",date:"2026-04-02",due:"2026-04-09",service:"Dedicated Server",efatura:false,orderId:"ORD-1040"},
  {id:"INV-2026-0410",customerId:3,customer:"Mert Arslan",amount:320,tax:57.6,total:377.6,status:"paid",date:"2026-04-01",due:"2026-04-08",service:"WordPress Hosting",efatura:true,orderId:"ORD-1039"},
  {id:"INV-2026-0409",customerId:4,customer:"Selin Baştürk",amount:890,tax:160.2,total:1050.2,status:"overdue",date:"2026-03-28",due:"2026-04-04",service:"VPS + SSL",efatura:false,orderId:"ORD-1038"},
  {id:"INV-2026-0408",customerId:6,customer:"Deniz Polat",amount:175,tax:31.5,total:206.5,status:"paid",date:"2026-03-27",due:"2026-04-03",service:"Shared Hosting",efatura:true,orderId:null},
  {id:"INV-2026-0407",customerId:5,customer:"Cem Tuncer",amount:2400,tax:432,total:2832,status:"paid",date:"2026-03-25",due:"2026-04-01",service:"Cloud VPS x3",efatura:true,orderId:"ORD-1042"},
];
let _orders = [
  {id:"ORD-1042",customerId:5,customer:"Cem Tuncer",product:"Business Hosting",categoryId:"hosting",status:"active",pleskUser:"cem_tuncer",ip:"185.45.12.88",start:"2026-04-03",renew:"2027-04-03",price:450,disk:"50 GB",bw:"500 GB",serverId:"srv1"},
  {id:"ORD-1041",customerId:1,customer:"Ahmet Yılmaz",product:"SSL Sertifikası",categoryId:"ssl",status:"active",pleskUser:"ahmet_yilmaz",ip:"185.45.12.45",start:"2026-04-01",renew:"2027-04-01",price:120,disk:"—",bw:"—",serverId:"srv1"},
  {id:"ORD-1040",customerId:2,customer:"Zeynep Kaya",product:"Dedicated Server",categoryId:"dedicated",status:"pending",pleskUser:"—",ip:"—",start:"2026-04-02",renew:"2027-04-02",price:1200,disk:"2 TB",bw:"Sınırsız",serverId:"srv2"},
  {id:"ORD-1039",customerId:3,customer:"Mert Arslan",product:"WordPress Hosting",categoryId:"hosting",status:"active",pleskUser:"mert_arslan",ip:"185.45.12.22",start:"2026-03-15",renew:"2027-03-15",price:320,disk:"20 GB",bw:"200 GB",serverId:"srv3"},
  {id:"ORD-1038",customerId:4,customer:"Selin Baştürk",product:"VPS Sunucu",categoryId:"vps",status:"suspended",pleskUser:"selin_basturk",ip:"185.45.12.77",start:"2026-01-10",renew:"2026-07-10",price:650,disk:"100 GB",bw:"1 TB",serverId:"srv2"},
];
let _invListeners = [];
let _ordListeners = [];
const setInvoices = fn => { _invoices=typeof fn==="function"?fn(_invoices):fn; _invListeners.forEach(cb=>cb(_invoices)); };
const setOrders   = fn => { _orders  =typeof fn==="function"?fn(_orders  ):fn; _ordListeners.forEach(cb=>cb(_orders  )); };
const useInvoices = () => {
  const [inv,setL]=useState(_invoices);
  useEffect(()=>{ _invListeners.push(setL); return ()=>{ _invListeners=_invListeners.filter(x=>x!==setL); }; },[]);
  return [inv, setInvoices];
};
const useOrders = () => {
  const [ord,setL]=useState(_orders);
  useEffect(()=>{ _ordListeners.push(setL); return ()=>{ _ordListeners=_ordListeners.filter(x=>x!==setL); }; },[]);
  return [ord, setOrders];
};

// Fatura öde → faturayı paid yap + ilgili askıdaki siparişi active et + yenileme tarihini uzat
const payInvoice = (invId) => {
  const inv = _invoices.find(i=>i.id===invId);
  if(!inv) return;
  setInvoices(prev=>prev.map(i=>i.id===invId?{...i,status:"paid",paidAt:new Date().toISOString().slice(0,10)}:i));
  if(inv.orderId) {
    setOrders(prev=>prev.map(o=>{
      if(o.id!==inv.orderId) return o;
      // Yenileme tarihini 1 yıl uzat
      const oldRenew = new Date(o.renew);
      const newRenew = new Date(oldRenew);
      newRenew.setFullYear(newRenew.getFullYear()+1);
      return {...o, status:"active", renew:newRenew.toISOString().slice(0,10)};
    }));
  }
};

// Backward compat — bazı yerlerde hâlâ INVOICES/ORDERS adıyla referans edilebilir
const INVOICES = _invoices; // snapshot — reactive bileşenler useInvoices() kullanmalı
const ORDERS   = _orders;   // snapshot — reactive bileşenler useOrders()   kullanmalı

// ── REACTIVE DOMAINS STATE ────────────────────────────────────────────────────
let _domains = [
  {id:1, domain:"yazilimevi.com.tr", customerId:1, customer:"Ahmet Yılmaz",
   status:"active", registered:"2023-03-15", expires:"2027-03-15",
   autorenew:true, locked:true, whoisPrivacy:false, // .tr whois gizliliği desteklemez
   registrar:"resellerclub",
   ns:["ns1.hostpanel.com","ns2.hostpanel.com"],
   dns:[
     {id:"r1",type:"A",    name:"@",   value:"185.45.12.22", ttl:3600},
     {id:"r2",type:"A",    name:"www", value:"185.45.12.22", ttl:3600},
     {id:"r3",type:"MX",   name:"@",   value:"mail.hostpanel.com", ttl:3600, priority:10},
     {id:"r4",type:"TXT",  name:"@",   value:"v=spf1 include:hostpanel.com ~all", ttl:3600},
   ],
   epp:"", notes:""},
  {id:2, domain:"marketingpro.com.tr", customerId:2, customer:"Zeynep Kaya",
   status:"active", registered:"2022-11-01", expires:"2026-11-01",
   autorenew:true, locked:true, whoisPrivacy:false,
   registrar:"resellerclub",
   ns:["dale.ns.cloudflare.com","kate.ns.cloudflare.com"],
   dns:[
     {id:"r5",type:"A",   name:"@",   value:"104.21.0.1",   ttl:1,    note:"Cloudflare proxy"},
     {id:"r6",type:"A",   name:"www", value:"104.21.0.1",   ttl:1,    note:"Cloudflare proxy"},
   ],
   epp:"", notes:"Cloudflare üzerinden yönetiliyor"},
  {id:3, domain:"dijital.io", customerId:3, customer:"Mert Arslan",
   status:"expired", registered:"2024-01-20", expires:"2025-01-20",
   autorenew:false, locked:false, whoisPrivacy:true,
   registrar:"namecheap",
   ns:["ns1.hostpanel.com","ns2.hostpanel.com"],
   dns:[
     {id:"r7",type:"A",   name:"@",   value:"185.45.12.33", ttl:3600},
     {id:"r8",type:"CNAME",name:"www",value:"yazilimevi.com.tr", ttl:3600},
   ],
   epp:"EPP-XYZ-789", notes:"Yenileme uyarısı gönderildi"},
  {id:4, domain:"eticaret.net", customerId:4, customer:"Selin Baştürk",
   status:"expired", registered:"2021-07-10", expires:"2026-03-10",
   autorenew:false, locked:false, whoisPrivacy:true,
   registrar:"enom",
   ns:["ns1.hostpanel.com","ns2.hostpanel.com"],
   dns:[
     {id:"r9",type:"A",   name:"@",   value:"185.45.12.77", ttl:3600},
   ],
   epp:"", notes:""},
  {id:5, domain:"bulutsis.com", customerId:5, customer:"Cem Tuncer",
   status:"active", registered:"2023-09-05", expires:"2027-09-05",
   autorenew:true, locked:true, whoisPrivacy:true,
   registrar:"resellerclub",
   ns:["nina.ns.cloudflare.com","walt.ns.cloudflare.com"],
   dns:[
     {id:"r10",type:"A",   name:"@",   value:"185.45.12.88", ttl:3600},
     {id:"r11",type:"A",   name:"www", value:"185.45.12.88", ttl:3600},
     {id:"r12",type:"MX",  name:"@",   value:"aspmx.l.google.com", ttl:3600, priority:1},
     {id:"r13",type:"TXT", name:"@",   value:"v=spf1 include:_spf.google.com ~all", ttl:3600},
     {id:"r14",type:"TXT", name:"_dmarc", value:"v=DMARC1; p=quarantine; rua=mailto:dmarc@bulutsis.com", ttl:3600},
   ],
   epp:"EPP-BUL-456", notes:"Google Workspace aktif"},
];
let _domainListeners = [];
const setDomains = fn => { _domains = typeof fn==="function"?fn(_domains):fn; _domainListeners.forEach(cb=>cb(_domains)); };
const useDomains = () => {
  const [domains, setL] = useState(_domains);
  useEffect(()=>{ _domainListeners.push(setL); return ()=>{ _domainListeners=_domainListeners.filter(x=>x!==setL); }; },[]);
  return [domains, setDomains];
};
// Backward compat
const DOMAINS = _domains;

const TICKETS = [
  {id:"TKT-0291",customerId:1,customer:"Ahmet Yılmaz",subject:"E-posta sunucusu yanıt vermiyor",dept:"Teknik Destek",priority:"critical",status:"open",created:"2026-04-04",msgs:3},
  {id:"TKT-0290",customerId:2,customer:"Zeynep Kaya",subject:"SSL sertifikası yenileme talebi",dept:"Faturalandırma",priority:"normal",status:"open",created:"2026-04-03",msgs:1},
  {id:"TKT-0289",customerId:3,customer:"Mert Arslan",subject:"Domain transfer kodu isteniyor",dept:"Domain",priority:"medium",status:"replied",created:"2026-04-02",msgs:4},
  {id:"TKT-0288",customerId:4,customer:"Selin Baştürk",subject:"Fatura PDF formatında istek",dept:"Faturalandırma",priority:"low",status:"closed",created:"2026-04-01",msgs:2},
  {id:"TKT-0287",customerId:5,customer:"Cem Tuncer",subject:"Plesk erişimi kısıtlı görünüyor",dept:"Teknik Destek",priority:"high",status:"open",created:"2026-03-31",msgs:6},
];
const GIB = [
  {ettn:"12345678-1234-1234-1234-123456789012",inv:"INV-2026-0412",customer:"Yazılım Evi Ltd.",vkn:"1234567890",amount:450,tax:81,total:531,date:"2026-04-03",status:"delivered",type:"SATIS"},
  {ettn:"22345678-2234-2234-2234-223456789012",inv:"INV-2026-0410",customer:"Dijital IO",vkn:"3456789012",amount:320,tax:57.6,total:377.6,date:"2026-04-01",status:"delivered",type:"SATIS"},
  {ettn:"32345678-3234-3234-3234-323456789012",inv:"INV-2026-0408",customer:"Teknoloji Biz",vkn:"6789012345",amount:175,tax:31.5,total:206.5,date:"2026-03-27",status:"delivered",type:"SATIS"},
  {ettn:"42345678-4234-4234-4234-423456789012",inv:"INV-2026-0407",customer:"Bulut Sistemleri A.Ş.",vkn:"5678901234",amount:2400,tax:432,total:2832,date:"2026-03-25",status:"delivered",type:"SATIS"},
];
const IYZICO = [
  {id:"IY-001",inv:"INV-2026-0412",customer:"Ahmet Yılmaz",card:"**** 1234",bank:"Garanti BBVA",amount:531,fee:8.5,net:522.5,status:"success",date:"2026-04-03 11:42",inst:1},
  {id:"IY-002",inv:"INV-2026-0410",customer:"Mert Arslan",card:"**** 5678",bank:"İş Bankası",amount:377.6,fee:6.04,net:371.56,status:"success",date:"2026-04-01 14:15",inst:1},
  {id:"IY-003",inv:"INV-2026-0408",customer:"Deniz Polat",card:"**** 9012",bank:"Yapı Kredi",amount:206.5,fee:3.3,net:203.2,status:"success",date:"2026-03-27 09:22",inst:1},
  {id:"IY-004",inv:"INV-2026-0407",customer:"Cem Tuncer",card:"**** 3456",bank:"Akbank",amount:2832,fee:45.31,net:2786.69,status:"success",date:"2026-03-25 16:50",inst:3},
  {id:"IY-005",inv:"INV-2026-0411",customer:"Zeynep Kaya",card:"**** 7890",bank:"Ziraat",amount:1416,fee:0,net:0,status:"failed",date:"2026-04-02 10:05",inst:1},
];
const AUTO = [
  {id:1,name:"Fatura Hatırlatma",trigger:"Vade − 3 gün",action:"E-posta gönder",status:"active",lastRun:"2026-04-04 09:00",runs:1247},
  {id:2,name:"Otomatik Askıya Alma",trigger:"7+ gün gecikme",action:"Plesk → askıya al",status:"active",lastRun:"2026-04-03 23:59",runs:89},
  {id:3,name:"Yenileme Faturası",trigger:"Bitiş − 30 gün",action:"Fatura oluştur",status:"active",lastRun:"2026-04-04 00:01",runs:3412},
  {id:4,name:"Plesk Provizyon",trigger:"Sipariş onayı",action:"Plesk API → hesap aç",status:"active",lastRun:"2026-04-03 14:22",runs:521},
  {id:5,name:"Domain Bildirimi",trigger:"Bitiş − 60 gün",action:"E-posta + SMS",status:"active",lastRun:"2026-04-03 08:00",runs:764},
  {id:6,name:"GİB e-Fatura",trigger:"Fatura oluştu",action:"GİB API → ilet",status:"active",lastRun:"2026-04-03 12:00",runs:2100},
  {id:7,name:"iyzico Retry",trigger:"Ödeme başarısız",action:"24 saat sonra dene",status:"paused",lastRun:"2026-04-02 10:05",runs:34},
];
const MONTHLY = [
  {m:"Eki",r:32400,e:12000},{m:"Kas",r:35800,e:13200},{m:"Ara",r:41200,e:14500},
  {m:"Oca",r:38600,e:13800},{m:"Şub",r:43100,e:15200},{m:"Mar",r:45900,e:15800},
  {m:"Nis",r:48320,e:16100},
];
const CATS = [
  {id:"hosting",label:"Web Hosting",icon:"○",color:G.accent,colorL:G.accentL},
  {id:"vps",label:"VPS Sunucular",icon:"△",color:G.purple,colorL:G.purpleL},
  {id:"dedicated",label:"Dedike Sunucu",icon:"□",color:G.amber,colorL:G.amberL},
  {id:"ssl",label:"SSL Sertifikası",icon:"◇",color:G.teal,colorL:G.tealL},
  {id:"domain",label:"Domain Tescili",icon:"◎",color:G.rose,colorL:G.roseL},
  {id:"email",label:"Kurumsal E-posta",icon:"▽",color:G.green,colorL:G.greenL},
];
const PROD_INIT = [
  {id:"p1",categoryId:"hosting",name:"Başlangıç Hosting",price:99,period:"ay",disk:"5 GB SSD",bw:"50 GB",sites:"1",email:"5",features:["Plesk Panel","Ücretsiz SSL","5 E-posta","Günlük Yedek"],badge:"",active:true,serverId:"srv1"},
  {id:"p2",categoryId:"hosting",name:"Business Hosting",price:199,period:"ay",disk:"20 GB SSD",bw:"200 GB",sites:"5",email:"20",features:["Plesk Panel","Ücretsiz SSL","20 E-posta","Staging Ortamı"],badge:"Popüler",active:true,serverId:"srv1"},
  {id:"p3",categoryId:"hosting",name:"WordPress Hosting",price:149,period:"ay",disk:"10 GB SSD",bw:"100 GB",sites:"3",email:"10",features:["WP Optimize","LiteSpeed Cache","Auto-Update","SSL"],badge:"",active:true,serverId:"srv3"},
  {id:"p4",categoryId:"vps",name:"VPS Starter",price:249,period:"ay",disk:"50 GB NVMe",bw:"1 TB",cpu:"2 vCPU",ram:"2 GB",features:["KVM","Plesk Panel","Root Erişim","Snapshot"],badge:"",active:true,serverId:"srv2"},
  {id:"p5",categoryId:"vps",name:"VPS Pro",price:499,period:"ay",disk:"100 GB NVMe",bw:"3 TB",cpu:"4 vCPU",ram:"4 GB",features:["KVM","Plesk Panel","DDoS Koruma","Root"],badge:"Popüler",active:true,serverId:"srv2"},
  {id:"p6",categoryId:"dedicated",name:"Dedike Starter",price:1490,period:"ay",disk:"1 TB HDD",bw:"10 TB",cpu:"Xeon E3",ram:"16 GB",features:["Tam Yönetim","Plesk","İzleme","Güvenlik"],badge:"",active:true,serverId:"srv2"},
  {id:"p7",categoryId:"ssl",name:"Standart SSL",price:99,period:"yıl",warranty:"10.000 $",features:["Domain Doğrulama","256-bit","Site Mühürü"],badge:"",active:true,serverId:""},
  {id:"p8",categoryId:"ssl",name:"Wildcard SSL",price:299,period:"yıl",warranty:"50.000 $",features:["Tüm Alt Domainler","OV","Mühür"],badge:"Popüler",active:true,serverId:""},
  {id:"p9",categoryId:"domain",name:".com.tr Domain",price:199,period:"yıl",features:["Whois Gizliliği","DNS Yönetimi","Oto-Yenile"],badge:"Popüler",active:true,serverId:""},
  {id:"p10",categoryId:"email",name:"Microsoft 365",price:149,period:"ay/kull.",features:["50 GB Exchange","Teams","OneDrive 1TB","Office"],badge:"",active:true,serverId:""},
];

// Her ürün için benzersiz URL: /urunler/{kategori-slug}/{urun-slug}
// Aynı ada sahip farklı kategorideki ürünler artık farklı linklere sahip olur.
// Örn: SSL → /urunler/ssl-sertifikasi/standart-ssl
//      VPS → /urunler/vps-sunucular/vps-starter
const productLink = (p) => {
  const cat = CATS.find(c => c.id === p.categoryId);
  const catSlug = cat ? slug(cat.label) : p.categoryId;
  const prodSlug = p.slug || slug(p.name);
  return `/urunler/${catSlug}/${prodSlug}`;
};

// ── GLOBAL CONTRACTS STATE ─────────────────────────────────────────────────────
let _contracts = [
  {
    id:"membership",
    title:"Üyelik Sözleşmesi",
    shortTitle:"Üyelik Sözleşmesi'ni",
    icon:"📋",
    required:true,
    active:true,
    showOn:["register"],
    content:`ÜYELİK SÖZLEŞMESİ\n\nSon Güncelleme: 01.01.2026\n\n1. TARAFLAR\nBu sözleşme, HostPanel Pro (bundan böyle "Şirket" olarak anılacaktır) ile üyelik kaydı yapan gerçek veya tüzel kişi (bundan böyle "Kullanıcı" olarak anılacaktır) arasında akdedilmektedir.\n\n2. SÖZLEŞMENİN KONUSU\nİşbu sözleşme, Kullanıcının HostPanel Pro platformuna üye olması ve platform üzerinden sunulan hizmetlerin kullanımına ilişkin koşul ve şartları düzenlemektedir.\n\n3. ÜYELİK KOŞULLARI\n3.1 Üye olabilmek için 18 yaşını doldurmuş olmak gerekmektedir.\n3.2 Kullanıcı, kayıt sırasında gerçek ve doğru bilgi vermekle yükümlüdür.\n3.3 Hesap güvenliğinden Kullanıcı sorumludur.\n\n4. HİZMETLER\nŞirket, web hosting, domain tescili, SSL sertifikası ve ilgili dijital hizmetleri sunar. Hizmet kapsamı, fiyatlandırma ve özellikleri önceden haber vermeksizin değiştirme hakkını saklı tutar.\n\n5. ÖDEME KOŞULLARI\nHizmet bedelleri peşin olarak tahsil edilir. Ödemelerin zamanında yapılmaması durumunda hizmetler askıya alınabilir.\n\n6. GİZLİLİK\nKullanıcı bilgileri KVKK ve ilgili mevzuat çerçevesinde işlenir ve korunur.\n\n7. SÖZLEŞME DEĞİŞİKLİKLERİ\nŞirket, bu sözleşmeyi istediği zaman güncelleyebilir. Güncellemeler platform üzerinden duyurulur.\n\n8. UYGULANACAK HUKUK\nBu sözleşme Türk Hukuku'na tabidir. Uyuşmazlıklarda İstanbul Mahkemeleri yetkilidir.`,
  },
  {
    id:"kvkk",
    title:"KVKK Aydınlatma Metni",
    shortTitle:"KVKK Aydınlatma Metni'ni",
    icon:"🔒",
    required:true,
    active:true,
    showOn:["register"],
    content:`KİŞİSEL VERİLERİN KORUNMASI KANUNU (KVKK) AYDINLATMA METNİ\n\nSon Güncelleme: 01.01.2026\n\nVeri Sorumlusu: HostPanel Pro Ltd. Şti.\n\n1. İŞLENEN KİŞİSEL VERİLER\n• Kimlik Bilgileri: Ad, soyad, T.C. kimlik numarası, vergi numarası\n• İletişim Bilgileri: E-posta adresi, telefon numarası, adres\n• Finansal Bilgiler: Ödeme bilgileri, fatura detayları\n• Teknik Veriler: IP adresi, kullanıcı adı, oturum bilgileri\n\n2. KİŞİSEL VERİLERİN İŞLENME AMACI\n• Hizmet sunumu ve sözleşme yükümlülüklerinin yerine getirilmesi\n• Yasal yükümlülüklerin yerine getirilmesi (e-Fatura, GİB)\n• Müşteri ilişkileri yönetimi ve destek hizmetleri\n• Güvenlik ve doğrulama işlemleri\n\n3. KİŞİSEL VERİLERİN AKTARILMASI\nKişisel verileriniz; ödeme kuruluşları (iyzico), domain registrar firmaları ve yasal zorunluluklar kapsamında ilgili kamu kurumları ile paylaşılabilir.\n\n4. KİŞİSEL VERİLERİN SAKLANMA SÜRESİ\nVeriler, hizmet ilişkisi süresince ve ilgili mevzuatta öngörülen süre boyunca saklanır.\n\n5. HAKLARINIZ (KVKK Md. 11)\n• Kişisel verilerinizin işlenip işlenmediğini öğrenme\n• Verilerinize erişim ve düzeltme talep etme\n• Silme veya yok etme talep etme\n• İşlemeye itiraz etme\n• Veri taşınabilirliği\n\nBaşvurularınız için: kvkk@hostpanel.com`,
  },
  {
    id:"purchase",
    title:"Satın Alma ve Mesafeli Satış Sözleşmesi",
    shortTitle:"Satın Alma Sözleşmesi'ni",
    icon:"🛒",
    required:true,
    active:true,
    showOn:["purchase"],
    content:`MESAFELİ SATIŞ SÖZLEŞMESİ\n\nSon Güncelleme: 01.01.2026\n\n1. TARAFLAR\nSatıcı: HostPanel Pro Ltd. Şti.\nAlıcı: Satın alma işlemini gerçekleştiren kişi veya kurum\n\n2. KONU\nBu sözleşme, Alıcının HostPanel Pro platformu üzerinden satın aldığı dijital hizmetlere (web hosting, domain, SSL sertifikası vb.) ilişkin koşulları kapsar.\n\n3. HİZMET BİLGİLERİ\nSatın alınan hizmetin detayları, bedeli ve süresi sipariş ekranında açıkça belirtilmektedir.\n\n4. ÖDEME KOŞULLARI\n4.1 Ödemeler, iyzico güvenli ödeme altyapısı üzerinden 3D Secure ile gerçekleştirilir.\n4.2 Fatura, ödeme onayının ardından otomatik olarak oluşturulur ve e-posta ile iletilir.\n4.3 Kurumsal müşteriler için e-Fatura, GİB sistemine entegre olarak kesilir.\n\n5. TESLİMAT VE AKTİVASYON\n5.1 Dijital hizmetler ödeme onayının ardından otomatik olarak aktive edilir.\n5.2 Domain tescilleri 24-48 saat içinde tamamlanır.\n5.3 SSL sertifikaları DV için dakikalar, OV/EV için 1-7 iş günü içinde aktive edilir.\n\n6. CAYMA HAKKI\nDijital hizmetlerin niteliği gereği, aktivasyon sonrasında cayma hakkı kullanılamaz. Ancak hizmet başlamadan önce 14 gün içinde cayma hakkı kullanılabilir.\n\n7. GARANTİ VE SERVİS\n%99.9 uptime garantisi sunulmaktadır. Teknik arızalar en kısa sürede giderilir.\n\n8. UYUŞMAZLIK ÇÖZÜMÜ\nUyuşmazlıklarda öncelikle destek kanalları aracılığıyla çözüm aranır. Tüketici uyuşmazlıklarında Tüketici Hakem Heyetleri yetkilidir.`,
  },
];
let _contractListeners = [];
const setContracts = fn => { _contracts = typeof fn==="function"?fn(_contracts):fn; _contractListeners.forEach(cb=>cb(_contracts)); };
const useContracts = () => {
  const [c, setL] = useState(_contracts);
  useEffect(()=>{ _contractListeners.push(setL); return ()=>{ _contractListeners=_contractListeners.filter(x=>x!==setL); }; },[]);
  return [c, setContracts];
};

// ── GLOBAL BILLING INFO STATE ─────────────────────────────────────────────────────
let _billing = {
  type: "bireysel",
  name: "", email: "", phone: "", address: "", city: "", country: "Türkiye",
  company: "", taxNo: "", taxOffice: "", phone2: "",
};
let _billingListeners = [];
const setBillingGlobal = (fn) => {
  _billing = typeof fn === "function" ? fn(_billing) : fn;
  _billingListeners.forEach(cb => cb(_billing));
};
const useBilling = () => {
  const [billing, setLocal] = useState(_billing);
  useEffect(() => {
    _billingListeners.push(setLocal);
    return () => { _billingListeners = _billingListeners.filter(x => x !== setLocal); };
  }, []);
  return [billing, setBillingGlobal];
};

/* ═══════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════ */
const SMAP = {
  active:{bg:"#DAFBE1",c:"#1A7F37",dot:true},paid:{bg:"#DAFBE1",c:"#1A7F37",dot:true},
  delivered:{bg:"#DAFBE1",c:"#1A7F37",dot:true},success:{bg:"#DAFBE1",c:"#1A7F37",dot:true},
  replied:{bg:"#DDF4FF",c:"#0969A2",dot:true},
  open:{bg:"#DDF4FF",c:"#0969DA",dot:true},
  pending:{bg:"#FFF8C5",c:"#9A6700",dot:true},paused:{bg:"#FFF8C5",c:"#9A6700",dot:true},
  suspended:{bg:"#FFEBE9",c:"#CF222E",dot:true},overdue:{bg:"#FFEBE9",c:"#CF222E",dot:true},
  failed:{bg:"#FFEBE9",c:"#CF222E",dot:true},expired:{bg:"#FFEBE9",c:"#CF222E",dot:true},
  inactive:{bg:"#F6F8FA",c:"#57606A",dot:false},closed:{bg:"#F6F8FA",c:"#57606A",dot:false},
  critical:{bg:"#FFEBE9",c:"#CF222E",dot:true},
  high:{bg:"#FFF1E5",c:"#BC4C00",dot:true},
  medium:{bg:"#FFF8C5",c:"#9A6700",dot:true},
  normal:{bg:"#DDF4FF",c:"#0969DA",dot:false},
  low:{bg:"#F6F8FA",c:"#57606A",dot:false},
};
const SL = {active:"Aktif",paid:"Ödendi",delivered:"İletildi",success:"Başarılı",replied:"Yanıtlandı",open:"Açık",pending:"Bekliyor",paused:"Duraklatıldı",suspended:"Askıda",overdue:"Gecikmiş",failed:"Başarısız",expired:"Süresi Dolmuş",inactive:"Pasif",closed:"Kapalı",critical:"Kritik",high:"Yüksek",medium:"Orta",normal:"Normal",low:"Düşük"};
const Chip = ({s,style}) => {
  const d = SMAP[s]||SMAP.inactive;
  return <span style={{display:"inline-flex",alignItems:"center",gap:4,background:d.bg,color:d.c,fontSize:11,fontWeight:600,padding:"2px 8px",borderRadius:20,whiteSpace:"nowrap",letterSpacing:"0.1px",...style}}>
    {d.dot&&<span style={{width:5,height:5,borderRadius:"50%",background:d.c,flexShrink:0}}/>}{SL[s]||s}
  </span>;
};

/* ═══════════════════════════════════════════════════════════
   ATOMS — Modern GitHub/Linear inspired UI
═══════════════════════════════════════════════════════════ */
const Card = ({children,style}) => <div style={{background:G.surface,border:`1px solid ${G.border}`,borderRadius:12,boxShadow:"0 1px 3px rgba(0,0,0,.04)",...style}}>{children}</div>;

const Pill = ({children,active,onClick,color}) => (
  <button onClick={onClick} style={{
    padding:"4px 12px",borderRadius:20,fontSize:12,fontWeight:500,cursor:"pointer",
    border:`1px solid ${active?(color||G.accent):G.border}`,
    background:active?(color?color+"18":G.accentL):"transparent",
    color:active?(color||G.accent):G.ink2,
    transition:"all .15s",lineHeight:"20px",
  }}>
    {children}
  </button>
);

const Btn = ({children,onClick,variant="outline",size="md",style,disabled}) => {
  const sz={
    sm:{padding:"4px 10px",fontSize:12,height:28},
    md:{padding:"6px 14px",fontSize:13,height:32},
    lg:{padding:"9px 20px",fontSize:14,height:40},
  }[size];
  const vars={
    primary:{background:G.ink0,color:"#fff",border:`1px solid ${G.ink0}`,boxShadow:"0 1px 2px rgba(0,0,0,.1)"},
    accent: {background:G.accent,color:"#fff",border:`1px solid ${G.accent}`,boxShadow:"0 1px 2px rgba(9,105,218,.2)"},
    danger: {background:G.redL,color:G.red,border:`1px solid #FFCECB`},
    outline:{background:G.surface,color:G.ink1,border:`1px solid ${G.border}`,boxShadow:"0 1px 2px rgba(0,0,0,.04)"},
    ghost:  {background:"transparent",color:G.ink2,border:"1px solid transparent"},
    teal:   {background:G.tealL,color:G.teal,border:`1px solid ${G.teal}30`},
  };
  return <button onClick={onClick} disabled={disabled} style={{
    display:"inline-flex",alignItems:"center",gap:5,
    fontFamily:"inherit",cursor:disabled?"not-allowed":"pointer",
    borderRadius:8,fontWeight:500,transition:"all .15s",
    opacity:disabled?0.5:1,
    ...sz,...(vars[variant]||vars.outline),...style,
  }}>{children}</button>;
};

const TH = ({ch}) => <th style={{
  padding:"8px 12px",textAlign:"left",fontSize:11,fontWeight:600,
  color:G.ink2,letterSpacing:"0.4px",
  borderBottom:`1px solid ${G.border}`,
  background:"#F6F8FA",whiteSpace:"nowrap",
}}>{ch}</th>;

const TD = ({children,s}) => <td style={{
  padding:"10px 12px",fontSize:13,color:G.ink1,
  borderBottom:`1px solid ${G.border}`,verticalAlign:"middle",...s,
}}>{children}</td>;

const Inp = p => <input {...p} style={{
  width:"100%",padding:"7px 11px",fontSize:13,lineHeight:"20px",
  border:`1px solid ${G.border}`,borderRadius:6,
  background:G.surface,color:G.ink0,
  boxSizing:"border-box",outline:"none",fontFamily:"inherit",
  transition:"border-color .15s, box-shadow .15s",
  ...p.style,
}} onFocus={e=>{e.target.style.borderColor=G.accent;e.target.style.boxShadow=`0 0 0 3px ${G.accent}18`;}} onBlur={e=>{e.target.style.borderColor=G.border;e.target.style.boxShadow="none";}}/>;

const Sel = ({children,...p}) => <select {...p} style={{
  width:"100%",padding:"7px 11px",fontSize:13,lineHeight:"20px",
  border:`1px solid ${G.border}`,borderRadius:6,
  background:G.surface,color:G.ink0,fontFamily:"inherit",
  outline:"none",cursor:"pointer",
  transition:"border-color .15s",
  ...p.style,
}}>{children}</select>;

const Txtarea = p => <textarea {...p} style={{
  width:"100%",padding:"7px 11px",fontSize:13,lineHeight:"1.6",
  border:`1px solid ${G.border}`,borderRadius:6,
  background:G.surface,color:G.ink0,
  resize:"vertical",fontFamily:"inherit",
  boxSizing:"border-box",outline:"none",
  transition:"border-color .15s, box-shadow .15s",
  ...p.style,
}} onFocus={e=>{e.target.style.borderColor=G.accent;e.target.style.boxShadow=`0 0 0 3px ${G.accent}18`;}} onBlur={e=>{e.target.style.borderColor=G.border;e.target.style.boxShadow="none";}}/>;

const Fld = ({label,children}) => <div style={{marginBottom:14}}>
  <label style={{display:"block",fontSize:12,fontWeight:500,color:G.ink1,marginBottom:5,letterSpacing:"0.1px"}}>{label}</label>
  {children}
</div>;

const Av = ({name,size=30}) => {
  const cs=[[G.accent,G.accentL],[G.purple,G.purpleL],[G.amber,G.amberL],[G.teal,G.tealL],[G.rose,G.roseL],[G.green,G.greenL]];
  const [c,bg]=cs[name.charCodeAt(0)%cs.length];
  return <div style={{width:size,height:size,minWidth:size,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:size*.36,fontWeight:700,background:bg,color:c}}>{init(name)}</div>;
};

const ST = ({children,style}) => <div style={{fontSize:14,fontWeight:600,color:G.ink0,letterSpacing:"-0.1px",marginBottom:14,...style}}>{children}</div>;

const Notice = ({children,type="info",style}) => {
  const t={
    info:   {bg:"#EFF6FF",c:"#1D4ED8",border:"#BFDBFE"},
    warn:   {bg:"#FFFBEB",c:"#92400E",border:"#FDE68A"},
    success:{bg:"#ECFDF5",c:"#065F46",border:"#A7F3D0"},
  }[type]||{bg:G.accentL,c:G.accent,border:G.border};
  return <div style={{background:t.bg,border:`1px solid ${t.border}`,borderRadius:8,padding:"10px 14px",fontSize:13,color:t.c,marginBottom:14,...style}}>{children}</div>;
};

function Modal({title,onClose,children,width=520}) {
  const {mob}=useR();
  return (
    <div style={{position:"fixed",inset:0,zIndex:9999,display:"flex",alignItems:mob?"flex-end":"center",justifyContent:"center"}} onClick={e=>{if(e.target===e.currentTarget)onClose();}}>
      <div style={{position:"absolute",inset:0,background:"rgba(1,4,9,.45)",backdropFilter:"blur(4px)"}}/>
      <div style={{
        position:"relative",background:G.surface,border:`1px solid ${G.border}`,
        borderRadius:mob?"20px 20px 0 0":16,
        width:mob?"100%":"94%",maxWidth:mob?"100%":width,
        maxHeight:mob?"92vh":"90vh",overflowY:"auto",
        padding:mob?"20px 16px 32px":"24px 28px",
        boxShadow:"0 16px 48px rgba(1,4,9,.2)",
      }}>
        {mob&&<div style={{width:40,height:4,borderRadius:2,background:G.border2,margin:"0 auto 16px",display:"block"}}/>}
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:20}}>
          <div style={{fontSize:15,fontWeight:600,color:G.ink0,letterSpacing:"-0.2px",flex:1,paddingRight:8}}>{title}</div>
          <button onClick={onClose} style={{background:"transparent",border:`1px solid ${G.border}`,color:G.ink2,cursor:"pointer",width:32,height:32,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",fontSize:13,flexShrink:0}}>✕</button>
        </div>
        {children}
      </div>
    </div>
  );
}

const DL = ({rows}) => rows.map(([l,v],i)=>(
  <div key={i} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"8px 0",borderBottom:`1px solid ${G.border}`,fontSize:13}}>
    <span style={{color:G.ink2,fontSize:12}}>{l}</span>
    <span style={{fontWeight:500,color:G.ink0}}>{v}</span>
  </div>
));

function InvoiceModal({inv,onClose}) {
  return (
    <Modal title={inv.id} onClose={onClose} width={460}>
      <DL rows={[["Müşteri",inv.customer],["Hizmet",inv.service],["Tutar (KDV hariç)",fmt(inv.amount)],["KDV (%18)",fmt(inv.tax)],["Toplam",fmt(inv.total)],["Fatura Tarihi",inv.date],["Vade Tarihi",inv.due],["GİB e-Fatura",inv.efatura?"Gönderildi":"—"]]}/>
      <div style={{display:"flex",justifyContent:"space-between",padding:"10px 0",marginBottom:20}}>
        <span style={{fontSize:12,color:G.ink2}}>Durum</span><Chip s={inv.status}/>
      </div>
      <div style={{display:"flex",gap:8}}>
        <Btn size="sm">📄 PDF</Btn>
        {inv.efatura&&<Btn size="sm">📋 XML</Btn>}
        <Btn size="sm" onClick={onClose} style={{marginLeft:"auto"}}>Kapat</Btn>
      </div>
    </Modal>
  );
}

function Tbl({heads,children}) {
  return (
    <div style={{overflowX:"auto",WebkitOverflowScrolling:"touch",borderRadius:10,border:`1px solid ${G.border}`,background:G.surface}}>
      <table style={{width:"100%",borderCollapse:"collapse",minWidth:heads.length>4?560:320}}>
        <thead><tr>{heads.map(h=><TH key={h} ch={h}/>)}</tr></thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
}

function hov(el,in_,out_) {
  el.onmouseenter=()=>Object.assign(el.style,in_);
  el.onmouseleave=()=>Object.assign(el.style,out_);
}

/* ═══════════════════════════════════════════════════════════
   METRIC CARD
═══════════════════════════════════════════════════════════ */
const Metric = ({label,value,sub,accent,icon,onClick}) => (
  <div onClick={onClick} style={{background:G.surface,border:`1px solid ${G.border}`,borderRadius:12,padding:"16px 18px",boxShadow:"0 1px 3px rgba(0,0,0,.04)",cursor:onClick?"pointer":"default",transition:"all .15s"}}
    onMouseEnter={e=>{if(onClick){e.currentTarget.style.borderColor=G.accent;e.currentTarget.style.boxShadow=`0 2px 8px ${G.accent}18`;}}}
    onMouseLeave={e=>{if(onClick){e.currentTarget.style.borderColor=G.border;e.currentTarget.style.boxShadow="0 1px 3px rgba(0,0,0,.04)";}}}>
    <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:8}}>
      <div style={{fontSize:12,fontWeight:500,color:G.ink2,letterSpacing:"0.1px"}}>{label}</div>
      {icon&&<span style={{fontSize:15,opacity:.7}}>{icon}</span>}
    </div>
    <div style={{fontSize:24,fontWeight:700,color:accent||G.ink0,letterSpacing:"-0.5px",fontVariantNumeric:"tabular-nums"}}>{value}</div>
    {sub&&<div style={{fontSize:11,marginTop:4,color:G.ink2,fontWeight:400}}>{sub}</div>}
    {onClick&&<div style={{fontSize:11,color:G.accent,marginTop:6,fontWeight:500}}>Görüntüle →</div>}
  </div>
);

/* ═══════════════════════════════════════════════════════════
   PRODUCT MANAGER
═══════════════════════════════════════════════════════════ */
function ProductManager({onPreview}) {
  const [prods,setProds] = useState(PROD_INIT);
  const [servers] = useServers();
  const [catF,setCatF] = useState("all");
  const [modal,setModal] = useState(null);
  const [confirmDel,setConfirmDel] = useState(null);
  const [viewP,setViewP] = useState(null);

  const emptyForm={categoryId:"hosting",name:"",price:"",period:"ay",disk:"",diskVal:"",diskUnit:"GB SSD",bw:"",bwVal:"",bwUnit:"GB",cpu:"",cpuVal:"",ram:"",ramVal:"",ramUnit:"GB",sites:"",email:"",warranty:"",features:"",badge:"",active:true,serverId:""};

  // Mevcut bir ürünü düzenlerken disk/bw/cpu/ram alanlarını sayı+birime ayır
  const parseToForm = (p) => {
    const splitNum = (str="",defaultUnit="GB") => {
      const m = String(str).match(/^(\d+(?:\.\d+)?)\s*(.*)?$/);
      return m ? {val:m[1], unit:(m[2]||defaultUnit).trim()||defaultUnit} : {val:"",unit:defaultUnit};
    };
    const d = splitNum(p.disk,"GB SSD");
    const b = splitNum(p.bw,"GB");
    const c = splitNum(p.cpu,"vCPU");
    const r = splitNum(p.ram,"GB");
    return {
      ...p,
      features: (Array.isArray(p.features)?p.features:[]).join("\n"),
      diskVal: d.val, diskUnit: d.unit,
      bwVal: p.bw==="Sınırsız"?"":b.val, bwUnit: p.bw==="Sınırsız"?"Sınırsız":b.unit,
      cpuVal: c.val,
      ramVal: r.val, ramUnit: r.unit,
    };
  };
  const [form,setForm] = useState(emptyForm);

  const filtered = catF==="all" ? prods : prods.filter(p=>p.categoryId===catF);

  const save = () => {
    const feats = typeof form.features==="string" ? form.features.split("\n").map(f=>f.trim()).filter(Boolean) : form.features;
    const prodSlug = slug(form.name);
    const newProd = {...form, features:feats, slug:prodSlug, price:Number(form.price)};
    if(modal==="add") setProds(prev=>[...prev,{...newProd,id:"p"+uid()}]);
    else setProds(prev=>prev.map(p=>p.id===modal.id?{...newProd,id:p.id}:p));
    setModal(null);
  };

  if(viewP) {
    const cat=CATS.find(c=>c.id===viewP.categoryId);
    const s=productLink(viewP);
    const srv=servers.find(x=>x.id===viewP.serverId);
    const isCp=srv?.type==="cpanel";
    return (
      <div>
        <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:18}}>
          <Btn size="sm" variant="ghost" onClick={()=>setViewP(null)}>← Geri</Btn>
          <span style={{color:G.ink3}}>›</span><span style={{color:G.ink2,fontSize:13}}>{cat?.label}</span>
          <span style={{color:G.ink3}}>›</span><span style={{fontSize:13,fontWeight:700,color:G.ink0}}>{viewP.name}</span>
        </div>
        <Card style={{padding:24,marginBottom:14}}>
          <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:12}}>
            <span style={{fontSize:18,background:cat?.colorL,width:36,height:36,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:8}}>{cat?.icon}</span>
            <span style={{fontSize:12,fontWeight:600,color:cat?.color,background:cat?.colorL,padding:"2px 10px",borderRadius:6}}>{cat?.label}</span>
            {viewP.badge&&<span style={{fontSize:11,fontWeight:700,color:"#fff",background:cat?.color,padding:"2px 10px",borderRadius:6}}>{viewP.badge}</span>}
            {srv && (
              <span style={{background:isCp?G.greenL:G.tealL,color:isCp?G.green:G.teal,fontSize:11,fontWeight:600,padding:"2px 10px",borderRadius:6,display:"flex",alignItems:"center",gap:4}}>
                {isCp?"⬢":"⬡"} {srv.name}
              </span>
            )}
            <span style={{marginLeft:"auto"}}><Chip s={viewP.active?"active":"inactive"}/></span>
          </div>
          <div style={{fontSize:24,fontWeight:800,color:G.ink0,marginBottom:6,letterSpacing:"-0.5px"}}>{viewP.name}</div>
          <div style={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2,background:G.canvas,padding:"5px 10px",borderRadius:6,display:"inline-block",marginBottom:16}}>
            hostpanel.com{s}
          </div>
          <div style={{fontSize:28,fontWeight:900,color:cat?.color,marginBottom:16}}>
            {fmt(Number(viewP.price))}<span style={{fontSize:13,color:G.ink2,fontWeight:400}}>/{viewP.period}</span>
          </div>
          {/* Sunucu detay satırı */}
          {srv && (
            <div style={{background:isCp?G.greenL:G.tealL,border:`1px solid ${isCp?G.green:G.teal}30`,borderRadius:8,padding:"10px 14px",marginBottom:16,fontSize:12}}>
              <div style={{fontWeight:700,color:isCp?G.green:G.teal,marginBottom:4}}>
                {isCp?"⬢ cPanel/WHM":"⬡ Plesk"} — {srv.name}
              </div>
              <div style={{color:G.ink2,display:"flex",gap:16,flexWrap:"wrap"}}>
                <span>IP: <strong style={{fontFamily:"'Courier New',monospace",color:G.ink0}}>{srv.ip}</strong></span>
                <span>Konum: <strong style={{color:G.ink0}}>{srv.location}</strong></span>
                <span>Versiyon: <strong style={{color:G.ink0}}>{srv.version}</strong></span>
                <span>URL: <strong style={{fontFamily:"'Courier New',monospace",color:G.ink0}}>{srv.url}</strong></span>
              </div>
            </div>
          )}
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(140px,1fr))",gap:8,marginBottom:16}}>
            {[["Disk",viewP.disk],["Trafik",viewP.bw],["CPU",viewP.cpu],["RAM",viewP.ram],["Site",viewP.sites],["E-posta",viewP.email],["Garanti",viewP.warranty]].filter(([,v])=>v).map(([l,v])=>(
              <div key={l} style={{background:G.canvas,borderRadius:8,padding:"8px 12px"}}>
                <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:2}}>{l}</div>
                <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14}}>
            <div style={{fontSize:11,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:8}}>Dahil Olanlar</div>
            {(Array.isArray(viewP.features)?viewP.features:[]).map((f,i)=>(
              <div key={i} style={{display:"flex",alignItems:"center",gap:8,fontSize:13,color:G.ink1,marginBottom:6}}>
                <span style={{color:cat?.color,fontWeight:700}}>+</span>{f}
              </div>
            ))}
          </div>
        </Card>
        <div style={{display:"flex",gap:8}}>
          <Btn size="sm" variant="outline" onClick={()=>{setForm(parseToForm(viewP));setModal(viewP);setViewP(null);}}>Düzenle</Btn>
          <Btn size="sm" variant="danger" onClick={()=>{setConfirmDel(viewP.id);setViewP(null);}}>Sil</Btn>
        </div>
      </div>
    );
  }

  return (
    <div>
      {confirmDel&&(
        <Modal title="Ürünü Sil" onClose={()=>setConfirmDel(null)} width={380}>
          <p style={{color:G.ink1,fontSize:14,marginBottom:20}}>Bu ürünü silmek istediğinizden emin misiniz?</p>
          <div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
            <Btn size="sm" onClick={()=>setConfirmDel(null)}>İptal</Btn>
            <Btn size="sm" variant="danger" onClick={()=>{setProds(p=>p.filter(x=>x.id!==confirmDel));setConfirmDel(null);}}>Sil</Btn>
          </div>
        </Modal>
      )}
      {modal&&(
        <Modal title={modal==="add"?"Yeni Ürün":`Düzenle: ${modal.name||""}`} onClose={()=>setModal(null)} width={600}>
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <Fld label="Kategori"><Sel value={form.categoryId} onChange={e=>setForm({...form,categoryId:e.target.value})}>{CATS.map(c=><option key={c.id} value={c.id}>{c.icon} {c.label}</option>)}</Sel></Fld>
            <Fld label="Ürün Adı *"><Inp value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder=""/></Fld>

            {/* Fiyat — sadece sayı */}
            <Fld label="Fiyat (₺) *">
              <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
                <span style={{padding:"0 10px",fontSize:14,color:G.ink2,fontWeight:600,borderRight:`1px solid ${G.border}`,height:"100%",display:"flex",alignItems:"center",background:G.canvas}}>₺</span>
                <input
                  type="number" min="0" step="1"
                  value={form.price}
                  onChange={e=>setForm({...form,price:e.target.value.replace(/[^0-9]/g,"")})}
                  placeholder="199"
                  style={{flex:1,padding:"8px 10px",fontSize:13,border:"none",outline:"none",background:"transparent",color:G.ink0,fontFamily:"inherit"}}
                />
              </div>
            </Fld>

            <Fld label="Dönem"><Sel value={form.period} onChange={e=>setForm({...form,period:e.target.value})}>
              {["ay","yıl","ay/kullanıcı","tek seferlik"].map(p=><option key={p}>{p}</option>)}</Sel></Fld>

            {/* Disk — sayı + birim */}
            <Fld label="Disk Kapasitesi">
              <div style={{display:"flex",gap:6}}>
                <input
                  type="number" min="0" step="1"
                  value={form.diskVal||""}
                  onChange={e=>{
                    const v=e.target.value.replace(/[^0-9]/g,"");
                    const unit=form.diskUnit||"GB SSD";
                    setForm({...form,diskVal:v,disk:v?`${v} ${unit}`:""});
                  }}
                  placeholder="20"
                  style={{flex:1,padding:"8px 10px",fontSize:13,border:`1px solid ${G.border2}`,borderRadius:8,outline:"none",background:G.raised,color:G.ink0,fontFamily:"inherit"}}
                />
                <Sel value={form.diskUnit||"GB SSD"} onChange={e=>{
                  const unit=e.target.value;
                  setForm({...form,diskUnit:unit,disk:form.diskVal?`${form.diskVal} ${unit}`:""});
                }} style={{width:"auto",minWidth:90,padding:"8px 6px"}}>
                  {["GB SSD","GB NVMe","GB HDD","TB SSD","TB HDD","TB NVMe"].map(u=><option key={u}>{u}</option>)}
                </Sel>
              </div>
            </Fld>

            {/* Bant Genişliği — sayı + birim */}
            <Fld label="Bant Genişliği">
              <div style={{display:"flex",gap:6}}>
                <input
                  type="number" min="0" step="1"
                  value={form.bwVal||""}
                  onChange={e=>{
                    const v=e.target.value.replace(/[^0-9]/g,"");
                    const unit=form.bwUnit||"GB";
                    setForm({...form,bwVal:v,bw:v?`${v} ${unit}`:""});
                  }}
                  placeholder="200"
                  style={{flex:1,padding:"8px 10px",fontSize:13,border:`1px solid ${G.border2}`,borderRadius:8,outline:"none",background:G.raised,color:G.ink0,fontFamily:"inherit"}}
                />
                <Sel value={form.bwUnit||"GB"} onChange={e=>{
                  const unit=e.target.value;
                  setForm({...form,bwUnit:unit,bw:form.bwVal?`${form.bwVal} ${unit}`:(unit==="Sınırsız"?"Sınırsız":"")});
                }} style={{width:"auto",minWidth:100,padding:"8px 6px"}}>
                  {["GB","TB","Sınırsız"].map(u=><option key={u}>{u}</option>)}
                </Sel>
              </div>
            </Fld>

            {/* CPU — sadece sayı + sabit etiket */}
            <Fld label="CPU (VPS/Dedike)">
              <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
                <input
                  type="number" min="0" step="1"
                  value={form.cpuVal||""}
                  onChange={e=>{
                    const v=e.target.value.replace(/[^0-9]/g,"");
                    setForm({...form,cpuVal:v,cpu:v?`${v} vCPU`:""});
                  }}
                  placeholder="4"
                  style={{flex:1,padding:"8px 10px",fontSize:13,border:"none",outline:"none",background:"transparent",color:G.ink0,fontFamily:"inherit"}}
                />
                <span style={{padding:"0 10px",fontSize:12,color:G.ink2,fontWeight:600,borderLeft:`1px solid ${G.border}`,height:"100%",display:"flex",alignItems:"center",background:G.canvas,whiteSpace:"nowrap"}}>vCPU</span>
              </div>
            </Fld>

            {/* RAM — sayı + birim */}
            <Fld label="RAM (VPS/Dedike)">
              <div style={{display:"flex",gap:6}}>
                <input
                  type="number" min="0" step="1"
                  value={form.ramVal||""}
                  onChange={e=>{
                    const v=e.target.value.replace(/[^0-9]/g,"");
                    const unit=form.ramUnit||"GB";
                    setForm({...form,ramVal:v,ram:v?`${v} ${unit}`:""});
                  }}
                  placeholder="4"
                  style={{flex:1,padding:"8px 10px",fontSize:13,border:`1px solid ${G.border2}`,borderRadius:8,outline:"none",background:G.raised,color:G.ink0,fontFamily:"inherit"}}
                />
                <Sel value={form.ramUnit||"GB"} onChange={e=>{
                  const unit=e.target.value;
                  setForm({...form,ramUnit:unit,ram:form.ramVal?`${form.ramVal} ${unit}`:""});
                }} style={{width:"auto",minWidth:70,padding:"8px 6px"}}>
                  {["GB","TB","MB"].map(u=><option key={u}>{u}</option>)}
                </Sel>
              </div>
            </Fld>

            <Fld label="Rozet"><Inp value={form.badge||""} onChange={e=>setForm({...form,badge:e.target.value})} placeholder=""/></Fld>
            <Fld label="Durum"><Sel value={form.active?"1":"0"} onChange={e=>setForm({...form,active:e.target.value==="1"})}>
              <option value="1">Aktif</option><option value="0">Pasif</option></Sel></Fld>
          </div>

          {/* ── Sunucu / Panel Seçimi ── */}
          <Fld label="Sunucu / Kontrol Paneli">
            <Sel value={form.serverId||""} onChange={e=>setForm({...form,serverId:e.target.value})}>
              <option value="">— Sunucu gerekmez (Domain, SSL, E-posta vb.) —</option>
              {servers.filter(s=>s.status!=="inactive").map(s=>(
                <option key={s.id} value={s.id}>
                  {s.type==="cpanel"?"⬢":"⬡"} {s.name}  ·  {s.type==="cpanel"?"cPanel/WHM":"Plesk"}  ·  {s.location}  ·  {s.ip}
                </option>
              ))}
            </Sel>
            {form.serverId && (()=>{
              const srv = servers.find(s=>s.id===form.serverId);
              if(!srv) return null;
              const isCp = srv.type==="cpanel";
              return (
                <div style={{marginTop:6,padding:"7px 10px",background:isCp?G.greenL:G.tealL,borderRadius:7,fontSize:11,color:isCp?G.green:G.teal,fontWeight:600,display:"flex",alignItems:"center",gap:6}}>
                  {isCp?"⬢ cPanel/WHM":"⬡ Plesk"} · {srv.version} · {srv.url}
                </div>
              );
            })()}
          </Fld>
          <Fld label="Özellikler (her satır bir özellik)">
            <Txtarea value={typeof form.features==="string"?form.features:(form.features||[]).join("\n")} onChange={e=>setForm({...form,features:e.target.value})} placeholder={"Ücretsiz SSL\nPlesk Panel\nGünlük Yedek"} style={{minHeight:90}}/>
          </Fld>
          {form.name&&(
            <div style={{background:G.canvas,borderRadius:8,padding:"7px 12px",marginBottom:14,fontSize:12,color:G.ink2}}>
              🔗 <span style={{fontFamily:"'Courier New',monospace",color:G.accent}}>
                hostpanel.com/urunler/{slug(CATS.find(c=>c.id===form.categoryId)?.label||form.categoryId)}/{slug(form.name)}
              </span>
            </div>
          )}
          <div style={{display:"flex",gap:8}}>
            <Btn onClick={()=>setModal(null)}>İptal</Btn>
            <Btn variant="primary" onClick={save} disabled={!form.name||!form.price}>{modal==="add"?"Ekle":"Güncelle"}</Btn>
          </div>
        </Modal>
      )}

      {/* Stats row */}
      <div className="rg3" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12,marginBottom:18}}>
        <Metric label="Toplam Ürün" value={prods.length} icon="📦"/>
        <Metric label="Aktif" value={prods.filter(p=>p.active).length} accent={G.green} icon="✓"/>
        <Metric label="Pasif" value={prods.filter(p=>!p.active).length} accent={G.ink2} icon="○"/>
      </div>

      {/* Filters + actions */}
      <div style={{display:"flex",gap:8,marginBottom:14,alignItems:"center",flexWrap:"wrap"}}>
        <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
          <Pill active={catF==="all"} onClick={()=>setCatF("all")}>Tümü ({prods.length})</Pill>
          {CATS.map(c=>(
            <Pill key={c.id} active={catF===c.id} color={c.color} onClick={()=>setCatF(c.id)}>
              {c.icon} {c.label} ({prods.filter(p=>p.categoryId===c.id).length})
            </Pill>
          ))}
        </div>
        <div style={{display:"flex",gap:8,marginLeft:"auto"}}>
          <Btn size="sm" variant="teal" onClick={onPreview}>👁 Önizle</Btn>
          <Btn size="sm" variant="primary" onClick={()=>{setForm(emptyForm);setModal("add");}}>+ Yeni Ürün</Btn>
        </div>
      </div>

      <Tbl heads={["Ürün Adı","Kategori","Fiyat","Dönem","Sunucu","URL Linki","Rozet","Durum",""]}>
        {filtered.map((p,i) => {
          const cat=CATS.find(c=>c.id===p.categoryId);
          const plink=productLink(p);
          const srv=servers.find(s=>s.id===p.serverId);
          const isCp=srv?.type==="cpanel";
          return (
            <tr key={p.id} style={{cursor:"pointer",transition:"background .1s"}}
              onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
              onMouseLeave={e=>e.currentTarget.style.background=""}>
              <TD s={{fontWeight:700}}>
                <span style={{color:G.accent,cursor:"pointer"}} onClick={()=>setViewP(p)}>{p.name}</span>
              </TD>
              <TD><span style={{background:cat?.colorL,color:cat?.color,fontSize:11,fontWeight:600,padding:"2px 8px",borderRadius:6,whiteSpace:"nowrap"}}>{cat?.icon} {cat?.label}</span></TD>
              <TD s={{fontWeight:800,fontVariantNumeric:"tabular-nums"}}>{fmt(Number(p.price))}</TD>
              <TD s={{color:G.ink2,fontSize:12}}>/{p.period}</TD>
              <TD>
                {srv
                  ? <span style={{background:isCp?G.greenL:G.tealL,color:isCp?G.green:G.teal,fontSize:11,fontWeight:600,padding:"2px 8px",borderRadius:6,whiteSpace:"nowrap"}}>
                      {isCp?"⬢":"⬡"} {srv.name}
                    </span>
                  : <span style={{color:G.ink3,fontSize:12}}>—</span>
                }
              </TD>
              <TD><span style={{fontFamily:"'Courier New',monospace",fontSize:11,color:G.accent,background:G.accentL,padding:"2px 8px",borderRadius:5}}>{plink}</span></TD>
              <TD>{p.badge?<span style={{background:cat?.color,color:"#fff",fontSize:10,fontWeight:700,padding:"2px 8px",borderRadius:6}}>{p.badge}</span>:<span style={{color:G.ink3}}>—</span>}</TD>
              <TD>
                <button onClick={()=>setProds(prev=>prev.map(x=>x.id===p.id?{...x,active:!x.active}:x))} style={{background:"none",border:"none",cursor:"pointer",padding:0}}>
                  {p.active?<Chip s="active"/>:<span style={{background:"#F3F2EF",color:G.ink2,fontSize:11,fontWeight:600,padding:"3px 9px",borderRadius:6}}>Pasif</span>}
                </button>
              </TD>
              <TD>
                <div style={{display:"flex",gap:5}}>
                  <Btn size="sm" variant="ghost" onClick={()=>setViewP(p)}>👁</Btn>
                  <Btn size="sm" variant="outline" onClick={()=>{setForm(parseToForm(p));setModal(p);}}>✏️</Btn>
                  <Btn size="sm" variant="danger" onClick={()=>setConfirmDel(p.id)}>🗑</Btn>
                </div>
              </TD>
            </tr>
          );
        })}
        {filtered.length===0&&<tr><td colSpan={9} style={{padding:32,textAlign:"center",color:G.ink2,fontSize:13}}>Bu kategoride ürün yok.</td></tr>}
      </Tbl>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   PUBLIC CATALOG
═══════════════════════════════════════════════════════════ */
function PubCatalog({products,onBuy,onBack}) {
  const [cat,setCat]=useState("all");
  const [viewP,setViewP]=useState(null);
  const [domainSearch,setDomainSearch]=useState(false);

  // Domain kategorisi seçilince direkt arama sayfasına yönlendir
  if(domainSearch) return <DomainSearch onBuy={onBuy} onBack={()=>setDomainSearch(false)}/>;
  if(viewP) return <PubDetail p={viewP} onBack={()=>setViewP(null)} onBuy={onBuy}/>;

  const active=products.filter(p=>p.active);
  const filtered=cat==="all"?active:active.filter(p=>p.categoryId===cat);
  return (
    <div style={{minHeight:"100vh",background:G.canvas,fontFamily:"inherit"}}>
      <div style={{background:G.surface,borderBottom:`1px solid ${G.border}`,padding:"14px 32px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div style={{fontSize:16,fontWeight:900,color:G.ink0,letterSpacing:"-0.5px"}}>HostPanel<span style={{color:G.accent}}>.</span>Pro</div>
        {onBack&&<Btn size="sm" onClick={onBack}>← Panele Dön</Btn>}
      </div>
      <div style={{borderBottom:`1px solid ${G.border}`,background:G.surface}}>
        <div style={{maxWidth:1100,margin:"0 auto",padding:"40px 24px 24px"}}>
          <div style={{fontSize:36,fontWeight:900,color:G.ink0,letterSpacing:"-1.5px",lineHeight:1.1,marginBottom:10}}>
            Hosting & Altyapı<br/><span style={{color:G.accent}}>Çözümleri</span>
          </div>
          <div style={{fontSize:15,color:G.ink2,maxWidth:480}}>İşletmeniz için doğru paketi seçin. 30 gün para iade garantisi.</div>
        </div>
      </div>
      <div style={{maxWidth:1100,margin:"0 auto",padding:"28px 24px"}}>
        <div style={{display:"flex",gap:8,marginBottom:28,flexWrap:"wrap"}}>
          <Pill active={cat==="all"} onClick={()=>setCat("all")}>Tümü</Pill>
          {CATS.filter(c=>c.id==="domain"||active.some(p=>p.categoryId===c.id)).map(c=>(
            <Pill key={c.id} active={cat===c.id} color={c.color}
              onClick={()=>c.id==="domain"?setDomainSearch(true):setCat(c.id)}>
              {c.icon} {c.label}{c.id==="domain"&&" 🔍"}
            </Pill>
          ))}
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(270px,1fr))",gap:16}}>

          {/* Domain özel kartı — arama sayfasına yönlendirir */}
          {(cat==="all"||cat==="domain")&&(
            <div style={{background:G.surface,border:`2px dashed ${G.rose}`,borderRadius:12,padding:22,cursor:"pointer",position:"relative",transition:"all .18s"}}
              onMouseEnter={e=>{e.currentTarget.style.background=G.roseL;e.currentTarget.style.transform="translateY(-2px)";}}
              onMouseLeave={e=>{e.currentTarget.style.background=G.surface;e.currentTarget.style.transform="none";}}
              onClick={()=>setDomainSearch(true)}>
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:14}}>
                <span style={{fontSize:16,background:G.roseL,width:32,height:32,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:8}}>◎</span>
                <span style={{fontSize:11,fontWeight:700,color:G.rose,textTransform:"uppercase",letterSpacing:"1px"}}>Domain Tescili</span>
              </div>
              <div style={{fontSize:16,fontWeight:800,color:G.ink0,marginBottom:8,letterSpacing:"-0.3px"}}>Alan Adı Ara & Tescil Et</div>
              <div style={{fontSize:13,color:G.ink2,lineHeight:1.6,marginBottom:14}}>
                .com, .com.tr, .net, .io ve 20+ uzantıda alan adı müsaitliğini kontrol edin, anında tescil edin.
              </div>
              <div style={{display:"flex",gap:6,flexWrap:"wrap",marginBottom:14}}>
                {[".com","com.tr",".net",".io",".app"].map(e=>(
                  <span key={e} style={{fontFamily:"'Courier New',monospace",fontSize:11,background:G.canvas,border:`1px solid ${G.border}`,padding:"2px 8px",borderRadius:5,color:G.ink1}}>{e}</span>
                ))}
              </div>
              <button style={{width:"100%",padding:"9px",background:G.rose,color:"#fff",border:"none",borderRadius:8,fontSize:13,fontWeight:700,cursor:"pointer"}}>
                🔍 Domain Sorgula →
              </button>
            </div>
          )}

          {/* Diğer ürün kartları — domain kategorisini hariç tut */}
          {filtered.filter(p=>p.categoryId!=="domain").map(p=>{
            const catD=CATS.find(c=>c.id===p.categoryId);
            const plink=productLink(p);
            return (
              <div key={p.id} style={{background:G.surface,border:`1px solid ${G.border}`,borderRadius:12,padding:22,cursor:"pointer",position:"relative",transition:"all .18s"}}
                onMouseEnter={e=>{e.currentTarget.style.borderColor=catD?.color;e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow=`0 8px 24px ${catD?.color}18`;}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor=G.border;e.currentTarget.style.transform="none";e.currentTarget.style.boxShadow="none";}}>
                {p.badge&&<span style={{position:"absolute",top:14,right:14,background:catD?.color,color:"#fff",fontSize:10,fontWeight:700,padding:"2px 8px",borderRadius:6}}>{p.badge}</span>}
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:14}}>
                  <span style={{fontSize:16,background:catD?.colorL,width:32,height:32,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:8,flexShrink:0}}>{catD?.icon}</span>
                  <span style={{fontSize:11,fontWeight:700,color:catD?.color,textTransform:"uppercase",letterSpacing:"1px"}}>{catD?.label}</span>
                </div>
                <div style={{fontSize:16,fontWeight:800,color:G.ink0,marginBottom:6,letterSpacing:"-0.3px"}}>{p.name}</div>
                <div style={{fontSize:26,fontWeight:900,color:G.ink0,letterSpacing:"-1px",marginBottom:14}}>
                  {fmt(Number(p.price))}<span style={{fontSize:12,fontWeight:400,color:G.ink2}}>/{p.period}</span>
                </div>
                <div style={{borderTop:`1px solid ${G.border}`,paddingTop:12,marginBottom:14}}>
                  {(p.features||[]).slice(0,3).map((f,fi)=>(
                    <div key={fi} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:G.ink1,marginBottom:5}}>
                      <span style={{color:catD?.color,fontWeight:700,fontSize:9}}>+</span>{f}
                    </div>
                  ))}
                </div>
                <div style={{fontFamily:"'Courier New',monospace",fontSize:10,color:G.ink3,marginBottom:12}}>{plink}</div>
                <button onClick={()=>setViewP(p)} style={{width:"100%",padding:"9px",background:catD?.color,color:"#fff",border:"none",borderRadius:8,fontSize:13,fontWeight:700,cursor:"pointer"}}>
                  İncele & Satın Al →
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function PubDetail({p,onBack,onBuy}) {
  const catD=CATS.find(c=>c.id===p.categoryId);
  const plink=productLink(p);
  const [billing]=useBilling();
  const profileOk=isProfileComplete(billing);
  const [showWarn,setShowWarn]=useState(false);
  return (
    <div style={{minHeight:"100vh",background:G.canvas}}>
      <div style={{background:G.surface,borderBottom:`1px solid ${G.border}`,padding:"14px 32px",display:"flex",alignItems:"center",gap:8}}>
        <Btn size="sm" onClick={onBack}>← Geri</Btn>
        <span style={{color:G.ink3}}>›</span><span style={{color:G.ink2,fontSize:13}}>{catD?.label}</span>
        <span style={{color:G.ink3}}>›</span><span style={{fontSize:13,fontWeight:700,color:G.ink0}}>{p.name}</span>
        <span style={{fontFamily:"'Courier New',monospace",fontSize:10,color:G.accent,background:G.accentL,padding:"2px 8px",borderRadius:5,marginLeft:4}}>{plink}</span>
      </div>
      <div style={{maxWidth:900,margin:"32px auto",padding:"0 24px",display:"grid",gridTemplateColumns:"1fr 300px",gap:24,alignItems:"start"}}>
        <div>
          <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:12}}>
            <span style={{fontSize:12,fontWeight:700,color:catD?.color,background:catD?.colorL,padding:"3px 10px",borderRadius:6,textTransform:"uppercase",letterSpacing:"1px"}}>{catD?.icon} {catD?.label}</span>
            {p.badge&&<span style={{background:catD?.color,color:"#fff",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:6}}>{p.badge}</span>}
          </div>
          <h1 style={{fontSize:32,fontWeight:900,color:G.ink0,margin:"0 0 8px",letterSpacing:"-1.5px"}}>{p.name}</h1>
          <div style={{fontSize:14,color:G.ink2,marginBottom:28}}>Anlık aktivasyon · 30 gün iade garantisi · 7/24 destek</div>
          <Card style={{padding:20,marginBottom:14}}>
            <ST>Teknik Özellikler</ST>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(150px,1fr))",gap:8}}>
              {[["Disk",p.disk],["Trafik",p.bw],["CPU",p.cpu],["RAM",p.ram],["Site",p.sites],["E-posta",p.email],["Garanti",p.warranty]].filter(([,v])=>v).map(([l,v])=>(
                <div key={l} style={{background:G.canvas,borderRadius:8,padding:"10px 12px"}}>
                  <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>{l}</div>
                  <div style={{fontSize:15,fontWeight:800,color:G.ink0}}>{v}</div>
                </div>
              ))}
            </div>
          </Card>
          <Card style={{padding:20}}>
            <ST>Dahil Olanlar</ST>
            {(p.features||[]).map((f,i)=>(
              <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"8px 0",borderBottom:i<p.features.length-1?`1px solid ${G.border}`:"none",fontSize:13,color:G.ink1}}>
                <span style={{color:catD?.color,fontWeight:900,fontSize:11}}>+</span>{f}
              </div>
            ))}
          </Card>
        </div>
        <div style={{position:"sticky",top:20}}>
          <Card style={{padding:22,border:`2px solid ${G.border}`}}>
            <div style={{fontSize:34,fontWeight:900,color:G.ink0,letterSpacing:"-1.5px",marginBottom:4}}>
              {fmt(Number(p.price))}<span style={{fontSize:13,color:G.ink2,fontWeight:400,letterSpacing:"0"}}>/{p.period}</span>
            </div>
            <div style={{fontSize:12,color:G.ink2,marginBottom:20}}>KDV dahil değil</div>
            <Fld label="Dönem">
              <Sel>
                <option>Aylık — {fmt(Number(p.price))}</option>
                <option>Yıllık — {fmt(Number(p.price)*10)} (%17 indirim)</option>
              </Sel>
            </Fld>
            {showWarn&&(
              <Notice type="warn" style={{marginBottom:12}}>
                ⚠️ Satın almadan önce <strong>Hesabım → Fatura Bilgileri</strong> bölümünden kişisel bilgilerinizi tamamlayın.
              </Notice>
            )}
            <button onClick={()=>{ if(!profileOk){setShowWarn(true);}else{onBuy(p);} }}
              style={{width:"100%",padding:"13px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:15,fontWeight:800,cursor:"pointer",marginBottom:12,letterSpacing:"-0.3px"}}>
              {profileOk ? "Satın Al →" : "Bilgileri Tamamla →"}
            </button>
            <div style={{fontSize:11,color:G.ink2,textAlign:"center",marginBottom:16}}>🔒 iyzico · 3D Secure korumalı</div>
            <div style={{borderTop:`1px solid ${G.border}`,paddingTop:12}}>
              {["30 gün para iade","7/24 teknik destek","Anlık aktivasyon"].map((t,i)=>(
                <div key={i} style={{display:"flex",alignItems:"center",gap:8,fontSize:12,color:G.ink2,marginBottom:5}}>
                  <span style={{color:G.green,fontWeight:700}}>✓</span>{t}
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   PURCHASE FLOW
═══════════════════════════════════════════════════════════ */
function Purchase({product,onClose}) {
  const [step,setStep]=useState("reg");
  const [form,setForm]=useState({name:"",email:"",company:"",pass:""});
  const [card,setCard]=useState({no:"",exp:"",cvv:"",holder:"",inst:"1"});
  const [billing,setBilling]=useBilling();
  const [billEdit,setBillEdit]=useState(false);

  // Satın alma sözleşmeleri
  const [contracts]          = useContracts();
  const purchaseContracts    = contracts.filter(c=>c.active&&c.showOn.includes("purchase"));
  const [acceptedPC, setAcceptedPC]   = useState({});
  const [contractModal, setContractModal] = useState(null);
  const allPCAccepted = purchaseContracts.every(c=>!c.required||acceptedPC[c.id]);
  const cardOk = !!(card.no&&card.exp&&card.cvv&&card.holder);

  // Domain / SSL seçim state'i
  const DOMAIN_CATS = ["hosting","vps","dedicated","email"];
  const SSL_CATS    = ["ssl"];
  const needsDomain = DOMAIN_CATS.includes(product.categoryId);
  const isSSL       = SSL_CATS.includes(product.categoryId);
  // SSL de domain ister ama farklı UI
  const [domainChoice,setDomainChoice]       = useState(isSSL ? "existing" : "existing");
  const [domainVal,setDomainVal]             = useState("");
  const [domainSearching,setDomainSearching] = useState(false);
  const [domainSearched,setDomainSearched]   = useState(false);
  const [newDomainResults,setNewDomainResults]= useState([]);
  const [selNewDomain,setSelNewDomain]       = useState(null);
  const [newDomainYears,setNewDomainYears]   = useState(1);
  const [tldPricing]                         = useTldPricing();
  // SSL ek alanları
  const [sslType, setSslType]   = useState("DV"); // DV | OV | EV
  const [sslWild, setSslWild]   = useState(product.name?.toLowerCase().includes("wildcard"));

  const selNewDomainFull = selNewDomain ? domainVal + selNewDomain.ext : null;

  const domainOk = isSSL
    ? isValidDomain(domainVal)   // SSL için domain zorunlu ve geçerli format şart
    : (!needsDomain || domainChoice==="later"
        || (domainChoice==="new"      && !!selNewDomain)
        || (domainChoice==="existing" && isValidDomain(domainVal)));

  const catD=CATS.find(c=>c.id===product.categoryId);
  const price=Number(product.price);

  // Yeni domain seçildiyse fiyatı toplama ekle
  const domainPrice = (domainChoice==="new" && selNewDomain)
    ? selNewDomain.price * newDomainYears : 0;
  const subtotal  = price + domainPrice;
  const tax       = subtotal * .18;
  const total     = subtotal + tax;

  const hasBilling = !!(billing.name && billing.email && billing.address && billing.city && isPhoneValid(billing.phone));
  const isKurumsal = billing.type==="kurumsal";

  const STEPS=[{k:"reg",l:"Hesap"},{k:"billing",l:"Fatura"},{k:"cart",l:"Sepet"},{k:"pay",l:"Ödeme"},{k:"ok",l:"Tamamlandı"}];
  const si=STEPS.findIndex(s=>s.k===step);

  // Fatura özet satırı
  const BillingSummary = () => (
    <div style={{background:G.canvas,border:`1px solid ${G.border}`,borderRadius:8,padding:"11px 14px",fontSize:13}}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
        <div>
          <div style={{fontWeight:700,color:G.ink0,marginBottom:3}}>
            {isKurumsal ? billing.company||"Kurumsal" : billing.name}
            <span style={{marginLeft:8,fontSize:11,fontWeight:600,background:isKurumsal?G.accentL:G.greenL,color:isKurumsal?G.accent:G.green,padding:"1px 7px",borderRadius:10}}>
              {isKurumsal?"Kurumsal":"Bireysel"}
            </span>
          </div>
          <div style={{fontSize:12,color:G.ink2,lineHeight:1.6}}>
            {billing.name}{isKurumsal&&billing.taxNo?` · VKN: ${billing.taxNo}`:""}<br/>
            {billing.address}{billing.city?`, ${billing.city}`:""}, {billing.country}
          </div>
        </div>
        <Btn size="sm" variant="ghost" onClick={()=>setBillEdit(true)} style={{flexShrink:0,marginLeft:8}}>Değiştir</Btn>
      </div>
    </div>
  );

  return (
    <div style={{position:"fixed",inset:0,zIndex:9990,background:G.canvas,overflowY:"auto",fontFamily:"inherit"}}>
      {/* Header */}
      <div style={{background:G.surface,borderBottom:`1px solid ${G.border}`,padding:"14px 28px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div style={{fontSize:15,fontWeight:700,color:G.ink0,letterSpacing:"-0.3px"}}>HostPanel<span style={{color:G.accent}}>.</span>Pro</div>
        <Btn size="sm" variant="outline" onClick={onClose}>✕ İptal</Btn>
      </div>
      {/* Steps */}
      <div style={{background:G.surface,borderBottom:`1px solid ${G.border}`,padding:"16px 28px",display:"flex",justifyContent:"center",gap:0}}>
        {STEPS.map((s,i)=>(
          <div key={s.k} style={{display:"flex",alignItems:"center"}}>
            <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:4}}>
              <div style={{width:26,height:26,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,background:i<si?G.green:i===si?G.ink0:"transparent",color:i<=si?"#fff":G.ink2,border:`1.5px solid ${i<si?G.green:i===si?G.ink0:G.border2}`,transition:"all .2s"}}>
                {i<si?"✓":i+1}
              </div>
              <div style={{fontSize:10,fontWeight:i===si?700:400,color:i===si?G.ink0:i<si?G.green:G.ink2,textTransform:"uppercase",letterSpacing:".5px"}}>{s.l}</div>
            </div>
            {i<STEPS.length-1&&<div style={{width:44,height:1.5,background:i<si?G.green:G.border,margin:"0 8px 14px"}}/>}
          </div>
        ))}
      </div>

      <div style={{maxWidth:600,margin:"32px auto",padding:"0 24px"}}>

        {/* ── STEP: Hesap ── */}
        {step==="reg"&&(
          <Card style={{padding:28}}>
            <ST>Hesap Bilgileri</ST>
            <Notice type="info">Zaten hesabınız varsa <span style={{fontWeight:700,cursor:"pointer",textDecoration:"underline"}} onClick={()=>setStep("billing")}>doğrudan devam edin →</span></Notice>
            <Fld label="E-posta *">
              <Inp type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder="kullanici@firma.com"/>
            </Fld>
            <Fld label="Şifre *">
              <Inp type="password" value={form.pass} onChange={e=>setForm({...form,pass:e.target.value})} placeholder="••••••••"/>
            </Fld>
            <div style={{display:"flex",gap:8,marginTop:8}}>
              <Btn onClick={onClose}>İptal</Btn>
              <Btn variant="primary" onClick={()=>setStep("billing")} style={{flex:1}} disabled={!form.email||!form.pass}>
                Devam →
              </Btn>
            </div>
          </Card>
        )}

        {/* ── STEP: Fatura Bilgileri ── */}
        {step==="billing"&&(()=>{
          const billingFilled = hasBilling;
          return (
            <div style={{display:"flex",flexDirection:"column",gap:14}}>
              <Card style={{padding:22}}>
                <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
                  <div>
                    <ST style={{marginBottom:2}}>Fatura Bilgileri</ST>
                    <div style={{fontSize:12,color:G.ink2}}>
                      {billingFilled ? "Kayıtlı bilgileriniz aşağıda. Değiştirmek için Düzenle'ye tıklayın." : "Fatura bilgilerinizi girin. Sonraki adımda tamamlayabilirsiniz."}
                    </div>
                  </div>
                  {billingFilled&&!billEdit&&(
                    <Btn size="sm" onClick={()=>setBillEdit(true)}>✏️ Düzenle</Btn>
                  )}
                </div>

                {/* Dolu ve düzenleme kapalı → özet göster */}
                {billingFilled&&!billEdit ? (
                  <div style={{background:G.canvas,borderRadius:10,padding:"14px 16px"}}>
                    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                      {[
                        ["Fatura Türü", billing.type==="kurumsal"?"🏢 Kurumsal":"👤 Bireysel"],
                        ["Ad Soyad", billing.name],
                        ["E-posta", billing.email],
                        ["Telefon", billing.phone],
                        ["Şehir", billing.city],
                        ["Ülke", billing.country],
                        ...(billing.type==="kurumsal"?[
                          ["Şirket", billing.company||"—"],
                          ["VKN", billing.taxNo||"—"],
                          ["Vergi Dairesi", billing.taxOffice||"—"],
                        ]:[]),
                      ].map(([l,v])=>(
                        <div key={l}>
                          <div style={{fontSize:11,color:G.ink2,marginBottom:2}}>{l}</div>
                          <div style={{fontSize:13,fontWeight:500,color:G.ink0}}>{v}</div>
                        </div>
                      ))}
                    </div>
                    {billing.address&&(
                      <div style={{marginTop:10,paddingTop:10,borderTop:`1px solid ${G.border}`}}>
                        <div style={{fontSize:11,color:G.ink2,marginBottom:2}}>Adres</div>
                        <div style={{fontSize:13,color:G.ink0}}>{billing.address}</div>
                      </div>
                    )}
                  </div>
                ) : (
                  /* Boş veya düzenleme açık → form */
                  <div>
                    {/* Bireysel / Kurumsal toggle */}
                    <div style={{display:"flex",background:G.canvas,border:`1px solid ${G.border}`,borderRadius:10,padding:4,gap:4,marginBottom:16}}>
                      {[["bireysel","👤  Bireysel"],["kurumsal","🏢  Kurumsal"]].map(([val,lbl])=>(
                        <button key={val} onClick={()=>setBilling(b=>({...b,type:val}))}
                          style={{flex:1,padding:"8px",fontSize:13,fontWeight:billing.type===val?700:500,borderRadius:8,border:"none",cursor:"pointer",background:billing.type===val?G.ink0:"transparent",color:billing.type===val?"#fff":G.ink2,transition:"all .15s",fontFamily:"inherit"}}>
                          {lbl}
                        </button>
                      ))}
                    </div>

                    {isKurumsal&&<Notice type="info" style={{marginBottom:14}}>🏢 Kurumsal fatura bilgileriniz KDV iadesi için faturalara yansıtılacaktır.</Notice>}

                    <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                      <Fld label={isKurumsal?"Yetkili Ad Soyad *":"Ad Soyad *"}>
                        <Inp value={billing.name} onChange={e=>setBilling(b=>({...b,name:e.target.value}))}/>
                      </Fld>
                      <Fld label="E-posta *">
                        <Inp type="email" value={billing.email} onChange={e=>setBilling(b=>({...b,email:e.target.value}))} placeholder=""/>
                      </Fld>
                      <Fld label="Telefon *">
                        <Inp value={billing.phone} onChange={e=>setBilling(b=>({...b,phone:fmtPhone(e.target.value)}))} onKeyDown={onPhoneKey} placeholder="05XX XXX XX XX"
                          style={{borderColor:billing.phone?(isPhoneValid(billing.phone)?"#1A7F37":"#CF222E"):undefined}}/>
                      </Fld>
                      <Fld label="Şehir *">
                        <Sel value={billing.city||""} onChange={e=>setBilling(b=>({...b,city:e.target.value}))}>
                          <option value="">Şehir seçin...</option>
                          {TR_CITIES.map(c=><option key={c}>{c}</option>)}
                        </Sel>
                      </Fld>
                    </div>
                    <Fld label="Fatura Adresi *">
                      <Txtarea value={billing.address} onChange={e=>setBilling(b=>({...b,address:e.target.value}))} placeholder="" style={{minHeight:56}}/>
                    </Fld>
                    <Fld label="Ülke">
                      <Sel value={billing.country} onChange={e=>setBilling(b=>({...b,country:e.target.value}))}>
                        {["Türkiye","Almanya","Amerika Birleşik Devletleri","Birleşik Krallık","Hollanda"].map(c=><option key={c}>{c}</option>)}
                      </Sel>
                    </Fld>

                    {isKurumsal&&(
                      <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
                        <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Firma Bilgileri</div>
                        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                          <Fld label="Firma / Şirket Adı *">
                            <Inp value={billing.company} onChange={e=>setBilling(b=>({...b,company:e.target.value}))} placeholder=""/>
                          </Fld>
                          <Fld label="Vergi Kimlik No (VKN) *">
                            <Inp value={billing.taxNo} onChange={e=>setBilling(b=>({...b,taxNo:e.target.value.replace(/\D/g,"")}))}
                              placeholder="" maxLength={10} style={{fontFamily:"'Courier New',monospace",letterSpacing:"1px"}}/>
                          </Fld>
                          <Fld label="Vergi Dairesi *">
                            <Inp value={billing.taxOffice} onChange={e=>setBilling(b=>({...b,taxOffice:e.target.value}))} placeholder=""/>
                          </Fld>
                          <Fld label="İş Telefonu">
                            <Inp value={billing.phone2} onChange={e=>setBilling(b=>({...b,phone2:fmtPhone(e.target.value)}))} onKeyDown={onPhoneKey} placeholder="0212 XXX XX XX"/>
                          </Fld>
                        </div>
                      </div>
                    )}

                    {billEdit&&(
                      <div style={{display:"flex",justifyContent:"flex-end",marginTop:8}}>
                        <Btn size="sm" onClick={()=>setBillEdit(false)}>✓ Kaydet</Btn>
                      </div>
                    )}
                  </div>
                )}
              </Card>

              {/* Bilgiler eksikse uyarı — ama geçişi engelleme */}
              {!billingFilled&&!billEdit&&(
                <Notice type="warn">
                  ℹ️ Fatura bilgileriniz eksik. Şimdi doldurmak istemiyorsanız devam edebilirsiniz; ödeme adımında tekrar sorulacak.
                </Notice>
              )}

              <div style={{display:"flex",gap:8}}>
                <Btn onClick={()=>setStep("reg")}>← Geri</Btn>
                <Btn variant="primary" onClick={()=>setStep("cart")} style={{flex:1}}>
                  Devam: Sepet →
                </Btn>
              </div>
            </div>
          );
        })()}

        {/* ── STEP: Sepet ── */}
        {step==="cart"&&(
          <div style={{display:"flex",flexDirection:"column",gap:14}}>
            <Card style={{padding:22}}>
              <ST>Sepetiniz</ST>
              <div style={{display:"flex",gap:14,alignItems:"center",padding:14,background:G.canvas,borderRadius:8,border:`1px solid ${G.border}`,marginBottom:14}}>
                <span style={{fontSize:22,background:catD?.colorL,width:44,height:44,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:10,flexShrink:0}}>{catD?.icon}</span>
                <div style={{flex:1}}>
                  <div style={{fontSize:15,fontWeight:800,color:G.ink0,letterSpacing:"-0.3px"}}>{product.name}</div>
                  <div style={{fontSize:12,color:G.ink2,marginTop:2}}>{catD?.label} · Aylık plan</div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div style={{fontSize:22,fontWeight:900,color:G.ink0,letterSpacing:"-1px"}}>{fmt(price)}</div>
                  <div style={{fontSize:11,color:G.ink2}}>/{product.period}</div>
                </div>
              </div>
              {(product.features||[]).slice(0,4).map((f,i)=>(
                <div key={i} style={{display:"flex",alignItems:"center",gap:8,fontSize:13,color:G.ink1,marginBottom:5}}>
                  <span style={{color:catD?.color,fontWeight:700}}>+</span>{f}
                </div>
              ))}
            </Card>

            {/* Domain seçimi — sadece gereken kategoriler için */}
            {needsDomain&&(
              <Card style={{padding:20,border:!domainOk?`2px solid ${G.red}`:`1px solid ${G.border}`}}>
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:14}}>
                  <ST style={{marginBottom:0}}>Alan Adı (Domain)</ST>
                  {!domainOk&&<span style={{fontSize:11,color:G.red,fontWeight:600}}>Zorunlu</span>}
                </div>
                <div style={{fontSize:12,color:G.ink2,marginBottom:14}}>
                  Bu hosting paketi bir alan adına yüklenecektir. Aşağıdan seçeneğinizi belirtin.
                </div>

                {/* 3 seçenek */}
                <div style={{display:"flex",flexDirection:"column",gap:8,marginBottom:domainChoice!=="later"?14:0}}>
                  {[
                    {key:"existing", icon:"○", label:"Mevcut alan adım var", desc:"Sahip olduğunuz bir domain'i bu pakete bağlayın"},
                    {key:"new",      icon:"◎", label:"Yeni alan adı almak istiyorum", desc:"Yeni bir domain satın alıp bu paketle birleştirin"},
                    {key:"later",    icon:"◇", label:"Alan adımı sonra belirteceğim", desc:"Şimdi satın al, alan adını daha sonra panel üzerinden tanımla"},
                  ].map(opt=>(
                    <label key={opt.key} onClick={()=>setDomainChoice(opt.key)} style={{display:"flex",alignItems:"flex-start",gap:12,padding:"11px 14px",borderRadius:10,border:`1.5px solid ${domainChoice===opt.key?G.accent:G.border}`,background:domainChoice===opt.key?G.accentL:"transparent",cursor:"pointer",transition:"all .15s"}}>
                      <div style={{width:18,height:18,minWidth:18,borderRadius:"50%",border:`2px solid ${domainChoice===opt.key?G.accent:G.border2}`,background:domainChoice===opt.key?G.accent:"transparent",display:"flex",alignItems:"center",justifyContent:"center",marginTop:1}}>
                        {domainChoice===opt.key&&<div style={{width:6,height:6,borderRadius:"50%",background:"#fff"}}/>}
                      </div>
                      <div>
                        <div style={{fontSize:13,fontWeight:700,color:domainChoice===opt.key?G.accent:G.ink0,marginBottom:2}}>{opt.label}</div>
                        <div style={{fontSize:11,color:G.ink2}}>{opt.desc}</div>
                      </div>
                    </label>
                  ))}
                </div>

                {/* Domain giriş alanı */}
                {domainChoice==="existing"&&(
                  <div>
                    <Fld label="Alan Adınız *">
                      <div style={{position:"relative"}}>
                        <Inp value={domainVal} onChange={e=>setDomainVal(e.target.value.toLowerCase().replace(/\s/g,""))}
                          placeholder="siteniz.com"
                          style={{
                            paddingLeft:36,
                            borderColor: domainVal
                              ? isValidDomain(domainVal) ? G.green : G.red
                              : undefined,
                          }}/>
                        <span style={{position:"absolute",left:12,top:"50%",transform:"translateY(-50%)",fontSize:13,color:G.ink2}}>🌐</span>
                        {domainVal&&(
                          <span style={{position:"absolute",right:10,top:"50%",transform:"translateY(-50%)",fontSize:12,fontWeight:700,color:isValidDomain(domainVal)?G.green:G.red}}>
                            {isValidDomain(domainVal)?"✓":"✕"}
                          </span>
                        )}
                      </div>
                      {domainVal && !isValidDomain(domainVal) && (
                        <div style={{fontSize:11,color:G.red,marginTop:4}}>
                          Geçerli bir alan adı girin. Örnek: <span style={{fontFamily:"'Courier New',monospace"}}>siteniz.com</span> veya <span style={{fontFamily:"'Courier New',monospace"}}>siteniz.com.tr</span>
                        </div>
                      )}
                    </Fld>
                    {domainVal && isValidDomain(domainVal) && (
                      <div style={{fontSize:12,color:G.teal,background:G.tealL,borderRadius:7,padding:"6px 10px",marginTop:-6}}>
                        ✓ <strong style={{fontFamily:"'Courier New',monospace"}}>{domainVal}</strong> bu pakete tanımlanacak
                      </div>
                    )}
                  </div>
                )}
                {domainChoice==="new"&&(()=>{
                  const sld = domainVal.replace(/[^a-z0-9-]/g,"");
                  return (
                    <div>
                      {/* Arama kutusu */}
                      <Fld label="Alan adı (uzantısız) *">
                        <div style={{display:"flex",gap:8}}>
                          <div style={{position:"relative",flex:1}}>
                            <Inp
                              value={domainVal}
                              onChange={e=>{
                                setDomainVal(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g,""));
                                setDomainSearched(false);
                                setNewDomainResults([]);
                                setSelNewDomain(null);
                              }}
                              placeholder="siteniz"
                              style={{paddingLeft:36}}
                            />
                            <span style={{position:"absolute",left:12,top:"50%",transform:"translateY(-50%)",fontSize:13,color:G.ink2}}>🔍</span>
                          </div>
                          <button
                            onClick={async()=>{
                              if(!domainVal.trim()) return;
                              setDomainSearching(true);
                              setDomainSearched(false);
                              setSelNewDomain(null);
                              await new Promise(r=>setTimeout(r,900));
                              const taken=["google","facebook","amazon","apple","youtube","instagram"];
                              const isTaken=taken.some(t=>domainVal.includes(t));
                              const results=tldPricing.slice(0,8).map(t=>{
                                const hash=(domainVal+t.ext).split("").reduce((a,c)=>a+c.charCodeAt(0),0);
                                return {
                                  ext:t.ext, tld:t,
                                  price:t.reg, renew:t.renew,
                                  status: isTaken?"taken":(hash%5!==0?"available":"taken"),
                                  popular:t.popular,
                                };
                              }).sort((a,b)=>a.status==="available"?-1:1);
                              setNewDomainResults(results);
                              setDomainSearched(true);
                              setDomainSearching(false);
                            }}
                            disabled={!domainVal.trim()||domainSearching}
                            style={{padding:"8px 16px",background:domainVal.trim()&&!domainSearching?G.ink0:"#ccc",color:"#fff",border:"none",borderRadius:8,fontSize:12,fontWeight:700,cursor:domainVal.trim()&&!domainSearching?"pointer":"not-allowed",fontFamily:"inherit",whiteSpace:"nowrap"}}>
                            {domainSearching?"⏳ Aranıyor...":"Sorgula"}
                          </button>
                        </div>
                      </Fld>

                      {/* Seçili domain özeti */}
                      {selNewDomain&&(
                        <div style={{background:G.greenL,border:`1px solid #BBF7D0`,borderRadius:10,padding:"12px 14px",marginBottom:8}}>
                          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                            <div>
                              <div style={{fontSize:14,fontWeight:800,color:G.ink0,fontFamily:"'Courier New',monospace"}}>{sld}{selNewDomain.ext}</div>
                              <div style={{fontSize:11,color:G.green,marginTop:2}}>✓ Sepete eklendi — {fmt(selNewDomain.price)}/yıl</div>
                            </div>
                            <button onClick={()=>setSelNewDomain(null)} style={{fontSize:11,color:G.red,background:G.redL,border:"none",borderRadius:6,padding:"4px 10px",cursor:"pointer",fontFamily:"inherit"}}>✕ Değiştir</button>
                          </div>
                          <div style={{display:"flex",alignItems:"center",gap:10,borderTop:`1px solid #D1FAE5`,paddingTop:8}}>
                            <span style={{fontSize:12,color:G.green,fontWeight:600}}>Kayıt Süresi:</span>
                            <Sel value={newDomainYears} onChange={e=>setNewDomainYears(Number(e.target.value))} style={{flex:1,padding:"4px 8px",fontSize:12}}>
                              {Array.from({length:(selNewDomain.tld?.maxYears||10)-(selNewDomain.tld?.minYears||1)+1},(_,i)=>i+(selNewDomain.tld?.minYears||1)).map(y=>(
                                <option key={y} value={y}>{y} Yıl — {fmt(selNewDomain.price*y)}</option>
                              ))}
                            </Sel>
                            <div style={{fontSize:14,fontWeight:900,color:G.ink0,minWidth:80,textAlign:"right"}}>
                              {fmt(selNewDomain.price*newDomainYears)}
                            </div>
                          </div>
                        </div>
                      )}

                      {/* Sonuçlar */}
                      {domainSearched&&newDomainResults.length>0&&!selNewDomain&&(
                        <div style={{border:`1px solid ${G.border}`,borderRadius:10,overflow:"hidden"}}>
                          {newDomainResults.map((r,i)=>{
                            const isAvail=r.status==="available";
                            return (
                              <div key={r.ext} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:i<newDomainResults.length-1?`1px solid ${G.border}`:"none",background:isAvail?"transparent":"#FAFAF9",opacity:isAvail?1:0.6}}>
                                <div style={{flex:1}}>
                                  <div style={{display:"flex",alignItems:"center",gap:6}}>
                                    <span style={{fontFamily:"'Courier New',monospace",fontWeight:700,color:isAvail?G.ink0:G.ink2,fontSize:13}}>
                                      {sld}{r.ext}
                                    </span>
                                    {r.popular&&isAvail&&<span style={{fontSize:9,background:G.rose,color:"#fff",padding:"1px 5px",borderRadius:3,fontWeight:700}}>Popüler</span>}
                                  </div>
                                  {isAvail&&r.tld?.privacy&&<div style={{fontSize:10,color:G.teal,marginTop:2}}>🔒 Whois gizliliği</div>}
                                </div>
                                <div style={{fontSize:11,fontWeight:600,color:isAvail?G.green:G.red,minWidth:60,textAlign:"right"}}>
                                  {isAvail?"✓ Müsait":"✕ Kayıtlı"}
                                </div>
                                <div style={{fontSize:13,fontWeight:700,color:G.ink0,minWidth:72,textAlign:"right"}}>
                                  {isAvail?fmt(r.price)+"/yıl":"—"}
                                </div>
                                {isAvail
                                  ? <button onClick={()=>{setSelNewDomain(r);setNewDomainYears(1);}}
                                      style={{padding:"6px 14px",background:G.ink0,color:"#fff",border:"none",borderRadius:7,fontSize:12,fontWeight:700,cursor:"pointer",fontFamily:"inherit",whiteSpace:"nowrap"}}>
                                      + Sepete Ekle
                                    </button>
                                  : <div style={{width:90}}/>
                                }
                              </div>
                            );
                          })}
                        </div>
                      )}

                      {/* Henüz arama yapılmadı */}
                      {!domainSearched&&!domainSearching&&domainVal&&(
                        <div style={{fontSize:11,color:G.ink2,textAlign:"center",padding:"10px 0"}}>
                          "Sorgula" butonuna basarak müsaitlik kontrolü yapın.
                        </div>
                      )}
                      {!domainVal&&(
                        <div style={{fontSize:11,color:G.ink2,marginTop:4}}>
                          Almak istediğiniz alan adını uzantısız yazın. Örn: <span style={{fontFamily:"'Courier New',monospace"}}>siteniz</span>
                        </div>
                      )}
                    </div>
                  );
                })()}
                {domainChoice==="later"&&(
                  <Notice type="warn">⏳ Alan adınızı satın aldıktan sonra Hizmetlerim panelinden tanımlayabilirsiniz.</Notice>
                )}
              </Card>
            )}

            {/* SSL — Alan adı zorunlu, sunucu yok */}
            {isSSL&&(
              <Card style={{padding:20,border:!domainOk?`2px solid ${G.red}`:`1px solid ${G.border}`}}>
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6}}>
                  <span style={{fontSize:18}}>🔒</span>
                  <ST style={{marginBottom:0}}>SSL Sertifikası Kurulacak Alan Adı</ST>
                  {!domainOk&&<span style={{fontSize:11,color:G.red,fontWeight:600}}>Zorunlu</span>}
                </div>
                <div style={{fontSize:12,color:G.ink2,marginBottom:14,lineHeight:1.6}}>
                  SSL sertifikası bir alan adına bağlıdır. Sertifikanın kurulacağı domain'i girin.
                  {product.name?.toLowerCase().includes("wildcard")&&(
                    <span style={{display:"block",marginTop:4,color:G.teal,fontWeight:500}}>
                      Wildcard SSL — tüm alt domainleri kapsar (örn: <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11}}>*.siteniz.com</span>)
                    </span>
                  )}
                </div>

                <Fld label="Alan Adı *">
                  <div style={{position:"relative"}}>
                    <Inp
                      value={domainVal}
                      onChange={e=>setDomainVal(e.target.value.toLowerCase().replace(/\s/g,""))}
                      placeholder={product.name?.toLowerCase().includes("wildcard")?"siteniz.com (*.siteniz.com için)":"siteniz.com"}
                      style={{
                        paddingLeft:36,
                        borderColor:domainVal?(isValidDomain(domainVal)?G.green:G.red):undefined,
                      }}
                    />
                    <span style={{position:"absolute",left:12,top:"50%",transform:"translateY(-50%)",fontSize:13}}>🌐</span>
                    {domainVal&&(
                      <span style={{position:"absolute",right:10,top:"50%",transform:"translateY(-50%)",fontSize:12,fontWeight:700,color:isValidDomain(domainVal)?G.green:G.red}}>
                        {isValidDomain(domainVal)?"✓":"✕"}
                      </span>
                    )}
                  </div>
                  {domainVal&&!isValidDomain(domainVal)&&(
                    <div style={{fontSize:11,color:G.red,marginTop:4}}>
                      Geçerli bir alan adı girin. Örnek: <span style={{fontFamily:"'JetBrains Mono',monospace"}}>siteniz.com</span>
                    </div>
                  )}
                </Fld>

                {domainVal&&isValidDomain(domainVal)&&(
                  <Notice type="success">
                    🔒 <strong style={{fontFamily:"'JetBrains Mono',monospace"}}>{product.name?.toLowerCase().includes("wildcard")?`*.${domainVal}`:domainVal}</strong> için SSL sertifikası oluşturulacak.
                  </Notice>
                )}

                {/* SSL türü bilgisi */}
                <div style={{marginTop:4,display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8}}>
                  {[
                    {t:"DV",label:"Domain Doğrulama",desc:"Otomatik, dakikalar içinde",color:G.green},
                    {t:"OV",label:"Kurum Doğrulama",desc:"Manuel, 1-3 gün",color:G.accent},
                    {t:"EV",label:"Genişletilmiş Doğrulama",desc:"Yeşil adres çubuğu, 3-7 gün",color:G.purple},
                  ].map(opt=>(
                    <div key={opt.t} onClick={()=>setSslType(opt.t)}
                      style={{padding:"10px 12px",borderRadius:8,border:`1.5px solid ${sslType===opt.t?opt.color:G.border}`,background:sslType===opt.t?opt.color+"10":"transparent",cursor:"pointer",transition:"all .15s"}}>
                      <div style={{fontSize:12,fontWeight:700,color:sslType===opt.t?opt.color:G.ink0,marginBottom:3}}>{opt.t} — {opt.label}</div>
                      <div style={{fontSize:11,color:G.ink2}}>{opt.desc}</div>
                    </div>
                  ))}
                </div>
              </Card>
            )}

            {/* Fatura bilgisi özet kartı */}
            <Card style={{padding:18}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
                <ST style={{marginBottom:0}}>Fatura Bilgileri</ST>
                <Btn size="sm" variant="ghost" onClick={()=>setStep("billing")}>Değiştir</Btn>
              </div>
              <BillingSummary/>
            </Card>

            <Card style={{padding:18}}>
              <ST>Fiyat Özeti</ST>
              <div style={{display:"flex",justifyContent:"space-between",padding:"9px 0",borderBottom:`1px solid ${G.border}`,fontSize:13}}>
                <span style={{color:G.ink2}}>Hosting Bedeli</span><span style={{color:G.ink1}}>{fmt(price)}</span>
              </div>
              {domainChoice==="new"&&selNewDomain&&(
                <div style={{display:"flex",justifyContent:"space-between",padding:"9px 0",borderBottom:`1px solid ${G.border}`,fontSize:13}}>
                  <span style={{color:G.ink2}}>
                    Domain — <span style={{fontFamily:"'Courier New',monospace",fontWeight:600}}>{domainVal+selNewDomain.ext}</span>
                    {newDomainYears>1&&<span> ({newDomainYears} yıl)</span>}
                  </span>
                  <span style={{color:G.ink1}}>{fmt(selNewDomain.price*newDomainYears)}</span>
                </div>
              )}
              <div style={{display:"flex",justifyContent:"space-between",padding:"9px 0",borderBottom:`1px solid ${G.border}`,fontSize:13}}>
                <span style={{color:G.ink2}}>KDV (%18)</span><span style={{color:G.ink1}}>{fmt(tax)}</span>
              </div>
              <div style={{display:"flex",justifyContent:"space-between",padding:"12px 0",fontSize:17,fontWeight:900,letterSpacing:"-0.5px"}}>
                <span>Toplam</span><span style={{color:G.ink0}}>{fmt(total)}</span>
              </div>
            </Card>
            <div style={{display:"flex",gap:8}}>
              <Btn onClick={()=>setStep("billing")}>← Geri</Btn>
              <Btn variant="primary" onClick={()=>setStep("pay")} style={{flex:1}} disabled={!domainOk}>
                {!domainOk
                  ? isSSL?"Alan adı zorunlu":domainChoice==="new"?"Domain seçimi zorunlu":"Alan adı seçimi zorunlu"
                  : "Ödemeye Geç →"}
              </Btn>
            </div>
          </div>
        )}

        {/* ── STEP: Ödeme ── */}
        {step==="pay"&&(
          <div style={{display:"flex",flexDirection:"column",gap:14}}>

            {/* ── Fatura bilgileri — boşsa önce doldur, doluysa özet ── */}
            {!hasBilling ? (
              /* Bilgiler eksik — önce bunları tamamlat */
              <Card style={{padding:22,border:`2px solid ${G.amber}`}}>
                <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:16}}>
                  <span style={{fontSize:20}}>📋</span>
                  <div>
                    <ST style={{marginBottom:2}}>Fatura Bilgilerini Tamamlayın</ST>
                    <div style={{fontSize:12,color:G.ink2}}>Ödeme yapabilmek için aşağıdaki bilgileri doldurun.</div>
                  </div>
                </div>

                {/* Bireysel / Kurumsal */}
                <div style={{display:"flex",background:G.canvas,border:`1px solid ${G.border}`,borderRadius:10,padding:4,gap:4,marginBottom:16}}>
                  {[["bireysel","👤  Bireysel"],["kurumsal","🏢  Kurumsal"]].map(([val,lbl])=>(
                    <button key={val} onClick={()=>setBilling(b=>({...b,type:val}))}
                      style={{flex:1,padding:"9px",fontSize:13,fontWeight:billing.type===val?700:500,borderRadius:8,border:"none",cursor:"pointer",background:billing.type===val?G.ink0:"transparent",color:billing.type===val?"#fff":G.ink2,transition:"all .15s",fontFamily:"inherit"}}>
                      {lbl}
                    </button>
                  ))}
                </div>

                {isKurumsal&&<Notice type="info" style={{marginBottom:14}}>🏢 Kurumsal fatura bilgileriniz KDV iadesi için faturalara yansıtılacaktır.</Notice>}

                <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                  <Fld label={isKurumsal?"Yetkili Ad Soyad *":"Ad Soyad *"}>
                    <Inp value={billing.name} onChange={e=>setBilling(b=>({...b,name:e.target.value}))}/>
                  </Fld>
                  <Fld label="E-posta *">
                    <Inp type="email" value={billing.email} onChange={e=>setBilling(b=>({...b,email:e.target.value}))} placeholder=""/>
                  </Fld>
                  <Fld label="Telefon *">
                    <Inp value={billing.phone} onChange={e=>setBilling(b=>({...b,phone:fmtPhone(e.target.value)}))} onKeyDown={onPhoneKey} placeholder="05XX XXX XX XX"
                      style={{borderColor:billing.phone?(isPhoneValid(billing.phone)?"#1A7F37":"#CF222E"):undefined}}/>
                  </Fld>
                  <Fld label="Şehir *">
                    <Sel value={billing.city||""} onChange={e=>setBilling(b=>({...b,city:e.target.value}))}>
                      <option value="">Şehir seçin...</option>
                      {TR_CITIES.map(c=><option key={c}>{c}</option>)}
                    </Sel>
                  </Fld>
                </div>
                <Fld label="Fatura Adresi *">
                  <Txtarea value={billing.address} onChange={e=>setBilling(b=>({...b,address:e.target.value}))} placeholder="" style={{minHeight:56}}/>
                </Fld>
                <Fld label="Ülke">
                  <Sel value={billing.country} onChange={e=>setBilling(b=>({...b,country:e.target.value}))}>
                    {["Türkiye","Almanya","Amerika Birleşik Devletleri","Birleşik Krallık","Hollanda"].map(c=><option key={c}>{c}</option>)}
                  </Sel>
                </Fld>

                {isKurumsal&&(
                  <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
                    <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Firma Bilgileri</div>
                    <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                      <Fld label="Firma / Şirket Adı *">
                        <Inp value={billing.company} onChange={e=>setBilling(b=>({...b,company:e.target.value}))} placeholder=""/>
                      </Fld>
                      <Fld label="Vergi Kimlik No (VKN) *">
                        <Inp value={billing.taxNo} onChange={e=>setBilling(b=>({...b,taxNo:e.target.value.replace(/\D/g,"")}))}
                          placeholder="" maxLength={10} style={{fontFamily:"'Courier New',monospace",letterSpacing:"1px"}}/>
                      </Fld>
                      <Fld label="Vergi Dairesi *">
                        <Inp value={billing.taxOffice} onChange={e=>setBilling(b=>({...b,taxOffice:e.target.value}))} placeholder=""/>
                      </Fld>
                      <Fld label="İş Telefonu">
                        <Inp value={billing.phone2||""} onChange={e=>setBilling(b=>({...b,phone2:fmtPhone(e.target.value)}))} onKeyDown={onPhoneKey} placeholder="0212 XXX XX XX"/>
                      </Fld>
                    </div>
                  </div>
                )}

                <Notice type="warn" style={{marginTop:12}}>
                  Bu bilgiler kaydedilecek ve gelecekteki satın alımlarınızda otomatik doldurulacaktır.
                </Notice>
              </Card>
            ) : (
              /* Bilgiler dolu — özet göster + düzenle seçeneği */
              <Card style={{padding:"14px 18px"}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
                  <div style={{fontSize:12,fontWeight:600,color:G.ink2,textTransform:"uppercase",letterSpacing:"0.5px"}}>Fatura Kesilecek</div>
                  <button onClick={()=>setBillEdit(!billEdit)} style={{fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:600}}>
                    {billEdit?"✓ Kapat":"✏️ Düzenle"}
                  </button>
                </div>
                {billEdit ? (
                  <div>
                    <div style={{display:"flex",background:G.canvas,border:`1px solid ${G.border}`,borderRadius:8,padding:3,gap:3,marginBottom:12}}>
                      {[["bireysel","👤 Bireysel"],["kurumsal","🏢 Kurumsal"]].map(([val,lbl])=>(
                        <button key={val} onClick={()=>setBilling(b=>({...b,type:val}))}
                          style={{flex:1,padding:"6px",fontSize:12,fontWeight:billing.type===val?700:500,borderRadius:6,border:"none",cursor:"pointer",background:billing.type===val?G.ink0:"transparent",color:billing.type===val?"#fff":G.ink2,fontFamily:"inherit"}}>
                          {lbl}
                        </button>
                      ))}
                    </div>
                    <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                      <Fld label="Ad Soyad *"><Inp value={billing.name} onChange={e=>setBilling(b=>({...b,name:e.target.value}))}/></Fld>
                      <Fld label="Telefon *">
                        <Inp value={billing.phone} onChange={e=>setBilling(b=>({...b,phone:fmtPhone(e.target.value)}))} onKeyDown={onPhoneKey} placeholder="05XX XXX XX XX"
                          style={{borderColor:billing.phone?(isPhoneValid(billing.phone)?"#1A7F37":"#CF222E"):undefined}}/>
                      </Fld>
                      <Fld label="Şehir *">
                        <Sel value={billing.city||""} onChange={e=>setBilling(b=>({...b,city:e.target.value}))}>
                          <option value="">Şehir seçin...</option>
                          {TR_CITIES.map(c=><option key={c}>{c}</option>)}
                        </Sel>
                      </Fld>
                      <Fld label="E-posta *"><Inp type="email" value={billing.email} onChange={e=>setBilling(b=>({...b,email:e.target.value}))}/></Fld>
                    </div>
                    <Fld label="Adres *"><Txtarea value={billing.address} onChange={e=>setBilling(b=>({...b,address:e.target.value}))} style={{minHeight:48}}/></Fld>
                    {isKurumsal&&(
                      <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                        <Fld label="Şirket *"><Inp value={billing.company} onChange={e=>setBilling(b=>({...b,company:e.target.value}))}/></Fld>
                        <Fld label="VKN *"><Inp value={billing.taxNo} onChange={e=>setBilling(b=>({...b,taxNo:e.target.value.replace(/\D/g,"")}))} maxLength={10}/></Fld>
                        <Fld label="Vergi Dairesi *"><Inp value={billing.taxOffice} onChange={e=>setBilling(b=>({...b,taxOffice:e.target.value}))}/></Fld>
                      </div>
                    )}
                  </div>
                ) : (
                  <BillingSummary/>
                )}
              </Card>
            )}

            {/* Kart formu — sadece billing doluysa göster */}
            {hasBilling&&(
              <Card style={{padding:22}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
                  <ST style={{marginBottom:0}}>Ödeme Bilgileri</ST>
                  <div style={{display:"flex",alignItems:"center",gap:6,background:G.tealL,borderRadius:8,padding:"4px 10px"}}>
                    <span style={{fontSize:12}}>🔒</span>
                    <span style={{fontSize:11,color:G.teal,fontWeight:700,textTransform:"uppercase",letterSpacing:"1px"}}>iyzico</span>
                  </div>
                </div>
                <Fld label="Kart Numarası"><Inp value={card.no} onChange={e=>setCard({...card,no:e.target.value})} placeholder="**** **** **** ****" style={{fontFamily:"'Courier New',monospace",letterSpacing:"2px"}}/></Fld>
                <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                  <Fld label="Son Kullanma"><Inp value={card.exp} onChange={e=>setCard({...card,exp:e.target.value})} placeholder="MM/YY"/></Fld>
                  <Fld label="CVV"><Inp value={card.cvv} onChange={e=>setCard({...card,cvv:e.target.value})} placeholder="***"/></Fld>
                </div>
                <Fld label="Kart İsmi"><Inp value={card.holder} onChange={e=>setCard({...card,holder:e.target.value})} placeholder="" style={{textTransform:"uppercase"}}/></Fld>
                <Fld label="Taksit">
                  <Sel value={card.inst} onChange={e=>setCard({...card,inst:e.target.value})}>
                    <option value="1">Tek çekim — {fmt(total)}</option>
                    <option value="3">3 Taksit — {fmt(total/3)}/ay</option>
                    <option value="6">6 Taksit — {fmt(total/6)}/ay</option>
                  </Sel>
                </Fld>
              </Card>
            )}

            {/* Sipariş özeti, domain, SSL, sözleşmeler */}

            {/* Domain özeti — hosting/vps/dedicated/email */}
            {needsDomain&&(
              <Card style={{padding:"12px 16px"}}>
                <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:8}}>Alan Adı</div>
                {domainChoice==="later"&&(
                  <div style={{fontSize:13,color:G.amber,fontWeight:600}}>⏳ Sonra belirlenecek</div>
                )}
                {domainChoice==="existing"&&(
                  <div style={{display:"flex",alignItems:"center",gap:8}}>
                    <span style={{fontSize:14}}>🌐</span>
                    <span style={{fontWeight:700,color:G.ink0,fontFamily:"'JetBrains Mono',monospace"}}>{domainVal}</span>
                    <span style={{fontSize:11,background:G.tealL,color:G.teal,padding:"1px 7px",borderRadius:5,fontWeight:600}}>Mevcut</span>
                  </div>
                )}
                {domainChoice==="new"&&selNewDomain&&(
                  <div>
                    <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}>
                      <span style={{fontSize:14}}>🌐</span>
                      <span style={{fontWeight:700,color:G.ink0,fontFamily:"'JetBrains Mono',monospace"}}>{domainVal+selNewDomain.ext}</span>
                      <span style={{fontSize:11,background:G.greenL,color:G.green,padding:"1px 7px",borderRadius:5,fontWeight:600}}>Yeni Tescil</span>
                    </div>
                    <div style={{fontSize:12,color:G.ink2}}>
                      {newDomainYears} yıl · {fmt(selNewDomain.price)}/yıl · Toplam: <strong>{fmt(selNewDomain.price*newDomainYears)}</strong>
                      {selNewDomain.tld?.privacy&&<span style={{marginLeft:8,color:G.teal}}>🔒 Whois gizliliği dahil</span>}
                    </div>
                  </div>
                )}
              </Card>
            )}

            {/* SSL özeti */}
            {isSSL&&(
              <Card style={{padding:"12px 16px"}}>
                <div style={{fontSize:11,fontWeight:600,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:10}}>SSL Sertifika Detayları</div>
                <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}>
                  <span style={{fontSize:18}}>🔒</span>
                  <div>
                    <div style={{fontSize:14,fontWeight:700,color:G.ink0,fontFamily:"'JetBrains Mono',monospace"}}>
                      {product.name?.toLowerCase().includes("wildcard")?`*.${domainVal}`:domainVal}
                    </div>
                    <div style={{fontSize:11,color:G.ink2,marginTop:2}}>{product.name}</div>
                  </div>
                </div>
                <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
                  <span style={{fontSize:11,background:G.accentL,color:G.accent,padding:"2px 8px",borderRadius:5,fontWeight:600}}>{sslType} Doğrulama</span>
                  {product.name?.toLowerCase().includes("wildcard")&&(
                    <span style={{fontSize:11,background:G.purpleL,color:G.purple,padding:"2px 8px",borderRadius:5,fontWeight:600}}>Wildcard *.{domainVal}</span>
                  )}
                  <span style={{fontSize:11,background:G.greenL,color:G.green,padding:"2px 8px",borderRadius:5,fontWeight:600}}>256-bit Şifreleme</span>
                </div>
              </Card>
            )}

            <Card style={{padding:"12px 18px"}}>
              <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:8}}>Sipariş Özeti</div>
              <div style={{display:"flex",justifyContent:"space-between",padding:"6px 0",fontSize:13,borderBottom:`1px solid ${G.border}`}}>
                <span style={{color:G.ink2}}>{product.name}</span>
                <span style={{fontWeight:600}}>{fmt(price)}</span>
              </div>
              {domainChoice==="new"&&selNewDomain&&(
                <div style={{display:"flex",justifyContent:"space-between",padding:"6px 0",fontSize:13,borderBottom:`1px solid ${G.border}`}}>
                  <span style={{color:G.ink2}}>{domainVal+selNewDomain.ext} ({newDomainYears} yıl)</span>
                  <span style={{fontWeight:600}}>{fmt(selNewDomain.price*newDomainYears)}</span>
                </div>
              )}
              <div style={{display:"flex",justifyContent:"space-between",padding:"6px 0",fontSize:13,borderBottom:`1px solid ${G.border}`}}>
                <span style={{color:G.ink2}}>KDV (%18)</span>
                <span style={{fontWeight:600}}>{fmt(tax)}</span>
              </div>
              <div style={{display:"flex",justifyContent:"space-between",padding:"10px 0",fontSize:18,fontWeight:900,letterSpacing:"-0.5px"}}>
                <span>Toplam</span><span style={{color:G.ink0}}>{fmt(total)}</span>
              </div>
            </Card>
            {/* Satın alma sözleşme modalı */}
            {contractModal&&(
              <Modal title={contractModal.title} onClose={()=>setContractModal(null)} width={680}>
                <div style={{maxHeight:420,overflowY:"auto",background:G.canvas,borderRadius:8,padding:"16px 20px",marginBottom:16,border:`1px solid ${G.border}`}}>
                  <div style={{fontSize:13,color:G.ink1,lineHeight:1.8,whiteSpace:"pre-wrap"}}>{contractModal.content}</div>
                </div>
                <div style={{display:"flex",gap:8}}>
                  <Btn onClick={()=>setContractModal(null)}>Kapat</Btn>
                  {contractModal.required&&!acceptedPC[contractModal.id]&&(
                    <Btn variant="primary" onClick={()=>{setAcceptedPC(a=>({...a,[contractModal.id]:true}));setContractModal(null);}} style={{flex:1}}>
                      ✓ Okudum ve Kabul Ediyorum
                    </Btn>
                  )}
                </div>
              </Modal>
            )}

            {/* Satın alma sözleşmeleri */}
            {purchaseContracts.length>0&&(
              <Card style={{padding:"14px 18px"}}>
                <div style={{fontSize:12,fontWeight:600,color:G.ink2,marginBottom:12,textTransform:"uppercase",letterSpacing:"0.5px"}}>Sözleşmeler</div>
                {purchaseContracts.map(c=>(
                  <label key={c.id} style={{display:"flex",alignItems:"flex-start",gap:10,marginBottom:10,cursor:"pointer"}}>
                    <div
                      onClick={()=>setAcceptedPC(a=>({...a,[c.id]:!a[c.id]}))}
                      style={{
                        width:18,height:18,minWidth:18,borderRadius:5,marginTop:1,
                        border:`2px solid ${acceptedPC[c.id]?G.accent:G.border2}`,
                        background:acceptedPC[c.id]?G.accent:"transparent",
                        display:"flex",alignItems:"center",justifyContent:"center",
                        transition:"all .15s",flexShrink:0,
                      }}>
                      {acceptedPC[c.id]&&<span style={{color:"#fff",fontSize:11,fontWeight:900,lineHeight:1}}>✓</span>}
                    </div>
                    <span style={{fontSize:13,color:G.ink1,lineHeight:1.5}}>
                      {c.required&&<span style={{color:G.red,fontWeight:600}}>* </span>}
                      <button
                        onClick={()=>setContractModal(c)}
                        style={{color:G.accent,fontWeight:600,background:"none",border:"none",cursor:"pointer",fontSize:13,fontFamily:"inherit",padding:0,textDecoration:"underline"}}>
                        {c.shortTitle}
                      </button>
                      {" "}okudum, kabul ediyorum.{c.required&&<span style={{fontSize:11,color:G.ink2}}> (Zorunlu)</span>}
                    </span>
                  </label>
                ))}
              </Card>
            )}

            <div style={{display:"flex",gap:8}}>
              <Btn onClick={()=>setStep("cart")}>← Geri</Btn>
              <button
                onClick={()=>setStep("ok")}
                disabled={!hasBilling||!cardOk||!allPCAccepted}
                style={{flex:1,padding:"13px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:15,fontWeight:800,letterSpacing:"-0.3px",fontFamily:"inherit",
                  opacity:(!hasBilling||!cardOk||!allPCAccepted)?0.35:1,
                  cursor:(!hasBilling||!cardOk||!allPCAccepted)?"not-allowed":"pointer",
                  transition:"opacity .2s"}}>
                {!hasBilling
                  ? "📋 Fatura bilgilerini doldurun"
                  : !cardOk
                  ? "🔒 Kart bilgilerini doldurun"
                  : !allPCAccepted
                    ? "📋 Sözleşmeleri onaylayın"
                    : `🔒 Güvenli Öde — ${fmt(total)}`}
              </button>
            </div>
          </div>
        )}

        {/* ── STEP: Tamamlandı ── */}
        {step==="ok"&&(
          <Card style={{padding:40,textAlign:"center"}}>
            <div style={{width:64,height:64,background:G.greenL,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:28,margin:"0 auto 18px"}}>✓</div>
            <div style={{fontSize:24,fontWeight:900,color:G.ink0,marginBottom:8,letterSpacing:"-1px"}}>Ödeme Başarılı</div>
            <div style={{fontSize:14,color:G.ink2,marginBottom:28}}>Siparişiniz alındı. Hesabınız birkaç dakika içinde aktive edilecek.</div>
            <div style={{background:G.greenL,border:`1px solid #BBF7D0`,borderRadius:10,padding:18,marginBottom:24,textAlign:"left"}}>
              {[
                ["Sipariş No","ORD-"+Math.floor(Math.random()*9000+1000)],
                ["Ürün",product.name],
                ...(isSSL?[
                  ["Alan Adı (SSL)", product.name?.toLowerCase().includes("wildcard")?`*.${domainVal}`:domainVal],
                  ["Doğrulama Tipi", sslType==="DV"?"Domain Doğrulama (DV)":sslType==="OV"?"Kurum Doğrulama (OV)":"Genişletilmiş Doğrulama (EV)"],
                ]:[]),
                ...(needsDomain&&domainChoice==="existing"?[["Alan Adı", domainVal+" (Mevcut)"]]:[] ),
                ...(needsDomain&&domainChoice==="new"&&selNewDomain?[
                  ["Yeni Domain", domainVal+selNewDomain.ext],
                  ["Domain Süresi", newDomainYears+" Yıl"],
                  ["Domain Bedeli", fmt(selNewDomain.price*newDomainYears)],
                ]:[]),
                ...(needsDomain&&domainChoice==="later"?[["Alan Adı","Sonra belirlenecek"]]:[] ),
                ["Hosting Bedeli", fmt(price)],
                ["Toplam (KDV dahil)",fmt(total)],
                ["Fatura Tipi",isKurumsal?"Kurumsal (e-Fatura)":"Bireysel"],
                ["Faturalı",isKurumsal?(billing.company||billing.name):billing.name],
                ["Fatura","INV-2026-XXXX (e-posta ile)"],
              ].map(([l,v])=>(
                <div key={l} style={{display:"flex",justifyContent:"space-between",padding:"7px 0",borderBottom:`1px solid #D1FAE5`,fontSize:13}}>
                  <span style={{color:G.green,fontWeight:600}}>{l}</span>
                  <span style={{fontWeight:700,color:G.ink0}}>{v}</span>
                </div>
              ))}
            </div>
            <Btn variant="primary" onClick={onClose} style={{padding:"11px 32px",fontSize:14}}>Panele Git →</Btn>
          </Card>
        )}
      </div>
    </div>
  );
}


/* ═══════════════════════════════════════════════════════════
   CUSTOMER DETAIL
═══════════════════════════════════════════════════════════ */
function CustDetail({c,onBack}) {
  const [tab,setTab]=useState("overview");
  const [selI,setSelI]=useState(null);
  const [invoices]=useInvoices();
  const [orders]=useOrders();
  const [domains]=useDomains();
  const myO=orders.filter(o=>o.customerId===c.id);
  const myI=invoices.filter(i=>i.customerId===c.id);
  const myD=domains.filter(d=>d.customerId===c.id);
  const myT=TICKETS.filter(t=>t.customerId===c.id);
  const TABS=[{k:"overview",l:"Genel"},{k:"services",l:`Hizmetler (${myO.length})`},{k:"invoices",l:`Faturalar (${myI.length})`},{k:"domains",l:`Domainler (${myD.length})`},{k:"tickets",l:`Ticketlar (${myT.length})`}];
  return (
    <div>
      {selI&&<InvoiceModal inv={selI} onClose={()=>setSelI(null)}/>}
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:18}}>
        <Btn size="sm" variant="ghost" onClick={onBack}>← Müşteriler</Btn>
        <span style={{color:G.ink3}}>›</span>
        <span style={{fontSize:13,fontWeight:700,color:G.ink0}}>{c.name}</span>
      </div>
      <Card style={{padding:22,marginBottom:14}}>
        <div style={{display:"flex",gap:16,alignItems:"flex-start"}}>
          <Av name={c.name} size={52}/>
          <div style={{flex:1}}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:4}}>
              <div style={{fontSize:18,fontWeight:900,color:G.ink0,letterSpacing:"-0.5px"}}>{c.name}</div>
              <Chip s={c.status}/>
            </div>
            <div style={{fontSize:13,color:G.ink2,marginBottom:10}}>{c.company} · {c.email} · {c.phone}</div>
            <div style={{display:"flex",gap:20,fontSize:12,color:G.ink2}}>
              <span>VKN: <strong style={{color:G.ink0,fontFamily:"'Courier New',monospace"}}>{c.taxNo}</strong></span>
              <span>Üyelik: <strong style={{color:G.ink0}}>{c.joined}</strong></span>
              <span>Bakiye: <strong style={{color:c.balance>0?G.red:G.green}}>{c.balance>0?fmt(c.balance):"₺0,00"}</strong></span>
            </div>
          </div>
          <div style={{display:"flex",gap:8}}>
            <Btn size="sm">E-posta</Btn>
            <Btn size="sm" variant="primary">Fatura Oluştur</Btn>
          </div>
        </div>
      </Card>
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:16}}>
        <Metric label="Aktif Hizmet" value={myO.filter(o=>o.status==="active").length}/>
        <Metric label="Toplam Fatura" value={fmt(myI.reduce((s,i)=>s+i.total,0))} accent={G.accent}/>
        <Metric label="Açık Bakiye" value={fmt(c.balance)} accent={c.balance>0?G.red:G.green}/>
        <Metric label="Açık Ticket" value={myT.filter(t=>t.status==="open").length}/>
      </div>
      <div style={{display:"flex",borderBottom:`1px solid ${G.border}`,marginBottom:16}}>
        {TABS.map(t=>(
          <button key={t.k} onClick={()=>setTab(t.k)} style={{padding:"9px 18px",fontSize:12,fontWeight:tab===t.k?700:500,border:"none",borderBottom:`2px solid ${tab===t.k?G.ink0:"transparent"}`,background:"transparent",color:tab===t.k?G.ink0:G.ink2,cursor:"pointer",marginBottom:-1,letterSpacing:"-0.1px"}}>
            {t.l}
          </button>
        ))}
      </div>
      {tab==="overview"&&(
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
          <Card style={{padding:18}}>
            <ST>Hizmetler</ST>
            {myO.length===0?<div style={{color:G.ink2,fontSize:13}}>Hizmet yok.</div>:myO.map((o,i)=>(
              <div key={i} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"9px 0",borderBottom:i<myO.length-1?`1px solid ${G.border}`:"none"}}>
                <div><div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{o.product}</div><div style={{fontSize:11,color:G.ink2,marginTop:2}}>Yenileme: {o.renew}</div></div>
                <div style={{textAlign:"right"}}><Chip s={o.status}/><div style={{fontSize:11,color:G.ink2,marginTop:3}}>{fmtK(o.price)}/yıl</div></div>
              </div>
            ))}
          </Card>
          <Card style={{padding:18}}>
            <ST>Son Faturalar</ST>
            {myI.length===0?<div style={{color:G.ink2,fontSize:13}}>Fatura yok.</div>:myI.map((inv,i)=>(
              <div key={i} onClick={()=>setSelI(inv)} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"9px 0",borderBottom:i<myI.length-1?`1px solid ${G.border}`:"none",cursor:"pointer"}}>
                <div><div style={{fontSize:13,fontWeight:700,color:G.accent}}>{inv.id}</div><div style={{fontSize:11,color:G.ink2,marginTop:2}}>{inv.service}</div></div>
                <div style={{textAlign:"right"}}><div style={{fontSize:13,fontWeight:800}}>{fmt(inv.total)}</div><div style={{marginTop:3}}><Chip s={inv.status}/></div></div>
              </div>
            ))}
          </Card>
        </div>
      )}
      {tab==="services"&&<Tbl heads={["Sipariş","Ürün","Plesk","IP","Disk","BW","Yenileme","Fiyat","Durum"]}>
        {myO.length===0?<tr><td colSpan={9} style={{padding:24,textAlign:"center",color:G.ink2,fontSize:13}}>Hizmet yok.</td></tr>:
        myO.map((o,i)=><tr key={i}><TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.id}</TD><TD s={{fontWeight:700}}>{o.product}</TD><TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.pleskUser}</TD><TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.ip}</TD><TD s={{color:G.ink2,fontSize:12}}>{o.disk}</TD><TD s={{color:G.ink2,fontSize:12}}>{o.bw}</TD><TD s={{fontSize:12,color:G.ink2}}>{o.renew}</TD><TD s={{fontWeight:700}}>{fmtK(o.price)}</TD><TD><Chip s={o.status}/></TD></tr>)}
      </Tbl>}
      {tab==="invoices"&&<Tbl heads={["Fatura No","Hizmet","Tutar","Toplam","Tarih","Durum"]}>
        {myI.length===0?<tr><td colSpan={6} style={{padding:24,textAlign:"center",color:G.ink2}}>Fatura yok.</td></tr>:
        myI.map((inv,i)=><tr key={i} onClick={()=>setSelI(inv)} style={{cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}><TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.accent,fontWeight:700}}>{inv.id}</TD><TD s={{fontWeight:600}}>{inv.service}</TD><TD>{fmt(inv.amount)}</TD><TD s={{fontWeight:800}}>{fmt(inv.total)}</TD><TD s={{fontSize:12,color:G.ink2}}>{inv.date}</TD><TD><Chip s={inv.status}/></TD></tr>)}
      </Tbl>}
      {tab==="domains"&&(
        myD.length===0
          ? <div style={{padding:24,textAlign:"center",color:G.ink2}}>Domain yok.</div>
          : <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {myD.map((d,i)=>{
                const daysLeft=Math.ceil((new Date(d.expires)-new Date())/(86400000));
                return (
                  <div key={i} style={{background:G.surface,border:`1px solid ${d.status==="expired"?G.red:G.border}`,borderRadius:10,padding:"12px 16px",display:"flex",alignItems:"center",gap:12}}>
                    <span style={{fontSize:18}}>🌐</span>
                    <div style={{flex:1}}>
                      <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:3,flexWrap:"wrap"}}>
                        <span style={{fontFamily:"'Courier New',monospace",fontWeight:800,color:G.ink0,fontSize:14}}>{d.domain}</span>
                        <Chip s={d.status}/>
                        {d.locked&&<span style={{fontSize:10,color:G.teal,background:G.tealL,padding:"1px 6px",borderRadius:4}}>🔒</span>}
                        {d.whoisPrivacy&&<span style={{fontSize:10,color:G.purple,background:G.purpleL,padding:"1px 6px",borderRadius:4}}>👤</span>}
                      </div>
                      <div style={{fontSize:11,color:G.ink2,display:"flex",gap:12,flexWrap:"wrap"}}>
                        <span>Bitiş: <strong style={{color:daysLeft<=30?G.red:G.ink0}}>{d.expires}</strong></span>
                        {daysLeft>0&&daysLeft<=30&&<span style={{color:G.red,fontWeight:700}}>{daysLeft}g</span>}
                        <span>Oto-yenileme: <strong style={{color:d.autorenew?G.green:G.red}}>{d.autorenew?"✓":"✕"}</strong></span>
                        <span>NS: <span style={{fontFamily:"'Courier New',monospace",fontSize:10}}>{d.ns?.[0]||"—"}</span></span>
                      </div>
                    </div>
                    <span style={{fontSize:11,color:G.ink2}}>{d.dns?.length||0} DNS kaydı</span>
                  </div>
                );
              })}
            </div>
      )}
      {tab==="tickets"&&<Tbl heads={["Ticket","Konu","Dept.","Öncelik","Tarih","Durum"]}>
        {myT.length===0?<tr><td colSpan={6} style={{padding:24,textAlign:"center",color:G.ink2}}>Ticket yok.</td></tr>:
        myT.map((tk,i)=><tr key={i}><TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{tk.id}</TD><TD s={{fontWeight:700,color:G.accent}}>{tk.subject}</TD><TD s={{fontSize:12,color:G.ink2}}>{tk.dept}</TD><TD><Chip s={tk.priority}/></TD><TD s={{fontSize:12,color:G.ink2}}>{tk.created}</TD><TD><Chip s={tk.status}/></TD></tr>)}
      </Tbl>}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   ADMIN PAGES
═══════════════════════════════════════════════════════════ */
function ADashboard({onNav}) {
  const [invoices]=useInvoices();
  const [orders]=useOrders();
  const {mob,tab}=useR();
  const maxR=Math.max(...MONTHLY.map(d=>d.r));
  return (
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <div className="rg4" style={{display:"grid",gridTemplateColumns:mob?"repeat(2,1fr)":tab?"repeat(2,1fr)":"repeat(4,1fr)",gap:12}}>
        <Metric label="Aylık Gelir" value={fmtK(48320)} sub="↑ %12 geçen ay" accent={G.green} icon="₺"/>
        <Metric label="Aktif Müşteri" value={CUSTOMERS.filter(c=>c.status==="active").length} icon="◎" onClick={()=>onNav?.("customers")}/>
        <Metric label="Ödeme Bekleyen" value={fmt(invoices.filter(i=>i.status!=="paid").reduce((s,i)=>s+i.total,0))} accent={G.amber} icon="⏳" onClick={()=>onNav?.("invoices")}/>
        <Metric label="Açık Ticket" value={TICKETS.filter(t=>t.status==="open").length} accent={G.red} icon="!" onClick={()=>onNav?.("tickets")}/>
      </div>
      <div style={{display:"grid",gridTemplateColumns:mob?"1fr":"2fr 1fr",gap:14}}>
        <Card style={{padding:20}}>
          <ST>Gelir / Gider — Son 7 Ay</ST>
          <div style={{display:"flex",alignItems:"flex-end",gap:6,height:110}}>
            {MONTHLY.map((d,i)=>(
              <div key={i} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",gap:3}}>
                <div style={{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",gap:2,height:90,justifyContent:"flex-end"}}>
                  <div style={{width:"55%",height:`${(d.e/maxR)*90}px`,background:`${G.amber}60`,borderRadius:"2px 2px 0 0"}}/>
                  <div style={{width:"100%",height:`${(d.r/maxR)*90}px`,background:G.ink0,borderRadius:"2px 2px 0 0"}}/>
                </div>
                <div style={{fontSize:9,color:G.ink2,fontWeight:600}}>{d.m}</div>
              </div>
            ))}
          </div>
          <div style={{display:"flex",gap:16,marginTop:10}}>
            {[["Gelir",G.ink0],["Gider",G.amber]].map(([l,c])=>(
              <span key={l} style={{fontSize:11,color:G.ink2,display:"flex",alignItems:"center",gap:5,fontWeight:600}}>
                <span style={{width:8,height:8,background:c,borderRadius:2,display:"inline-block"}}/>{l}
              </span>
            ))}
          </div>
        </Card>
        <Card style={{padding:20}}>
          <ST>Entegrasyonlar</ST>
          {[{n:"Plesk API",s:"active",d:"2 sunucu"},{n:"GİB e-Fatura",s:"active",d:"4 iletildi"},{n:"iyzico",s:"active",d:"3D Secure"}].map((s,i)=>(
            <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 0",borderBottom:i<2?`1px solid ${G.border}`:"none"}}>
              <div style={{width:7,height:7,borderRadius:"50%",background:G.green,flexShrink:0}}/>
              <div style={{flex:1}}><div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{s.n}</div><div style={{fontSize:11,color:G.ink2}}>{s.d}</div></div>
              <Chip s={s.s}/>
            </div>
          ))}
        </Card>
      </div>
      <div style={{display:"grid",gridTemplateColumns:mob?"1fr":"1fr 1fr",gap:14}}>
        <Card style={{padding:18}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <ST style={{marginBottom:0}}>Son Faturalar</ST>
            <button onClick={()=>onNav?.("invoices")} style={{fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:500}}>Tümünü gör →</button>
          </div>
          {invoices.slice(0,4).map((inv,i)=>(
            <div key={i} onClick={()=>onNav?.("invoices")} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"9px 0",borderBottom:i<3?`1px solid ${G.border}`:"none",cursor:"pointer",borderRadius:6,transition:"background .1s"}}
              onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
              onMouseLeave={e=>e.currentTarget.style.background=""}>
              <div><div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{inv.customer}</div><div style={{fontSize:11,color:G.ink2}}>{inv.service}</div></div>
              <div style={{textAlign:"right"}}><div style={{fontSize:13,fontWeight:700}}>{fmt(inv.total)}</div><div style={{marginTop:3}}><Chip s={inv.status}/></div></div>
            </div>
          ))}
        </Card>
        <Card style={{padding:18}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <ST style={{marginBottom:0}}>Açık Ticketlar</ST>
            <button onClick={()=>onNav?.("tickets")} style={{fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:500}}>Tümünü gör →</button>
          </div>
          {TICKETS.filter(t=>t.status==="open").map((tk,i,arr)=>(
            <div key={i} onClick={()=>onNav?.("tickets")} style={{display:"flex",gap:10,padding:"9px 0",borderBottom:i<arr.length-1?`1px solid ${G.border}`:"none",cursor:"pointer",borderRadius:6,transition:"background .1s"}}
              onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
              onMouseLeave={e=>e.currentTarget.style.background=""}>
              <Av name={tk.customer}/>
              <div style={{flex:1}}><div style={{fontSize:12,fontWeight:600,color:G.ink0}}>{tk.subject}</div><div style={{fontSize:11,color:G.ink2,marginTop:3,display:"flex",gap:6,alignItems:"center"}}>{tk.customer} · <Chip s={tk.priority}/></div></div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

function ACustomers({onSelect}) {
  const [q,setQ]=useState("");
  const [addM,setAddM]=useState(false);
  const [orders]=useOrders();

  const emptyForm = {
    type:"bireysel", // "bireysel" | "kurumsal"
    name:"", email:"", phone:"", address:"",
    // Bireysel
    tcNo:"", birthDate:"",
    // Kurumsal
    company:"", taxNo:"", taxOffice:"",
    // Ortak
    willBuyService: false,
    status:"active",
  };
  const [form,setForm]=useState(emptyForm);

  const isBireysel = form.type==="bireysel";
  const isKurumsal = form.type==="kurumsal";

  // Validasyon
  const tcValid  = form.tcNo.length===11 && /^\d{11}$/.test(form.tcNo);
  const vknValid = form.taxNo.length>=10 && /^\d+$/.test(form.taxNo);

  const canSave = form.name && form.email && (
    isBireysel
      ? (!form.willBuyService || tcValid)   // hizmet alacaksa TC zorunlu
      : (vknValid && form.taxNo && form.taxOffice && form.company) // kurumsal: VKN+Daire+Firma zorunlu
  );

  const f=CUSTOMERS.filter(c=>c.name.toLowerCase().includes(q.toLowerCase())||c.email.toLowerCase().includes(q.toLowerCase()));

  return (
    <div>
      {addM&&(
        <Modal title="Yeni Müşteri Ekle" onClose={()=>{setAddM(false);setForm(emptyForm);}} width={580}>

          {/* Bireysel / Kurumsal toggle */}
          <div style={{marginBottom:18}}>
            <div style={{fontSize:11,fontWeight:700,color:G.ink2,letterSpacing:".6px",textTransform:"uppercase",marginBottom:8}}>Müşteri Türü *</div>
            <div style={{display:"flex",gap:8}}>
              {[
                {key:"bireysel", icon:"👤", label:"Bireysel", desc:"TC kimlikli gerçek kişi"},
                {key:"kurumsal", icon:"🏢", label:"Kurumsal", desc:"Vergi numaralı şirket/kuruluş"},
              ].map(({key,icon,label,desc})=>(
                <button key={key} onClick={()=>setForm(f=>({...emptyForm,type:key}))}
                  style={{flex:1,padding:"12px 14px",borderRadius:10,border:`2px solid ${form.type===key?G.accent:G.border}`,background:form.type===key?G.accentL:"transparent",cursor:"pointer",textAlign:"left",transition:"all .15s"}}>
                  <div style={{fontSize:20,marginBottom:5}}>{icon}</div>
                  <div style={{fontSize:13,fontWeight:700,color:form.type===key?G.accent:G.ink0}}>{label}</div>
                  <div style={{fontSize:11,color:G.ink2,marginTop:2}}>{desc}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Ortak alanlar */}
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <Fld label={isKurumsal?"Yetkili Ad Soyad *":"Ad Soyad *"}>
              <Inp value={form.name} onChange={e=>setForm({...form,name:e.target.value})} />
            </Fld>
            <Fld label="E-posta *">
              <Inp type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder=""/>
            </Fld>
            <Fld label="Telefon *">
              <Inp value={form.phone} onChange={e=>setForm({...form,phone:fmtPhone(e.target.value)}) } onKeyDown={onPhoneKey} placeholder="05XX XXX XX XX" style={{borderColor:form.phone?(isPhoneValid(form.phone)?"#1A7F37":"#CF222E"):undefined}}/>
            </Fld>
            <Fld label="Şehir *">
              <Sel value={form.address||""} onChange={e=>setForm({...form,address:e.target.value})}>
                <option value="">Şehir seçin...</option>
                {TR_CITIES.map(c=><option key={c}>{c}</option>)}
              </Sel>
            </Fld>
          </div>

          {/* BİREYSEL alanlar */}
          {isBireysel && (
            <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
              <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Kimlik Bilgileri</div>

              {/* Hizmet alacak mı checkbox */}
              <div style={{marginBottom:14}}>
                <label style={{display:"flex",alignItems:"flex-start",gap:10,cursor:"pointer",userSelect:"none"}}>
                  <div
                    onClick={()=>setForm(f=>({...f,willBuyService:!f.willBuyService}))}
                    style={{width:18,height:18,minWidth:18,borderRadius:5,border:`2px solid ${form.willBuyService?G.accent:G.border2}`,background:form.willBuyService?G.accent:"transparent",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",transition:"all .15s",marginTop:1}}>
                    {form.willBuyService&&<span style={{color:"#fff",fontSize:11,fontWeight:900,lineHeight:1}}>✓</span>}
                  </div>
                  <div>
                    <div style={{fontSize:13,fontWeight:600,color:G.ink0}}>Bu müşteri hizmet satın alacak</div>
                    <div style={{fontSize:11,color:G.ink2,marginTop:2}}>Hizmet satın alacak bireysel müşterilerde TC Kimlik No zorunludur (fatura ve e-Arşiv için).</div>
                  </div>
                </label>
              </div>

              {/* TC alanı — hizmet alacaksa göster & zorunlu */}
              <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <Fld label={form.willBuyService ? "TC Kimlik No *" : "TC Kimlik No"}>
                  <div style={{position:"relative"}}>
                    <Inp
                      value={form.tcNo}
                      onChange={e=>setForm({...form,tcNo:e.target.value.replace(/\D/g,"").slice(0,11)})}
                      placeholder=""
                      maxLength={11}
                      style={{
                        fontFamily:"'Courier New',monospace",
                        letterSpacing:"2px",
                        borderColor: form.tcNo && !tcValid ? G.red : form.tcNo && tcValid ? G.green : undefined,
                      }}
                    />
                    {form.tcNo.length>0 && (
                      <div style={{position:"absolute",right:10,top:"50%",transform:"translateY(-50%)",fontSize:12,fontWeight:700,color:tcValid?G.green:G.red}}>
                        {tcValid?"✓":form.tcNo.length+"/11"}
                      </div>
                    )}
                  </div>
                  {form.willBuyService && !tcValid && form.tcNo.length>0 && (
                    <div style={{fontSize:11,color:G.red,marginTop:4}}>TC Kimlik No 11 haneli olmalıdır.</div>
                  )}
                  {form.willBuyService && form.tcNo.length===0 && (
                    <div style={{fontSize:11,color:G.amber,marginTop:4}}>⚠️ Hizmet satın alabilmek için TC numarası zorunludur.</div>
                  )}
                </Fld>
                <Fld label="Doğum Tarihi">
                  <Inp type="date" value={form.birthDate} onChange={e=>setForm({...form,birthDate:e.target.value})}/>
                </Fld>
              </div>
            </div>
          )}

          {/* KURUMSAL alanlar */}
          {isKurumsal && (
            <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
              <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Firma Bilgileri</div>
              <Fld label="Firma / Şirket Adı *">
                <Inp value={form.company} onChange={e=>setForm({...form,company:e.target.value})} placeholder=""/>
              </Fld>
              <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <Fld label="Vergi Kimlik No (VKN) *">
                  <div style={{position:"relative"}}>
                    <Inp
                      value={form.taxNo}
                      onChange={e=>setForm({...form,taxNo:e.target.value.replace(/\D/g,"").slice(0,11)})}
                      placeholder=""
                      maxLength={11}
                      style={{
                        fontFamily:"'Courier New',monospace",
                        letterSpacing:"1px",
                        borderColor: form.taxNo && !vknValid ? G.red : form.taxNo && vknValid ? G.green : undefined,
                      }}
                    />
                    {form.taxNo.length>0&&(
                      <div style={{position:"absolute",right:10,top:"50%",transform:"translateY(-50%)",fontSize:12,fontWeight:700,color:vknValid?G.green:G.red}}>
                        {vknValid?"✓":form.taxNo.length+"/10"}
                      </div>
                    )}
                  </div>
                </Fld>
                <Fld label="Vergi Dairesi *">
                  <Inp value={form.taxOffice} onChange={e=>setForm({...form,taxOffice:e.target.value})} placeholder=""/>
                </Fld>
              </div>
              <div style={{background:G.accentL,border:`1px solid ${G.accent}30`,borderRadius:8,padding:"9px 12px",fontSize:12,color:G.accent,fontWeight:500}}>
                🏢 Kurumsal müşterilerde VKN ve Vergi Dairesi, GİB e-Fatura için zorunludur.
              </div>
            </div>
          )}

          <div style={{display:"flex",gap:8,marginTop:18}}>
            <Btn onClick={()=>{setAddM(false);setForm(emptyForm);}}>İptal</Btn>
            <Btn variant="primary" onClick={()=>{setAddM(false);setForm(emptyForm);}} disabled={!canSave} style={{flex:1}}>
              Müşteri Ekle
            </Btn>
          </div>
          {!canSave && form.name && form.email && (
            <div style={{fontSize:11,color:G.red,marginTop:8,textAlign:"center"}}>
              {isBireysel && form.willBuyService && !tcValid
                ? "⚠️ Hizmet alacak bireysel müşteriler için geçerli TC kimlik numarası zorunludur."
                : isKurumsal && (!form.company || !vknValid || !form.taxOffice)
                ? "⚠️ Kurumsal müşteriler için firma adı, VKN ve vergi dairesi zorunludur."
                : ""}
            </div>
          )}
        </Modal>
      )}

      <div style={{display:"flex",gap:10,marginBottom:14,alignItems:"center"}}>
        <Inp value={q} onChange={e=>setQ(e.target.value)} placeholder="İsim veya e-posta ara..." style={{maxWidth:280}}/>
        <Btn variant="primary" size="sm" onClick={()=>{setForm(emptyForm);setAddM(true);}} style={{marginLeft:"auto"}}>+ Müşteri Ekle</Btn>
      </div>

      <Tbl heads={["Müşteri","Tür","Şirket","E-posta","Vergi No","Hizmet","Bakiye","Üyelik","Durum"]}>
        {f.map((c,i)=>(
          <tr key={i} onClick={()=>onSelect(c)} style={{cursor:"pointer",transition:"background .1s"}} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
            <TD><div style={{display:"flex",alignItems:"center",gap:10}}><Av name={c.name}/><span style={{fontWeight:700,color:G.accent}}>{c.name}</span></div></TD>
            <TD>
              <span style={{fontSize:11,fontWeight:600,padding:"2px 8px",borderRadius:6,
                background:c.taxNo?.length===11?G.canvas:G.accentL,
                color:c.taxNo?.length===11?G.ink0:G.accent,
                border:`1px solid ${c.taxNo?.length===11?G.border:G.accent+"40"}`}}>
                {c.taxNo?.length===11?"👤 Bireysel":"🏢 Kurumsal"}
              </span>
            </TD>
            <TD s={{fontWeight:600}}>{c.company||"—"}</TD>
            <TD s={{color:G.ink2}}>{c.email}</TD>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{c.taxNo}</TD>
            <TD>{orders.filter(o=>o.customerId===c.id).length}</TD>
            <TD s={{color:c.balance>0?G.red:G.ink2,fontWeight:c.balance>0?700:400}}>{c.balance>0?fmt(c.balance):"—"}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{c.joined}</TD>
            <TD><Chip s={c.status}/></TD>
          </tr>
        ))}
      </Tbl>
    </div>
  );
}

function AInvoices() {
  const [invoices, setInvs] = useInvoices();
  const [orders]            = useOrders();
  const [f,setF]            = useState("all");
  const [addM,setAddM]      = useState(false);
  const [selI,setSelI]      = useState(null);
  const [payM,setPayM]      = useState(null);   // fatura ödeme modalı
  const [successM,setSuccessM] = useState(null); // ödeme sonrası başarı
  const [card,setCard]      = useState({no:"",exp:"",cvv:"",holder:"",inst:"1"});

  const rows = f==="all" ? invoices : invoices.filter(i=>i.status===f);

  const handlePay = () => {
    // İlgili siparişi bul
    const linked = orders.find(o=>o.id===payM.orderId);
    payInvoice(payM.id);
    setPayM(null);
    setCard({no:"",exp:"",cvv:"",holder:"",inst:"1"});
    setSuccessM({inv:payM, order:linked});
  };

  return (
    <div>
      {/* Yeni fatura modali */}
      {addM&&<Modal title="Yeni Fatura" onClose={()=>setAddM(false)}>
        <Fld label="Müşteri"><Sel><option>Seçin...</option>{CUSTOMERS.map(c=><option key={c.id}>{c.name}</option>)}</Sel></Fld>
        <Fld label="Hizmet"><Inp placeholder=""/></Fld>
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label="Tutar (₺)"><Inp type="number" placeholder="0"/></Fld>
          <Fld label="KDV (%)"><Inp type="number" defaultValue={18}/></Fld>
        </div>
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label="Fatura Tarihi"><Inp type="date"/></Fld>
          <Fld label="Vade Tarihi"><Inp type="date"/></Fld>
        </div>
        <Fld label="e-Fatura"><Sel><option>Evet (GİB)</option><option>Hayır</option></Sel></Fld>
        <div style={{display:"flex",gap:8,marginTop:8}}><Btn onClick={()=>setAddM(false)}>İptal</Btn><Btn variant="primary" onClick={()=>setAddM(false)}>Oluştur</Btn></div>
      </Modal>}

      {/* Fatura detay modali */}
      {selI&&<InvoiceModal inv={selI} onClose={()=>setSelI(null)}/>}

      {/* Ödeme modali */}
      {payM&&(
        <Modal title={`Ödeme Al — ${payM.id}`} onClose={()=>setPayM(null)} width={500}>
          {/* Fatura özeti */}
          <div style={{background:G.canvas,borderRadius:10,padding:14,marginBottom:18}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:10}}>
              <div>
                <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{payM.customer}</div>
                <div style={{fontSize:12,color:G.ink2}}>{payM.service}</div>
              </div>
              <Chip s={payM.status}/>
            </div>
            {[["Tutar (KDV hariç)",fmt(payM.amount)],["KDV (%18)",fmt(payM.tax)],["Toplam",fmt(payM.total)],["Vade",payM.due]].map(([l,v])=>(
              <div key={l} style={{display:"flex",justifyContent:"space-between",padding:"5px 0",borderTop:`1px solid ${G.border}`,fontSize:13}}>
                <span style={{color:G.ink2}}>{l}</span>
                <span style={{fontWeight:l==="Toplam"?800:500,color:l==="Toplam"?G.ink0:G.ink1,fontSize:l==="Toplam"?16:13}}>{v}</span>
              </div>
            ))}
            {/* İlgili askıdaki sipariş varsa uyarı */}
            {payM.orderId&&(()=>{
              const o=orders.find(x=>x.id===payM.orderId);
              if(!o||o.status!=="suspended") return null;
              return (
                <div style={{marginTop:10,background:G.amberL,border:`1px solid ${G.amber}40`,borderRadius:8,padding:"8px 12px",fontSize:12,color:G.amber,fontWeight:600,display:"flex",alignItems:"center",gap:6}}>
                  ⚠️ <span>Bu ödeme sonrası <strong>{o.product}</strong> hizmeti otomatik aktif edilecek ve yenileme tarihi uzatılacaktır.</span>
                </div>
              );
            })()}
          </div>

          {/* Kart bilgileri */}
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>Ödeme Bilgileri</div>
            <div style={{background:G.tealL,borderRadius:6,padding:"3px 10px",fontSize:11,color:G.teal,fontWeight:700}}>🔒 iyzico</div>
          </div>
          <Fld label="Kart Numarası">
            <Inp value={card.no} onChange={e=>setCard({...card,no:e.target.value})} placeholder="**** **** **** ****" style={{fontFamily:"'Courier New',monospace",letterSpacing:"2px"}}/>
          </Fld>
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <Fld label="Son Kullanma"><Inp value={card.exp} onChange={e=>setCard({...card,exp:e.target.value})} placeholder="MM/YY"/></Fld>
            <Fld label="CVV"><Inp value={card.cvv} onChange={e=>setCard({...card,cvv:e.target.value})} placeholder="***"/></Fld>
          </div>
          <Fld label="Kart İsmi"><Inp value={card.holder} onChange={e=>setCard({...card,holder:e.target.value})} placeholder="" style={{textTransform:"uppercase"}}/></Fld>
          <Fld label="Taksit">
            <Sel value={card.inst} onChange={e=>setCard({...card,inst:e.target.value})}>
              <option value="1">Tek çekim — {fmt(payM.total)}</option>
              <option value="3">3 Taksit — {fmt(payM.total/3)}/ay</option>
              <option value="6">6 Taksit — {fmt(payM.total/6)}/ay</option>
            </Sel>
          </Fld>
          <div style={{display:"flex",gap:8,marginTop:4}}>
            <Btn onClick={()=>setPayM(null)}>İptal</Btn>
            <button onClick={handlePay} disabled={!card.no||!card.exp||!card.cvv||!card.holder}
              style={{flex:1,padding:"11px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:14,fontWeight:800,fontFamily:"inherit",
                opacity:(!card.no||!card.exp||!card.cvv||!card.holder)?0.35:1,
                cursor:(!card.no||!card.exp||!card.cvv||!card.holder)?"not-allowed":"pointer",
                transition:"opacity .2s"}}>
              {(!card.no||!card.exp||!card.cvv||!card.holder)?"🔒 Kart bilgilerini doldurun":`🔒 Ödemeyi Al — ${fmt(payM.total)}`}
            </button>
          </div>
        </Modal>
      )}

      {/* Ödeme başarı modali */}
      {successM&&(
        <Modal title="" onClose={()=>setSuccessM(null)} width={440}>
          <div style={{textAlign:"center",padding:"8px 0 16px"}}>
            <div style={{width:56,height:56,background:G.greenL,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:24,margin:"0 auto 14px"}}>✓</div>
            <div style={{fontSize:20,fontWeight:900,color:G.ink0,marginBottom:6,letterSpacing:"-0.5px"}}>Ödeme Alındı</div>
            <div style={{fontSize:13,color:G.ink2,marginBottom:20}}>
              {successM.inv.customer} için <strong>{fmt(successM.inv.total)}</strong> tahsil edildi.
            </div>
            {successM.order&&successM.order.status!=="suspended"&&(
              <div style={{background:G.greenL,border:`1px solid #BBF7D0`,borderRadius:10,padding:14,textAlign:"left",marginBottom:16}}>
                <div style={{fontSize:12,fontWeight:700,color:G.green,marginBottom:8,textTransform:"uppercase",letterSpacing:"1px"}}>Hizmet Yenilendi</div>
                {[
                  ["Hizmet", successM.order.product],
                  ["Yeni Durum", "Aktif"],
                  ["Yeni Yenileme Tarihi", successM.order.renew||"—"],
                  ["Panel Kullanıcı", successM.order.pleskUser],
                ].map(([l,v])=>(
                  <div key={l} style={{display:"flex",justifyContent:"space-between",padding:"5px 0",borderBottom:`1px solid #D1FAE5`,fontSize:13}}>
                    <span style={{color:G.green}}>{l}</span>
                    <span style={{fontWeight:700,color:G.ink0}}>{v}</span>
                  </div>
                ))}
              </div>
            )}
            <Btn variant="primary" onClick={()=>setSuccessM(null)} style={{width:"100%",padding:"10px"}}>Tamam</Btn>
          </div>
        </Modal>
      )}

      <div style={{display:"flex",gap:8,marginBottom:14,flexWrap:"wrap",alignItems:"center"}}>
        {[["all","Tümü"],["paid","Ödendi"],["pending","Bekliyor"],["overdue","Gecikmiş"]].map(([v,l])=>(
          <Pill key={v} active={f===v} onClick={()=>setF(v)}>{l}
            {(v==="pending"||v==="overdue")&&(
              <span style={{marginLeft:5,background:v==="overdue"?G.red:G.amber,color:"#fff",borderRadius:10,fontSize:9,padding:"1px 5px",fontWeight:700}}>
                {invoices.filter(i=>i.status===v).length}
              </span>
            )}
          </Pill>
        ))}
        <Btn size="sm" variant="primary" onClick={()=>setAddM(true)} style={{marginLeft:"auto"}}>+ Fatura Oluştur</Btn>
      </div>

      <Tbl heads={["Fatura No","Müşteri","Hizmet","Tutar","Toplam","Vade","e-Fatura","Durum",""]}>
        {rows.map((inv,i)=>{
          const isPayable = inv.status==="pending"||inv.status==="overdue";
          const linkedOrder = orders.find(o=>o.id===inv.orderId);
          return (
            <tr key={i} style={{transition:"background .1s"}}
              onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
              onMouseLeave={e=>e.currentTarget.style.background=""}>
              <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.accent,fontWeight:700,cursor:"pointer"}} onClick={()=>setSelI(inv)}>{inv.id}</TD>
              <TD s={{fontWeight:600}}>{inv.customer}</TD>
              <TD s={{color:G.ink2}}>{inv.service}</TD>
              <TD>{fmt(inv.amount)}</TD>
              <TD s={{fontWeight:800}}>{fmt(inv.total)}</TD>
              <TD s={{color:inv.status==="overdue"?G.red:G.ink2,fontSize:12,fontWeight:inv.status==="overdue"?700:400}}>{inv.due}</TD>
              <TD>{inv.efatura?<span style={{background:G.tealL,color:G.teal,fontSize:11,padding:"2px 8px",borderRadius:6,fontWeight:600}}>GİB ✓</span>:<span style={{color:G.ink3,fontSize:12}}>—</span>}</TD>
              <TD>
                <div style={{display:"flex",alignItems:"center",gap:6}}>
                  <Chip s={inv.status}/>
                  {linkedOrder?.status==="suspended"&&(
                    <span style={{fontSize:10,background:G.redL,color:G.red,padding:"1px 6px",borderRadius:5,fontWeight:600}}>Askıda</span>
                  )}
                </div>
              </TD>
              <TD>
                {isPayable
                  ? <button onClick={()=>setPayM(inv)} style={{padding:"4px 12px",background:inv.status==="overdue"?G.red:G.ink0,color:"#fff",border:"none",borderRadius:7,fontSize:11,fontWeight:700,cursor:"pointer",fontFamily:"inherit",whiteSpace:"nowrap"}}>
                      💳 Ödeme Al
                    </button>
                  : <Btn size="sm" onClick={()=>setSelI(inv)}>Detay</Btn>
                }
              </TD>
            </tr>
          );
        })}
      </Tbl>
      <div style={{marginTop:8,fontSize:11,color:G.ink2}}>Fatura no'ya tıklayarak detayları, 💳 butonu ile ödeme alabilirsiniz.</div>
    </div>
  );
}

function AOrders() {
  const [pm,setPm]           = useState(null);
  const [addM,setAddM]       = useState(false);
  const [servers]            = useServers();
  const [orders, setOrds]    = useOrders();
  const [invoices, setInvs]  = useInvoices();
  const [prodList]           = useState(PROD_INIT);

  // Yeni sipariş formu
  const emptyOrder = {
    customerId:"", product:"", productId:"",
    serverId:"", pleskUser:"", ip:"",
    disk:"", bw:"", cpu:"", ram:"",
    start: new Date().toISOString().slice(0,10),
    renew:"",
    price:"", period:"yıl",
    status:"active",
    domain:"",
    createInvoice: true,
    notes:"",
  };
  const [form, setForm] = useState(emptyOrder);
  const [step, setStep] = useState(1); // 1=müşteri+ürün, 2=sunucu+detay, 3=onay

  const selCustomer = CUSTOMERS.find(c=>c.id===Number(form.customerId));
  const selProduct  = prodList.find(p=>p.id===form.productId);
  const selServer   = servers.find(s=>s.id===form.serverId);
  const isCp        = selServer?.type==="cpanel";

  // Ürün seçilince ilgili alanları doldur
  const handleProductSelect = (productId) => {
    const p = prodList.find(x=>x.id===productId);
    if(!p) { setForm(f=>({...f,productId:"",product:"",disk:"",bw:"",cpu:"",ram:"",price:"",serverId:""})); return; }
    const startDate = form.start || new Date().toISOString().slice(0,10);
    const renewDate = new Date(startDate);
    renewDate.setFullYear(renewDate.getFullYear()+1);
    setForm(f=>({...f,
      productId: p.id,
      product:   p.name,
      disk:      p.disk||"",
      bw:        p.bw||"",
      cpu:       p.cpu||"",
      ram:       p.ram||"",
      price:     String(p.price),
      period:    p.period||"yıl",
      serverId:  p.serverId||"",
      renew:     renewDate.toISOString().slice(0,10),
    }));
  };

  // Müşteri adından Plesk/cPanel kullanıcı adı otomatik üret
  const autoUser = (name) => {
    if(!name) return "";
    return slug(name).replace(/-/g,"_").slice(0,16);
  };

  const handleSave = () => {
    const ordId = "ORD-"+Math.floor(1000+Math.random()*9000);
    const now   = new Date().toISOString().slice(0,10);
    const newOrder = {
      id:         ordId,
      customerId: Number(form.customerId),
      customer:   selCustomer?.name||"",
      product:    form.product,
      categoryId: selProduct?.categoryId||"hosting",
      status:     form.status,
      pleskUser:  form.pleskUser || autoUser(selCustomer?.name||""),
      ip:         form.ip||"—",
      disk:       form.disk||"—",
      bw:         form.bw||"—",
      cpu:        form.cpu||"",
      ram:        form.ram||"",
      start:      form.start,
      renew:      form.renew,
      price:      Number(form.price),
      period:     form.period,
      serverId:   form.serverId||"",
      domain:     form.domain||"",
      notes:      form.notes||"",
    };
    setOrds(prev=>[newOrder,...prev]);

    // İsteğe bağlı fatura oluştur
    if(form.createInvoice && form.price) {
      const amount = Number(form.price);
      const tax    = Math.round(amount * 0.18 * 100)/100;
      const invId  = "INV-"+new Date().getFullYear()+"-"+Math.floor(1000+Math.random()*9000);
      const due    = new Date(form.start);
      due.setDate(due.getDate()+7);
      setInvs(prev=>[{
        id:         invId,
        customerId: Number(form.customerId),
        customer:   selCustomer?.name||"",
        amount,
        tax,
        total:      amount+tax,
        status:     "pending",
        date:       form.start,
        due:        due.toISOString().slice(0,10),
        service:    form.product,
        efatura:    false,
        orderId:    ordId,
      },...prev]);
    }

    setAddM(false);
    setForm(emptyOrder);
    setStep(1);
  };

  const getServer = (o) => servers.find(s=>s.id===o.serverId)||null;

  // ── Yeni sipariş modal içeriği ──
  const OrderModal = () => (
    <Modal title="Yeni Sipariş Oluştur" onClose={()=>{setAddM(false);setForm(emptyOrder);setStep(1);}} width={620}>

      {/* Step indicator */}
      <div style={{display:"flex",gap:0,marginBottom:22}}>
        {[{n:1,l:"Müşteri & Ürün"},{n:2,l:"Sunucu & Detay"},{n:3,l:"Özet & Onayla"}].map((s,i,arr)=>(
          <div key={s.n} style={{display:"flex",alignItems:"center",flex:1}}>
            <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:4,flex:1}}>
              <div style={{width:28,height:28,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,
                background:step>s.n?G.green:step===s.n?G.ink0:"transparent",
                color:step>=s.n?"#fff":G.ink2,
                border:`2px solid ${step>s.n?G.green:step===s.n?G.ink0:G.border2}`,
                transition:"all .2s"}}>
                {step>s.n?"✓":s.n}
              </div>
              <div style={{fontSize:10,fontWeight:step===s.n?700:400,color:step===s.n?G.ink0:step>s.n?G.green:G.ink2,textAlign:"center"}}>{s.l}</div>
            </div>
            {i<arr.length-1&&<div style={{height:2,width:24,background:step>s.n+1?G.green:G.border,marginBottom:14}}/>}
          </div>
        ))}
      </div>

      {/* ── Adım 1: Müşteri & Ürün ── */}
      {step===1&&(
        <div>
          <Fld label="Müşteri *">
            <Sel value={form.customerId} onChange={e=>setForm(f=>({...f,customerId:e.target.value}))}>
              <option value="">Müşteri seçin...</option>
              {CUSTOMERS.map(c=>(
                <option key={c.id} value={c.id}>{c.name} — {c.company}</option>
              ))}
            </Sel>
            {selCustomer&&(
              <div style={{marginTop:6,padding:"8px 12px",background:G.accentL,borderRadius:7,fontSize:12,color:G.accent,display:"flex",gap:12}}>
                <span>📧 {selCustomer.email}</span>
                <span>📱 {selCustomer.phone}</span>
              </div>
            )}
          </Fld>

          <Fld label="Ürün / Hizmet *">
            <Sel value={form.productId} onChange={e=>handleProductSelect(e.target.value)}>
              <option value="">Ürün seçin...</option>
              {CATS.map(cat=>{
                const catProds = prodList.filter(p=>p.active&&p.categoryId===cat.id);
                if(!catProds.length) return null;
                return (
                  <optgroup key={cat.id} label={`${cat.icon} ${cat.label}`}>
                    {catProds.map(p=>(
                      <option key={p.id} value={p.id}>{p.name} — {fmt(p.price)}/{p.period}</option>
                    ))}
                  </optgroup>
                );
              })}
            </Sel>
            {selProduct&&(
              <div style={{marginTop:6,padding:"8px 12px",background:G.canvas,borderRadius:7,fontSize:12,color:G.ink2,display:"flex",gap:12,flexWrap:"wrap"}}>
                {selProduct.disk&&<span>💾 {selProduct.disk}</span>}
                {selProduct.bw&&<span>📡 {selProduct.bw}</span>}
                {selProduct.cpu&&<span>⚡ {selProduct.cpu}</span>}
                {selProduct.ram&&<span>🧠 {selProduct.ram}</span>}
              </div>
            )}
          </Fld>

          {/* Fiyat & dönem */}
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <Fld label="Fiyat (₺) *">
              <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
                <span style={{padding:"0 10px",fontSize:13,color:G.ink2,background:G.canvas,borderRight:`1px solid ${G.border}`}}>₺</span>
                <input type="number" min="0" value={form.price} onChange={e=>setForm(f=>({...f,price:e.target.value}))}
                  onKeyDown={e=>!/[\d.]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
                  style={{flex:1,padding:"8px 10px",border:"none",outline:"none",fontSize:13,background:"transparent",fontFamily:"inherit"}} placeholder="0"/>
              </div>
            </Fld>
            <Fld label="Dönem">
              <Sel value={form.period} onChange={e=>setForm(f=>({...f,period:e.target.value}))}>
                {["ay","yıl","ay/kullanıcı","tek seferlik"].map(p=><option key={p}>{p}</option>)}
              </Sel>
            </Fld>
          </div>

          {/* Domain */}
          {selProduct&&["hosting","vps","dedicated","email"].includes(selProduct.categoryId)&&(
            <Fld label="Alan Adı (Domain)">
              <div style={{position:"relative"}}>
                <Inp value={form.domain} onChange={e=>setForm(f=>({...f,domain:e.target.value.toLowerCase()}))}
                  placeholder="" style={{paddingLeft:34}}/>
                <span style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",fontSize:13}}>🌐</span>
              </div>
              <div style={{fontSize:11,color:G.ink2,marginTop:4}}>Boş bırakılırsa müşteri daha sonra tanımlayabilir.</div>
            </Fld>
          )}

          <div style={{display:"flex",gap:8,marginTop:8}}>
            <Btn onClick={()=>{setAddM(false);setForm(emptyOrder);setStep(1);}}>İptal</Btn>
            <Btn variant="primary" onClick={()=>setStep(2)} disabled={!form.customerId||!form.productId||!form.price} style={{flex:1}}>
              Devam: Sunucu & Detay →
            </Btn>
          </div>
        </div>
      )}

      {/* ── Adım 2: Sunucu & Detay ── */}
      {step===2&&(
        <div>
          {/* Sunucu seçimi */}
          <Fld label="Sunucu / Kontrol Paneli">
            <Sel value={form.serverId} onChange={e=>setForm(f=>({...f,serverId:e.target.value}))}>
              <option value="">— Sunucu gerekmez (Domain, SSL vb.) —</option>
              {servers.filter(s=>s.status==="active").map(s=>(
                <option key={s.id} value={s.id}>
                  {s.type==="cpanel"?"⬢":"⬡"} {s.name} · {s.type==="cpanel"?"cPanel":"Plesk"} · {s.location} · {s.ip}
                </option>
              ))}
            </Sel>
            {selServer&&(
              <div style={{marginTop:6,padding:"8px 12px",background:isCp?G.greenL:G.tealL,borderRadius:7,fontSize:11,color:isCp?G.green:G.teal,fontWeight:600}}>
                {isCp?"⬢ cPanel/WHM":"⬡ Plesk"} · {selServer.version} · {selServer.url}
              </div>
            )}
          </Fld>

          {/* Panel kullanıcı adı */}
          {form.serverId&&(
            <Fld label={isCp?"cPanel Kullanıcı Adı":"Plesk Kullanıcı Adı"}>
              <div style={{display:"flex",gap:8}}>
                <Inp value={form.pleskUser} onChange={e=>setForm(f=>({...f,pleskUser:e.target.value.toLowerCase().replace(/[^a-z0-9_]/g,"")}))}
                  placeholder={autoUser(selCustomer?.name||"kullanici")}
                  style={{fontFamily:"'Courier New',monospace"}}/>
                <Btn size="sm" variant="outline" onClick={()=>setForm(f=>({...f,pleskUser:autoUser(selCustomer?.name||"")}))}>
                  Otomatik
                </Btn>
              </div>
              <div style={{fontSize:11,color:G.ink2,marginTop:4}}>Sadece harf, rakam ve alt çizgi. Max 16 karakter.</div>
            </Fld>
          )}

          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            {/* IP */}
            <Fld label="IP Adresi">
              <Inp value={form.ip} onChange={e=>setForm(f=>({...f,ip:e.target.value}))}
                placeholder={selServer?.ip||"185.45.12.xxx"} style={{fontFamily:"'Courier New',monospace"}}/>
            </Fld>
            {/* Başlangıç tarihi */}
            <Fld label="Başlangıç Tarihi *">
              <Inp type="date" value={form.start} onChange={e=>{
                const sd=e.target.value;
                const rd=new Date(sd); rd.setFullYear(rd.getFullYear()+1);
                setForm(f=>({...f,start:sd,renew:rd.toISOString().slice(0,10)}));
              }}/>
            </Fld>
            {/* Yenileme tarihi */}
            <Fld label="Yenileme Tarihi">
              <Inp type="date" value={form.renew} onChange={e=>setForm(f=>({...f,renew:e.target.value}))}/>
            </Fld>
            {/* Durum */}
            <Fld label="Sipariş Durumu">
              <Sel value={form.status} onChange={e=>setForm(f=>({...f,status:e.target.value}))}>
                <option value="active">Aktif</option>
                <option value="pending">Beklemede</option>
                <option value="suspended">Askıda</option>
              </Sel>
            </Fld>
          </div>

          {/* Özel disk/bw override */}
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <Fld label="Disk Kapasitesi"><Inp value={form.disk} onChange={e=>setForm(f=>({...f,disk:e.target.value}))} placeholder="20 GB SSD"/></Fld>
            <Fld label="Bant Genişliği"><Inp value={form.bw} onChange={e=>setForm(f=>({...f,bw:e.target.value}))} placeholder="200 GB"/></Fld>
          </div>

          {/* Notlar */}
          <Fld label="Notlar (İç)">
            <Txtarea value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))}
              placeholder="Sipariş hakkında iç notlar..." style={{minHeight:56}}/>
          </Fld>

          <div style={{display:"flex",gap:8,marginTop:8}}>
            <Btn onClick={()=>setStep(1)}>← Geri</Btn>
            <Btn variant="primary" onClick={()=>setStep(3)} style={{flex:1}}>Devam: Özet & Onayla →</Btn>
          </div>
        </div>
      )}

      {/* ── Adım 3: Özet & Onay ── */}
      {step===3&&(
        <div>
          {/* Sipariş özeti */}
          <div style={{background:G.canvas,borderRadius:10,padding:16,marginBottom:16}}>
            <div style={{fontSize:12,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Sipariş Özeti</div>
            {[
              ["Müşteri",    `${selCustomer?.name} — ${selCustomer?.company}`],
              ["Ürün",       form.product],
              ["Fiyat",      `${fmt(Number(form.price))} / ${form.period}`],
              form.domain?["Alan Adı", form.domain]:null,
              selServer?["Sunucu", `${selServer.name} (${selServer.type==="cpanel"?"cPanel":"Plesk"})`]:null,
              form.pleskUser?["Panel Kullanıcı", form.pleskUser]:null,
              form.ip?["IP", form.ip]:null,
              form.disk?["Disk", form.disk]:null,
              form.bw?["Bant Genişliği", form.bw]:null,
              ["Başlangıç",  form.start],
              ["Yenileme",   form.renew],
              ["Durum",      form.status==="active"?"Aktif":form.status==="pending"?"Beklemede":"Askıda"],
            ].filter(Boolean).map(([l,v])=>(
              <div key={l} style={{display:"flex",justifyContent:"space-between",padding:"7px 0",borderBottom:`1px solid ${G.border}`,fontSize:13}}>
                <span style={{color:G.ink2}}>{l}</span>
                <span style={{fontWeight:600,color:G.ink0,fontFamily:["IP","Panel Kullanıcı"].includes(l)?"'Courier New',monospace":"inherit"}}>{v}</span>
              </div>
            ))}
          </div>

          {/* Fatura oluştur seçeneği */}
          <label style={{display:"flex",alignItems:"flex-start",gap:10,cursor:"pointer",padding:"12px 14px",background:form.createInvoice?G.accentL:G.canvas,border:`1px solid ${form.createInvoice?G.accent:G.border}`,borderRadius:10,marginBottom:16,transition:"all .15s"}}>
            <div onClick={()=>setForm(f=>({...f,createInvoice:!f.createInvoice}))}
              style={{width:18,height:18,minWidth:18,borderRadius:5,border:`2px solid ${form.createInvoice?G.accent:G.border2}`,background:form.createInvoice?G.accent:"transparent",display:"flex",alignItems:"center",justifyContent:"center",transition:"all .15s",marginTop:1}}>
              {form.createInvoice&&<span style={{color:"#fff",fontSize:11,fontWeight:900}}>✓</span>}
            </div>
            <div>
              <div style={{fontSize:13,fontWeight:700,color:form.createInvoice?G.accent:G.ink0}}>Otomatik Fatura Oluştur</div>
              <div style={{fontSize:11,color:G.ink2,marginTop:2}}>
                Sipariş ile birlikte <strong>{fmt(Number(form.price))}</strong> tutarında (KDV hariç) fatura oluşturulur ve müşteriye gönderilir.
                Toplam: <strong>{fmt(Number(form.price)*1.18)}</strong> (KDV dahil)
              </div>
            </div>
          </label>

          <div style={{display:"flex",gap:8}}>
            <Btn onClick={()=>setStep(2)}>← Geri</Btn>
            <button onClick={handleSave}
              style={{flex:1,padding:"12px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:14,fontWeight:800,cursor:"pointer",fontFamily:"inherit"}}>
              ✓ Siparişi Oluştur{form.createInvoice?" & Fatura Kes":""}
            </button>
          </div>
        </div>
      )}
    </Modal>
  );

  return (
    <div>
      {addM&&<OrderModal/>}
      {pm&&(()=>{
        const srv=getServer(pm);
        const isCp=srv?.type==="cpanel";
        return (
          <Modal title={`Panel Detay — ${pm.id}`} onClose={()=>setPm(null)}>
            {srv&&(
              <div style={{background:isCp?G.greenL:G.tealL,borderRadius:8,padding:"10px 14px",marginBottom:14,fontSize:12}}>
                <div style={{fontWeight:700,color:isCp?G.green:G.teal,marginBottom:2}}>
                  {isCp?"⬢ cPanel/WHM":"⬡ Plesk"} — {srv.name}
                </div>
                <div style={{color:G.ink2,fontFamily:"'Courier New',monospace",fontSize:11}}>{srv.url} · {srv.ip}</div>
              </div>
            )}
            <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:14}}>
              {[[isCp?"cPanel Kullanıcı":"Plesk Kullanıcı",pm.pleskUser],["IP",pm.ip],["Disk",pm.disk],["BW",pm.bw],["Başlangıç",pm.start],["Yenileme",pm.renew]].map(([l,v])=>(
                <div key={l} style={{background:G.canvas,borderRadius:8,padding:10}}>
                  <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:2}}>{l}</div>
                  <div style={{fontSize:13,fontWeight:700,color:G.ink0,fontFamily:["IP",isCp?"cPanel Kullanıcı":"Plesk Kullanıcı"].includes(l)?"'Courier New',monospace":"inherit"}}>{v||"—"}</div>
                </div>
              ))}
            </div>
            <div style={{display:"flex",gap:8}}>
              <Btn size="sm" variant="teal">{isCp?"⬢ cPanel Aç":"⬡ Plesk Aç"}</Btn>
              <Btn size="sm">Yeniden Başlat</Btn>
              <Btn size="sm" variant="danger">Askıya Al</Btn>
              <Btn size="sm" onClick={()=>setPm(null)} style={{marginLeft:"auto"}}>Kapat</Btn>
            </div>
          </Modal>
        );
      })()}

      {/* Metrikler */}
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:14}}>
        <Metric label="Toplam Sipariş" value={orders.length} icon="📦"/>
        <Metric label="Aktif" value={orders.filter(o=>o.status==="active").length} accent={G.green} icon="✓"/>
        <Metric label="Beklemede" value={orders.filter(o=>o.status==="pending").length} accent={G.amber} icon="⏳"/>
        <Metric label="Askıda" value={orders.filter(o=>o.status==="suspended").length} accent={G.red} icon="⚠"/>
      </div>

      <div style={{display:"flex",marginBottom:14}}>
        <Btn size="sm" variant="primary" onClick={()=>{setForm(emptyOrder);setStep(1);setAddM(true);}} style={{marginLeft:"auto"}}>
          + Yeni Sipariş Oluştur
        </Btn>
      </div>

      <Tbl heads={["Sipariş","Müşteri","Ürün","Panel","Kullanıcı","IP","Disk","BW","Yenileme","Fiyat","Durum",""]}>
        {orders.map((o,i)=>{
          const srv=getServer(o);
          const isCp=srv?.type==="cpanel";
          return (
            <tr key={i} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
              <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.id}</TD>
              <TD s={{fontWeight:600}}>{o.customer}</TD>
              <TD>
                <div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{o.product}</div>
                {o.domain&&<div style={{fontSize:11,color:G.teal,fontFamily:"'Courier New',monospace"}}>🌐 {o.domain}</div>}
              </TD>
              <TD>
                {srv
                  ? <span style={{background:isCp?G.greenL:G.tealL,color:isCp?G.green:G.teal,fontSize:11,fontWeight:600,padding:"2px 7px",borderRadius:5,whiteSpace:"nowrap"}}>
                      {isCp?"⬢ cPanel":"⬡ Plesk"}
                    </span>
                  : <span style={{color:G.ink3,fontSize:12}}>—</span>
                }
              </TD>
              <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.pleskUser||"—"}</TD>
              <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{o.ip||"—"}</TD>
              <TD s={{color:G.ink2,fontSize:12}}>{o.disk||"—"}</TD>
              <TD s={{color:G.ink2,fontSize:12}}>{o.bw||"—"}</TD>
              <TD s={{fontSize:12,color:G.ink2}}>{o.renew||"—"}</TD>
              <TD s={{fontWeight:700}}>{o.price?fmtK(o.price):"—"}</TD>
              <TD><Chip s={o.status}/></TD>
              <TD>
                {srv&&<Btn size="sm" onClick={()=>setPm(o)}>{isCp?"cPanel":"Plesk"}</Btn>}
              </TD>
            </tr>
          );
        })}
        {orders.length===0&&<tr><td colSpan={12} style={{padding:32,textAlign:"center",color:G.ink2}}>Henüz sipariş yok.</td></tr>}
      </Tbl>
    </div>
  );
}

// ── GLOBAL SERVER STATE (Plesk + cPanel) ────────────────────────────────────
let _servers = [
  {id:"srv1", name:"Ana Hosting (TR-1)", type:"plesk",  url:"https://server1.hostpanel.com:8443",  ip:"185.45.12.1",  apiKey:"pk_live_abc123", version:"Plesk Obsidian 18.0",  location:"İstanbul", status:"active",  accounts:3, disk:"500 GB", notes:"Ana shared hosting sunucusu"},
  {id:"srv2", name:"VPS Sunucu (TR-2)",  type:"plesk",  url:"https://server2.hostpanel.com:8443",  ip:"185.45.13.1",  apiKey:"pk_live_def456", version:"Plesk Obsidian 18.0",  location:"Ankara",   status:"active",  accounts:2, disk:"1 TB",   notes:"VPS ve dedike müşteriler"},
  {id:"srv3", name:"cPanel Cluster (TR-3)", type:"cpanel", url:"https://cpanel1.hostpanel.com:2087", ip:"185.45.14.1",  apiKey:"root:WHM_TOKEN_xyz", version:"cPanel & WHM 110", location:"İzmir",  status:"active",  accounts:5, disk:"2 TB",   notes:"Shared hosting - cPanel WHM"},
];
let _serverListeners = [];
const setServers = (fn) => { _servers = typeof fn==="function"?fn(_servers):fn; _serverListeners.forEach(cb=>cb(_servers)); };
const useServers = () => {
  const [servers, setLocal] = useState(_servers);
  useEffect(()=>{ _serverListeners.push(setLocal); return ()=>{ _serverListeners=_serverListeners.filter(x=>x!==setLocal); }; },[]);
  return [servers, setServers];
};
const getServers = () => _servers;
// React context yerine module-level state — bu app için yeterli
let _depts = [
  {id:"d1", name:"Teknik Destek",   email:"teknik@hostpanel.com",   color:G.accent,  active:true},
  {id:"d2", name:"Faturalandırma",  email:"fatura@hostpanel.com",   color:G.green,   active:true},
  {id:"d3", name:"Domain",          email:"domain@hostpanel.com",   color:G.purple,  active:true},
  {id:"d4", name:"Satış",           email:"satis@hostpanel.com",    color:G.amber,   active:true},
  {id:"d5", name:"Genel",           email:"destek@hostpanel.com",   color:G.ink2,    active:true},
];
let _deptListeners = [];
const getDepts   = () => _depts;
const setDepts   = (fn) => { _depts = typeof fn==="function"?fn(_depts):fn; _deptListeners.forEach(cb=>cb(_depts)); };
const useDepts   = () => {
  const [depts, setLocal] = useState(_depts);
  useEffect(()=>{ _deptListeners.push(setLocal); return ()=>{ _deptListeners=_deptListeners.filter(x=>x!==setLocal); }; },[]);
  return [depts, setDepts];
};

/* ── PLESK SUNUCU YÖNETİMİ ─────────────────────────────────────────────────── */
/* ── SUNUCU YÖNETİMİ (Plesk + cPanel) ─────────────────────────────────────── */
function AServers() {
  const [servers, setSrv] = useServers();
  const [panelFilter, setPanelFilter] = useState("all"); // all | plesk | cpanel
  const [addM, setAddM] = useState(false);
  const [editM, setEditM] = useState(null);
  const [detailM, setDetailM] = useState(null);
  const [confirmDel, setConfirmDel] = useState(null);

  const emptyF = {name:"",type:"plesk",url:"",ip:"",apiKey:"",version:"",location:"",disk:"",notes:"",status:"active"};
  const [form, setForm] = useState(emptyF);

  const openAdd  = () => { setForm(emptyF); setAddM(true); };
  const openEdit = (s) => { setForm({...s}); setEditM(s); };
  const save = () => {
    if(editM) setSrv(prev=>prev.map(s=>s.id===editM.id?{...form,id:s.id,accounts:s.accounts}:s));
    else      setSrv(prev=>[...prev,{...form,id:"srv"+uid(),accounts:0}]);
    setAddM(false); setEditM(null);
  };

  const PANEL_TYPES = {
    plesk:  { label:"Plesk",      icon:"⬡", color:G.teal,   colorL:G.tealL,
               versions:["Plesk Obsidian 18.0","Plesk Obsidian 17.8","Plesk Onyx 17.5","Plesk 12.5"],
               apiHint:"Plesk Panel → Araçlar & Ayarlar → API Erişimi",
               apiExample:"POST {url}/api/v2/domains\nAuthorization: Basic {api-key}" },
    cpanel: { label:"cPanel/WHM", icon:"⬢", color:G.green,  colorL:G.greenL,
               versions:["cPanel & WHM 110","cPanel & WHM 108","cPanel & WHM 106"],
               apiHint:"WHM → Development → Manage API Tokens",
               apiExample:"GET {url}:2087/json-api/listaccts\nAuthorization: whm root:{token}" },
  };

  const filtered = panelFilter==="all" ? servers : servers.filter(s=>s.type===panelFilter);
  const statusColor = {active:G.green, maintenance:G.amber, inactive:G.ink2};

  const ServerForm = () => {
    const pt = PANEL_TYPES[form.type]||PANEL_TYPES.plesk;
    return (
      <div>
        {/* Panel Tipi toggle */}
        <div style={{marginBottom:16}}>
          <div style={{fontSize:11,fontWeight:700,color:G.ink2,letterSpacing:".6px",textTransform:"uppercase",marginBottom:8}}>Panel Tipi *</div>
          <div style={{display:"flex",gap:8}}>
            {Object.entries(PANEL_TYPES).map(([key,pt])=>(
              <button key={key} onClick={()=>setForm(f=>({...f,type:key,version:""}))}
                style={{flex:1,padding:"10px 14px",borderRadius:10,border:`2px solid ${form.type===key?pt.color:G.border}`,background:form.type===key?pt.colorL:"transparent",cursor:"pointer",transition:"all .15s"}}>
                <div style={{fontSize:18,marginBottom:4}}>{pt.icon}</div>
                <div style={{fontSize:13,fontWeight:700,color:form.type===key?pt.color:G.ink2}}>{pt.label}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label="Sunucu Adı *"><Inp value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder={form.type==="cpanel"?"cPanel Cluster (TR-1)":"Ana Plesk (TR-1)"}/></Fld>
          <Fld label="Konum"><Inp value={form.location||""} onChange={e=>setForm({...form,location:e.target.value})} placeholder="İstanbul"/></Fld>
          <Fld label={form.type==="cpanel"?"WHM Panel URL *":"Plesk Panel URL *"}>
            <Inp value={form.url} onChange={e=>setForm({...form,url:e.target.value})}
              placeholder={form.type==="cpanel"?"https://server.domain.com:2087":"https://server.domain.com:8443"}/>
          </Fld>
          <Fld label="Sunucu IP"><Inp value={form.ip||""} onChange={e=>setForm({...form,ip:e.target.value})} placeholder="185.45.12.1"/></Fld>
          <Fld label={form.type==="cpanel"?"WHM API Token *":"Plesk API Key *"}>
            <Inp type="password" value={form.apiKey} onChange={e=>setForm({...form,apiKey:e.target.value})}
              placeholder={form.type==="cpanel"?"WHM_TOKEN_xxxxxxxx":"pk_live_xxxxxxxx"}/>
          </Fld>
          <Fld label="Panel Versiyonu">
            <Sel value={form.version||""} onChange={e=>setForm({...form,version:e.target.value})}>
              <option value="">Seçin...</option>
              {pt.versions.map(v=><option key={v}>{v}</option>)}
            </Sel>
          </Fld>
          <Fld label="Disk Kapasitesi"><Inp value={form.disk||""} onChange={e=>setForm({...form,disk:e.target.value})} placeholder="500 GB"/></Fld>
          <Fld label="Durum">
            <Sel value={form.status||"active"} onChange={e=>setForm({...form,status:e.target.value})}>
              <option value="active">Aktif</option>
              <option value="maintenance">Bakımda</option>
              <option value="inactive">Pasif</option>
            </Sel>
          </Fld>
        </div>
        <Fld label="Notlar">
          <Txtarea value={form.notes||""} onChange={e=>setForm({...form,notes:e.target.value})} placeholder="Bu sunucu hakkında notlar..." style={{minHeight:56}}/>
        </Fld>
        {/* API hint */}
        <div style={{background:G.canvas,borderRadius:8,padding:"10px 14px",fontSize:12,color:G.ink2,marginBottom:14,border:`1px solid ${G.border}`}}>
          <div style={{fontWeight:600,color:G.ink1,marginBottom:4}}>API Anahtarı Nasıl Alınır?</div>
          {pt.apiHint}
        </div>
        <div style={{display:"flex",gap:8}}>
          <Btn onClick={()=>{setAddM(false);setEditM(null);}}>İptal</Btn>
          <Btn variant="primary" onClick={save} disabled={!form.name||!form.url||!form.apiKey}>Kaydet</Btn>
        </div>
      </div>
    );
  };

  return (
    <div>
      {addM   && <Modal title="Yeni Sunucu Ekle" onClose={()=>setAddM(false)} width={640}><ServerForm/></Modal>}
      {editM  && <Modal title={`Düzenle: ${editM.name}`} onClose={()=>setEditM(null)} width={640}><ServerForm/></Modal>}
      {confirmDel && (
        <Modal title="Sunucuyu Sil" onClose={()=>setConfirmDel(null)} width={380}>
          <p style={{color:G.ink1,fontSize:14,marginBottom:6}}><strong>{confirmDel.name}</strong> sunucusunu silmek istediğinizden emin misiniz?</p>
          <p style={{color:G.red,fontSize:13,marginBottom:20}}>⚠️ Bu sunucuya atanmış ürünler panelsiz kalabilir.</p>
          <div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
            <Btn onClick={()=>setConfirmDel(null)}>İptal</Btn>
            <Btn variant="danger" onClick={()=>{setSrv(p=>p.filter(s=>s.id!==confirmDel.id));setConfirmDel(null);}}>Evet, Sil</Btn>
          </div>
        </Modal>
      )}
      {detailM && (()=>{
        const pt = PANEL_TYPES[detailM.type]||PANEL_TYPES.plesk;
        const assignedProds = _servers ? [] : []; // products using this server shown from global
        return (
          <Modal title={detailM.name} onClose={()=>setDetailM(null)} width={600}>
            <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:16}}>
              <span style={{background:pt.colorL,color:pt.color,fontSize:12,fontWeight:700,padding:"3px 10px",borderRadius:6}}>{pt.icon} {pt.label}</span>
              <Chip s={detailM.status}/>
              <div style={{display:"flex",gap:6,marginLeft:"auto"}}>
                <Btn size="sm" variant="teal" onClick={()=>window.open(detailM.url,"_blank")}>🔗 Paneli Aç</Btn>
                <Btn size="sm" onClick={()=>{setDetailM(null);openEdit(detailM);}}>✏️ Düzenle</Btn>
              </div>
            </div>
            <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginBottom:14}}>
              {[["IP Adresi",detailM.ip||"—"],["Konum",detailM.location||"—"],["Versiyon",detailM.version||"—"],["Disk",detailM.disk||"—"],["Aktif Hesap",detailM.accounts+" hesap"],["API Key",detailM.apiKey.slice(0,10)+"•••"]].map(([l,v])=>(
                <div key={l} style={{background:G.canvas,borderRadius:8,padding:"10px 12px"}}>
                  <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>{l}</div>
                  <div style={{fontSize:13,fontWeight:700,color:G.ink0,fontFamily:["IP Adresi","API Key"].includes(l)?"'Courier New',monospace":"inherit"}}>{v}</div>
                </div>
              ))}
            </div>
            {detailM.notes&&<div style={{background:G.canvas,borderRadius:8,padding:"10px 12px",fontSize:13,color:G.ink1,marginBottom:14}}>📝 {detailM.notes}</div>}
            <div style={{borderTop:`1px solid ${G.border}`,paddingTop:12}}>
              <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:8}}>API Bilgisi</div>
              <div style={{background:G.canvas,borderRadius:8,padding:"8px 12px",fontFamily:"'Courier New',monospace",fontSize:11,color:G.ink1,border:`1px solid ${G.border}`,whiteSpace:"pre"}}>
                {pt.apiExample.replace("{url}",detailM.url)}
              </div>
            </div>
          </Modal>
        );
      })()}

      {/* Metrics */}
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:18}}>
        <Metric label="Toplam Sunucu" value={servers.length} icon="🖥️"/>
        <Metric label="Plesk" value={servers.filter(s=>s.type==="plesk").length} accent={G.teal} icon="⬡"/>
        <Metric label="cPanel/WHM" value={servers.filter(s=>s.type==="cpanel").length} accent={G.green} icon="⬢"/>
        <Metric label="Toplam Hesap" value={servers.reduce((s,x)=>s+x.accounts,0)} icon="👤" accent={G.green}/>
      </div>

      {/* Filter + Add */}
      <div style={{display:"flex",gap:8,marginBottom:16,alignItems:"center"}}>
        <Pill active={panelFilter==="all"} onClick={()=>setPanelFilter("all")}>Tümü ({servers.length})</Pill>
        <Pill active={panelFilter==="plesk"} color={G.teal} onClick={()=>setPanelFilter("plesk")}>⬡ Plesk ({servers.filter(s=>s.type==="plesk").length})</Pill>
        <Pill active={panelFilter==="cpanel"} color={G.green} onClick={()=>setPanelFilter("cpanel")}>⬢ cPanel ({servers.filter(s=>s.type==="cpanel").length})</Pill>
        <Btn size="sm" variant="primary" onClick={openAdd} style={{marginLeft:"auto"}}>+ Sunucu Ekle</Btn>
      </div>

      {/* Server cards */}
      <div style={{display:"flex",flexDirection:"column",gap:12}}>
        {filtered.map((s)=>{
          const pt=PANEL_TYPES[s.type]||PANEL_TYPES.plesk;
          return (
            <Card key={s.id} style={{padding:"16px 20px"}}>
              <div style={{display:"flex",alignItems:"flex-start",gap:14}}>
                {/* Panel type badge */}
                <div style={{width:46,height:46,borderRadius:12,background:pt.colorL,border:`1px solid ${pt.color}30`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22,flexShrink:0}}>
                  {pt.icon}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4,flexWrap:"wrap"}}>
                    <div style={{fontSize:15,fontWeight:800,color:G.ink0,letterSpacing:"-0.3px"}}>{s.name}</div>
                    <span style={{background:pt.colorL,color:pt.color,fontSize:11,fontWeight:700,padding:"1px 8px",borderRadius:10}}>{pt.label}</span>
                    <div style={{width:7,height:7,borderRadius:"50%",background:statusColor[s.status]||G.ink2}}/>
                    <Chip s={s.status}/>
                    {s.location&&<span style={{fontSize:11,color:G.ink2,background:G.canvas,padding:"1px 7px",borderRadius:5,border:`1px solid ${G.border}`}}>📍 {s.location}</span>}
                  </div>
                  <div style={{fontFamily:"'Courier New',monospace",fontSize:12,color:pt.color,marginBottom:6}}>{s.url}</div>
                  <div style={{display:"flex",gap:16,fontSize:12,color:G.ink2,flexWrap:"wrap"}}>
                    {s.ip&&<span>IP: <strong style={{color:G.ink0,fontFamily:"'Courier New',monospace"}}>{s.ip}</strong></span>}
                    {s.version&&<span>Sürüm: <strong style={{color:G.ink0}}>{s.version}</strong></span>}
                    {s.disk&&<span>Disk: <strong style={{color:G.ink0}}>{s.disk}</strong></span>}
                    <span>Hesaplar: <strong style={{color:G.ink0}}>{s.accounts}</strong></span>
                  </div>
                  {s.notes&&<div style={{fontSize:12,color:G.ink2,marginTop:4,fontStyle:"italic"}}>📝 {s.notes}</div>}
                </div>
                <div style={{display:"flex",gap:6,flexShrink:0}}>
                  <Btn size="sm" variant="teal" onClick={()=>setDetailM(s)}>Detay</Btn>
                  <Btn size="sm" onClick={()=>openEdit(s)}>✏️</Btn>
                  <Btn size="sm" variant="danger" onClick={()=>setConfirmDel(s)}>🗑</Btn>
                </div>
              </div>
            </Card>
          );
        })}
        {filtered.length===0&&(
          <div style={{textAlign:"center",padding:48,color:G.ink2,background:G.surface,borderRadius:12,border:`1px solid ${G.border}`}}>
            <div style={{fontSize:36,marginBottom:12}}>🖥️</div>
            <div style={{fontSize:15,fontWeight:700,color:G.ink1,marginBottom:6}}>Sunucu bulunamadı</div>
            <div style={{fontSize:13,marginBottom:16}}>İlk sunucunuzu ekleyin.</div>
            <Btn variant="primary" onClick={openAdd}>+ Sunucu Ekle</Btn>
          </div>
        )}
      </div>

      {/* API reference */}
      <Card style={{padding:18,marginTop:16}}>
        <ST>API Bağlantı Rehberi</ST>
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <div style={{background:G.tealL,borderRadius:8,padding:"12px 14px"}}>
            <div style={{fontSize:12,fontWeight:700,color:G.teal,marginBottom:6}}>⬡ Plesk API</div>
            <div style={{fontSize:11,color:G.ink2,marginBottom:6}}>Plesk Panel → Araçlar & Ayarlar → API Erişimi</div>
            <div style={{fontFamily:"'Courier New',monospace",fontSize:10,color:G.ink1,background:"rgba(0,0,0,.04)",borderRadius:5,padding:"6px 8px"}}>
              POST :8443/api/v2/domains<br/>Authorization: Basic key
            </div>
          </div>
          <div style={{background:G.greenL,borderRadius:8,padding:"12px 14px"}}>
            <div style={{fontSize:12,fontWeight:700,color:G.green,marginBottom:6}}>⬢ cPanel/WHM API</div>
            <div style={{fontSize:11,color:G.ink2,marginBottom:6}}>WHM → Development → Manage API Tokens</div>
            <div style={{fontFamily:"'Courier New',monospace",fontSize:10,color:G.ink1,background:"rgba(0,0,0,.04)",borderRadius:5,padding:"6px 8px"}}>
              GET :2087/json-api/listaccts<br/>Authorization: whm root:token
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}


/* ── TICKET SETTINGS ───────────────────────────────────────────────────────── */
function ATicketSettings() {
  const [depts, setDp] = useDepts();
  const [addM, setAddM] = useState(false);
  const [editM, setEditM] = useState(null);
  const emptyF = {name:"",email:"",color:G.accent,active:true};
  const [form, setForm] = useState(emptyF);

  const save = () => {
    if(editM) {
      setDp(prev => prev.map(d => d.id===editM.id ? {...form, id:d.id} : d));
    } else {
      setDp(prev => [...prev, {...form, id:"d"+uid()}]);
    }
    setAddM(false); setEditM(null);
  };

  const DeptForm = () => (
    <div>
      <Fld label="Departman Adı *"><Inp value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="Teknik Destek"/></Fld>
      <Fld label="Bildirim E-posta *">
        <Inp type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder=""/>
        <div style={{fontSize:11,color:G.ink2,marginTop:4}}>Ticket açıldığında bu adrese bildirim gönderilir.</div>
      </Fld>
      <Fld label="Renk (hex)">
        <div style={{display:"flex",gap:8,alignItems:"center"}}>
          <input type="color" value={form.color} onChange={e=>setForm({...form,color:e.target.value})}
            style={{width:36,height:36,border:`1px solid ${G.border2}`,borderRadius:8,cursor:"pointer",padding:2,background:G.raised}}/>
          <Inp value={form.color} onChange={e=>setForm({...form,color:e.target.value})} style={{fontFamily:"'Courier New',monospace"}} placeholder="#1A56DB"/>
        </div>
      </Fld>
      <Fld label="Durum">
        <Sel value={form.active?"1":"0"} onChange={e=>setForm({...form,active:e.target.value==="1"})}>
          <option value="1">Aktif</option><option value="0">Pasif</option>
        </Sel>
      </Fld>
      <div style={{display:"flex",gap:8,marginTop:8}}>
        <Btn onClick={()=>{setAddM(false);setEditM(null);}}>İptal</Btn>
        <Btn variant="primary" onClick={save} disabled={!form.name||!form.email}>Kaydet</Btn>
      </div>
    </div>
  );

  return (
    <div>
      {addM && <Modal title="Yeni Departman" onClose={()=>setAddM(false)} width={460}><DeptForm/></Modal>}
      {editM && <Modal title={`Düzenle: ${editM.name}`} onClose={()=>setEditM(null)} width={460}><DeptForm/></Modal>}

      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
        <div style={{fontSize:13,color:G.ink1}}>Departmanlar, ticket açma ekranında listelenir. Her departman için bildirim mail adresi tanımlanır.</div>
        <Btn size="sm" variant="primary" onClick={()=>{setForm(emptyF);setAddM(true);}}>+ Departman Ekle</Btn>
      </div>

      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        {depts.map((d,i) => (
          <Card key={d.id} style={{padding:"14px 18px",display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:10,height:10,minWidth:10,borderRadius:"50%",background:d.color}}/>
            <div style={{flex:1}}>
              <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>{d.name}</div>
              <div style={{fontSize:12,color:G.ink2,marginTop:2,display:"flex",alignItems:"center",gap:6}}>
                <span>📧</span>
                <span style={{fontFamily:"'Courier New',monospace"}}>{d.email}</span>
              </div>
            </div>
            <Chip s={d.active?"active":"inactive"}/>
            <div style={{display:"flex",gap:6}}>
              <Btn size="sm" onClick={()=>{setForm({...d});setEditM(d);}}>✏️ Düzenle</Btn>
              <Btn size="sm" variant="danger" onClick={()=>setDp(prev=>prev.filter(x=>x.id!==d.id))}>Sil</Btn>
            </div>
          </Card>
        ))}
        {depts.length===0 && <div style={{padding:24,textAlign:"center",color:G.ink2,fontSize:13}}>Henüz departman tanımlanmamış.</div>}
      </div>

      <Card style={{padding:18,marginTop:16}}>
        <ST>Ticket Genel Ayarları</ST>
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label="Otomatik Yanıt Maili"><Inp defaultValue="noreply@hostpanel.com"/></Fld>
          <Fld label="Otomatik Kapanma (gün)"><Inp type="number" defaultValue={7} min={1}/></Fld>
          <Fld label="Yeni Ticket Bildirimi">
            <Sel defaultValue="all"><option value="all">Tüm admin'lere gönder</option><option value="dept">Sadece departman mailine</option></Sel>
          </Fld>
          <Fld label="Öncelik Varsayılanı">
            <Sel defaultValue="normal"><option value="low">Düşük</option><option value="normal">Normal</option><option value="high">Yüksek</option></Sel>
          </Fld>
        </div>
        <Btn size="sm" variant="primary" style={{marginTop:8}}>Kaydet</Btn>
      </Card>
    </div>
  );
}

/* ── ADMIN TICKETS ─────────────────────────────────────────────────────────── */
function ATickets() {
  const [depts] = useDepts();
  const [f,setF]=useState("all");
  const [sel,setSel]=useState(null);
  const [addM,setAddM]=useState(false);
  const [newForm,setNewForm]=useState({customer:"",subject:"",dept:"",priority:"normal",desc:""});
  const rows=f==="all"?TICKETS:TICKETS.filter(t=>t.status===f);

  if(sel){const tk=TICKETS.find(t=>t.id===sel);const dept=depts.find(d=>d.name===tk.dept);return(
    <div><Btn size="sm" variant="ghost" onClick={()=>setSel(null)} style={{marginBottom:14}}>← Geri</Btn>
    <Card style={{padding:22}}>
      <div style={{fontSize:16,fontWeight:800,color:G.ink0,marginBottom:6,letterSpacing:"-0.3px"}}>{tk.subject}</div>
      <div style={{display:"flex",gap:8,marginBottom:12,flexWrap:"wrap",alignItems:"center"}}>
        <span style={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{tk.id}</span>
        <Chip s={tk.priority}/><Chip s={tk.status}/>
        {dept&&<span style={{fontSize:11,fontWeight:600,color:dept.color,background:dept.color+"18",padding:"2px 8px",borderRadius:6}}>📧 {dept.email}</span>}
      </div>
      <div style={{display:"flex",gap:12,padding:"14px 0",borderTop:`1px solid ${G.border}`,marginBottom:12}}>
        <Av name={tk.customer} size={36}/>
        <div><div style={{fontSize:13,fontWeight:700,color:G.ink0,marginBottom:4}}>{tk.customer} <span style={{color:G.ink2,fontWeight:400}}>· {tk.created}</span></div>
        <div style={{fontSize:13,color:G.ink1,lineHeight:1.7}}>Merhaba, {tk.subject.toLowerCase()} konusunda destek almak istiyorum.</div></div>
      </div>
      <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14}}>
        <Txtarea placeholder="Yanıt yazın..." style={{minHeight:90}}/>
        <div style={{display:"flex",gap:8,marginTop:10}}><Btn size="sm" variant="primary">Yanıt Gönder</Btn><Btn size="sm">Kapat</Btn></div>
      </div>
    </Card></div>
  );}

  return(
    <div>
      {addM&&(
        <Modal title="Yeni Ticket Aç" onClose={()=>setAddM(false)} width={520}>
          <Fld label="Müşteri">
            <Sel value={newForm.customer} onChange={e=>setNewForm({...newForm,customer:e.target.value})}>
              <option value="">Müşteri seçin...</option>
              {CUSTOMERS.map(c=><option key={c.id} value={c.name}>{c.name} — {c.company}</option>)}
            </Sel>
          </Fld>
          <Fld label="Departman">
            <Sel value={newForm.dept} onChange={e=>setNewForm({...newForm,dept:e.target.value})}>
              <option value="">Departman seçin...</option>
              {depts.filter(d=>d.active).map(d=><option key={d.id} value={d.name}>{d.name}</option>)}
            </Sel>
          </Fld>
          {newForm.dept && (()=>{const d=depts.find(x=>x.name===newForm.dept);return d&&(
            <div style={{background:G.accentL,border:`1px solid ${G.accent}30`,borderRadius:8,padding:"8px 12px",marginBottom:14,fontSize:12,color:G.accent}}>
              📧 Bildirim: <strong style={{fontFamily:"'Courier New',monospace"}}>{d.email}</strong>
            </div>
          );})()}
          <Fld label="Öncelik">
            <Sel value={newForm.priority} onChange={e=>setNewForm({...newForm,priority:e.target.value})}>
              <option value="low">Düşük</option><option value="normal">Normal</option>
              <option value="high">Yüksek</option><option value="critical">Kritik</option>
            </Sel>
          </Fld>
          <Fld label="Konu"><Inp value={newForm.subject} onChange={e=>setNewForm({...newForm,subject:e.target.value})} placeholder="Kısaca özetleyin"/></Fld>
          <Fld label="Açıklama"><Txtarea value={newForm.desc} onChange={e=>setNewForm({...newForm,desc:e.target.value})} placeholder="Detaylı açıklayın..." style={{minHeight:90}}/></Fld>
          <div style={{display:"flex",gap:8,marginTop:8}}>
            <Btn onClick={()=>setAddM(false)}>İptal</Btn>
            <Btn variant="primary" onClick={()=>setAddM(false)} disabled={!newForm.customer||!newForm.dept||!newForm.subject}>Ticket Oluştur</Btn>
          </div>
        </Modal>
      )}
      <div style={{display:"flex",gap:8,marginBottom:14}}>
        {[["all","Tümü"],["open","Açık"],["replied","Yanıtlandı"],["closed","Kapalı"]].map(([v,l])=>(
          <Pill key={v} active={f===v} onClick={()=>setF(v)}>{l}</Pill>
        ))}
        <Btn size="sm" variant="primary" style={{marginLeft:"auto"}} onClick={()=>setAddM(true)}>+ Ticket Aç</Btn>
      </div>
      <Tbl heads={["Ticket","Konu","Müşteri","Dept.","Öncelik","Tarih","Durum"]}>
        {rows.map((tk,i)=>(
          <tr key={i} onClick={()=>setSel(tk.id)} style={{cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{tk.id}</TD>
            <TD s={{fontWeight:700,color:G.accent}}>{tk.subject}</TD>
            <TD>{tk.customer}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{tk.dept}</TD>
            <TD><Chip s={tk.priority}/></TD>
            <TD s={{fontSize:12,color:G.ink2}}>{tk.created}</TD>
            <TD><Chip s={tk.status}/></TD>
          </tr>
        ))}
      </Tbl>
    </div>
  );
}


function AAutomation() {
  const [rules,setRules]=useState(AUTO);
  const tog=id=>setRules(r=>r.map(x=>x.id===id?{...x,status:x.status==="active"?"paused":"active"}:x));
  return(
    <div>
      <div className="rg3" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12,marginBottom:16}}>
        <Metric label="Aktif" value={rules.filter(r=>r.status==="active").length} accent={G.green}/>
        <Metric label="Toplam Çalışma" value={rules.reduce((s,r)=>s+r.runs,0).toLocaleString("tr-TR")}/>
        <Metric label="Duraklatılan" value={rules.filter(r=>r.status==="paused").length} accent={G.amber}/>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        {rules.map((r,i)=>(
          <Card key={i} style={{display:"flex",alignItems:"center",gap:14,padding:"14px 18px"}}>
            <div style={{width:8,height:8,minWidth:8,borderRadius:"50%",background:r.status==="active"?G.green:G.amber}}/>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:700,color:G.ink0,marginBottom:3}}>{r.name}</div>
              <div style={{fontSize:12,color:G.ink2,display:"flex",gap:16}}>
                <span>Tetik: <span style={{color:G.ink1}}>{r.trigger}</span></span>
                <span>İşlem: <span style={{color:G.ink1}}>{r.action}</span></span>
              </div>
            </div>
            <div style={{textAlign:"right",fontSize:11,color:G.ink2,minWidth:120}}>
              <div>{r.lastRun}</div><div style={{marginTop:2}}>{r.runs.toLocaleString("tr-TR")} kez</div>
            </div>
            <Btn size="sm" onClick={()=>tog(r.id)}>{r.status==="active"?"Duraklat":"Aktif Et"}</Btn>
          </Card>
        ))}
      </div>
    </div>
  );
}

function AGIB() {
  const [detail,setDetail]=useState(null);
  return(
    <div>
      {detail&&<Modal title={`e-Fatura — ${detail.inv}`} onClose={()=>setDetail(null)} width={460}>
        <DL rows={[["ETTN",detail.ettn.slice(0,18)+"…"],["Fatura",detail.inv],["Müşteri",detail.customer],["VKN",detail.vkn],["Tarih",detail.date],["Tür",detail.type],["Matrah",fmt(detail.amount)],["KDV",fmt(detail.tax)],["Toplam",fmt(detail.total)]]}/>
        <div style={{marginTop:14,display:"flex",gap:8}}><Btn size="sm">PDF</Btn><Btn size="sm">XML</Btn><Btn size="sm" onClick={()=>setDetail(null)} style={{marginLeft:"auto"}}>Kapat</Btn></div>
      </Modal>}
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:14}}>
        <Metric label="İletilen" value={GIB.length} accent={G.teal}/>
        <Metric label="Matrah" value={fmt(GIB.reduce((s,i)=>s+i.amount,0))}/>
        <Metric label="KDV" value={fmt(GIB.reduce((s,i)=>s+i.tax,0))}/>
        <Metric label="Toplam" value={fmt(GIB.reduce((s,i)=>s+i.total,0))} accent={G.accent}/>
      </div>
      <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
        <div style={{width:7,height:7,borderRadius:"50%",background:G.green}}/>
        <span style={{fontSize:13,fontWeight:700,color:G.ink0}}>GİB Bağlantısı Aktif</span>
        <Btn size="sm" style={{marginLeft:"auto"}}>Ayarlar</Btn>
        <Btn size="sm" variant="teal">Manuel Gönder</Btn>
      </div>
      <Tbl heads={["ETTN","Fatura","Müşteri","VKN","Matrah","KDV","Toplam","Tarih","Tür","Durum",""]}>
        {GIB.map((g,i)=>(
          <tr key={i}>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:10,color:G.ink2}}>{g.ettn.slice(0,8)}…</TD>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{g.inv}</TD>
            <TD s={{fontWeight:600}}>{g.customer}</TD>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{g.vkn}</TD>
            <TD>{fmt(g.amount)}</TD><TD s={{color:G.ink2}}>{fmt(g.tax)}</TD>
            <TD s={{fontWeight:700}}>{fmt(g.total)}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{g.date}</TD>
            <TD><span style={{background:G.accentL,color:G.accent,fontSize:11,padding:"2px 8px",borderRadius:6,fontWeight:600}}>{g.type}</span></TD>
            <TD><Chip s={g.status}/></TD>
            <TD><Btn size="sm" onClick={()=>setDetail(g)}>Detay</Btn></TD>
          </tr>
        ))}
      </Tbl>
    </div>
  );
}

function AIyzico() {
  const [detail,setDetail]=useState(null);
  const ok=IYZICO.filter(t=>t.status==="success");
  return(
    <div>
      {detail&&<Modal title={`İşlem — ${detail.id}`} onClose={()=>setDetail(null)} width={440}>
        <DL rows={[["İşlem ID",detail.id],["Fatura",detail.inv],["Müşteri",detail.customer],["Kart",detail.card],["Banka",detail.bank],["Tutar",fmt(detail.amount)],["Komisyon",fmt(detail.fee)],["Net",fmt(detail.net)],["Taksit",detail.inst===1?"Tek":detail.inst+"x"],["Tarih",detail.date]]}/>
        <Btn size="sm" onClick={()=>setDetail(null)} style={{marginTop:14}}>Kapat</Btn>
      </Modal>}
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:14}}>
        <Metric label="Tahsilat" value={fmt(ok.reduce((s,t)=>s+t.amount,0))} accent={G.accent}/>
        <Metric label="Komisyon" value={fmt(ok.reduce((s,t)=>s+t.fee,0))} accent={G.amber}/>
        <Metric label="Net Gelir" value={fmt(ok.reduce((s,t)=>s+t.net,0))} accent={G.green}/>
        <Metric label="Başarısız" value={IYZICO.filter(t=>t.status==="failed").length} accent={G.red}/>
      </div>
      <Tbl heads={["İşlem","Müşteri","Banka/Kart","Tutar","Komisyon","Net","Taksit","Tarih","Durum",""]}>
        {IYZICO.map((t,i)=>(
          <tr key={i}>
            <TD s={{fontFamily:"'Courier New',monospace",fontSize:11,color:G.ink2}}>{t.id}</TD>
            <TD s={{fontWeight:600}}>{t.customer}</TD>
            <TD s={{fontSize:12}}><div>{t.bank}</div><div style={{fontFamily:"'Courier New',monospace",fontSize:11,color:G.ink2}}>{t.card}</div></TD>
            <TD s={{fontWeight:700}}>{fmt(t.amount)}</TD>
            <TD s={{color:G.amber}}>{t.status==="success"?fmt(t.fee):"—"}</TD>
            <TD s={{color:G.green,fontWeight:700}}>{t.status==="success"?fmt(t.net):"—"}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{t.inst===1?"Tek":`${t.inst}x`}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{t.date}</TD>
            <TD><Chip s={t.status}/></TD>
            <TD><Btn size="sm" onClick={()=>setDetail(t)}>Detay</Btn></TD>
          </tr>
        ))}
      </Tbl>
    </div>
  );
}

function AReports() {
  const tot=fn=>MONTHLY.reduce((s,d)=>s+fn(d),0);
  return(
    <div style={{display:"flex",flexDirection:"column",gap:14}}>
      <div className="rg3" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12}}>
        <Metric label="Toplam Gelir" value={fmtK(tot(d=>d.r))} accent={G.accent}/>
        <Metric label="Toplam Gider" value={fmtK(tot(d=>d.e))} accent={G.red}/>
        <Metric label="Net Kâr" value={fmtK(tot(d=>d.r-d.e))} accent={G.green}/>
      </div>
      <Card style={{padding:20}}>
        <ST>Aylık Tablo</ST>
        <Tbl heads={["Ay","Gelir","Gider","Net Kâr","Kâr Marjı"]}>
          {MONTHLY.map((d,i)=>{const net=d.r-d.e;return(
            <tr key={i}>
              <TD s={{fontWeight:700}}>{d.m} 2026</TD>
              <TD s={{color:G.accent,fontWeight:700}}>{fmtK(d.r)}</TD>
              <TD s={{color:G.red}}>{fmtK(d.e)}</TD>
              <TD s={{color:G.green,fontWeight:700}}>{fmtK(net)}</TD>
              <TD s={{color:G.ink2}}>%{((net/d.r)*100).toFixed(1)}</TD>
            </tr>
          );})}
        </Tbl>
      </Card>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   DOMAIN YÖNETİMİ — PAYLAŞIMLI BİLEŞENLER
═══════════════════════════════════════════════════════════ */

// DNS kayıt tipleri
const DNS_TYPES = ["A","AAAA","CNAME","MX","TXT","NS","SRV","CAA","PTR"];

// Whois gizliliği destekleyen TLD'ler (.tr desteklemez)
const PRIVACY_SUPPORTED = ext => !ext.endsWith(".tr");

// DNS kayıtları yönetim bileşeni (admin ve client paylaşımlı)
function DnsManager({domain, onChange, readonly}) {
  const [records, setRecords] = useState(domain.dns||[]);
  const [addM, setAddM] = useState(false);
  const [editR, setEditR] = useState(null);
  const emptyR = {type:"A",name:"",value:"",ttl:3600,priority:""};
  const [form, setForm] = useState(emptyR);

  const save = () => {
    const r = {...form,id:"r"+uid(),ttl:Number(form.ttl)||3600,priority:form.priority?Number(form.priority):undefined};
    let updated;
    if(editR) updated = records.map(x=>x.id===editR.id?{...r,id:x.id}:x);
    else      updated = [...records, r];
    setRecords(updated);
    onChange&&onChange(updated);
    setAddM(false); setEditR(null);
  };
  const del = id => { const u=records.filter(r=>r.id!==id); setRecords(u); onChange&&onChange(u); };

  const typeColor = {A:G.accent,AAAA:G.purple,CNAME:G.teal,MX:G.amber,TXT:G.green,NS:G.rose,SRV:G.ink1,CAA:G.red,PTR:G.ink2};

  const RecordForm = () => (
    <div>
      <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
        <Fld label="Tip *">
          <Sel value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}>
            {DNS_TYPES.map(t=><option key={t}>{t}</option>)}
          </Sel>
        </Fld>
        <Fld label="TTL (sn)">
          <Sel value={String(form.ttl)} onChange={e=>setForm(f=>({...f,ttl:Number(e.target.value)}))}>
            {[[1,"Otomatik"],[300,"5 dk"],[900,"15 dk"],[1800,"30 dk"],[3600,"1 sa"],[14400,"4 sa"],[86400,"1 gün"]].map(([v,l])=>(
              <option key={v} value={v}>{l} ({v})</option>
            ))}
          </Sel>
        </Fld>
        <Fld label="Ad (Host) *">
          <Inp value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="@ veya www"/>
          <div style={{fontSize:10,color:G.ink2,marginTop:3}}>@ = {domain.domain}</div>
        </Fld>
        <Fld label={form.type==="MX"||form.type==="SRV"?"Değer (Hedef) *":"Değer *"}>
          <Inp value={form.value} onChange={e=>setForm(f=>({...f,value:e.target.value}))}
            placeholder={form.type==="A"?"185.45.12.1":form.type==="MX"?"mail.example.com":form.type==="TXT"?"v=spf1...":form.type==="CNAME"?"target.example.com":""}/>
        </Fld>
        {(form.type==="MX"||form.type==="SRV")&&(
          <Fld label="Öncelik">
            <Inp type="number" value={form.priority||""} onChange={e=>setForm(f=>({...f,priority:e.target.value}))} placeholder="10"/>
          </Fld>
        )}
      </div>
      <div style={{display:"flex",gap:8,marginTop:8}}>
        <Btn onClick={()=>{setAddM(false);setEditR(null);}}>İptal</Btn>
        <Btn variant="primary" onClick={save} disabled={!form.name||!form.value}>Kaydet</Btn>
      </div>
    </div>
  );

  return (
    <div>
      {addM  && <Modal title="DNS Kaydı Ekle" onClose={()=>setAddM(false)} width={520}><RecordForm/></Modal>}
      {editR && <Modal title="DNS Kaydı Düzenle" onClose={()=>setEditR(null)} width={520}><RecordForm/></Modal>}

      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
        <div style={{fontSize:12,color:G.ink2}}>Nameservers: <span style={{fontFamily:"'Courier New',monospace",color:G.ink0,fontWeight:600}}>{domain.ns?.join(" · ")||"—"}</span></div>
        {!readonly&&<Btn size="sm" variant="primary" onClick={()=>{setForm(emptyR);setAddM(true);}}>+ DNS Kaydı Ekle</Btn>}
      </div>

      {records.length===0
        ? <div style={{padding:20,textAlign:"center",color:G.ink2,fontSize:13,background:G.canvas,borderRadius:8}}>DNS kaydı yok.</div>
        : <div style={{border:`1px solid ${G.border}`,borderRadius:10,overflow:"hidden"}}>
            <table style={{width:"100%",borderCollapse:"collapse"}}>
              <thead>
                <tr style={{background:G.canvas}}>
                  {["Tip","Ad","Değer","TTL","Öncelik",""].map(h=>(
                    <th key={h} style={{padding:"7px 12px",textAlign:"left",fontSize:10,fontWeight:700,color:G.ink2,letterSpacing:"1px",textTransform:"uppercase",borderBottom:`1px solid ${G.border}`}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {records.map((r,i)=>(
                  <tr key={r.id} style={{borderBottom:i<records.length-1?`1px solid ${G.border}`:"none"}}
                    onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
                    <td style={{padding:"9px 12px"}}>
                      <span style={{background:(typeColor[r.type]||G.ink2)+"20",color:typeColor[r.type]||G.ink2,fontSize:10,fontWeight:800,padding:"2px 7px",borderRadius:5}}>{r.type}</span>
                    </td>
                    <td style={{padding:"9px 12px",fontFamily:"'Courier New',monospace",fontSize:12,fontWeight:600,color:G.ink0}}>{r.name||"@"}</td>
                    <td style={{padding:"9px 12px",fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink1,maxWidth:220,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{r.value}</td>
                    <td style={{padding:"9px 12px",fontSize:11,color:G.ink2}}>{r.ttl===1?"Otom.":r.ttl>=3600?(r.ttl/3600)+"sa":r.ttl+"sn"}</td>
                    <td style={{padding:"9px 12px",fontSize:12,color:G.ink2}}>{r.priority||"—"}</td>
                    <td style={{padding:"9px 12px"}}>
                      {!readonly&&(
                        <div style={{display:"flex",gap:4}}>
                          <Btn size="sm" onClick={()=>{setForm({...r,priority:r.priority||""});setEditR(r);}}>✏️</Btn>
                          <Btn size="sm" variant="danger" onClick={()=>del(r.id)}>🗑</Btn>
                        </div>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
      }
    </div>
  );
}

/* ── ADMIN DOMAIN YÖNETİMİ ─────────────────────────────────────────────────── */
function ADomains() {
  const [domains, setDoms] = useDomains();
  const [selD, setSelD]    = useState(null);
  const [tab, setTab]      = useState("overview");
  const [nsForm, setNsForm]= useState([]);
  const [eppVisible, setEppVisible] = useState(false);
  const [confirmRenew, setConfirmRenew] = useState(null);
  const [filterStatus, setFilterStatus] = useState("all");
  const [q, setQ] = useState("");

  const filtered = domains.filter(d=>{
    const ms = filterStatus==="all"||d.status===filterStatus;
    const mq = !q||d.domain.includes(q.toLowerCase())||d.customer.toLowerCase().includes(q.toLowerCase());
    return ms&&mq;
  });

  const reg = d => REGISTRARS.find(r=>r.id===d.registrar);

  const toggle = (id, key) => setDoms(prev=>prev.map(d=>d.id===id?{...d,[key]:!d[key]}:d));
  const update = (id, patch) => setDoms(prev=>prev.map(d=>d.id===id?{...d,...patch}:d));
  const updateDns = (id, recs) => update(id, {dns:recs});

  // Domain detay sayfası
  if(selD) {
    const d = domains.find(x=>x.id===selD);
    if(!d) { setSelD(null); return null; }
    const r = reg(d);
    const isPrivacyOk = PRIVACY_SUPPORTED(d.domain);
    const daysLeft = Math.ceil((new Date(d.expires)-new Date())/(1000*60*60*24));
    const TABS=[
      {k:"overview",l:"Genel"},
      {k:"dns",l:"DNS Kayıtları"},
      {k:"ns",l:"Nameserver"},
      {k:"whois",l:"Whois / Gizlilik"},
      {k:"transfer",l:"Transfer"},
    ];
    return (
      <div>
        <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:16}}>
          <Btn size="sm" variant="ghost" onClick={()=>{setSelD(null);setTab("overview");}}>← Domainler</Btn>
          <span style={{color:G.ink3}}>›</span>
          <span style={{fontFamily:"'Courier New',monospace",fontSize:14,fontWeight:800,color:G.ink0}}>{d.domain}</span>
          <Chip s={d.status}/>
        </div>

        {/* Uyarılar */}
        {daysLeft<=30&&daysLeft>0&&<Notice type="warn" style={{marginBottom:12}}>⚠️ Bu domain <strong>{daysLeft} gün</strong> içinde sona eriyor.</Notice>}
        {daysLeft<=0&&<Notice type="warn">🔴 Bu domain süresi dolmuş! Müşteri ile iletişime geçin.</Notice>}

        {/* Tabs */}
        <div style={{display:"flex",borderBottom:`1px solid ${G.border}`,marginBottom:16}}>
          {TABS.map(t=>(
            <button key={t.k} onClick={()=>setTab(t.k)} style={{padding:"9px 16px",fontSize:12,fontWeight:tab===t.k?700:500,border:"none",borderBottom:`2px solid ${tab===t.k?G.ink0:"transparent"}`,background:"transparent",color:tab===t.k?G.ink0:G.ink2,cursor:"pointer",marginBottom:-1}}>
              {t.l}
            </button>
          ))}
        </div>

        {/* ── Genel ── */}
        {tab==="overview"&&(
          <div>
            <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:14}}>
              <Card style={{padding:18}}>
                <ST>Domain Bilgileri</ST>
                <DL rows={[
                  ["Müşteri",d.customer],
                  ["Kayıt Tarihi",d.registered],
                  ["Bitiş Tarihi",d.expires],
                  ["Kalan Gün",daysLeft>0?`${daysLeft} gün`:"Süresi Dolmuş"],
                  ["Registrar",r?.name||d.registrar||"—"],
                ]}/>
              </Card>
              <Card style={{padding:18}}>
                <ST>Ayarlar</ST>
                {[
                  {label:"Oto-Yenileme", key:"autorenew", desc:"Bitiş tarihinde otomatik yenile", color:G.green},
                  {label:"Domain Kilidi (EPP Lock)", key:"locked", desc:"Transfer kilidi, yetkisiz transferi engeller", color:G.teal},
                  ...(isPrivacyOk?[{label:"Whois Gizliliği", key:"whoisPrivacy", desc:"Kişisel bilgileri gizle", color:G.purple}]:[]),
                ].map(item=>(
                  <div key={item.key} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"10px 0",borderBottom:`1px solid ${G.border}`}}>
                    <div>
                      <div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{item.label}</div>
                      <div style={{fontSize:11,color:G.ink2}}>{item.desc}</div>
                    </div>
                    <div onClick={()=>toggle(d.id,item.key)}
                      style={{width:38,height:22,borderRadius:11,background:d[item.key]?item.color:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                      <div style={{position:"absolute",top:2,left:d[item.key]?18:2,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s",boxShadow:"0 1px 3px rgba(0,0,0,.2)"}}/>
                    </div>
                  </div>
                ))}
                {!isPrivacyOk&&<div style={{fontSize:11,color:G.amber,marginTop:8}}>⚠️ {d.domain} uzantısı Whois gizliliğini desteklemez.</div>}
              </Card>
            </div>

            {/* Hızlı eylemler */}
            <Card style={{padding:16}}>
              <ST>Hızlı İşlemler</ST>
              <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
                <Btn size="sm" variant="teal" onClick={()=>setConfirmRenew(d)}>♻️ Yenile</Btn>
                <Btn size="sm" onClick={()=>setTab("dns")}>🌐 DNS Yönet</Btn>
                <Btn size="sm" onClick={()=>setTab("ns")}>📡 Nameserver</Btn>
                <Btn size="sm" onClick={()=>setTab("transfer")}>🔑 EPP / Transfer</Btn>
                <Btn size="sm" onClick={()=>setTab("whois")}>👤 Whois</Btn>
              </div>
            </Card>
          </div>
        )}

        {/* ── DNS Kayıtları ── */}
        {tab==="dns"&&(
          <Card style={{padding:18}}>
            <ST>DNS Kayıtları — {d.domain}</ST>
            <DnsManager domain={d} onChange={recs=>updateDns(d.id,recs)}/>
          </Card>
        )}

        {/* ── Nameserver ── */}
        {tab==="ns"&&(
          <Card style={{padding:18}}>
            <ST>Nameserver Ayarları</ST>
            <div style={{fontSize:12,color:G.ink2,marginBottom:14}}>
              Nameserver değişikliği DNS yayılımının tamamlanması için 24-48 saat sürebilir.
            </div>
            {(nsForm.length?nsForm:d.ns||[]).map((ns,i)=>(
              <Fld key={i} label={`Nameserver ${i+1}`}>
                <Inp value={ns} onChange={e=>{
                  const arr=nsForm.length?[...nsForm]:[...(d.ns||[])];
                  arr[i]=e.target.value;
                  setNsForm(arr);
                }} style={{fontFamily:"'Courier New',monospace"}}/>
              </Fld>
            ))}
            <div style={{display:"flex",gap:8}}>
              <Btn size="sm" onClick={()=>{setNsForm([...(d.ns||[]),""]);}}>+ NS Ekle</Btn>
              <Btn size="sm" variant="primary" onClick={()=>{update(d.id,{ns:nsForm.length?nsForm:d.ns});setNsForm([]);}}>Kaydet</Btn>
              <Btn size="sm" onClick={()=>{setNsForm(["ns1.hostpanel.com","ns2.hostpanel.com"]);}} style={{marginLeft:"auto"}}>
                HostPanel NS'e Döndür
              </Btn>
            </div>
          </Card>
        )}

        {/* ── Whois / Gizlilik ── */}
        {tab==="whois"&&(
          <Card style={{padding:18}}>
            <ST>Whois Gizliliği</ST>
            {!isPrivacyOk
              ? <Notice type="warn">Bu uzantı ({d.domain.slice(d.domain.lastIndexOf("."))}) Whois gizliliğini desteklememektedir.</Notice>
              : <div>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"14px",background:G.canvas,borderRadius:10,marginBottom:14}}>
                    <div>
                      <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>Whois Gizliliği</div>
                      <div style={{fontSize:12,color:G.ink2,marginTop:3}}>Kişisel bilgileriniz (ad, adres, telefon) Whois sorgularında gizlenir.</div>
                    </div>
                    <div onClick={()=>toggle(d.id,"whoisPrivacy")}
                      style={{width:42,height:24,borderRadius:12,background:d.whoisPrivacy?G.purple:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                      <div style={{position:"absolute",top:3,left:d.whoisPrivacy?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                    </div>
                  </div>
                  <Notice type={d.whoisPrivacy?"success":"info"}>
                    {d.whoisPrivacy?"✓ Whois gizliliği aktif — kişisel bilgiler gizleniyor.":"Whois gizliliği kapalı — Whois sorgularında kişisel bilgiler görünür."}
                  </Notice>
                </div>
            }
          </Card>
        )}

        {/* ── Transfer ── */}
        {tab==="transfer"&&(
          <Card style={{padding:18}}>
            <ST>Domain Transfer & EPP Kodu</ST>
            <div style={{display:"flex",gap:14,marginBottom:16}}>
              <div style={{flex:1,background:G.canvas,borderRadius:10,padding:14}}>
                <div style={{fontSize:12,fontWeight:700,color:G.ink2,marginBottom:6,textTransform:"uppercase",letterSpacing:"1px"}}>EPP / Auth Kodu</div>
                <div style={{display:"flex",gap:8,alignItems:"center"}}>
                  <code style={{fontFamily:"'Courier New',monospace",fontSize:14,fontWeight:700,color:G.ink0,background:G.raised,padding:"6px 12px",borderRadius:7,border:`1px solid ${G.border}`,flex:1}}>
                    {eppVisible?(d.epp||"EPP-"+d.domain.toUpperCase().replace(/\./g,"-")):"•••••••••••••"}
                  </code>
                  <Btn size="sm" onClick={()=>setEppVisible(v=>!v)}>{eppVisible?"Gizle":"Göster"}</Btn>
                </div>
                <div style={{fontSize:11,color:G.ink2,marginTop:6}}>Bu kodu yalnızca domain transfer işlemi için paylaşın.</div>
              </div>
              <div style={{background:G.canvas,borderRadius:10,padding:14,minWidth:140,textAlign:"center"}}>
                <div style={{fontSize:12,fontWeight:700,color:G.ink2,marginBottom:8,textTransform:"uppercase",letterSpacing:"1px"}}>Transfer Kilidi</div>
                <div onClick={()=>toggle(d.id,"locked")}
                  style={{width:42,height:24,borderRadius:12,background:d.locked?G.teal:G.border2,cursor:"pointer",position:"relative",margin:"0 auto 8px",transition:"background .2s"}}>
                  <div style={{position:"absolute",top:3,left:d.locked?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                </div>
                <div style={{fontSize:11,color:d.locked?G.teal:G.ink2,fontWeight:600}}>{d.locked?"🔒 Kilitli":"🔓 Açık"}</div>
              </div>
            </div>
            <Notice type={d.locked?"success":"warn"}>
              {d.locked?"✓ Transfer kilidi aktif — domain yetkisiz transfere karşı korumalı.":"⚠️ Transfer kilidi kapalı — domain transfer edilebilir durumda."}
            </Notice>
          </Card>
        )}

        {confirmRenew&&(
          <Modal title="Domain Yenile" onClose={()=>setConfirmRenew(null)} width={380}>
            <p style={{color:G.ink1,fontSize:14,marginBottom:8}}><strong>{confirmRenew.domain}</strong> domainini 1 yıl yenilemek istiyor musunuz?</p>
            <p style={{fontSize:12,color:G.ink2,marginBottom:20}}>Yenileme tarihi: {new Date(new Date(confirmRenew.expires).setFullYear(new Date(confirmRenew.expires).getFullYear()+1)).toISOString().slice(0,10)}</p>
            <div style={{display:"flex",gap:8}}>
              <Btn onClick={()=>setConfirmRenew(null)}>İptal</Btn>
              <Btn variant="primary" onClick={()=>{
                const nd=new Date(confirmRenew.expires); nd.setFullYear(nd.getFullYear()+1);
                update(confirmRenew.id,{expires:nd.toISOString().slice(0,10),status:"active"});
                setConfirmRenew(null);
              }}>Yenile</Btn>
            </div>
          </Modal>
        )}
      </div>
    );
  }

  // Domain listesi
  return (
    <div>
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:14}}>
        <Metric label="Toplam Domain" value={domains.length} icon="🌐"/>
        <Metric label="Aktif" value={domains.filter(d=>d.status==="active").length} accent={G.green}/>
        <Metric label="Süresi Dolmuş" value={domains.filter(d=>d.status==="expired").length} accent={G.red}/>
        <Metric label="30 Gün İçinde" value={domains.filter(d=>{ const days=Math.ceil((new Date(d.expires)-new Date())/(86400000)); return days>0&&days<=30; }).length} accent={G.amber}/>
      </div>
      <div style={{display:"flex",gap:8,marginBottom:14,flexWrap:"wrap",alignItems:"center"}}>
        <Inp value={q} onChange={e=>setQ(e.target.value)} placeholder="Domain veya müşteri ara..." style={{maxWidth:240}}/>
        {[["all","Tümü"],["active","Aktif"],["expired","Süresi Dolmuş"]].map(([v,l])=>(
          <Pill key={v} active={filterStatus===v} onClick={()=>setFilterStatus(v)}>{l}</Pill>
        ))}
        <Btn size="sm" variant="primary" style={{marginLeft:"auto"}}>+ Domain Ekle</Btn>
      </div>
      <Tbl heads={["Domain","Müşteri","Bitiş","Registrar","Oto-Yenile","Kilit","Whois Gizli","Durum",""]}>
        {filtered.map((d,i)=>{
          const r=reg(d);
          const daysLeft=Math.ceil((new Date(d.expires)-new Date())/(86400000));
          return (
            <tr key={d.id} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
              <TD s={{fontFamily:"'Courier New',monospace",fontWeight:800,cursor:"pointer",color:G.accent}} onClick={()=>setSelD(d.id)}>{d.domain}</TD>
              <TD s={{fontWeight:500}}>{d.customer}</TD>
              <TD>
                <div style={{fontSize:13,color:daysLeft<=30?G.red:daysLeft<=60?G.amber:G.ink2,fontWeight:daysLeft<=30?700:400}}>
                  {d.expires}
                </div>
                {daysLeft>0&&daysLeft<=30&&<div style={{fontSize:10,color:G.red,fontWeight:700}}>{daysLeft} gün kaldı</div>}
                {daysLeft<=0&&<div style={{fontSize:10,color:G.red,fontWeight:700}}>Süresi Doldu</div>}
              </TD>
              <TD><span style={{fontSize:11,color:r?.color||G.ink2,background:(r?.colorL||G.canvas),padding:"2px 7px",borderRadius:5,fontWeight:600}}>{r?.name||d.registrar||"—"}</span></TD>
              <TD><span style={{color:d.autorenew?G.green:G.ink3,fontWeight:700,fontSize:12}}>{d.autorenew?"✓":"—"}</span></TD>
              <TD><span style={{color:d.locked?G.teal:G.ink3,fontWeight:700,fontSize:12}}>{d.locked?"🔒":"🔓"}</span></TD>
              <TD><span style={{color:d.whoisPrivacy?G.purple:G.ink3,fontWeight:700,fontSize:12}}>{d.whoisPrivacy?"✓":"—"}</span></TD>
              <TD><Chip s={d.status}/></TD>
              <TD><Btn size="sm" onClick={()=>setSelD(d.id)}>Yönet</Btn></TD>
            </tr>
          );
        })}
      </Tbl>
    </div>
  );
}

/* ── CLIENT DOMAIN YÖNETİMİ ───────────────────────────────────────────────── */
function UDomains({user}) {
  const [domains, setDoms] = useDomains();
  const [selD, setSelD]    = useState(null);
  const [tab, setTab]      = useState("overview");
  const [eppVisible, setEppVisible] = useState(false);
  const [nsForm, setNsForm] = useState([]);

  const myDomains = domains.filter(d=>d.customerId===user.id);
  const toggle = (id,key) => setDoms(prev=>prev.map(d=>d.id===id?{...d,[key]:!d[key]}:d));
  const update = (id,patch) => setDoms(prev=>prev.map(d=>d.id===id?{...d,...patch}:d));

  if(selD) {
    const d = myDomains.find(x=>x.id===selD);
    if(!d) { setSelD(null); return null; }
    const isPrivacyOk = PRIVACY_SUPPORTED(d.domain);
    const daysLeft = Math.ceil((new Date(d.expires)-new Date())/(86400000));
    const TABS=[
      {k:"overview",l:"Genel"},
      {k:"dns",l:"DNS Kayıtları"},
      {k:"ns",l:"Nameserver"},
      {k:"whois",l:"Whois Gizliliği"},
      {k:"transfer",l:"Transfer Kodu"},
    ];

    return (
      <div>
        <Btn size="sm" variant="ghost" onClick={()=>{setSelD(null);setTab("overview");}} style={{marginBottom:14}}>← Domainlerim</Btn>

        <Card style={{padding:18,marginBottom:14}}>
          <div style={{display:"flex",alignItems:"center",gap:12}}>
            <span style={{fontSize:24}}>🌐</span>
            <div style={{flex:1}}>
              <div style={{fontSize:18,fontWeight:900,color:G.ink0,fontFamily:"'Courier New',monospace",letterSpacing:"-0.5px"}}>{d.domain}</div>
              <div style={{fontSize:12,color:G.ink2,marginTop:3,display:"flex",gap:12,flexWrap:"wrap"}}>
                <span>Kayıt: {d.registered}</span>
                <span style={{color:daysLeft<=30?G.red:G.ink2,fontWeight:daysLeft<=30?700:400}}>
                  Bitiş: {d.expires}{daysLeft>0&&daysLeft<=30&&` (${daysLeft} gün)`}
                  {daysLeft<=0&&" 🔴 Süresi Dolmuş"}
                </span>
              </div>
            </div>
            <Chip s={d.status}/>
          </div>
        </Card>

        {daysLeft<=30&&daysLeft>0&&<Notice type="warn" style={{marginBottom:12}}>⚠️ Domaininiz <strong>{daysLeft} gün</strong> içinde sona eriyor. Oto-yenileme kapalıysa lütfen yenileyin.</Notice>}

        <div style={{display:"flex",borderBottom:`1px solid ${G.border}`,marginBottom:16}}>
          {TABS.map(t=>(
            <button key={t.k} onClick={()=>setTab(t.k)} style={{padding:"8px 14px",fontSize:12,fontWeight:tab===t.k?700:500,border:"none",borderBottom:`2px solid ${tab===t.k?G.accent:"transparent"}`,background:"transparent",color:tab===t.k?G.accent:G.ink2,cursor:"pointer",marginBottom:-1}}>
              {t.l}
            </button>
          ))}
        </div>

        {/* ── Genel ── */}
        {tab==="overview"&&(
          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            {/* Oto-yenileme */}
            <Card style={{padding:16}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                <div>
                  <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>Otomatik Yenileme</div>
                  <div style={{fontSize:12,color:G.ink2,marginTop:2}}>Bitiş tarihinde domain otomatik yenilenir ve fatura kesilir.</div>
                </div>
                <div onClick={()=>toggle(d.id,"autorenew")}
                  style={{width:42,height:24,borderRadius:12,background:d.autorenew?G.green:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                  <div style={{position:"absolute",top:3,left:d.autorenew?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                </div>
              </div>
              <div style={{marginTop:8,fontSize:11,color:d.autorenew?G.green:G.amber,fontWeight:500}}>
                {d.autorenew?"✓ Otomatik yenileme aktif":"⚠️ Otomatik yenileme kapalı — domain süresi dolduktan sonra erişim kesilir."}
              </div>
            </Card>

            {/* Transfer kilidi */}
            <Card style={{padding:16}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                <div>
                  <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>Transfer Kilidi</div>
                  <div style={{fontSize:12,color:G.ink2,marginTop:2}}>Domain transfer işlemlerine karşı güvenlik kilidi.</div>
                </div>
                <div onClick={()=>toggle(d.id,"locked")}
                  style={{width:42,height:24,borderRadius:12,background:d.locked?G.teal:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                  <div style={{position:"absolute",top:3,left:d.locked?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                </div>
              </div>
              <div style={{marginTop:8,fontSize:11,color:d.locked?G.teal:G.amber,fontWeight:500}}>
                {d.locked?"🔒 Kilit aktif — domain transfer edilemez.":"🔓 Kilit açık — domain transfer yapılabilir."}
              </div>
            </Card>

            {/* Whois */}
            {isPrivacyOk&&(
              <Card style={{padding:16}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <div>
                    <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>Whois Gizliliği</div>
                    <div style={{fontSize:12,color:G.ink2,marginTop:2}}>Kişisel bilgileriniz (ad, adres, e-posta) Whois sorgularında gizlenir.</div>
                  </div>
                  <div onClick={()=>toggle(d.id,"whoisPrivacy")}
                    style={{width:42,height:24,borderRadius:12,background:d.whoisPrivacy?G.purple:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                    <div style={{position:"absolute",top:3,left:d.whoisPrivacy?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                  </div>
                </div>
                <Notice type={d.whoisPrivacy?"success":"info"} style={{marginTop:10}}>
                  {d.whoisPrivacy?"✓ Kişisel bilgileriniz korunuyor.":"Gizlilik kapalı — bilgileriniz Whois'te görünür."}
                </Notice>
              </Card>
            )}
            {!isPrivacyOk&&(
              <Notice type="warn">Bu uzantı Whois gizliliğini desteklememektedir.</Notice>
            )}
          </div>
        )}

        {/* ── DNS ── */}
        {tab==="dns"&&(
          <Card style={{padding:18}}>
            <ST>DNS Kayıtları</ST>
            <Notice type="info">DNS değişiklikleri İnternet geneline yayılması 24-48 saat sürebilir.</Notice>
            <DnsManager domain={d} onChange={recs=>update(d.id,{dns:recs})}/>
          </Card>
        )}

        {/* ── Nameserver ── */}
        {tab==="ns"&&(
          <Card style={{padding:18}}>
            <ST>Nameserver Değiştir</ST>
            <Notice type="warn">Nameserver değişikliği DNS kayıtlarınızı etkiler. Emin olmadan değiştirmeyin.</Notice>
            <div style={{marginTop:14}}>
              {(nsForm.length?nsForm:d.ns||[]).map((ns,i)=>(
                <Fld key={i} label={`Nameserver ${i+1}`}>
                  <Inp value={ns} onChange={e=>{const arr=nsForm.length?[...nsForm]:[...(d.ns||[])];arr[i]=e.target.value;setNsForm(arr);}} style={{fontFamily:"'Courier New',monospace"}}/>
                </Fld>
              ))}
              <div style={{display:"flex",gap:8}}>
                <Btn size="sm" variant="primary" onClick={()=>{update(d.id,{ns:nsForm.length?nsForm:d.ns});setNsForm([]);}}>Kaydet</Btn>
                <Btn size="sm" onClick={()=>setNsForm(["ns1.hostpanel.com","ns2.hostpanel.com"])}>HostPanel NS</Btn>
              </div>
            </div>
          </Card>
        )}

        {/* ── Whois ── */}
        {tab==="whois"&&(
          <Card style={{padding:18}}>
            <ST>Whois Gizliliği</ST>
            {!isPrivacyOk
              ? <Notice type="warn">Bu uzantı Whois gizliliğini desteklememektedir.</Notice>
              : <div>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:14,background:G.canvas,borderRadius:10,marginBottom:14}}>
                    <div>
                      <div style={{fontSize:14,fontWeight:700,color:G.ink0}}>Whois Gizliliği</div>
                      <div style={{fontSize:12,color:G.ink2,marginTop:3}}>Kayıt bilgileriniz Whois sorgularında gizlenir.</div>
                    </div>
                    <div onClick={()=>toggle(d.id,"whoisPrivacy")}
                      style={{width:42,height:24,borderRadius:12,background:d.whoisPrivacy?G.purple:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                      <div style={{position:"absolute",top:3,left:d.whoisPrivacy?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
                    </div>
                  </div>
                  <Notice type={d.whoisPrivacy?"success":"info"}>
                    {d.whoisPrivacy?"✓ Gizlilik aktif — bilgileriniz korunuyor.":"Gizlilik kapalı — GDPR kapsamında dikkatli olun."}
                  </Notice>
                </div>
            }
          </Card>
        )}

        {/* ── Transfer Kodu ── */}
        {tab==="transfer"&&(
          <Card style={{padding:18}}>
            <ST>Transfer (EPP) Kodu</ST>
            <Notice type="warn">EPP kodunu yalnızca domain transferi yapmak istediğinizde kullanın. Bu kodu kimseyle paylaşmayın.</Notice>
            <div style={{margin:"16px 0",background:G.canvas,borderRadius:10,padding:14}}>
              <div style={{fontSize:11,color:G.ink2,marginBottom:8,textTransform:"uppercase",letterSpacing:"1px",fontWeight:600}}>EPP / Auth Kodu</div>
              <div style={{display:"flex",gap:8,alignItems:"center"}}>
                <code style={{fontFamily:"'Courier New',monospace",fontSize:15,fontWeight:800,color:G.ink0,background:G.raised,padding:"10px 16px",borderRadius:8,border:`1px solid ${G.border}`,flex:1,letterSpacing:"2px"}}>
                  {eppVisible?(d.epp||"EPP-"+d.domain.toUpperCase().replace(/\./g,"-").slice(0,16)):"•  •  •  •  •  •  •  •  •  •"}
                </code>
                <Btn variant="outline" onClick={()=>setEppVisible(v=>!v)}>{eppVisible?"🙈 Gizle":"👁 Göster"}</Btn>
              </div>
            </div>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:14,background:G.canvas,borderRadius:10}}>
              <div>
                <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>Transfer kilidi devre dışı bırakın</div>
                <div style={{fontSize:11,color:G.ink2,marginTop:2}}>Transfer yapabilmek için kilidi kaldırmanız gerekir.</div>
              </div>
              <div onClick={()=>toggle(d.id,"locked")}
                style={{width:42,height:24,borderRadius:12,background:d.locked?G.teal:G.border2,cursor:"pointer",position:"relative",transition:"background .2s"}}>
                <div style={{position:"absolute",top:3,left:d.locked?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s"}}/>
              </div>
            </div>
          </Card>
        )}
      </div>
    );
  }

  // Domain listesi
  if(myDomains.length===0) return (
    <div style={{textAlign:"center",padding:48}}>
      <div style={{fontSize:36,marginBottom:12}}>🌐</div>
      <div style={{fontSize:15,fontWeight:700,color:G.ink1,marginBottom:8}}>Domain kaydınız yok</div>
      <div style={{fontSize:13,color:G.ink2}}>Hizmet Al bölümünden domain tescili yapabilirsiniz.</div>
    </div>
  );

  return (
    <div style={{display:"flex",flexDirection:"column",gap:12}}>
      {myDomains.map(d=>{
        const daysLeft=Math.ceil((new Date(d.expires)-new Date())/(86400000));
        return (
          <Card key={d.id} style={{padding:"14px 18px",border:`1px solid ${d.status==="expired"?G.red:G.border}`}}>
            <div style={{display:"flex",alignItems:"flex-start",gap:14}}>
              <div style={{fontSize:22,marginTop:2}}>🌐</div>
              <div style={{flex:1}}>
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4,flexWrap:"wrap"}}>
                  <span style={{fontFamily:"'Courier New',monospace",fontSize:16,fontWeight:900,color:G.ink0,letterSpacing:"-0.3px"}}>{d.domain}</span>
                  <Chip s={d.status}/>
                  {d.locked&&<span style={{fontSize:11,color:G.teal,background:G.tealL,padding:"1px 7px",borderRadius:5,fontWeight:600}}>🔒 Kilitli</span>}
                  {d.whoisPrivacy&&<span style={{fontSize:11,color:G.purple,background:G.purpleL,padding:"1px 7px",borderRadius:5,fontWeight:600}}>👤 Whois Gizli</span>}
                </div>
                <div style={{fontSize:12,color:G.ink2,display:"flex",gap:16,flexWrap:"wrap"}}>
                  <span>Bitiş: <strong style={{color:daysLeft<=30?G.red:G.ink0}}>{d.expires}</strong></span>
                  {daysLeft>0&&daysLeft<=30&&<span style={{color:G.red,fontWeight:700}}>⚠️ {daysLeft} gün kaldı</span>}
                  {daysLeft<=0&&<span style={{color:G.red,fontWeight:700}}>🔴 Süresi Dolmuş</span>}
                  <span>Oto-yenileme: <strong style={{color:d.autorenew?G.green:G.red}}>{d.autorenew?"Açık":"Kapalı"}</strong></span>
                  <span>NS: <span style={{fontFamily:"'Courier New',monospace",fontSize:11}}>{d.ns?.[0]||"—"}</span></span>
                </div>
              </div>
              <Btn size="sm" variant="primary" onClick={()=>{setSelD(d.id);setTab("overview");}}>Yönet →</Btn>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   TLD FİYATLANDIRMA YÖNETİMİ (Admin)
═══════════════════════════════════════════════════════════ */
function ATldPricing() {
  const [tlds, setTlds] = useTldPricing();
  const [catFilter, setCatFilter] = useState("all");
  const [q, setQ] = useState("");
  const [addM, setAddM] = useState(false);
  const [editM, setEditM] = useState(null);
  const emptyF = {ext:"",reg:"",renew:"",transfer:"",privacy:false,minYears:1,maxYears:10,popular:false,cat:"gTLD"};
  const [form, setForm] = useState(emptyF);

  const cats = ["all", ...Array.from(new Set(tlds.map(t=>t.cat)))];

  const filtered = tlds.filter(t=>{
    const matchCat = catFilter==="all" || t.cat===catFilter;
    const matchQ   = !q || t.ext.includes(q.toLowerCase());
    return matchCat && matchQ;
  });

  const save = () => {
    const entry = {...form, reg:Number(form.reg), renew:Number(form.renew), transfer:Number(form.transfer), minYears:Number(form.minYears), maxYears:Number(form.maxYears)};
    if(editM) setTlds(prev=>prev.map(t=>t.id===editM.id?{...entry,id:t.id}:t));
    else      setTlds(prev=>[...prev,{...entry,id:"t"+(Date.now())}]);
    setAddM(false); setEditM(null);
  };

  const TldForm = () => (
    <div>
      <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
        <Fld label="Uzantı *">
          <Inp value={form.ext} onChange={e=>setForm({...form,ext:e.target.value.toLowerCase()})} placeholder=".com.tr"/>
        </Fld>
        <Fld label="Kategori">
          <Sel value={form.cat} onChange={e=>setForm({...form,cat:e.target.value})}>
            {["gTLD","New gTLD","ccTLD TR","ccTLD EU","ccTLD Diğer"].map(c=><option key={c}>{c}</option>)}
          </Sel>
        </Fld>
        <Fld label="Kayıt Fiyatı (₺/yıl) *">
          <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
            <span style={{padding:"0 10px",fontSize:13,color:G.ink2,background:G.canvas,borderRight:`1px solid ${G.border}`}}>₺</span>
            <input type="number" min="0" value={form.reg} onChange={e=>setForm({...form,reg:e.target.value})} placeholder="199" onKeyDown={e=>!/[\d.]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
              style={{flex:1,padding:"8px 10px",border:"none",outline:"none",fontSize:13,background:"transparent",fontFamily:"inherit"}}/>
          </div>
        </Fld>
        <Fld label="Yenileme Fiyatı (₺/yıl) *">
          <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
            <span style={{padding:"0 10px",fontSize:13,color:G.ink2,background:G.canvas,borderRight:`1px solid ${G.border}`}}>₺</span>
            <input type="number" min="0" value={form.renew} onChange={e=>setForm({...form,renew:e.target.value})} placeholder="199" onKeyDown={e=>!/[\d.]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
              style={{flex:1,padding:"8px 10px",border:"none",outline:"none",fontSize:13,background:"transparent",fontFamily:"inherit"}}/>
          </div>
        </Fld>
        <Fld label="Transfer Fiyatı (₺/yıl)">
          <div style={{display:"flex",alignItems:"center",border:`1px solid ${G.border2}`,borderRadius:8,overflow:"hidden",background:G.raised}}>
            <span style={{padding:"0 10px",fontSize:13,color:G.ink2,background:G.canvas,borderRight:`1px solid ${G.border}`}}>₺</span>
            <input type="number" min="0" value={form.transfer} onChange={e=>setForm({...form,transfer:e.target.value})} placeholder="199" onKeyDown={e=>!/[\d.]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
              style={{flex:1,padding:"8px 10px",border:"none",outline:"none",fontSize:13,background:"transparent",fontFamily:"inherit"}}/>
          </div>
        </Fld>
        <Fld label="Min-Max Süre (yıl)">
          <div style={{display:"flex",gap:8}}>
            <input type="number" min="1" max="10" value={form.minYears} onChange={e=>setForm({...form,minYears:e.target.value})} onKeyDown={e=>!/[\d]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
              style={{flex:1,padding:"8px 10px",fontSize:13,border:`1px solid ${G.border2}`,borderRadius:8,outline:"none",fontFamily:"inherit"}} placeholder="Min"/>
            <input type="number" min="1" max="10" value={form.maxYears} onChange={e=>setForm({...form,maxYears:e.target.value})} onKeyDown={e=>!/[\d]|Backspace|Delete|Arrow|Tab/.test(e.key)&&e.preventDefault()}
              style={{flex:1,padding:"8px 10px",fontSize:13,border:`1px solid ${G.border2}`,borderRadius:8,outline:"none",fontFamily:"inherit"}} placeholder="Max"/>
          </div>
        </Fld>
      </div>
      <div style={{display:"flex",gap:16,marginTop:4}}>
        <label style={{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:13,color:G.ink1}}>
          <input type="checkbox" checked={form.popular} onChange={e=>setForm({...form,popular:e.target.checked})}/>
          Popüler olarak işaretle
        </label>
        <label style={{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:13,color:G.ink1}}>
          <input type="checkbox" checked={form.privacy} onChange={e=>setForm({...form,privacy:e.target.checked})}/>
          Whois gizliliği destekler
        </label>
      </div>
      <div style={{display:"flex",gap:8,marginTop:14}}>
        <Btn onClick={()=>{setAddM(false);setEditM(null);}}>İptal</Btn>
        <Btn variant="primary" onClick={save} disabled={!form.ext||!form.reg||!form.renew}>Kaydet</Btn>
      </div>
    </div>
  );

  return (
    <div>
      {addM  && <Modal title="Yeni TLD Uzantısı Ekle" onClose={()=>setAddM(false)} width={560}><TldForm/></Modal>}
      {editM && <Modal title={`Düzenle: ${editM.ext}`} onClose={()=>setEditM(null)} width={560}><TldForm/></Modal>}

      {/* Metrikler */}
      <div className="rg4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:16}}>
        <Metric label="Toplam TLD" value={tlds.length} icon="🌐"/>
        <Metric label="En Ucuz" value={fmt(Math.min(...tlds.map(t=>t.reg)))} icon="▼" accent={G.green}/>
        <Metric label="Popüler TLD" value={tlds.filter(t=>t.popular).length} accent={G.accent} icon="⭐"/>
        <Metric label="Kategori" value={new Set(tlds.map(t=>t.cat)).size} icon="◎"/>
      </div>

      {/* Filtreler */}
      <div style={{display:"flex",gap:8,marginBottom:14,flexWrap:"wrap",alignItems:"center"}}>
        <Inp value={q} onChange={e=>setQ(e.target.value)} placeholder="Uzantı ara (.com, .tr...)" style={{maxWidth:200}}/>
        {cats.map(c=>(
          <Pill key={c} active={catFilter===c} onClick={()=>setCatFilter(c)}>
            {c==="all"?"Tümü":c} {c!=="all"&&`(${tlds.filter(t=>t.cat===c).length})`}
          </Pill>
        ))}
        <Btn size="sm" variant="primary" onClick={()=>{setForm(emptyF);setAddM(true);}} style={{marginLeft:"auto"}}>
          + TLD Ekle
        </Btn>
      </div>

      <Tbl heads={["Uzantı","Kategori","Kayıt","Yenileme","Transfer","Süre","Whois Gizli","Popüler",""]}>
        {filtered.map((t,i)=>(
          <tr key={t.id} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
            <TD s={{fontFamily:"'Courier New',monospace",fontWeight:800,fontSize:14,color:G.rose}}>{t.ext}</TD>
            <TD><span style={{fontSize:11,background:G.canvas,border:`1px solid ${G.border}`,padding:"1px 7px",borderRadius:5,color:G.ink2}}>{t.cat}</span></TD>
            <TD s={{fontWeight:700,color:G.green}}>{fmt(t.reg)}</TD>
            <TD s={{color:G.ink1}}>{fmt(t.renew)}</TD>
            <TD s={{color:G.ink2,fontSize:12}}>{fmt(t.transfer)}</TD>
            <TD s={{fontSize:12,color:G.ink2}}>{t.minYears}–{t.maxYears} yıl</TD>
            <TD><span style={{color:t.privacy?G.green:G.ink3,fontWeight:700,fontSize:12}}>{t.privacy?"✓":"—"}</span></TD>
            <TD><span style={{color:t.popular?G.accent:G.ink3,fontWeight:700,fontSize:12}}>{t.popular?"⭐":"—"}</span></TD>
            <TD>
              <div style={{display:"flex",gap:5}}>
                <Btn size="sm" onClick={()=>{setForm({...t,reg:String(t.reg),renew:String(t.renew),transfer:String(t.transfer),minYears:String(t.minYears),maxYears:String(t.maxYears)});setEditM(t);}}>✏️</Btn>
                <Btn size="sm" variant="danger" onClick={()=>setTlds(prev=>prev.filter(x=>x.id!==t.id))}>🗑</Btn>
              </div>
            </TD>
          </tr>
        ))}
      </Tbl>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   DOMAIN ARAMA & SATIN ALMA (Müşteri Tarafı)
═══════════════════════════════════════════════════════════ */
function DomainSearch({onBuy, onBack}) {
  const [tlds] = useTldPricing();
  const [query, setQuery]     = useState("");
  const [sld, setSld]         = useState("");    // alan adı kısmı (örn. "hostpanel")
  const [results, setResults] = useState([]);    // [{ext, price, status, tld}]
  const [searching, setSearching] = useState(false);
  const [years, setYears]     = useState({});    // {ext: yıl}
  const [catF, setCatF]       = useState("all");

  const cats = ["all", ...Array.from(new Set(tlds.map(t=>t.cat)))];

  // Alan adı kısımını ve uzantıyı ayır
  const parseQuery = (val) => {
    const clean = val.trim().toLowerCase().replace(/^https?:\/\//, "").replace(/\/$/, "");
    // Eğer nokta içeriyorsa (örn. "hostpanel.com") sld'yi çıkar
    const dot = clean.indexOf(".");
    if(dot>0) return { sld: clean.slice(0, dot), typed_ext: clean.slice(dot) };
    return { sld: clean, typed_ext: "" };
  };

  const handleSearch = async () => {
    if(!query.trim() || query.trim().length < 2) return;
    const { sld: parsedSld } = parseQuery(query);
    setSld(parsedSld);
    setSearching(true);
    setResults([]);

    // Simüle edilmiş müsaitlik kontrolü (prod'da registrar API'ye gidecek)
    await new Promise(r=>setTimeout(r,1200));

    // Belirli pattern'lere göre müsaitlik simülasyonu
    const taken = ["google","facebook","amazon","apple","microsoft","instagram","twitter","youtube"];
    const isTaken = taken.some(t=>parsedSld.toLowerCase().includes(t));

    const res = tlds
      .filter(t=> catF==="all" || t.cat===catF)
      .map(t => {
        // Rastgele ama tutarlı müsaitlik (aynı sorgu için aynı sonuç)
        const hash = (parsedSld+t.ext).split("").reduce((a,c)=>a+c.charCodeAt(0),0);
        const available = isTaken ? false : (hash % 5 !== 0); // ~%80 müsait
        return {
          ext: t.ext,
          tldData: t,
          price: t.reg,
          renew: t.renew,
          status: available ? "available" : "taken",
          popular: t.popular,
        };
      })
      .sort((a,b)=>{
        // Sıralama: önce müsait, içinde popüler önce
        if(a.status!==b.status) return a.status==="available"?-1:1;
        if(a.popular!==b.popular) return a.popular?-1:1;
        return a.price-b.price;
      });

    setResults(res);
    // Her TLD için varsayılan yıl ata
    const yr = {};
    res.forEach(r=>{ yr[r.ext]=1; });
    setYears(yr);
    setSearching(false);
  };

  const filteredResults = catF==="all" ? results : results.filter(r=>r.tldData.cat===catF);

  const available = results.filter(r=>r.status==="available");
  const taken     = results.filter(r=>r.status==="taken");

  return (
    <div style={{minHeight:"100vh",background:G.canvas}}>
      {/* Header */}
      <div style={{background:G.surface,borderBottom:`1px solid ${G.border}`,padding:"14px 32px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div style={{fontSize:16,fontWeight:900,color:G.ink0,letterSpacing:"-0.5px"}}>HostPanel<span style={{color:G.accent}}>.</span>Pro</div>
        {onBack&&<Btn size="sm" onClick={onBack}>← Geri</Btn>}
      </div>

      {/* Hero arama alanı */}
      <div style={{background:G.ink0,padding:"48px 24px 40px"}}>
        <div style={{maxWidth:700,margin:"0 auto",textAlign:"center"}}>
          <div style={{fontSize:32,fontWeight:900,color:"#fff",letterSpacing:"-1.5px",marginBottom:10}}>
            Alan Adınızı <span style={{color:G.rose}}>Bulun</span>
          </div>
          <div style={{fontSize:14,color:"rgba(255,255,255,.5)",marginBottom:28}}>
            Hayalinizdeki domain müsait mi? Hemen kontrol edin.
          </div>
          <div style={{display:"flex",gap:0,background:"#fff",borderRadius:12,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,.25)"}}>
            <input
              value={query}
              onChange={e=>setQuery(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&handleSearch()}
              placeholder="siteniz.com veya sadece 'siteniz'"
              style={{flex:1,padding:"16px 20px",fontSize:16,border:"none",outline:"none",fontFamily:"inherit",color:G.ink0}}
            />
            <button onClick={handleSearch} disabled={searching||!query.trim()}
              style={{padding:"16px 28px",background:searching?G.ink2:G.rose,color:"#fff",border:"none",fontSize:14,fontWeight:800,cursor:searching?"wait":"pointer",fontFamily:"inherit",transition:"background .2s",whiteSpace:"nowrap"}}>
              {searching?"🔍 Aranıyor...":"🔍 Sorgula"}
            </button>
          </div>
          {results.length>0&&(
            <div style={{display:"flex",justifyContent:"center",gap:20,marginTop:16,fontSize:12,color:"rgba(255,255,255,.5)"}}>
              <span style={{color:"rgba(255,255,255,.8)"}}>✓ <strong style={{color:"#fff"}}>{available.length}</strong> müsait</span>
              <span>✕ <strong style={{color:"rgba(255,255,255,.4)"}}>{taken.length}</strong> kayıtlı</span>
            </div>
          )}
        </div>
      </div>

      <div style={{maxWidth:900,margin:"0 auto",padding:"28px 24px"}}>

        {/* Yükleniyor */}
        {searching&&(
          <div style={{textAlign:"center",padding:48}}>
            <div style={{fontSize:32,marginBottom:12}}>🔍</div>
            <div style={{fontSize:14,color:G.ink2}}><strong>{query}</strong> için tüm uzantılar kontrol ediliyor...</div>
            <div style={{marginTop:16,display:"flex",justifyContent:"center",gap:6}}>
              {[0,1,2].map(i=>(
                <div key={i} style={{width:8,height:8,borderRadius:"50%",background:G.rose,animation:`pulse 1s ${i*0.2}s infinite`}}/>
              ))}
            </div>
          </div>
        )}

        {/* Sonuçlar */}
        {!searching&&results.length>0&&(
          <div>
            {/* Kategori filtresi */}
            <div style={{display:"flex",gap:8,marginBottom:20,flexWrap:"wrap",alignItems:"center"}}>
              <span style={{fontSize:12,color:G.ink2,fontWeight:600}}>Filtrele:</span>
              {cats.map(c=>(
                <Pill key={c} active={catF===c} color={G.rose} onClick={()=>setCatF(c)}>
                  {c==="all"?"Tümü":c}
                </Pill>
              ))}
            </div>

            <div style={{display:"flex",flexDirection:"column",gap:8}}>
              {filteredResults.map((r,i)=>{
                const yr = years[r.ext]||1;
                const total = r.price * yr;
                const isAvail = r.status==="available";
                return (
                  <div key={r.ext} style={{background:G.surface,border:`1.5px solid ${isAvail?G.border:G.border}`,borderRadius:12,padding:"14px 18px",display:"flex",alignItems:"center",gap:14,
                    opacity:isAvail?1:0.6,transition:"all .15s"}}>
                    {/* Uzantı + müsaitlik */}
                    <div style={{minWidth:140}}>
                      <div style={{display:"flex",alignItems:"center",gap:8}}>
                        <span style={{fontFamily:"'Courier New',monospace",fontSize:18,fontWeight:900,color:isAvail?G.rose:G.ink2}}>
                          {sld}{r.ext}
                        </span>
                        {r.popular&&isAvail&&<span style={{fontSize:9,background:G.rose,color:"#fff",padding:"1px 5px",borderRadius:4,fontWeight:700}}>Popüler</span>}
                      </div>
                      <div style={{fontSize:11,marginTop:3,fontWeight:600,color:isAvail?G.green:G.red}}>
                        {isAvail?"✓ Müsait":"✕ Kayıtlı"}
                      </div>
                      {r.tldData.privacy&&isAvail&&<div style={{fontSize:10,color:G.teal,marginTop:2}}>🔒 Whois gizliliği</div>}
                    </div>

                    {/* Fiyat bilgisi */}
                    <div style={{flex:1}}>
                      <div style={{fontSize:11,color:G.ink2,marginBottom:2}}>Kayıt · Yenileme</div>
                      <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>
                        {fmt(r.price)}<span style={{color:G.ink2,fontWeight:400}}>/yıl</span>
                        <span style={{color:G.ink2,fontWeight:400,marginLeft:8,fontSize:12}}>→ Yenileme {fmt(r.renew)}/yıl</span>
                      </div>
                    </div>

                    {/* Yıl seçimi + fiyat + buton */}
                    {isAvail&&(
                      <div style={{display:"flex",alignItems:"center",gap:10}}>
                        <div style={{display:"flex",alignItems:"center",gap:6}}>
                          <span style={{fontSize:11,color:G.ink2}}>Süre:</span>
                          <Sel value={yr} onChange={e=>setYears(prev=>({...prev,[r.ext]:Number(e.target.value)}))}
                            style={{padding:"4px 8px",width:72,fontSize:12}}>
                            {Array.from({length:r.tldData.maxYears-r.tldData.minYears+1},(_,i)=>i+r.tldData.minYears).map(y=>(
                              <option key={y} value={y}>{y} Yıl</option>
                            ))}
                          </Sel>
                        </div>
                        <div style={{textAlign:"right",minWidth:80}}>
                          <div style={{fontSize:16,fontWeight:900,color:G.ink0,letterSpacing:"-0.5px"}}>{fmt(total)}</div>
                          {yr>1&&<div style={{fontSize:10,color:G.ink2}}>{yr} yıllık</div>}
                        </div>
                        <button onClick={()=>onBuy({
                            id:"domain-"+r.ext,
                            name:sld+r.ext+" Domain Tescili",
                            categoryId:"domain",
                            price:r.price,
                            period:"yıl",
                            features:["Whois Gizliliği"+(r.tldData.privacy?" ✓":" —"),"DNS Yönetimi","Oto-Yenileme","Ücretsiz Email Yönlendirme"],
                            domain: sld+r.ext,
                            years: yr,
                            tldData: r.tldData,
                          })}
                          style={{padding:"9px 18px",background:G.ink0,color:"#fff",border:"none",borderRadius:9,fontSize:13,fontWeight:800,cursor:"pointer",fontFamily:"inherit",whiteSpace:"nowrap"}}>
                          Sepete Ekle →
                        </button>
                      </div>
                    )}
                    {!isAvail&&(
                      <div style={{display:"flex",gap:8}}>
                        <Btn size="sm" variant="outline">Whois</Btn>
                        <Btn size="sm" variant="outline">Transfer Et</Btn>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Başlangıç durumu */}
        {!searching&&results.length===0&&(
          <div>
            <div style={{fontSize:14,fontWeight:700,color:G.ink0,marginBottom:12}}>Popüler Uzantılar</div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(130px,1fr))",gap:8}}>
              {tlds.filter(t=>t.popular).map(t=>(
                <div key={t.ext} onClick={()=>{setQuery("siteadi"+t.ext);}} style={{background:G.surface,border:`1px solid ${G.border}`,borderRadius:10,padding:"12px 14px",cursor:"pointer",textAlign:"center",transition:"all .15s"}}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor=G.rose;e.currentTarget.style.background=G.roseL;}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor=G.border;e.currentTarget.style.background=G.surface;}}>
                  <div style={{fontFamily:"'Courier New',monospace",fontSize:16,fontWeight:900,color:G.rose,marginBottom:4}}>{t.ext}</div>
                  <div style={{fontSize:12,fontWeight:700,color:G.ink0}}>{fmt(t.reg)}<span style={{fontSize:10,color:G.ink2}}>/yıl</span></div>
                  <div style={{fontSize:10,color:G.ink2,marginTop:2}}>{t.cat}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   DOMAIN REGISTRAR ENTEGRASYONLARI (devamı)
═══════════════════════════════════════════════════════════ */

// Her registrar için gerçek API yapısı ve endpoint bilgileri
/* ═══════════════════════════════════════════════════════════
   TLD FİYATLANDIRMA STATE
═══════════════════════════════════════════════════════════ */
let _tldPricing = [
  // uzantı, kayıt/yıl, yenileme/yıl, transfer, Whois gizliliği, min/max yıl, popüler, kategori
  {id:"t1",  ext:".com",        reg:149,  renew:179,  transfer:149, privacy:true,  minYears:1, maxYears:10, popular:true,  cat:"gTLD"},
  {id:"t2",  ext:".net",        reg:169,  renew:199,  transfer:169, privacy:true,  minYears:1, maxYears:10, popular:true,  cat:"gTLD"},
  {id:"t3",  ext:".org",        reg:159,  renew:189,  transfer:159, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"gTLD"},
  {id:"t4",  ext:".com.tr",     reg:199,  renew:199,  transfer:199, privacy:false, minYears:1, maxYears:5,  popular:true,  cat:"ccTLD TR"},
  {id:"t5",  ext:".net.tr",     reg:199,  renew:199,  transfer:199, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t6",  ext:".org.tr",     reg:199,  renew:199,  transfer:199, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t7",  ext:".biz.tr",     reg:199,  renew:199,  transfer:199, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t8",  ext:".info.tr",    reg:199,  renew:199,  transfer:199, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t9",  ext:".web.tr",     reg:249,  renew:249,  transfer:249, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t10", ext:".tr",         reg:299,  renew:299,  transfer:299, privacy:false, minYears:1, maxYears:5,  popular:false, cat:"ccTLD TR"},
  {id:"t11", ext:".io",         reg:499,  renew:549,  transfer:499, privacy:true,  minYears:1, maxYears:5,  popular:true,  cat:"gTLD"},
  {id:"t12", ext:".co",         reg:349,  renew:399,  transfer:349, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"gTLD"},
  {id:"t13", ext:".info",       reg:139,  renew:169,  transfer:139, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"gTLD"},
  {id:"t14", ext:".biz",        reg:159,  renew:189,  transfer:159, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"gTLD"},
  {id:"t15", ext:".app",        reg:299,  renew:349,  transfer:299, privacy:true,  minYears:1, maxYears:10, popular:true,  cat:"New gTLD"},
  {id:"t16", ext:".dev",        reg:279,  renew:299,  transfer:279, privacy:true,  minYears:1, maxYears:10, popular:true,  cat:"New gTLD"},
  {id:"t17", ext:".store",      reg:249,  renew:299,  transfer:249, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"New gTLD"},
  {id:"t18", ext:".online",     reg:199,  renew:249,  transfer:199, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"New gTLD"},
  {id:"t19", ext:".site",       reg:189,  renew:239,  transfer:189, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"New gTLD"},
  {id:"t20", ext:".tech",       reg:349,  renew:399,  transfer:349, privacy:true,  minYears:1, maxYears:10, popular:false, cat:"New gTLD"},
  {id:"t21", ext:".de",         reg:99,   renew:119,  transfer:99,  privacy:false, minYears:1, maxYears:1,  popular:false, cat:"ccTLD EU"},
  {id:"t22", ext:".eu",         reg:119,  renew:139,  transfer:119, privacy:false, minYears:1, maxYears:10, popular:false, cat:"ccTLD EU"},
  {id:"t23", ext:".co.uk",      reg:89,   renew:109,  transfer:89,  privacy:false, minYears:1, maxYears:10, popular:false, cat:"ccTLD EU"},
  {id:"t24", ext:".nl",         reg:79,   renew:99,   transfer:79,  privacy:false, minYears:1, maxYears:10, popular:false, cat:"ccTLD EU"},
];
let _tldListeners = [];
const setTldPricing = fn => { _tldPricing = typeof fn==="function"?fn(_tldPricing):fn; _tldListeners.forEach(cb=>cb(_tldPricing)); };
const useTldPricing = () => {
  const [tlds, setL] = useState(_tldPricing);
  useEffect(()=>{ _tldListeners.push(setL); return ()=>{ _tldListeners=_tldListeners.filter(x=>x!==setL); }; },[]);
  return [tlds, setTldPricing];
};

const REGISTRARS = [
  {
    id:"resellerclub",
    name:"ResellerClub",
    logo:"🌐",
    color:G.accent,
    colorL:G.accentL,
    category:"Önerilen",
    tlds:"1500+",
    apiType:"HTTP API (REST)",
    apiBase:"https://httpapi.com/api",
    docsUrl:"https://cp.onlyfordemo.net/kb/answer/744",
    testMode:true,
    testBase:"https://test.httpapi.com/api",
    recommended:true,
    description:"Türkiye dahil geniş TLD desteği, düşük fiyat, güçlü WHMCS entegrasyonu.",
    fields:[
      {key:"resellerId", label:"Reseller ID",      type:"text",     required:true,  placeholder:"123456",        hint:"ResellerClub hesabınızdaki Customer ID"},
      {key:"apiKey",     label:"API Key",           type:"password", required:true,  placeholder:"xxxxxxxxxxxxxxxx", hint:"Control Panel → API → Generate Key"},
    ],
    endpoints:{
      check:   "GET /domains/available.json?auth-userid={id}&api-key={key}&domain-name={domain}&tlds={tld}",
      register:"POST /domains/register.json",
      renew:   "POST /domains/renew.json",
      transfer:"POST /domains/transfer.json",
      info:    "GET /domains/details.json?auth-userid={id}&api-key={key}&domain-name={domain}&options=All",
    }
  },
  {
    id:"centralnic",
    name:"CentralNic Reseller",
    logo:"⬡",
    color:G.teal,
    colorL:G.tealL,
    category:"Önerilen",
    tlds:"1100+",
    apiType:"HTTPS / EPP / SOAP / XML-RPC",
    apiBase:"https://api.rrpproxy.net/api/call",
    docsUrl:"https://kb.centralnicreseller.com/api",
    testMode:true,
    testBase:"https://api-ote.rrpproxy.net/api/call",
    recommended:true,
    description:"Eski HEXONET/RRPproxy — kurumsal ölçek, 6 farklı API gateway, DNSSEC desteği.",
    fields:[
      {key:"login",    label:"API Login (s_login)",  type:"text",     required:true,  placeholder:"reseller@firma.com", hint:"CentralNic Reseller kontrol panelinizeki kullanıcı adı"},
      {key:"password", label:"API Password (s_pw)",  type:"password", required:true,  placeholder:"••••••••",           hint:"API şifresi — panel şifrenizden farklı olabilir"},
    ],
    endpoints:{
      check:   "GET ?s-login={login}&s-pw={pw}&command=CheckDomain&domain={domain}",
      register:"POST command=AddDomain&domain={domain}&period={period}&...nameserver...",
      renew:   "POST command=RenewDomain&domain={domain}&period={period}",
      transfer:"POST command=TransferDomain&domain={domain}&auth={epp}",
      info:    "GET ?command=StatusDomain&domain={domain}",
    }
  },
  {
    id:"namecheap",
    name:"Namecheap",
    logo:"◎",
    color:G.green,
    colorL:G.greenL,
    category:"Önerilen",
    tlds:"500+",
    apiType:"XML API",
    apiBase:"https://api.namecheap.com/xml.response",
    docsUrl:"https://www.namecheap.com/support/api/intro/",
    testMode:true,
    testBase:"https://api.sandbox.namecheap.com/xml.response",
    recommended:true,
    description:"Basit API yapısı, detaylı dokümantasyon, sandbox modu — küçük-orta ölçek için ideal.",
    fields:[
      {key:"apiUser",   label:"API Username",  type:"text",     required:true, placeholder:"namecheap_user",   hint:"Namecheap hesap kullanıcı adı"},
      {key:"apiKey",    label:"API Key",        type:"password", required:true, placeholder:"xxxxxxxxxxxxxxxx",  hint:"Profile → Tools → Manage API → Enable API"},
      {key:"clientIp",  label:"Whitelisted IP", type:"text",     required:true, placeholder:"185.45.12.1",      hint:"API erişimi için sunucu IP'nizi whitelist'e ekleyin"},
      {key:"username",  label:"Username",       type:"text",     required:true, placeholder:"namecheap_user",   hint:"Genellikle API Username ile aynıdır"},
    ],
    endpoints:{
      check:   "GET ?ApiUser={user}&ApiKey={key}&ClientIp={ip}&Command=namecheap.domains.check&DomainList={domain}",
      register:"GET ?Command=namecheap.domains.create&DomainName={domain}&Years={years}&...",
      renew:   "GET ?Command=namecheap.domains.renew&DomainName={domain}&Years={years}",
      transfer:"GET ?Command=namecheap.domains.transfer.create&DomainName={domain}&EPPCode={epp}",
      info:    "GET ?Command=namecheap.domains.getInfo&DomainName={domain}",
    }
  },
  {
    id:"opensrs",
    name:"OpenSRS",
    logo:"◈",
    color:G.purple,
    colorL:G.purpleL,
    category:"Kurumsal",
    tlds:"700+",
    apiType:"XML-RPC / HTTPS",
    apiBase:"https://rr-n1-tor.opensrs.net:55443",
    docsUrl:"https://domains.opensrs.guide/docs",
    testMode:true,
    testBase:"https://horizon.opensrs.net:55443",
    recommended:false,
    description:"Tucows bünyesi, beyaz etiket desteği, kurumsal ölçek için güçlü altyapı.",
    fields:[
      {key:"username",  label:"Reseller Username", type:"text",     required:true, placeholder:"reseller_name",   hint:"OpenSRS hesap kullanıcı adı"},
      {key:"apiKey",    label:"Private Key (MD5)", type:"password", required:true, placeholder:"xxxxxxxxxxxxxxxx", hint:"Horizon → Profile → Private Key"},
    ],
    endpoints:{
      check:   "POST XCP command=LOOKUP&attributes={domain}",
      register:"POST XCP command=SW_REGISTER&type=new&...",
      renew:   "POST XCP command=RENEW&...",
      transfer:"POST XCP command=SW_REGISTER&type=transfer&...",
      info:    "POST XCP command=GET&type=domain_auth_info&...",
    }
  },
  {
    id:"enom",
    name:"Enom",
    logo:"◇",
    color:G.amber,
    colorL:G.amberL,
    category:"Kurumsal",
    tlds:"800+",
    apiType:"XML / HTTPS",
    apiBase:"https://reseller.enom.com/interface.asp",
    docsUrl:"https://api.enom.com/docs",
    testMode:true,
    testBase:"https://resellertest.enom.com/interface.asp",
    recommended:false,
    description:"GoDaddy bünyesi, köklü API yapısı, geniş TLD kataloğu.",
    fields:[
      {key:"uid",      label:"Account UID",  type:"text",     required:true, placeholder:"reseller_id",     hint:"Enom hesap kullanıcı adı"},
      {key:"pw",       label:"Password",     type:"password", required:true, placeholder:"••••••••",         hint:"Enom hesap şifresi"},
    ],
    endpoints:{
      check:   "GET ?Command=Check&UID={uid}&PW={pw}&SLD={sld}&TLD={tld}&responsetype=XML",
      register:"GET ?Command=Purchase&SLD={sld}&TLD={tld}&NumYears={years}&...",
      renew:   "GET ?Command=Extend&SLD={sld}&TLD={tld}&NumYears={years}",
      transfer:"GET ?Command=TP_CreateOrder&SLD={sld}&TLD={tld}&AuthInfo={epp}",
      info:    "GET ?Command=GetDomainInfo&SLD={sld}&TLD={tld}",
    }
  },
  {
    id:"godaddy",
    name:"GoDaddy",
    logo:"▣",
    color:G.green,
    colorL:G.greenL,
    category:"Popüler",
    tlds:"500+",
    apiType:"REST API (JSON)",
    apiBase:"https://api.godaddy.com/v1",
    docsUrl:"https://developer.godaddy.com/doc",
    testMode:true,
    testBase:"https://api.ote-godaddy.com/v1",
    recommended:false,
    description:"Dünyanın en büyük registrar'ı, modern REST API, JSON tabanlı.",
    fields:[
      {key:"apiKey",    label:"API Key",    type:"text",     required:true, placeholder:"dz7p6s_xxxxxxxx",  hint:"developer.godaddy.com → Keys → Create New Key"},
      {key:"apiSecret", label:"API Secret", type:"password", required:true, placeholder:"••••••••",         hint:"API Key oluşturulurken verilen secret"},
    ],
    endpoints:{
      check:   "GET /domains/available?domain={domain}  — Header: Authorization: sso-key {key}:{secret}",
      register:"POST /domains/purchase",
      renew:   "POST /domains/{domain}/renew",
      transfer:"POST /domains/{domain}/transfer",
      info:    "GET /domains/{domain}",
    }
  },
  {
    id:"namecheap_reseller",
    name:"Nominet",
    logo:"△",
    color:G.rose,
    colorL:G.roseL,
    category:"ccTLD Uzmanı",
    tlds:".uk / .co.uk / .org.uk",
    apiType:"EPP (XML)",
    apiBase:"epp.nominet.org.uk:700",
    docsUrl:"https://registrars.nominet.uk/uk-domain-names/registration/",
    testMode:true,
    testBase:"testbed-epp.nominet.org.uk:700",
    recommended:false,
    description:"Yalnızca .uk uzantıları — İngiltere ccTLD için zorunlu, EPP protokolü.",
    fields:[
      {key:"tag",      label:"Registrar TAG",  type:"text",     required:true, placeholder:"MYCOMPANY",   hint:"Nominet üyeliğinizde tahsis edilen TAG"},
      {key:"password", label:"EPP Password",   type:"password", required:true, placeholder:"••••••••",     hint:"EPP bağlantı şifresi — IP whitelist zorunludur"},
    ],
    endpoints:{
      check:   "EPP <check> komutu — domain:check",
      register:"EPP <create> komutu — domain:create",
      renew:   "EPP <renew> komutu — domain:renew",
      transfer:"EPP <transfer> komutu — domain:transfer",
      info:    "EPP <info> komutu — domain:info",
    }
  },
  {
    id:"transip",
    name:"TransIP",
    logo:"▽",
    color:G.accent,
    colorL:G.accentL,
    category:"Avrupa",
    tlds:"300+",
    apiType:"REST API (JSON) v6",
    apiBase:"https://api.transip.nl/v6",
    docsUrl:"https://api.transip.nl/rest/docs.html",
    testMode:false,
    recommended:false,
    description:"Hollanda merkezli, modern REST API v6, Avrupa ccTLD'leri güçlü.",
    fields:[
      {key:"login",      label:"Account Login",    type:"text",     required:true, placeholder:"transip_user",     hint:"TransIP hesap kullanıcı adı"},
      {key:"privateKey", label:"Private Key (RSA)", type:"textarea", required:true, placeholder:"-----BEGIN RSA PRIVATE KEY-----\n...", hint:"Control Panel → API → Private Keys → Generate"},
    ],
    endpoints:{
      check:   "GET /domain-availability/{domain}  — Bearer JWT token",
      register:"POST /domains",
      renew:   "POST /domains/{domain}/actions (type: renew)",
      transfer:"POST /domains/{domain}/actions (type: transfer)",
      info:    "GET /domains/{domain}",
    }
  },
];

// Global registrar config state
let _regConfig = {};
let _regListeners = [];
const setRegConfig = fn => { _regConfig = typeof fn==="function"?fn(_regConfig):fn; _regListeners.forEach(cb=>cb(_regConfig)); };
const useRegConfig = () => {
  const [cfg, setL] = useState(_regConfig);
  useEffect(()=>{ _regListeners.push(setL); return ()=>{ _regListeners=_regListeners.filter(x=>x!==setL); }; },[]);
  return [cfg, setRegConfig];
};

function ADomainRegistrars() {
  const [cfg, setCfg] = useRegConfig();
  const [activeReg, setActiveReg] = useState(null); // açık konfigürasyon paneli
  const [testResult, setTestResult] = useState({}); // {regId: "success"|"error"|"testing"}
  const [catFilter, setCatFilter] = useState("all");
  const [formData, setFormData] = useState({});

  const categories = ["all", "Önerilen", "Kurumsal", "Popüler", "ccTLD Uzmanı", "Avrupa"];

  const handleOpen = (reg) => {
    setActiveReg(reg);
    setFormData(cfg[reg.id] || {});
  };

  const handleSave = () => {
    setCfg(prev => ({...prev, [activeReg.id]: {...formData, enabled: true, testMode: formData.testMode||false}}));
    setActiveReg(null);
  };

  const handleDisable = (regId) => {
    setCfg(prev => ({...prev, [regId]: {...(prev[regId]||{}), enabled: false}}));
  };

  const handleTest = async (reg) => {
    setTestResult(prev=>({...prev, [reg.id]:"testing"}));
    // Gerçek bağlantı testi simülasyonu (prod'da fetch ile API'ye gidecek)
    await new Promise(r=>setTimeout(r,1800));
    const hasCreds = reg.fields.every(f=>!f.required||(formData[f.key]||cfg[reg.id]?.[f.key]));
    setTestResult(prev=>({...prev, [reg.id]: hasCreds?"success":"error"}));
  };

  const filtered = catFilter==="all" ? REGISTRARS : REGISTRARS.filter(r=>r.category===catFilter);
  const enabledCount = REGISTRARS.filter(r=>cfg[r.id]?.enabled).length;

  return (
    <div>
      {/* Aktif registrar konfigürasyon modalı */}
      {activeReg&&(
        <Modal title={`${activeReg.logo} ${activeReg.name} — Entegrasyon Ayarları`} onClose={()=>setActiveReg(null)} width={620}>
          {/* Registrar bilgi banner */}
          <div style={{background:activeReg.colorL,border:`1px solid ${activeReg.color}30`,borderRadius:10,padding:"12px 16px",marginBottom:18}}>
            <div style={{display:"flex",gap:12,alignItems:"flex-start"}}>
              <div style={{flex:1}}>
                <div style={{fontSize:12,fontWeight:600,color:activeReg.color,marginBottom:4}}>
                  API Tipi: <strong>{activeReg.apiType}</strong> · TLD: <strong>{activeReg.tlds}</strong>
                </div>
                <div style={{fontSize:12,color:G.ink2,lineHeight:1.6}}>{activeReg.description}</div>
              </div>
              <a href={activeReg.docsUrl} target="_blank" rel="noreferrer"
                style={{fontSize:11,fontWeight:700,color:activeReg.color,background:"rgba(255,255,255,.7)",padding:"4px 10px",borderRadius:6,textDecoration:"none",whiteSpace:"nowrap",border:`1px solid ${activeReg.color}40`}}>
                📄 API Docs →
              </a>
            </div>
          </div>

          {/* Test modu toggle */}
          {activeReg.testMode&&(
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 14px",background:G.canvas,borderRadius:8,marginBottom:16,border:`1px solid ${G.border}`}}>
              <div>
                <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>Test Modu (Sandbox)</div>
                <div style={{fontSize:11,color:G.ink2,marginTop:2}}>
                  Etkinleştirilince: <span style={{fontFamily:"'Courier New',monospace",fontSize:10}}>{activeReg.testBase}</span>
                </div>
              </div>
              <div onClick={()=>setFormData(f=>({...f,testMode:!f.testMode}))}
                style={{width:42,height:24,borderRadius:12,background:formData.testMode?G.accent:G.border2,cursor:"pointer",position:"relative",transition:"background .2s",flexShrink:0}}>
                <div style={{position:"absolute",top:3,left:formData.testMode?20:3,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s",boxShadow:"0 1px 4px rgba(0,0,0,.2)"}}/>
              </div>
            </div>
          )}

          {/* API alanları */}
          {activeReg.fields.map(f=>(
            <Fld key={f.key} label={`${f.label}${f.required?" *":""}`}>
              {f.type==="textarea"
                ? <textarea value={formData[f.key]||""} onChange={e=>setFormData(d=>({...d,[f.key]:e.target.value}))}
                    placeholder={f.placeholder} style={{width:"100%",minHeight:90,padding:"8px 11px",fontSize:11,fontFamily:"'Courier New',monospace",border:`1px solid ${G.border2}`,borderRadius:8,background:G.raised,resize:"vertical",boxSizing:"border-box"}}/>
                : <Inp type={f.type} value={formData[f.key]||""} onChange={e=>setFormData(d=>({...d,[f.key]:e.target.value}))}
                    placeholder={f.placeholder} style={f.type==="password"?{}:{fontFamily:"'Courier New',monospace"}}/>
              }
              {f.hint&&<div style={{fontSize:11,color:G.ink2,marginTop:4}}>💡 {f.hint}</div>}
            </Fld>
          ))}

          {/* API Endpoint Referansı */}
          <div style={{marginTop:4,marginBottom:16}}>
            <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:8}}>API Endpoint Referansı</div>
            <div style={{background:G.canvas,borderRadius:8,border:`1px solid ${G.border}`,overflow:"hidden"}}>
              {Object.entries(activeReg.endpoints).map(([op,ep],i,arr)=>(
                <div key={op} style={{display:"flex",gap:0,borderBottom:i<arr.length-1?`1px solid ${G.border}`:"none"}}>
                  <div style={{width:80,padding:"7px 10px",fontSize:10,fontWeight:700,color:activeReg.color,background:activeReg.colorL,textTransform:"uppercase",letterSpacing:"1px",flexShrink:0,borderRight:`1px solid ${G.border}`}}>
                    {op}
                  </div>
                  <div style={{padding:"7px 10px",fontSize:10,fontFamily:"'Courier New',monospace",color:G.ink1,overflowX:"auto",whiteSpace:"nowrap"}}>
                    {ep}
                  </div>
                </div>
              ))}
            </div>
            <div style={{fontSize:10,color:G.ink2,marginTop:6}}>
              Production base URL: <span style={{fontFamily:"'Courier New',monospace",color:G.ink0}}>{activeReg.apiBase}</span>
            </div>
          </div>

          {/* Test bağlantısı sonucu */}
          {testResult[activeReg.id]&&(
            <div style={{marginBottom:14,padding:"9px 14px",borderRadius:8,fontSize:12,fontWeight:600,
              background:testResult[activeReg.id]==="success"?G.greenL:testResult[activeReg.id]==="testing"?G.accentL:G.redL,
              color:testResult[activeReg.id]==="success"?G.green:testResult[activeReg.id]==="testing"?G.accent:G.red,
              border:`1px solid ${testResult[activeReg.id]==="success"?"#BBF7D0":testResult[activeReg.id]==="testing"?G.accent+"40":"#FECACA"}`}}>
              {testResult[activeReg.id]==="testing"?"⏳ Bağlantı test ediliyor...":testResult[activeReg.id]==="success"?"✓ Bağlantı başarılı! API erişimi doğrulandı.":"✕ Bağlantı başarısız. API anahtarı veya kimlik bilgilerini kontrol edin."}
            </div>
          )}

          <div style={{display:"flex",gap:8}}>
            <Btn onClick={()=>setActiveReg(null)}>İptal</Btn>
            <Btn variant="outline" onClick={()=>handleTest(activeReg)} disabled={testResult[activeReg.id]==="testing"}>
              🔌 Bağlantıyı Test Et
            </Btn>
            <Btn variant="primary" onClick={handleSave} disabled={activeReg.fields.filter(f=>f.required).some(f=>!formData[f.key])} style={{flex:1}}>
              Kaydet & Etkinleştir
            </Btn>
          </div>
        </Modal>
      )}

      {/* Metrikler */}
      <div className="rg3" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12,marginBottom:18}}>
        <Metric label="Aktif Entegrasyon" value={enabledCount} accent={enabledCount>0?G.green:G.ink2} icon="🔌"/>
        <Metric label="Kullanılabilir" value={REGISTRARS.length} icon="📋"/>
        <Metric label="Toplam TLD Kapsamı" value="5000+" accent={G.accent} icon="🌐"/>
      </div>

      {/* Kategori filtreleri */}
      <div style={{display:"flex",gap:8,marginBottom:16,flexWrap:"wrap"}}>
        {categories.map(c=>(
          <Pill key={c} active={catFilter===c} onClick={()=>setCatFilter(c)}>
            {c==="all"?"Tümü":c}
          </Pill>
        ))}
      </div>

      {/* Registrar kartları */}
      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        {filtered.map(reg=>{
          const regCfg = cfg[reg.id]||{};
          const isEnabled = !!regCfg.enabled;
          const isTest = !!regCfg.testMode;
          const tRes = testResult[reg.id];

          return (
            <Card key={reg.id} style={{padding:"16px 20px",border:`1px solid ${isEnabled?reg.color+"60":G.border}`}}>
              <div style={{display:"flex",alignItems:"flex-start",gap:14}}>
                {/* Logo */}
                <div style={{width:46,height:46,borderRadius:12,background:reg.colorL,border:`1px solid ${reg.color}30`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22,flexShrink:0,color:reg.color,fontWeight:900}}>
                  {reg.logo}
                </div>

                {/* Bilgiler */}
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4,flexWrap:"wrap"}}>
                    <div style={{fontSize:15,fontWeight:800,color:G.ink0,letterSpacing:"-0.3px"}}>{reg.name}</div>
                    {reg.recommended&&<span style={{fontSize:10,fontWeight:700,background:G.greenL,color:G.green,padding:"1px 7px",borderRadius:6}}>⭐ Önerilen</span>}
                    <span style={{fontSize:10,background:reg.colorL,color:reg.color,padding:"1px 7px",borderRadius:6,fontWeight:600}}>{reg.category}</span>
                    {isEnabled&&<span style={{fontSize:10,background:G.greenL,color:G.green,padding:"1px 7px",borderRadius:6,fontWeight:700}}>● Aktif</span>}
                    {isEnabled&&isTest&&<span style={{fontSize:10,background:G.amberL,color:G.amber,padding:"1px 7px",borderRadius:6,fontWeight:700}}>🧪 Test Modu</span>}
                  </div>
                  <div style={{fontSize:12,color:G.ink2,marginBottom:6,lineHeight:1.5}}>{reg.description}</div>
                  <div style={{display:"flex",gap:14,fontSize:11,color:G.ink2,flexWrap:"wrap"}}>
                    <span>API: <strong style={{color:G.ink1}}>{reg.apiType}</strong></span>
                    <span>TLD: <strong style={{color:G.ink1}}>{reg.tlds}</strong></span>
                    {reg.testMode&&<span style={{color:G.teal}}>✓ Sandbox modu</span>}
                    {tRes==="success"&&<span style={{color:G.green,fontWeight:700}}>✓ Bağlantı doğrulandı</span>}
                    {tRes==="error"&&<span style={{color:G.red,fontWeight:700}}>✕ Bağlantı hatası</span>}
                  </div>
                </div>

                {/* Aksiyonlar */}
                <div style={{display:"flex",gap:6,flexShrink:0,flexWrap:"wrap",justifyContent:"flex-end"}}>
                  {isEnabled&&(
                    <Btn size="sm" variant="danger" onClick={()=>handleDisable(reg.id)}>Devre Dışı</Btn>
                  )}
                  <Btn size="sm" variant={isEnabled?"outline":"primary"} onClick={()=>handleOpen(reg)}>
                    {isEnabled?"⚙️ Düzenle":"+ Entegre Et"}
                  </Btn>
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      {/* Geliştirici notu */}
      <Card style={{padding:18,marginTop:16,background:G.canvas}}>
        <div style={{fontSize:12,fontWeight:700,color:G.ink1,marginBottom:8}}>📌 Entegrasyon Notu — Geliştirici</div>
        <div style={{fontSize:12,color:G.ink2,lineHeight:1.8}}>
          Bu panel, domain registrar entegrasyon ayarlarını saklar. Gerçek API çağrıları için backend servisi gereklidir
          (Node.js/PHP). Her registrar için API anahtarları şifreli olarak veritabanında tutulmalı ve sunucu tarafından
          proxy edilmelidir. Frontend'den direkt API çağrısı CORS ve güvenlik nedeniyle desteklenmez.
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:8,marginTop:12}}>
          {[
            ["Alan Adı Sorgulama","POST /api/domain/check"],
            ["Alan Adı Kayıt","POST /api/domain/register"],
            ["Transfer","POST /api/domain/transfer"],
            ["Yenileme","POST /api/domain/renew"],
            ["Whois / Bilgi","GET /api/domain/info/:domain"],
            ["DNS Güncelleme","PUT /api/domain/dns/:domain"],
          ].map(([l,e])=>(
            <div key={l} style={{background:G.surface,border:`1px solid ${G.border}`,borderRadius:7,padding:"8px 12px"}}>
              <div style={{fontSize:10,color:G.ink2,marginBottom:2}}>{l}</div>
              <div style={{fontFamily:"'Courier New',monospace",fontSize:11,color:G.accent}}>{e}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   SÖZLEŞME YÖNETİMİ (Admin)
═══════════════════════════════════════════════════════════ */
function AContracts() {
  const [contracts, setConts] = useContracts();
  const [selC, setSelC]       = useState(null);
  const [editing, setEditing] = useState(false);
  const [editContent, setEditContent] = useState("");
  const [editTitle, setEditTitle]     = useState("");
  const [preview, setPreview]         = useState(false);

  const update = (id, patch) => setConts(prev => prev.map(c => c.id===id ? {...c,...patch} : c));

  const openEdit = (c) => {
    setSelC(c);
    setEditTitle(c.title);
    setEditContent(c.content);
    setEditing(true);
    setPreview(false);
  };

  const save = () => {
    update(selC.id, {title:editTitle, content:editContent});
    setEditing(false);
    setSelC(null);
  };

  return (
    <div>
      {/* Sözleşme düzenleme modalı */}
      {editing&&selC&&(
        <Modal title={`Sözleşme Düzenle — ${selC.title}`} onClose={()=>setEditing(false)} width={780}>
          <Fld label="Sözleşme Başlığı">
            <Inp value={editTitle} onChange={e=>setEditTitle(e.target.value)}/>
          </Fld>

          {/* Preview toggle */}
          <div style={{display:"flex",gap:8,marginBottom:10}}>
            <Btn size="sm" variant={!preview?"primary":"outline"} onClick={()=>setPreview(false)}>✏️ Düzenle</Btn>
            <Btn size="sm" variant={preview?"primary":"outline"} onClick={()=>setPreview(true)}>👁 Önizle</Btn>
          </div>

          {preview ? (
            <div style={{background:G.canvas,border:`1px solid ${G.border}`,borderRadius:8,padding:"16px 20px",maxHeight:400,overflowY:"auto"}}>
              <div style={{fontSize:14,fontWeight:700,color:G.ink0,marginBottom:12}}>{editTitle}</div>
              <div style={{fontSize:13,color:G.ink1,lineHeight:1.8,whiteSpace:"pre-wrap"}}>{editContent}</div>
            </div>
          ) : (
            <textarea
              value={editContent}
              onChange={e=>setEditContent(e.target.value)}
              style={{
                width:"100%",minHeight:380,padding:"12px 14px",
                fontSize:13,lineHeight:1.7,fontFamily:"'JetBrains Mono',monospace",
                border:`1px solid ${G.border}`,borderRadius:8,
                background:G.canvas,color:G.ink0,
                resize:"vertical",boxSizing:"border-box",outline:"none",
              }}
              onFocus={e=>{e.target.style.borderColor=G.accent;e.target.style.boxShadow=`0 0 0 3px ${G.accent}18`;}}
              onBlur={e=>{e.target.style.borderColor=G.border;e.target.style.boxShadow="none";}}
            />
          )}
          <div style={{fontSize:11,color:G.ink2,marginTop:6,marginBottom:14}}>
            Düz metin formatında yazın. Başlıklar için büyük harfli satırlar kullanın.
          </div>
          <div style={{display:"flex",gap:8}}>
            <Btn onClick={()=>setEditing(false)}>İptal</Btn>
            <Btn variant="primary" onClick={save} style={{flex:1}}>💾 Kaydet</Btn>
          </div>
        </Modal>
      )}

      <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14}}>
        {contracts.map(c=>(
          <Card key={c.id} style={{padding:0,overflow:"hidden"}}>
            {/* Header */}
            <div style={{padding:"14px 20px",background:G.canvas,borderBottom:`1px solid ${G.border}`,display:"flex",alignItems:"center",gap:12}}>
              <span style={{fontSize:20}}>{c.icon}</span>
              <div style={{flex:1}}>
                <div style={{fontSize:15,fontWeight:600,color:G.ink0}}>{c.title}</div>
                <div style={{fontSize:12,color:G.ink2,marginTop:2,display:"flex",gap:12}}>
                  <span>Gösterildiği yer: <strong>{c.showOn.join(", ")==="register"?"Kayıt Ol":c.showOn.join(", ")==="purchase"?"Satın Alma":"Kayıt Ol, Satın Alma"}</strong></span>
                  <span>Durum: <strong style={{color:c.active?G.green:G.red}}>{c.active?"Aktif":"Pasif"}</strong></span>
                  <span>Zorunlu: <strong style={{color:c.required?G.ink0:G.ink2}}>{c.required?"Evet":"Hayır"}</strong></span>
                </div>
              </div>
              <div style={{display:"flex",gap:8,alignItems:"center"}}>
                {/* Aktif toggle */}
                <div onClick={()=>update(c.id,{active:!c.active})}
                  style={{width:40,height:22,borderRadius:11,background:c.active?G.green:G.border,cursor:"pointer",position:"relative",transition:"background .2s",flexShrink:0}}>
                  <div style={{position:"absolute",top:2,left:c.active?20:2,width:18,height:18,borderRadius:"50%",background:"#fff",transition:"left .2s",boxShadow:"0 1px 3px rgba(0,0,0,.2)"}}/>
                </div>
                <Btn size="sm" onClick={()=>openEdit(c)}>✏️ Düzenle</Btn>
              </div>
            </div>

            {/* İçerik önizleme */}
            <div style={{padding:"12px 20px"}}>
              <div style={{fontSize:12,color:G.ink2,lineHeight:1.6,whiteSpace:"pre-wrap",maxHeight:80,overflow:"hidden",position:"relative"}}>
                {c.content.slice(0,300)}{c.content.length>300&&"..."}
                <div style={{position:"absolute",bottom:0,left:0,right:0,height:32,background:`linear-gradient(transparent, ${G.surface})`}}/>
              </div>
              <button onClick={()=>openEdit(c)} style={{marginTop:8,fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",padding:0}}>
                Tüm metni görüntüle ve düzenle →
              </button>
            </div>
          </Card>
        ))}
      </div>

      <Notice type="info" style={{marginTop:16}}>
        💡 Sözleşmeler, kullanıcılar tarafından kayıt veya satın alma sırasında kabul edilmek zorundadır. Zorunlu sözleşmeler kabul edilmeden işlem tamamlanamaz.
      </Notice>
    </div>
  );
}

function ASettings({siteLogo,setSiteLogo}) {
  const fileRef = useRef();

  const handleLogoUpload = (e) => {
    const file = e.target.files?.[0];
    if(!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => setSiteLogo(ev.target.result);
    reader.readAsDataURL(file);
  };

  const secs=[
    {t:"Şirket",f:[["Şirket Adı","HostPanel Pro Ltd."],["Vergi No","1234567890"],["E-posta","info@hostpanelpro.com"],["Adres","İstanbul, TR"]]},
    {t:"GİB e-Fatura",f:[["Entegratör","GİB Entegratör A.Ş."],["URN","urn:mail:defaultpk@firma.com"],["Ortam","Üretim"]]},
    {t:"iyzico",f:[["API Key","xxx"],["Secret Key","xxx"],["Ortam","Production"]]},
  ];

  return(
    <div style={{display:"flex",flexDirection:"column",gap:14}}>

      {/* ── Logo Upload ── */}
      <Card style={{padding:20}}>
        <ST>Marka Logosu</ST>
        <div style={{fontSize:12,color:G.ink2,marginBottom:16}}>
          Yüklenen logo; sidebar, giriş ekranı ve katalog sayfasında görünür. PNG, JPG veya SVG — önerilen boyut: 320×80 px.
        </div>

        {/* Preview area */}
        <div style={{display:"flex",gap:16,alignItems:"flex-start",marginBottom:16}}>
          {/* Current logo preview */}
          <div style={{
            width:220, height:72, borderRadius:10, border:`2px dashed ${siteLogo?G.accent:G.border2}`,
            background:siteLogo?"#fff":G.canvas, display:"flex", alignItems:"center", justifyContent:"center",
            overflow:"hidden", flexShrink:0, transition:"border-color .2s",
          }}>
            {siteLogo
              ? <img src={siteLogo} alt="Logo önizleme" style={{maxWidth:"100%",maxHeight:"100%",objectFit:"contain",padding:8}}/>
              : <div style={{textAlign:"center"}}>
                  <div style={{fontSize:20,marginBottom:4}}>🖼️</div>
                  <div style={{fontSize:11,color:G.ink2}}>Logo önizlemesi</div>
                </div>
            }
          </div>

          {/* Upload + Remove buttons */}
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            <input
              ref={fileRef}
              type="file"
              accept="image/png,image/jpeg,image/svg+xml,image/webp"
              style={{display:"none"}}
              onChange={handleLogoUpload}
            />
            <Btn
              variant="primary"
              size="sm"
              onClick={()=>fileRef.current?.click()}
            >
              📁 Logo Yükle
            </Btn>
          </div>
        </div>

        {/* Drag & drop zone */}
        <div
          style={{
            border:`2px dashed ${G.border2}`, borderRadius:10, padding:"20px",
            textAlign:"center", cursor:"pointer", background:G.canvas,
            transition:"all .15s",
          }}
          onClick={()=>fileRef.current?.click()}
          onDragOver={e=>{e.preventDefault();e.currentTarget.style.borderColor=G.accent;e.currentTarget.style.background=G.accentL;}}
          onDragLeave={e=>{e.currentTarget.style.borderColor=G.border2;e.currentTarget.style.background=G.canvas;}}
          onDrop={e=>{
            e.preventDefault();
            e.currentTarget.style.borderColor=G.border2;
            e.currentTarget.style.background=G.canvas;
            const file=e.dataTransfer.files?.[0];
            if(!file||!file.type.startsWith("image/")) return;
            const reader=new FileReader();
            reader.onload=ev=>setSiteLogo(ev.target.result);
            reader.readAsDataURL(file);
          }}
        >
          <div style={{fontSize:22,marginBottom:6}}>⬆️</div>
          <div style={{fontSize:13,fontWeight:600,color:G.ink1,marginBottom:3}}>Sürükle & Bırak veya Tıkla</div>
          <div style={{fontSize:11,color:G.ink2}}>PNG, JPG, SVG, WEBP · Maks 2 MB</div>
        </div>

        {siteLogo && (
          <div style={{marginTop:12,padding:"8px 12px",background:G.greenL,border:`1px solid #BBF7D0`,borderRadius:8,fontSize:12,color:G.green,fontWeight:600}}>
            ✓ Logo başarıyla yüklendi — sidebar ve giriş ekranında aktif
          </div>
        )}
      </Card>

      {/* ── Other settings ── */}
      {secs.map((s,si)=>(
        <Card key={si} style={{padding:20}}>
          <ST>{s.t}</ST>
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            {s.f.map(([l,v])=><Fld key={l} label={l}><Inp defaultValue={v}/></Fld>)}
          </div>
          <Btn size="sm" variant="primary" style={{marginTop:8}}>Kaydet</Btn>
        </Card>
      ))}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   USER PAGES
═══════════════════════════════════════════════════════════ */
function UDash({user, onNav}) {
  const [invoices]=useInvoices();
  const [orders]=useOrders();
  const [domains]=useDomains();
  const [billing]=useBilling();
  const {mob,tab}=useR();
  const myO=orders.filter(o=>o.customerId===user.id);
  const myI=invoices.filter(i=>i.customerId===user.id);
  const profileOk = isProfileComplete(billing);
  return(
    <div style={{display:"flex",flexDirection:"column",gap:14}}>
      {/* Profil tamamlama uyarısı */}
      {!profileOk&&(
        <div style={{background:"#FFF8E1",border:"1px solid #F59E0B",borderRadius:12,padding:"14px 18px",display:"flex",alignItems:"center",gap:14}}>
          <span style={{fontSize:24,flexShrink:0}}>⚠️</span>
          <div style={{flex:1}}>
            <div style={{fontWeight:600,color:"#92400E",marginBottom:2}}>Profiliniz tamamlanmamış</div>
            <div style={{fontSize:13,color:"#78350F"}}>Hizmet satın alabilmek için kişisel bilgilerinizi tamamlamanız gerekmektedir.</div>
          </div>
          <Btn size="sm" variant="accent" onClick={()=>onNav?.("profile")}>Tamamla →</Btn>
        </div>
      )}
      <div style={{display:"grid",gridTemplateColumns:mob?"repeat(2,1fr)":tab?"repeat(2,1fr)":"repeat(4,1fr)",gap:12}}>
        <Metric label="Aktif Hizmet"  value={myO.filter(o=>o.status==="active").length} onClick={()=>onNav?.("services")}/>
        <Metric label="Ödenmemiş"     value={fmt(myI.filter(i=>i.status!=="paid").reduce((s,i)=>s+i.total,0))} accent={G.red} onClick={()=>onNav?.("invoices")}/>
        <Metric label="Domain"        value={domains.filter(d=>d.customerId===user.id).length} onClick={()=>onNav?.("domains")}/>
        <Metric label="Açık Ticket"   value={TICKETS.filter(t=>t.customerId===user.id&&t.status==="open").length} onClick={()=>onNav?.("tickets")}/>
      </div>
      <div style={{display:"grid",gridTemplateColumns:mob?"1fr":"1fr 1fr",gap:14}}>
        <Card style={{padding:18}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <ST style={{marginBottom:0}}>Hizmetlerim</ST>
            <button onClick={()=>onNav?.("services")} style={{fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:500}}>Tümünü gör →</button>
          </div>
          {myO.length===0
            ? <div style={{fontSize:13,color:G.ink2}}>Henüz hizmet yok.</div>
            : myO.map((o,i)=>{
              const catD=CATS.find(c=>c.id===o.categoryId);
              return (
                <div key={i} onClick={()=>onNav?.("services")} style={{padding:"10px 0",borderBottom:i<myO.length-1?`1px solid ${G.border}`:"none",cursor:"pointer",borderRadius:6,transition:"background .1s"}}
                  onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
                  onMouseLeave={e=>e.currentTarget.style.background=""}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
                    <div style={{display:"flex",gap:8,alignItems:"center"}}>
                      <span style={{background:catD?.colorL,color:catD?.color,fontSize:12,width:26,height:26,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:6}}>{catD?.icon}</span>
                      <div>
                        <div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{o.product}</div>
                        {o.domain&&<div style={{fontSize:11,color:G.teal,fontFamily:"'Courier New',monospace",marginTop:1}}>🌐 {o.domain}</div>}
                        {!o.domain&&["hosting","vps","dedicated","email"].includes(o.categoryId)&&(
                          <div style={{fontSize:11,color:G.amber,marginTop:1}}>⚠️ Alan adı tanımlanmadı</div>
                        )}
                      </div>
                    </div>
                    <div style={{textAlign:"right"}}>
                      <Chip s={o.status}/>
                      <div style={{fontSize:11,color:G.ink2,marginTop:3}}>{fmtK(o.price)}/yıl</div>
                    </div>
                  </div>
                  {o.ip&&o.ip!=="—"&&<div style={{fontSize:11,color:G.ink2,marginTop:4,fontFamily:"'Courier New',monospace"}}>IP: {o.ip} · Yenileme: {o.renew}</div>}
                </div>
              );
            })
          }
        </Card>
        <Card style={{padding:18}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <ST style={{marginBottom:0}}>Son Faturalar</ST>
            <button onClick={()=>onNav?.("invoices")} style={{fontSize:12,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:500}}>Tümünü gör →</button>
          </div>
          {myI.length===0
            ? <div style={{fontSize:13,color:G.ink2}}>Fatura yok.</div>
            : myI.map((inv,i)=>(
              <div key={i} onClick={()=>onNav?.("invoices")} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"9px 0",borderBottom:i<myI.length-1?`1px solid ${G.border}`:"none",cursor:"pointer",borderRadius:6,transition:"background .1s"}}
                onMouseEnter={e=>e.currentTarget.style.background=G.canvas}
                onMouseLeave={e=>e.currentTarget.style.background=""}>
                <div><div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{inv.service}</div><div style={{fontSize:11,color:G.ink2,marginTop:2}}>{inv.date}</div></div>
                <div style={{textAlign:"right"}}><div style={{fontSize:13,fontWeight:700}}>{fmt(inv.total)}</div><div style={{marginTop:3}}><Chip s={inv.status}/></div></div>
              </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

function UInvoices({user}) {
  const [invoices]=useInvoices();
  const [orders]=useOrders();
  const [payM,setPayM]=useState(null);
  const [detM,setDetM]=useState(null);
  const [successM,setSuccessM]=useState(null);
  const [card,setCard]=useState({no:"",exp:"",cvv:"",holder:"",inst:"1"});
  const myI=invoices.filter(i=>i.customerId===user.id);

  const handlePay = () => {
    const linked=orders.find(o=>o.id===payM.orderId);
    payInvoice(payM.id);
    setPayM(null);
    setCard({no:"",exp:"",cvv:"",holder:"",inst:"1"});
    setSuccessM({inv:payM,order:linked});
  };

  return(
    <div>
      {/* Ödeme modalı */}
      {payM&&(
        <Modal title={`Fatura Öde — ${payM.id}`} onClose={()=>setPayM(null)} width={480}>
          <div style={{background:G.canvas,borderRadius:10,padding:14,marginBottom:16}}>
            <div style={{fontSize:13,fontWeight:700,color:G.ink0,marginBottom:4}}>{payM.service}</div>
            {payM.orderId&&(()=>{
              const o=orders.find(x=>x.id===payM.orderId);
              if(!o||o.status!=="suspended") return null;
              return (
                <div style={{background:G.amberL,border:`1px solid ${G.amber}40`,borderRadius:8,padding:"8px 12px",fontSize:12,color:G.amber,fontWeight:600,marginBottom:10}}>
                  ⚠️ Ödeme sonrası <strong>{o.product}</strong> hizmetiniz otomatik aktif edilecektir.
                </div>
              );
            })()}
            {[["Tutar (KDV hariç)",fmt(payM.amount)],["KDV (%18)",fmt(payM.tax)]].map(([l,v])=>(
              <div key={l} style={{display:"flex",justifyContent:"space-between",padding:"5px 0",borderTop:`1px solid ${G.border}`,fontSize:13}}>
                <span style={{color:G.ink2}}>{l}</span><span style={{color:G.ink1}}>{v}</span>
              </div>
            ))}
            <div style={{display:"flex",justifyContent:"space-between",padding:"8px 0",borderTop:`1px solid ${G.border}`,fontSize:16,fontWeight:900}}>
              <span>Toplam</span><span style={{color:G.ink0}}>{fmt(payM.total)}</span>
            </div>
          </div>
          <Fld label="Kart Numarası"><Inp value={card.no} onChange={e=>setCard({...card,no:e.target.value})} placeholder="**** **** **** ****" style={{fontFamily:"'Courier New',monospace",letterSpacing:"2px"}}/></Fld>
          <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
            <Fld label="Son Kullanma"><Inp value={card.exp} onChange={e=>setCard({...card,exp:e.target.value})} placeholder="MM/YY"/></Fld>
            <Fld label="CVV"><Inp value={card.cvv} onChange={e=>setCard({...card,cvv:e.target.value})} placeholder="***"/></Fld>
          </div>
          <Fld label="Kart İsmi"><Inp value={card.holder} onChange={e=>setCard({...card,holder:e.target.value})} placeholder="" style={{textTransform:"uppercase"}}/></Fld>
          <Fld label="Taksit">
            <Sel value={card.inst} onChange={e=>setCard({...card,inst:e.target.value})}>
              <option value="1">Tek çekim — {fmt(payM.total)}</option>
              <option value="3">3 Taksit — {fmt(payM.total/3)}/ay</option>
              <option value="6">6 Taksit — {fmt(payM.total/6)}/ay</option>
            </Sel>
          </Fld>
          <Notice type="info">🔒 3D Secure korumalı — iyzico güvenli altyapısı</Notice>
          <div style={{display:"flex",gap:8}}>
            <Btn onClick={()=>setPayM(null)}>İptal</Btn>
            <button onClick={handlePay} disabled={!card.no||!card.exp||!card.cvv||!card.holder}
              style={{flex:1,padding:"11px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:14,fontWeight:800,fontFamily:"inherit",
                opacity:(!card.no||!card.exp||!card.cvv||!card.holder)?0.35:1,
                cursor:(!card.no||!card.exp||!card.cvv||!card.holder)?"not-allowed":"pointer",
                transition:"opacity .2s"}}>
              {(!card.no||!card.exp||!card.cvv||!card.holder)?"🔒 Kart bilgilerini doldurun":`🔒 Öde — ${fmt(payM.total)}`}
            </button>
          </div>
        </Modal>
      )}

      {/* Başarı modalı */}
      {successM&&(
        <Modal title="" onClose={()=>setSuccessM(null)} width={400}>
          <div style={{textAlign:"center",padding:"8px 0 12px"}}>
            <div style={{width:52,height:52,background:G.greenL,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:22,margin:"0 auto 12px"}}>✓</div>
            <div style={{fontSize:18,fontWeight:900,color:G.ink0,marginBottom:6}}>Ödeme Başarılı</div>
            <div style={{fontSize:13,color:G.ink2,marginBottom:16}}>{successM.inv.service} için {fmt(successM.inv.total)} ödendi.</div>
            {successM.order&&(
              <div style={{background:G.greenL,border:`1px solid #BBF7D0`,borderRadius:10,padding:14,textAlign:"left",marginBottom:14}}>
                <div style={{fontSize:12,fontWeight:700,color:G.green,marginBottom:8}}>✓ Hizmet Aktif Edildi</div>
                {[["Ürün",successM.order.product],["Yeni Yenileme",successM.order.renew]].map(([l,v])=>(
                  <div key={l} style={{display:"flex",justifyContent:"space-between",fontSize:13,padding:"4px 0",borderTop:`1px solid #D1FAE5`}}>
                    <span style={{color:G.green}}>{l}</span><span style={{fontWeight:700,color:G.ink0}}>{v}</span>
                  </div>
                ))}
              </div>
            )}
            <Btn variant="primary" onClick={()=>setSuccessM(null)} style={{width:"100%",padding:"10px"}}>Tamam</Btn>
          </div>
        </Modal>
      )}

      {detM&&<InvoiceModal inv={detM} onClose={()=>setDetM(null)}/>}
      <Tbl heads={["Fatura No","Hizmet","Toplam","Tarih","Vade","Durum",""]}>
        {myI.map((inv,i)=>{
          const isPayable=inv.status==="pending"||inv.status==="overdue";
          return (
            <tr key={i}>
              <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.accent,fontWeight:700,cursor:"pointer"}} onClick={()=>setDetM(inv)}>{inv.id}</TD>
              <TD s={{fontWeight:600}}>{inv.service}</TD>
              <TD s={{fontWeight:800}}>{fmt(inv.total)}</TD>
              <TD s={{fontSize:12,color:G.ink2}}>{inv.date}</TD>
              <TD s={{color:inv.status==="overdue"?G.red:G.ink2,fontSize:12,fontWeight:inv.status==="overdue"?700:400}}>{inv.due}</TD>
              <TD><Chip s={inv.status}/></TD>
              <TD>
                <div style={{display:"flex",gap:6}}>
                  <Btn size="sm" onClick={()=>setDetM(inv)}>Detay</Btn>
                  {isPayable&&(
                    <button onClick={()=>setPayM(inv)} style={{padding:"4px 12px",background:inv.status==="overdue"?G.red:G.ink0,color:"#fff",border:"none",borderRadius:7,fontSize:11,fontWeight:700,cursor:"pointer",fontFamily:"inherit"}}>
                      💳 Öde
                    </button>
                  )}
                </div>
              </TD>
            </tr>
          );
        })}
      </Tbl>
    </div>
  );
}

function UServices({user}) {
  const [orders]=useOrders();
  const [servers]=useServers();
  const [domainEditM,setDomainEditM]=useState(null); // domain tanımla modal
  const [domainVal,setDomainVal]=useState("");
  const myO=orders.filter(o=>o.customerId===user.id);

  // Panel tipi ve login URL'i
  const getPanelInfo = (o) => {
    const srv=servers.find(s=>s.id===o.serverId);
    if(!srv) return null;
    const isCp=srv.type==="cpanel";
    const loginUrl = isCp
      ? `${srv.url.replace(":2087","")}/cpanel`
      : `${srv.url}/login`;
    return {srv,isCp,loginUrl};
  };

  // Kategori bazlı domain gereksinimi
  const DOMAIN_CATS=["hosting","vps","dedicated","email"];
  const needsDomain = o => DOMAIN_CATS.includes(o.categoryId);

  if(myO.length===0) return (
    <div style={{textAlign:"center",padding:48,color:G.ink2}}>
      <div style={{fontSize:36,marginBottom:12}}>📦</div>
      <div style={{fontSize:15,fontWeight:700,color:G.ink1,marginBottom:8}}>Henüz aktif hizmetiniz yok</div>
      <div style={{fontSize:13,marginBottom:16}}>Hizmet satın almak için Hizmet Al bölümünü ziyaret edin.</div>
    </div>
  );

  return (
    <div style={{display:"flex",flexDirection:"column",gap:14}}>
      {/* Domain tanımla modal */}
      {domainEditM&&(
        <Modal title={`Alan Adı Tanımla — ${domainEditM.id}`} onClose={()=>setDomainEditM(null)} width={420}>
          <div style={{fontSize:13,color:G.ink2,marginBottom:16}}>
            <strong>{domainEditM.product}</strong> hizmetinize bağlanacak alan adını girin.
          </div>
          <Fld label="Alan Adı">
            <div style={{position:"relative"}}>
              <Inp value={domainVal} onChange={e=>setDomainVal(e.target.value.toLowerCase().replace(/\s/g,""))}
                placeholder="siteniz.com" style={{paddingLeft:34}}/>
              <span style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",fontSize:13}}>🌐</span>
            </div>
          </Fld>
          {domainVal&&(
            <Notice type="success">✓ <strong>{domainVal}</strong> bu hizmete tanımlanacak.</Notice>
          )}
          <div style={{display:"flex",gap:8,marginTop:4}}>
            <Btn onClick={()=>{setDomainEditM(null);setDomainVal("");}}>İptal</Btn>
            <Btn variant="primary" disabled={!domainVal} onClick={()=>{setDomainEditM(null);setDomainVal("");}}>Kaydet</Btn>
          </div>
        </Modal>
      )}

      {myO.map((o,i)=>{
        const pi=getPanelInfo(o);
        const hasDomain=o.domain;
        const domainNeeded=needsDomain(o);
        const isSSLOrder=o.categoryId==="ssl";
        const isSusp=o.status==="suspended";
        const catD=CATS.find(c=>c.id===o.categoryId);

        return (
          <Card key={i} style={{padding:0,overflow:"hidden",border:`1px solid ${isSusp?G.red:G.border}`}}>
            {/* Header bar */}
            <div style={{background:isSusp?G.redL:G.canvas,padding:"12px 20px",display:"flex",alignItems:"center",gap:12,borderBottom:`1px solid ${isSusp?G.red+"30":G.border}`}}>
              <span style={{fontSize:18,background:catD?.colorL,width:34,height:34,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:8,flexShrink:0}}>{catD?.icon}</span>
              <div style={{flex:1}}>
                <div style={{fontSize:15,fontWeight:800,color:G.ink0,letterSpacing:"-0.3px"}}>{o.product}</div>
                <div style={{fontSize:11,color:G.ink2,marginTop:1,fontFamily:"'JetBrains Mono',monospace"}}>{o.id}</div>
              </div>
              <Chip s={o.status}/>
            </div>

            <div style={{padding:"16px 20px"}}>

              {/* SSL kartı — sunucu yok, sadece domain ve sertifika bilgileri */}
              {isSSLOrder ? (
                <div>
                  <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(180px,1fr))",gap:10,marginBottom:12}}>
                    {/* SSL Domain */}
                    <div style={{background:o.domain?G.tealL:G.amberL,borderRadius:8,padding:"9px 12px",gridColumn:"1/-1"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>SSL Kurulu Alan Adı</div>
                      {o.domain
                        ? <div style={{fontSize:15,fontWeight:700,color:G.teal,fontFamily:"'JetBrains Mono',monospace"}}>
                            🔒 {o.product?.toLowerCase().includes("wildcard")?`*.${o.domain}`:o.domain}
                          </div>
                        : <div style={{fontSize:12,color:G.amber,fontWeight:600}}>⚠️ Alan adı henüz tanımlanmadı</div>
                      }
                    </div>
                    {/* Geçerlilik */}
                    <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Başlangıç</div>
                      <div style={{fontSize:13,fontWeight:600,color:G.ink0}}>{o.start||"—"}</div>
                    </div>
                    <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Bitiş / Yenileme</div>
                      <div style={{fontSize:13,fontWeight:600,color:isSusp?G.red:G.ink0}}>{o.renew||"—"}</div>
                    </div>
                    <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Ücret</div>
                      <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{fmtK(o.price)}<span style={{fontSize:10,fontWeight:400,color:G.ink2}}>/yıl</span></div>
                    </div>
                  </div>

                  {/* SSL özellikleri */}
                  <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:isSusp?12:0}}>
                    <span style={{fontSize:11,background:G.accentL,color:G.accent,padding:"3px 10px",borderRadius:20,fontWeight:500}}>DV Doğrulama</span>
                    <span style={{fontSize:11,background:G.greenL,color:G.green,padding:"3px 10px",borderRadius:20,fontWeight:500}}>256-bit Şifreleme</span>
                    {o.product?.toLowerCase().includes("wildcard")&&(
                      <span style={{fontSize:11,background:G.purpleL,color:G.purple,padding:"3px 10px",borderRadius:20,fontWeight:500}}>Wildcard</span>
                    )}
                    <span style={{fontSize:11,background:G.tealL,color:G.teal,padding:"3px 10px",borderRadius:20,fontWeight:500}}>HTTPS Aktif</span>
                  </div>
                </div>
              ) : (
                /* Normal hosting/vps/dedicated kartı */
                <div>
                  <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(160px,1fr))",gap:10,marginBottom:16}}>
                    {/* Alan adı */}
                    {domainNeeded&&(
                      <div style={{background:hasDomain?G.tealL:G.amberL,borderRadius:8,padding:"9px 12px",gridColumn:hasDomain?"auto":"1/-1"}}>
                        <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Alan Adı</div>
                        {hasDomain
                          ? <div style={{fontSize:14,fontWeight:700,color:G.teal,fontFamily:"'JetBrains Mono',monospace"}}>{o.domain}</div>
                          : <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:8}}>
                              <span style={{fontSize:12,color:G.amber,fontWeight:600}}>⚠️ Henüz tanımlanmadı</span>
                              <button onClick={()=>{setDomainVal("");setDomainEditM(o);}} style={{fontSize:11,fontWeight:700,color:G.accent,background:G.accentL,border:`1px solid ${G.accent}30`,borderRadius:6,padding:"3px 8px",cursor:"pointer",fontFamily:"inherit",whiteSpace:"nowrap"}}>
                                + Tanımla
                              </button>
                            </div>
                        }
                      </div>
                    )}
                    {o.ip&&o.ip!=="—"&&(
                      <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                        <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Sunucu IP</div>
                        <div style={{fontSize:13,fontWeight:700,color:G.ink0,fontFamily:"'JetBrains Mono',monospace"}}>{o.ip}</div>
                      </div>
                    )}
                    {o.pleskUser&&o.pleskUser!=="—"&&(
                      <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                        <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Panel Kullanıcı</div>
                        <div style={{fontSize:13,fontWeight:700,color:G.ink0,fontFamily:"'JetBrains Mono',monospace"}}>{o.pleskUser}</div>
                      </div>
                    )}
                    {o.disk&&o.disk!=="—"&&(
                      <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                        <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Disk</div>
                        <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{o.disk}</div>
                      </div>
                    )}
                    {o.bw&&o.bw!=="—"&&(
                      <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                        <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Bant Genişliği</div>
                        <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{o.bw}</div>
                      </div>
                    )}
                    <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Yenileme</div>
                      <div style={{fontSize:13,fontWeight:700,color:isSusp?G.red:G.ink0}}>{o.renew}</div>
                    </div>
                    <div style={{background:G.canvas,borderRadius:8,padding:"9px 12px"}}>
                      <div style={{fontSize:10,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:3}}>Ücret</div>
                      <div style={{fontSize:13,fontWeight:700,color:G.ink0}}>{fmtK(o.price)}<span style={{fontSize:10,fontWeight:400,color:G.ink2}}>/yıl</span></div>
                    </div>
                  </div>

                  {/* Sunucu bilgisi + Panel login butonu */}
                  {pi&&(
                    <div style={{display:"flex",alignItems:"center",gap:12,padding:"10px 14px",background:pi.isCp?G.greenL:G.tealL,borderRadius:10,marginBottom:12}}>
                      <div style={{flex:1}}>
                        <div style={{fontSize:11,fontWeight:700,color:pi.isCp?G.green:G.teal,marginBottom:2}}>
                          {pi.isCp?"⬢ cPanel/WHM":"⬡ Plesk"} — {pi.srv.name}
                        </div>
                        <div style={{fontSize:11,color:G.ink2,fontFamily:"'JetBrains Mono',monospace"}}>{pi.srv.ip} · {pi.srv.location}</div>
                      </div>
                      {o.status==="active"&&o.pleskUser&&o.pleskUser!=="—"&&(
                        <a href={pi.loginUrl} target="_blank" rel="noreferrer"
                          style={{display:"inline-flex",alignItems:"center",gap:6,padding:"7px 14px",background:pi.isCp?G.green:G.teal,color:"#fff",borderRadius:8,fontSize:12,fontWeight:600,textDecoration:"none",whiteSpace:"nowrap"}}>
                          🔐 {pi.isCp?"cPanel'e":"Plesk'e"} Giriş
                        </a>
                      )}
                    </div>
                  )}
                </div>
              )}

              {/* Askıda uyarı */}
              {isSusp&&(
                <Notice type="warn">
                  ⚠️ Bu hizmet ödeme yapılmadığı için askıya alınmıştır. Faturalarım bölümünden ödeme yaparak hizmetinizi aktif edebilirsiniz.
                </Notice>
              )}
            </div>
          </Card>
        );
      })}
    </div>
  );
}

function UTickets({user}) {
  const [depts] = useDepts();
  const [orders] = useOrders();
  const [m,setM]=useState(false);
  const [sel,setSel]=useState(null);
  const myT=TICKETS.filter(t=>t.customerId===user.id);
  const myOrders=orders.filter(o=>o.customerId===user.id);

  const [form,setForm]=useState({
    dept:"", product:"", subject:"", desc:"", priority:"normal",
    wantMail:true,
  });

  const selDept = depts.find(d=>d.name===form.dept);

  const openModal = () => {
    setForm({dept:"",product:"",subject:"",desc:"",priority:"normal",wantMail:true});
    setM(true);
  };

  if(sel){const tk=myT.find(t=>t.id===sel);return(
    <div>
      <Btn size="sm" variant="ghost" onClick={()=>setSel(null)} style={{marginBottom:14}}>← Geri</Btn>
      <Card style={{padding:22}}>
        <div style={{fontSize:15,fontWeight:800,color:G.ink0,marginBottom:6}}>{tk.subject}</div>
        <div style={{display:"flex",gap:8,marginBottom:16,flexWrap:"wrap",alignItems:"center"}}>
          <span style={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{tk.id}</span>
          <Chip s={tk.priority}/><Chip s={tk.status}/>
          <span style={{fontSize:11,color:G.ink2,background:G.canvas,padding:"2px 8px",borderRadius:6,border:`1px solid ${G.border}`}}>📂 {tk.dept}</span>
        </div>
        <div style={{padding:"12px 0",borderTop:`1px solid ${G.border}`}}>
          <div style={{fontSize:13,color:G.ink1,lineHeight:1.7}}>Merhaba, {tk.subject.toLowerCase()} konusunda yardımınıza ihtiyacım var.</div>
        </div>
        {tk.status==="replied"&&(
          <div style={{padding:"12px 0",borderTop:`1px solid ${G.border}`}}>
            <div style={{fontSize:12,fontWeight:700,color:G.accent,marginBottom:4}}>Destek Ekibi <span style={{fontWeight:400,color:G.ink2}}>· yanıtlandı</span></div>
            <div style={{fontSize:13,color:G.ink1,lineHeight:1.7}}>İlginiz için teşekkürler. Konuyu inceledik, en kısa sürede dönüş yapacağız.</div>
          </div>
        )}
        {tk.status!=="closed"&&<div style={{borderTop:`1px solid ${G.border}`,paddingTop:12}}>
          <Txtarea placeholder="Yanıtınızı yazın..." style={{minHeight:80}}/>
          <Btn size="sm" variant="primary" style={{marginTop:10}}>Gönder</Btn>
        </div>}
      </Card>
    </div>
  );}

  return(
    <div>
      {m&&(
        <Modal title="Yeni Destek Talebi Aç" onClose={()=>setM(false)} width={540}>

          {/* Departman seçimi */}
          <Fld label="Departman *">
            <Sel value={form.dept} onChange={e=>setForm({...form,dept:e.target.value})}>
              <option value="">Departman seçin...</option>
              {depts.filter(d=>d.active).map(d=>(
                <option key={d.id} value={d.name}>{d.name}</option>
              ))}
            </Sel>
          </Fld>

          {/* Seçilen departmanın mail adresi + bildirim checkbox */}
          {selDept && (
            <div style={{background:G.canvas,border:`1px solid ${G.border}`,borderRadius:10,padding:"12px 14px",marginBottom:14}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:8}}>
                <div style={{display:"flex",alignItems:"center",gap:8}}>
                  <div style={{width:8,height:8,borderRadius:"50%",background:selDept.color,flexShrink:0}}/>
                  <span style={{fontSize:12,color:G.ink2}}>Bildirim maili:</span>
                  <span style={{fontSize:12,fontWeight:700,fontFamily:"'Courier New',monospace",color:selDept.color}}>{selDept.email}</span>
                </div>
                {/* Checkbox — mail bildirim almak istiyor musun */}
                <label style={{display:"flex",alignItems:"center",gap:8,cursor:"pointer",userSelect:"none"}}>
                  <div
                    onClick={()=>setForm({...form,wantMail:!form.wantMail})}
                    style={{
                      width:18,height:18,borderRadius:5,border:`2px solid ${form.wantMail?selDept.color:G.border2}`,
                      background:form.wantMail?selDept.color:"transparent",
                      display:"flex",alignItems:"center",justifyContent:"center",
                      cursor:"pointer",transition:"all .15s",flexShrink:0,
                    }}
                  >
                    {form.wantMail&&<span style={{color:"#fff",fontSize:11,lineHeight:1,fontWeight:900}}>✓</span>}
                  </div>
                  <span style={{fontSize:12,color:G.ink1,fontWeight:500}}>
                    Bu ticket hakkında <strong style={{fontFamily:"'Courier New',monospace",color:selDept.color}}>{user.email}</strong> adresime bildirim gönder
                  </span>
                </label>
              </div>
              {form.wantMail && (
                <div style={{marginTop:8,fontSize:11,color:G.ink2,paddingLeft:16}}>
                  ✓ Ticket açıldığında, yanıtlandığında ve kapatıldığında mail alacaksınız.
                </div>
              )}
            </div>
          )}

          {/* Hangi ürün için destek */}
          <Fld label="İlgili Hizmet / Ürün">
            <Sel value={form.product} onChange={e=>setForm({...form,product:e.target.value})}>
              <option value="">Genel (belirli bir ürün yok)</option>
              {myOrders.map((o,i)=>(
                <option key={i} value={o.id}>{o.product} — {o.id}</option>
              ))}
            </Sel>
          </Fld>

          {/* Öncelik */}
          <Fld label="Öncelik">
            <Sel value={form.priority} onChange={e=>setForm({...form,priority:e.target.value})}>
              <option value="low">Düşük</option>
              <option value="normal">Normal</option>
              <option value="high">Yüksek</option>
              <option value="critical">Kritik</option>
            </Sel>
          </Fld>

          <Fld label="Konu *">
            <Inp value={form.subject} onChange={e=>setForm({...form,subject:e.target.value})} placeholder="Sorunuzu kısaca özetleyin"/>
          </Fld>
          <Fld label="Açıklama *">
            <Txtarea value={form.desc} onChange={e=>setForm({...form,desc:e.target.value})}
              placeholder="Sorununuzu adım adım ve detaylı olarak açıklayın..." style={{minHeight:100}}/>
          </Fld>

          <div style={{display:"flex",gap:8,marginTop:8}}>
            <Btn onClick={()=>setM(false)}>İptal</Btn>
            <Btn variant="primary" onClick={()=>setM(false)} disabled={!form.dept||!form.subject||!form.desc}>
              Talebi Gönder
            </Btn>
          </div>
        </Modal>
      )}

      <div style={{display:"flex",marginBottom:14}}>
        <Btn size="sm" variant="primary" onClick={openModal} style={{marginLeft:"auto"}}>+ Destek Talebi Aç</Btn>
      </div>

      {myT.length===0
        ? <div style={{textAlign:"center",padding:40,color:G.ink2,fontSize:14}}>
            Henüz destek talebiniz yok.<br/>
            <Btn variant="primary" size="sm" onClick={openModal} style={{marginTop:12}}>İlk Talebi Oluştur</Btn>
          </div>
        : <Tbl heads={["Ticket","Konu","Departman","Öncelik","Tarih","Durum"]}>
            {myT.map((tk,i)=>(
              <tr key={i} onClick={()=>setSel(tk.id)} style={{cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.background=G.canvas} onMouseLeave={e=>e.currentTarget.style.background=""}>
                <TD s={{fontFamily:"'Courier New',monospace",fontSize:12,color:G.ink2}}>{tk.id}</TD>
                <TD s={{fontWeight:700,color:G.accent}}>{tk.subject}</TD>
                <TD s={{fontSize:12,color:G.ink2}}>{tk.dept}</TD>
                <TD><Chip s={tk.priority}/></TD>
                <TD s={{fontSize:12,color:G.ink2}}>{tk.created}</TD>
                <TD><Chip s={tk.status}/></TD>
              </tr>
            ))}
          </Tbl>
      }
    </div>
  );
}

function UProfile({user}) {
  const [billing, setBilling] = useBilling();
  const [saved, setSaved] = useState(false);

  const isKurumsal = billing.type === "kurumsal";

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return(
    <div style={{display:"flex",flexDirection:"column",gap:14}}>

      {/* ── Hesap Bilgileri ── */}
      <Card style={{padding:22}}>
        <ST>Hesap Bilgileri</ST>
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label="Ad Soyad"><Inp defaultValue={user.name}/></Fld>
          <Fld label="Şirket"><Inp defaultValue={user.company}/></Fld>
          <Fld label="E-posta"><Inp defaultValue={user.email}/></Fld>
          <Fld label="Telefon"><Inp defaultValue={user.phone} onKeyDown={onPhoneKey} onChange={e=>e.target.value=fmtPhone(e.target.value)}/></Fld>
          <Fld label="Vergi No"><Inp defaultValue={user.taxNo}/></Fld>
        </div>
        <Btn size="sm" variant="primary" style={{marginTop:8}}>Güncelle</Btn>
      </Card>

      {/* ── Fatura Bilgileri ── */}
      <Card style={{padding:22}}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
          <ST style={{marginBottom:0}}>Fatura Bilgileri</ST>
          {/* Bireysel / Kurumsal toggle */}
          <div style={{display:"flex",background:G.canvas,border:`1px solid ${G.border}`,borderRadius:8,padding:3,gap:3}}>
            {[["bireysel","👤 Bireysel"],["kurumsal","🏢 Kurumsal"]].map(([val,label])=>(
              <button key={val} onClick={()=>setBilling(b=>({...b,type:val}))}
                style={{padding:"5px 14px",fontSize:12,fontWeight:billing.type===val?700:500,borderRadius:6,border:"none",cursor:"pointer",background:billing.type===val?G.ink0:"transparent",color:billing.type===val?"#fff":G.ink2,transition:"all .15s"}}>
                {label}
              </button>
            ))}
          </div>
        </div>

        {/* Kurumsal seçilince banner */}
        {isKurumsal && (
          <div style={{background:G.accentL,border:`1px solid ${G.accent}30`,borderRadius:8,padding:"9px 14px",fontSize:12,color:G.accent,fontWeight:500,marginBottom:16}}>
            🏢 Kurumsal fatura bilgileri kayıtlı tutulur. KDV iadesi için firma bilgileriniz faturalara yansıtılır.
          </div>
        )}

        {/* Ortak alanlar */}
        <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <Fld label={isKurumsal?"Yetkili Kişi Adı":"Ad Soyad *"}>
            <Inp value={billing.name} onChange={e=>setBilling(b=>({...b,name:e.target.value}))} />
          </Fld>
          <Fld label="E-posta *">
            <Inp type="email" value={billing.email} onChange={e=>setBilling(b=>({...b,email:e.target.value}))} placeholder=""/>
          </Fld>
          <Fld label="Telefon *">
            <Inp value={billing.phone} onChange={e=>setBilling(b=>({...b,phone:fmtPhone(e.target.value)})) } onKeyDown={onPhoneKey} placeholder="05XX XXX XX XX" style={{borderColor:billing.phone?(isPhoneValid(billing.phone)?"#1A7F37":"#CF222E"):undefined}}/>
          </Fld>
          <Fld label="Şehir *">
            <Sel value={billing.city||""} onChange={e=>setBilling(b=>({...b,city:e.target.value}))}>
              <option value="">Şehir seçin...</option>
              {TR_CITIES.map(c=><option key={c}>{c}</option>)}
            </Sel>
          </Fld>
        </div>
        <Fld label="Fatura Adresi *">
          <Txtarea value={billing.address} onChange={e=>setBilling(b=>({...b,address:e.target.value}))}
            placeholder="" style={{minHeight:60}}/>
        </Fld>
        <Fld label="Ülke">
          <Sel value={billing.country} onChange={e=>setBilling(b=>({...b,country:e.target.value}))}>
            {["Türkiye","Almanya","Amerika Birleşik Devletleri","Birleşik Krallık","Hollanda","Fransa"].map(c=><option key={c}>{c}</option>)}
          </Sel>
        </Fld>

        {/* Kurumsal ek alanlar */}
        {isKurumsal && (
          <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
            <div style={{fontSize:11,fontWeight:700,color:G.ink2,textTransform:"uppercase",letterSpacing:"1px",marginBottom:12}}>Firma Bilgileri</div>
            <div className="rg2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
              <Fld label="Firma / Şirket Adı *">
                <Inp value={billing.company} onChange={e=>setBilling(b=>({...b,company:e.target.value}))} placeholder=""/>
              </Fld>
              <Fld label="Vergi Kimlik No (VKN) *">
                <Inp value={billing.taxNo} onChange={e=>setBilling(b=>({...b,taxNo:e.target.value.replace(/\D/g,"")}))}
                  placeholder="" maxLength={10} style={{fontFamily:"'Courier New',monospace",letterSpacing:"1px"}}/>
              </Fld>
              <Fld label="Vergi Dairesi *">
                <Inp value={billing.taxOffice} onChange={e=>setBilling(b=>({...b,taxOffice:e.target.value}))} placeholder=""/>
              </Fld>
              <Fld label="İş Telefonu">
                <Inp value={billing.phone2} onChange={e=>setBilling(b=>({...b,phone2:fmtPhone(e.target.value)})) } onKeyDown={onPhoneKey} placeholder="0212 XXX XX XX"/>
              </Fld>
            </div>
          </div>
        )}

        <div style={{display:"flex",alignItems:"center",gap:12,marginTop:12}}>
          <Btn size="sm" variant="primary" onClick={handleSave}>Fatura Bilgilerini Kaydet</Btn>
          {saved && (
            <div style={{fontSize:12,color:G.green,fontWeight:600,display:"flex",alignItems:"center",gap:5}}>
              <span>✓</span> Kaydedildi
            </div>
          )}
        </div>
      </Card>

      {/* ── Şifre ── */}
      <Card style={{padding:22}}>
        <ST>Şifre Değiştir</ST>
        <div style={{maxWidth:360,display:"flex",flexDirection:"column",gap:10}}>
          <Fld label="Mevcut Şifre"><Inp type="password" placeholder="••••••••"/></Fld>
          <Fld label="Yeni Şifre"><Inp type="password" placeholder="••••••••"/></Fld>
        </div>
        <Btn size="sm" variant="primary" style={{marginTop:8}}>Değiştir</Btn>
      </Card>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   i18n — Dil Çevirileri
═══════════════════════════════════════════════════════════ */
const LANGS = {
  tr: {
    code:"tr", label:"Türkçe", flag:"🇹🇷",
    // Login / Register
    loginTitle:"Giriş Yap", loginSub:"Hesabınıza erişin",
    registerTitle:"Kayıt Ol", registerSub:"Yeni hesap oluşturun",
    email:"E-posta", password:"Şifre", passwordConfirm:"Şifreyi Onayla",
    fullName:"Ad Soyad", phone:"Telefon", company:"Şirket",
    loginBtn:"Giriş Yap →", registerBtn:"Hesap Oluştur →",
    haveAccount:"Zaten hesabınız var mı?", noAccount:"Hesabınız yok mu?",
    goLogin:"Giriş yapın", goRegister:"Kayıt olun",
    custType:"Hesap Türü", individual:"👤 Bireysel", corporate:"🏢 Kurumsal",
    tcNo:"TC Kimlik No", taxNo:"Vergi No (VKN)", taxOffice:"Vergi Dairesi",
    forgotPass:"Şifremi unuttum",
    adminLogin:"Admin Paneline Giriş →",
    demo:"demo", orContinueWith:"veya demo hesapla devam edin",
    // Sidebar
    adminPanel:"Admin Paneli", customerPanel:"Müşteri Paneli",
    logout:"Çıkış Yap",
    // Stats
    uptime:"Uptime", integrations:"Entegrasyon", support:"Destek",
    tagline:"Hosting\nyönetimi\nyeniden\ntanımlandı.",
    tagDesc:"Plesk, cPanel, GİB e-Fatura ve iyzico entegrasyonlarını tek panel üzerinden yönetin.",
    // Validation
    passNoMatch:"Şifreler eşleşmiyor",
    tcInvalid:"TC Kimlik No 11 haneli olmalıdır",
    required:"Bu alan zorunludur",
  },
  en: {
    code:"en", label:"English", flag:"🇬🇧",
    loginTitle:"Sign In", loginSub:"Access your account",
    registerTitle:"Sign Up", registerSub:"Create a new account",
    email:"Email", password:"Password", passwordConfirm:"Confirm Password",
    fullName:"Full Name", phone:"Phone", company:"Company",
    loginBtn:"Sign In →", registerBtn:"Create Account →",
    haveAccount:"Already have an account?", noAccount:"Don't have an account?",
    goLogin:"Sign in", goRegister:"Sign up",
    custType:"Account Type", individual:"👤 Individual", corporate:"🏢 Corporate",
    tcNo:"National ID (TC)", taxNo:"Tax ID (VKN)", taxOffice:"Tax Office",
    forgotPass:"Forgot password",
    adminLogin:"Admin Panel Login →",
    demo:"demo", orContinueWith:"or continue with demo account",
    adminPanel:"Admin Panel", customerPanel:"Customer Panel",
    logout:"Sign Out",
    uptime:"Uptime", integrations:"Integrations", support:"Support",
    tagline:"Hosting\nmanagement\nredefined.",
    tagDesc:"Manage Plesk, cPanel, GİB e-Invoice and iyzico integrations from one panel.",
    passNoMatch:"Passwords do not match",
    tcInvalid:"National ID must be 11 digits",
    required:"This field is required",
  },
  de: {
    code:"de", label:"Deutsch", flag:"🇩🇪",
    loginTitle:"Anmelden", loginSub:"Zugang zu Ihrem Konto",
    registerTitle:"Registrieren", registerSub:"Neues Konto erstellen",
    email:"E-Mail", password:"Passwort", passwordConfirm:"Passwort bestätigen",
    fullName:"Vor- und Nachname", phone:"Telefon", company:"Unternehmen",
    loginBtn:"Anmelden →", registerBtn:"Konto erstellen →",
    haveAccount:"Haben Sie bereits ein Konto?", noAccount:"Noch kein Konto?",
    goLogin:"Anmelden", goRegister:"Registrieren",
    custType:"Kontotyp", individual:"👤 Privatperson", corporate:"🏢 Unternehmen",
    tcNo:"Ausweisnummer (TC)", taxNo:"Steuernummer (VKN)", taxOffice:"Finanzamt",
    forgotPass:"Passwort vergessen",
    adminLogin:"Admin-Panel Anmeldung →",
    demo:"Demo", orContinueWith:"oder mit Demo-Konto fortfahren",
    adminPanel:"Admin-Panel", customerPanel:"Kundenportal",
    logout:"Abmelden",
    uptime:"Uptime", integrations:"Integrationen", support:"Support",
    tagline:"Hosting-\nVerwaltung\nneu definiert.",
    tagDesc:"Verwalten Sie Plesk, cPanel, GİB e-Rechnung und iyzico über ein Panel.",
    passNoMatch:"Passwörter stimmen nicht überein",
    tcInvalid:"Ausweisnummer muss 11 Ziffern haben",
    required:"Dieses Feld ist erforderlich",
  },
};

// Language selector component
function LangPicker({lang, setLang, dark, direction="up"}) {
  const [open, setOpen] = useState(false);
  const cur = LANGS[lang];
  const isDown = direction==="down";
  return (
    <div style={{position:"relative"}}>
      <button onClick={()=>setOpen(o=>!o)} style={{
        display:"flex",alignItems:"center",gap:8,
        padding:"8px 12px",borderRadius:8,width:"100%",
        border: dark?"1px solid rgba(255,255,255,.18)":`1px solid ${G.border}`,
        background: dark?"rgba(255,255,255,.08)":G.surface,
        color: dark?"rgba(255,255,255,.9)":G.ink1,
        cursor:"pointer",fontSize:13,fontWeight:500,fontFamily:"inherit",
        transition:"all .15s",
      }}
        onMouseEnter={e=>e.currentTarget.style.background=dark?"rgba(255,255,255,.14)":G.canvas}
        onMouseLeave={e=>e.currentTarget.style.background=dark?"rgba(255,255,255,.08)":G.surface}
      >
        <span style={{fontSize:18,lineHeight:1}}>{cur.flag}</span>
        <span style={{flex:1,textAlign:"left",letterSpacing:"0.1px"}}>{cur.label}</span>
        <span style={{fontSize:11,opacity:.6}}>{open?(isDown?"▲":"▼"):(isDown?"▼":"▲")}</span>
      </button>
      {open&&(
        <div style={{
          position:"absolute",
          ...(isDown
            ? {top:"calc(100% + 6px)",bottom:"auto"}
            : {bottom:"calc(100% + 6px)",top:"auto"}
          ),
          left:0,right:0,
          background:G.surface,
          border:`1px solid ${G.border}`,
          borderRadius:10,
          boxShadow:"0 8px 32px rgba(0,0,0,.12)",
          zIndex:9999,
          overflow:"hidden",
          minWidth:160,
        }}>
          {Object.values(LANGS).map(l=>(
            <button key={l.code} onClick={()=>{setLang(l.code);setOpen(false);}} style={{
              width:"100%",display:"flex",alignItems:"center",gap:10,
              padding:"10px 14px",border:"none",
              background:lang===l.code?G.accentL:"transparent",
              color:lang===l.code?G.accent:G.ink1,
              cursor:"pointer",fontSize:13,fontWeight:lang===l.code?600:400,
              textAlign:"left",fontFamily:"inherit",transition:"background .12s",
            }}
              onMouseEnter={e=>{if(lang!==l.code)e.currentTarget.style.background=G.canvas;}}
              onMouseLeave={e=>{if(lang!==l.code)e.currentTarget.style.background="transparent";}}
            >
              <span style={{fontSize:20,lineHeight:1}}>{l.flag}</span>
              <span style={{flex:1}}>{l.label}</span>
              {lang===l.code&&<span style={{fontSize:12,color:G.accent}}>✓</span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════ */
const ANAV=[
  {k:"dashboard",   l:"Özet",           i:"▣"},
  {k:"customers",   l:"Müşteriler",      i:"◎"},
  {k:"invoices",    l:"Faturalar",       i:"◫"},
  {k:"orders",      l:"Siparişler",      i:"□"},
  {k:"pleskservers",l:"Sunucular",       i:"◈"},
  {k:"domains",     l:"Domainler",       i:"○", children:[
    {k:"tldpricing",      l:"TLD Fiyatlandırma",       i:"◦"},
    {k:"domainregistrars",l:"Registrar Entegrasyonları",i:"◦"},
  ]},
  {k:"tickets",     l:"Ticketlar",       i:"△", children:[
    {k:"ticketsettings",  l:"Ticket Ayarları",         i:"◦"},
  ]},
  {k:"automation",  l:"Otomasyon",       i:"◇"},
  {k:"gib",         l:"GİB e-Fatura",   i:"▽"},
  {k:"iyzico",      l:"iyzico",          i:"◈"},
  {k:"catalog",     l:"Ürün Kataloğu",  i:"⊞"},
  {k:"reports",     l:"Raporlar",        i:"▦"},
  {k:"contracts",   l:"Sözleşmeler",    i:"📋"},
  {k:"settings",    l:"Ayarlar",         i:"◉"},
];
const UNAV=[
  {k:"dashboard",l:"Genel Bakış",i:"▣"},{k:"services",l:"Hizmetlerim",i:"□"},
  {k:"invoices",l:"Faturalarım",i:"◫"},{k:"domains",l:"Domainlerim",i:"○"},
  {k:"tickets",l:"Destek",i:"△"},{k:"shop",l:"Hizmet Al",i:"⊞"},
  {k:"profile",l:"Hesabım",i:"◉"},
];
const AT={dashboard:"Genel Bakış",customers:"Müşteriler",invoices:"Fatura Yönetimi",orders:"Siparişler",pleskservers:"Sunucu Yönetimi (Plesk & cPanel)",domains:"Domain Yönetimi",tldpricing:"TLD Uzantı Fiyatlandırması",domainregistrars:"Domain Registrar Entegrasyonları",tickets:"Destek Ticketları",ticketsettings:"Ticket Ayarları — Departmanlar",automation:"Otomasyon",gib:"GİB e-Fatura",iyzico:"iyzico Ödemeler",catalog:"Ürün Kataloğu",reports:"Raporlar",contracts:"Sözleşme Yönetimi",settings:"Ayarlar"};
const UT={dashboard:"Genel Bakış",services:"Hizmetlerim",invoices:"Faturalarım",domains:"Domainlerim",tickets:"Destek Talepleri",shop:"Hizmet Satın Al",profile:"Hesabım"};

function Sidebar({nav,active,onNav,accent,sub,bottom,logo,mob,sbOpen,setSbOpen}) {
  const findParent=k=>nav.find(p=>p.children?.some(c=>c.k===k));
  const [openGroups,setOpenGroups]=useState(()=>{const p=findParent(active);return p?{[p.k]:true}:{};});
  const toggleGroup=(k,e)=>{e.stopPropagation();setOpenGroups(prev=>({...prev,[k]:!prev[k]}));};
  useEffect(()=>{const p=findParent(active);if(p)setOpenGroups(prev=>({...prev,[p.k]:true}));},[active]);

  const close=()=>{if(mob&&setSbOpen)setSbOpen(false);};
  const go=k=>{onNav(k);close();};

  const Item=({p,isChild=false})=>{
    const a=active===p.k;
    return(
      <div onClick={()=>go(p.k)} style={{display:"flex",alignItems:"center",gap:9,
        padding:isChild?"6px 12px 6px 38px":"9px 12px 9px 14px",margin:"1px 8px",
        fontSize:isChild?12:14,fontWeight:a?600:400,
        color:a?"#FFFFFF":"rgba(255,255,255,.72)",cursor:"pointer",
        background:a?"rgba(255,255,255,.08)":"transparent",
        borderLeft:a?`2px solid ${accent}`:"2px solid transparent",
        borderRadius:8,transition:"all .12s",letterSpacing:"-0.1px"}}
        onMouseEnter={e=>{if(!a){e.currentTarget.style.background="rgba(255,255,255,.06)";e.currentTarget.style.color="rgba(255,255,255,.92)";}}}
        onMouseLeave={e=>{if(!a){e.currentTarget.style.background="transparent";e.currentTarget.style.color="rgba(255,255,255,.72)";}}}
      >
        <span style={{fontSize:isChild?10:14,opacity:a?1:.6,flexShrink:0}}>{p.i}</span>
        <span style={{flex:1}}>{p.l}</span>
      </div>
    );
  };

  return(
    <>
      {mob&&<div className={"sb-overlay"+(sbOpen?" sb-open":"")} onClick={close}/>}
      <div className={mob?"sb-drawer"+(sbOpen?" sb-open":""):""} style={{
        width:220,minWidth:220,background:G.sidebar,display:"flex",
        flexDirection:"column",height:"100vh",
        ...(mob?{}:{flexShrink:0}),
      }}>
        <div style={{padding:"16px 18px",borderBottom:"1px solid rgba(255,255,255,.08)",display:"flex",alignItems:"center",justifyContent:"space-between",minHeight:60}}>
          <div>
            {logo?<img src={logo} alt="Logo" style={{maxHeight:32,maxWidth:140,objectFit:"contain",objectPosition:"left center",filter:"brightness(0) invert(1)"}}/>
              :<div style={{fontSize:15,fontWeight:700,color:"#FFFFFF",letterSpacing:"-0.3px"}}>HostPanel<span style={{color:accent}}>.</span>Pro</div>}
            {sub&&<div style={{fontSize:10,fontWeight:500,color:"rgba(255,255,255,.35)",marginTop:3,letterSpacing:"1px",textTransform:"uppercase"}}>{sub}</div>}
          </div>
          {mob&&<button onClick={close} style={{background:"rgba(255,255,255,.1)",border:"none",color:"#fff",width:32,height:32,borderRadius:8,cursor:"pointer",fontSize:18,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>✕</button>}
        </div>

        <div style={{flex:1,paddingTop:8,paddingBottom:8,overflowY:"auto"}}>
          {nav.map(p=>{
            const hasC=p.children?.length>0;
            const isGOpen=!!openGroups[p.k];
            const childA=p.children?.some(c=>c.k===active);
            const a=active===p.k;
            if(!hasC)return <Item key={p.k} p={p}/>;
            return(
              <div key={p.k}>
                <div style={{display:"flex",alignItems:"center",gap:9,padding:"9px 12px 9px 14px",margin:"1px 8px",fontSize:14,
                  fontWeight:(a||childA)?600:400,color:(a||childA)?"#FFFFFF":"rgba(255,255,255,.72)",
                  cursor:"pointer",background:(a||childA)?"rgba(255,255,255,.08)":"transparent",
                  borderLeft:(a||childA)?`2px solid ${accent}`:"2px solid transparent",borderRadius:8,transition:"all .12s"}}
                  onMouseEnter={e=>{if(!a&&!childA){e.currentTarget.style.background="rgba(255,255,255,.06)";e.currentTarget.style.color="rgba(255,255,255,.92)";}}}
                  onMouseLeave={e=>{if(!a&&!childA){e.currentTarget.style.background="transparent";e.currentTarget.style.color="rgba(255,255,255,.72)";}}}
                >
                  <span style={{fontSize:14,opacity:(a||childA)?1:.6,flexShrink:0}} onClick={()=>go(p.k)}>{p.i}</span>
                  <span style={{flex:1}} onClick={()=>go(p.k)}>{p.l}</span>
                  <span onClick={e=>toggleGroup(p.k,e)} style={{fontSize:10,opacity:.5,padding:"4px 6px",transition:"transform .2s",display:"inline-block",transform:isGOpen?"rotate(0deg)":"rotate(-90deg)"}}>▼</span>
                </div>
                {isGOpen&&<div>{p.children.map(c=><Item key={c.k} p={c} isChild/>)}</div>}
              </div>
            );
          })}
        </div>
        {bottom}
      </div>
    </>
  );
}

// ─── Global responsive hook ──────────────────────────────────────────────
// ─── Login / Register ekranı — ayrı component (hook kuralı için App dışında) ─
function LoginRegister({mob, lang, setLang, t, siteLogo, onAdmin, onUser}) {
  const [tab, setTab]     = useState("login");
  const [lForm, setLForm] = useState({email:"", pass:""});
  const [rForm, setRForm] = useState({email:"", pass:"", passConfirm:""});

  const passMatch = rForm.pass===rForm.passConfirm;

  const [contracts]          = useContracts();
  const registerContracts    = contracts.filter(c=>c.active&&c.showOn.includes("register"));
  const [acceptedContracts, setAcceptedContracts] = useState({});
  const [contractModal, setContractModal]         = useState(null);
  const allContractsAccepted = registerContracts.every(c=>!c.required||acceptedContracts[c.id]);

  // Kayıt: sadece e-posta + şifre + sözleşmeler
  const canRegister = rForm.email && rForm.pass.length>=6 && passMatch && allContractsAccepted;

  // Kayıt sonrası "e-posta gönderildi" ekranı
  const [registerDone, setRegisterDone] = useState(false);

  return (
    <div style={{minHeight:"100vh",display:"flex",background:G.canvas,fontFamily:"inherit"}}>

      {/* Sol branding paneli — sadece desktop */}
      <div className="login-left" style={{width:"42%",background:G.ink0,display:"flex",flexDirection:"column",padding:"48px",justifyContent:"space-between",position:"relative"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
          {siteLogo
            ? <img src={siteLogo} alt="Logo" style={{maxHeight:40,maxWidth:160,objectFit:"contain",objectPosition:"left center"}}/>
            : <div style={{fontSize:18,fontWeight:900,color:"#fff",letterSpacing:"-0.5px"}}>HostPanel<span style={{color:G.accent}}>.</span>Pro</div>
          }
          <LangPicker lang={lang} setLang={setLang} dark direction="down"/>
        </div>
        <div>
          <div style={{fontSize:36,fontWeight:900,color:"#fff",letterSpacing:"-2px",lineHeight:1.15,marginBottom:16,whiteSpace:"pre-line"}}>{t.tagline.replace(/\\n/g,"\n")}<span style={{color:G.accent}}></span></div>
          <div style={{fontSize:14,color:"rgba(255,255,255,.5)",lineHeight:1.7}}>{t.tagDesc}</div>
        </div>
        <div style={{display:"flex",gap:20}}>
          {[["6+",t.integrations],["99.9%",t.uptime],["7/24",t.support]].map(([v,l])=>(
            <div key={l}>
              <div style={{fontSize:22,fontWeight:900,color:"#fff",letterSpacing:"-1px"}}>{v}</div>
              <div style={{fontSize:11,color:"rgba(255,255,255,.4)",fontWeight:600,textTransform:"uppercase",letterSpacing:"1px"}}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Sağ form paneli */}
      <div className="login-right" style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"32px",overflowY:"auto",background:G.canvas}}>
        {/* Mobile: logo + dil */}
        <div className="login-mobile-bar" style={{width:"100%",marginBottom:16}}>
          <div style={{fontSize:16,fontWeight:700,color:"#fff"}}>HostPanel<span style={{color:G.accent}}>.</span>Pro</div>
          <LangPicker lang={lang} setLang={setLang} dark direction="down"/>
        </div>
        <div className="login-card" style={{width:"100%",maxWidth:400}}>
          {/* Tab switcher */}
          <div style={{display:"flex",background:G.canvas,border:`1px solid ${G.border}`,borderRadius:10,padding:4,gap:4,marginBottom:28}}>
            {[["login",t.loginTitle],["register",t.registerTitle]].map(([key,label])=>(
              <button key={key} onClick={()=>setTab(key)} style={{flex:1,padding:"9px",borderRadius:8,border:"none",background:tab===key?G.ink0:"transparent",color:tab===key?"#fff":G.ink2,fontSize:13,fontWeight:700,cursor:"pointer",fontFamily:"inherit",transition:"all .15s"}}>
                {label}
              </button>
            ))}
          </div>

          {/* GİRİŞ */}
          {tab==="login"&&(
            <div>
              <div style={{marginBottom:24}}>
                <div style={{fontSize:24,fontWeight:900,color:G.ink0,letterSpacing:"-0.8px",marginBottom:4}}>{t.loginTitle}</div>
                <div style={{fontSize:14,color:G.ink2}}>{t.loginSub}</div>
              </div>
              <Fld label={t.email}><Inp type="email" value={lForm.email} onChange={e=>setLForm({...lForm,email:e.target.value})} placeholder="kullanici@firma.com"/></Fld>
              <Fld label={t.password}><Inp type="password" value={lForm.pass} onChange={e=>setLForm({...lForm,pass:e.target.value})} placeholder="••••••••"/></Fld>
              <div style={{textAlign:"right",marginBottom:16}}>
                <span style={{fontSize:12,color:G.accent,cursor:"pointer",fontWeight:500}}>{t.forgotPass}</span>
              </div>
              <button onClick={onAdmin} style={{width:"100%",padding:"13px",background:G.ink0,color:"#fff",border:"none",borderRadius:10,fontSize:14,fontWeight:800,cursor:"pointer",marginBottom:16,fontFamily:"inherit"}}>
                {t.adminLogin}
              </button>
              <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:14}}>
                <div style={{flex:1,height:1,background:G.border}}/>
                <div style={{fontSize:11,color:G.ink2,fontWeight:600,textTransform:"uppercase",letterSpacing:"1px"}}>{t.demo}</div>
                <div style={{flex:1,height:1,background:G.border}}/>
              </div>
              <div style={{fontSize:12,color:G.ink2,marginBottom:10,textAlign:"center"}}>{t.orContinueWith}</div>
              {CUSTOMERS.slice(0,3).map(c=>(
                <button key={c.id} onClick={()=>onUser(c)} style={{width:"100%",padding:"9px 14px",marginBottom:7,fontSize:12,border:`1px solid ${G.border}`,borderRadius:8,background:G.surface,color:G.ink1,cursor:"pointer",textAlign:"left",fontWeight:600,fontFamily:"inherit",transition:"all .12s"}}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor=G.accent;e.currentTarget.style.color=G.accent;}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor=G.border;e.currentTarget.style.color=G.ink1;}}>
                  {c.name} <span style={{color:G.ink2,fontWeight:400}}>— {c.company}</span>
                </button>
              ))}
              <div style={{textAlign:"center",marginTop:20,fontSize:13,color:G.ink2}}>
                {t.noAccount} <span onClick={()=>setTab("register")} style={{color:G.accent,fontWeight:700,cursor:"pointer"}}>{t.goRegister}</span>
              </div>
            </div>
          )}

          {/* KAYIT OL */}
          {tab==="register"&&(
            <div>
              {registerDone ? (
                /* ── E-posta gönderildi ekranı ── */
                <div style={{textAlign:"center",padding:"20px 0"}}>
                  <div style={{width:64,height:64,background:G.accentL,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:28,margin:"0 auto 16px"}}>📧</div>
                  <div style={{fontSize:20,fontWeight:700,color:G.ink0,marginBottom:8}}>E-postanızı kontrol edin</div>
                  <div style={{fontSize:14,color:G.ink2,lineHeight:1.6,marginBottom:20}}>
                    <strong>{rForm.email}</strong> adresine giriş bağlantısı gönderdik.<br/>
                    Bağlantıya tıklayarak hesabınızı aktive edin.
                  </div>
                  <Notice type="info">
                    📌 Giriş yaptıktan sonra kişisel bilgilerinizi tamamlamanız istenecektir.
                  </Notice>
                  <button onClick={()=>{setRegisterDone(false);setTab("login");}} style={{marginTop:12,fontSize:13,color:G.accent,background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",fontWeight:600}}>
                    ← Giriş ekranına dön
                  </button>
                </div>
              ) : (
                /* ── Kayıt formu ── */
                <div>
                  <div style={{marginBottom:20}}>
                    <div style={{fontSize:22,fontWeight:800,color:G.ink0,letterSpacing:"-0.5px",marginBottom:4}}>{t.registerTitle}</div>
                    <div style={{fontSize:13,color:G.ink2}}>Hesap oluşturmak için e-posta adresinizi girin. Kişisel bilgilerinizi giriş sonrasında tamamlayabilirsiniz.</div>
                  </div>

                  <Fld label="E-posta *">
                    <Inp type="email" value={rForm.email} onChange={e=>setRForm({...rForm,email:e.target.value})} placeholder="kullanici@firma.com"/>
                  </Fld>
                  <Fld label="Şifre *">
                    <Inp type="password" value={rForm.pass} onChange={e=>setRForm({...rForm,pass:e.target.value})} placeholder="En az 6 karakter"/>
                  </Fld>
                  <Fld label="Şifre Tekrar *">
                    <Inp type="password" value={rForm.passConfirm} onChange={e=>setRForm({...rForm,passConfirm:e.target.value})} placeholder="••••••"
                      style={{borderColor:rForm.passConfirm&&!passMatch?G.red:rForm.passConfirm&&passMatch?G.green:undefined}}/>
                  </Fld>
                  {rForm.passConfirm&&!passMatch&&(
                    <div style={{fontSize:11,color:G.red,marginBottom:10,marginTop:-8}}>⚠ Şifreler eşleşmiyor</div>
                  )}

                  {/* Sözleşmeler */}
                  {contractModal&&(
                    <Modal title={contractModal.title} onClose={()=>setContractModal(null)} width={680}>
                      <div style={{maxHeight:420,overflowY:"auto",background:G.canvas,borderRadius:8,padding:"16px 20px",marginBottom:16,border:`1px solid ${G.border}`}}>
                        <div style={{fontSize:13,color:G.ink1,lineHeight:1.8,whiteSpace:"pre-wrap"}}>{contractModal.content}</div>
                      </div>
                      <div style={{display:"flex",gap:8}}>
                        <Btn onClick={()=>setContractModal(null)}>Kapat</Btn>
                        {contractModal.required&&!acceptedContracts[contractModal.id]&&(
                          <Btn variant="primary" onClick={()=>{setAcceptedContracts(a=>({...a,[contractModal.id]:true}));setContractModal(null);}} style={{flex:1}}>
                            ✓ Okudum ve Kabul Ediyorum
                          </Btn>
                        )}
                      </div>
                    </Modal>
                  )}

                  {registerContracts.length>0&&(
                    <div style={{borderTop:`1px solid ${G.border}`,paddingTop:14,marginTop:4}}>
                      {registerContracts.map(c=>(
                        <label key={c.id} style={{display:"flex",alignItems:"flex-start",gap:10,marginBottom:10,cursor:"pointer"}}>
                          <div onClick={()=>setAcceptedContracts(a=>({...a,[c.id]:!a[c.id]}))}
                            style={{width:18,height:18,minWidth:18,borderRadius:5,marginTop:1,border:`2px solid ${acceptedContracts[c.id]?G.accent:G.border2}`,background:acceptedContracts[c.id]?G.accent:"transparent",display:"flex",alignItems:"center",justifyContent:"center",transition:"all .15s",flexShrink:0}}>
                            {acceptedContracts[c.id]&&<span style={{color:"#fff",fontSize:11,fontWeight:900,lineHeight:1}}>✓</span>}
                          </div>
                          <span style={{fontSize:12,color:G.ink1,lineHeight:1.5}}>
                            {c.icon} {c.required&&<span style={{color:G.red,fontWeight:600}}>* </span>}
                            <button onClick={()=>setContractModal(c)} style={{color:G.accent,fontWeight:600,background:"none",border:"none",cursor:"pointer",fontSize:12,fontFamily:"inherit",padding:0,textDecoration:"underline"}}>
                              {c.shortTitle}
                            </button>
                            {" "}okudum ve kabul ediyorum.{c.required&&" (Zorunlu)"}
                          </span>
                        </label>
                      ))}
                    </div>
                  )}

                  <button onClick={()=>setRegisterDone(true)} disabled={!canRegister}
                    style={{width:"100%",padding:"13px",background:canRegister?G.ink0:"#9CA3AF",color:"#fff",border:"none",borderRadius:10,fontSize:14,fontWeight:700,cursor:canRegister?"pointer":"not-allowed",marginTop:14,marginBottom:12,fontFamily:"inherit",transition:"background .2s"}}>
                    {t.registerBtn}
                  </button>
                  <div style={{textAlign:"center",fontSize:13,color:G.ink2}}>
                    {t.haveAccount} <span onClick={()=>setTab("login")} style={{color:G.accent,fontWeight:700,cursor:"pointer"}}>{t.goLogin}</span>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function useR() {
  const [w,setW]=useState(typeof window!=='undefined'?window.innerWidth:1280);
  useEffect(()=>{const f=()=>setW(window.innerWidth);window.addEventListener('resize',f);return()=>window.removeEventListener('resize',f);},[]);
  return {mob:w<641, tab:w>=641&&w<1024};
}

export default function App() {
  const [mode,setMode]=useState("login");
  const [selUser,setSelUser]=useState(null);
  const [adminPage,setAdminPage]=useState("dashboard");
  const [userPage,setUserPage]=useState("dashboard");
  const [selCust,setSelCust]=useState(null);
  const [buyP,setBuyP]=useState(null);
  const [preview,setPreview]=useState(false);
  const [prodList]=useState(PROD_INIT);
  const [siteLogo,setSiteLogo]=useState(null);
  const [lang,setLang]=useState("tr");
  const t = LANGS[lang]||LANGS.tr;

  // ── Responsive + sidebar state — App seviyesinde (hook kuralı) ──
  const {mob,tab} = useR();
  const [sbOpen,setSbOpen]   = useState(false);
  const [sbOpen2,setSbOpen2] = useState(false);

  useEffect(()=>{
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap";
    document.head.appendChild(link);

    const s=document.createElement("style");
    s.textContent=`
      *, *::before, *::after { box-sizing: border-box; }
      body {
        margin: 0;
        background: ${G.canvas};
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: ${G.ink1};
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
      }

      /* ─── Responsive grids (CSS breakpoints) ─── */
      @media(max-width:1023px){
        .rg4-to-2 { grid-template-columns:repeat(2,1fr) !important; }
        .rg3-to-2 { grid-template-columns:repeat(2,1fr) !important; }
      }
      @media(max-width:640px){
        .rg4-to-2,.rg3-to-2,.rg2-to-1 { grid-template-columns:1fr !important; }
        .hide-mobile { display:none !important; }
        .panel-pad { padding:12px !important; }
        .panel-hdr { padding:10px 14px !important; }
        input,select,textarea { font-size:16px !important; }
        button { min-height:40px; }
      }

      /* ─── Sidebar drawer (mobile) ─── */
      .sb-drawer {
        position:fixed !important; top:0; left:0; bottom:0; z-index:1000;
        transform:translateX(-100%);
        transition:transform .28s cubic-bezier(.4,0,.2,1);
      }
      .sb-drawer.sb-open { transform:translateX(0); box-shadow:6px 0 32px rgba(0,0,0,.4); }
      .sb-overlay {
        display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999;
      }
      .sb-overlay.sb-open { display:block; }

      /* ─── Login screen ─── */
      @media(max-width:640px){
        .login-left  { display:none !important; }
        .login-right { background:'#111318' !important; }
        .login-card  {
          background:#fff; border-radius:20px; padding:24px 20px;
          box-shadow:0 8px 40px rgba(0,0,0,.3); margin:16px;
        }
        .login-mobile-bar {
          padding:20px 20px 12px; display:flex !important;
          justify-content:space-between; align-items:center;
        }
      }
      .login-mobile-bar { display:none; }

      ::-webkit-scrollbar { width: 4px; height: 4px; }
      /* ─── Responsive grid classes ─── */
      @media(max-width:1023px){
        .rg4 { grid-template-columns:repeat(2,1fr) !important; }
        .rg3 { grid-template-columns:repeat(2,1fr) !important; }
      }
      @media(max-width:640px){
        .rg4,.rg3,.rg2,.rg21 { grid-template-columns:1fr !important; }
      }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: ${G.border}; border-radius: 6px; }
      ::-webkit-scrollbar-thumb:hover { background: ${G.border2}; }
      input, select, textarea, button { font-family: inherit; }
      code, .mono { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; }
      a { color: ${G.accent}; text-decoration: none; }
      a:hover { text-decoration: underline; }
      ::selection { background: ${G.accent}28; }
    `;
    document.head.appendChild(s);
    return ()=>{ document.head.removeChild(s); document.head.removeChild(link); };
  },[]);

  if(buyP) return <Purchase product={buyP} onClose={()=>setBuyP(null)}/>;
  if(preview) return <PubCatalog products={prodList} onBuy={setBuyP} onBack={()=>setPreview(false)}/>;

  /* LOGIN / REGISTER */
  if(mode==="login") {
    return <LoginRegister
      mob={mob}
      lang={lang} setLang={setLang} t={t}
      siteLogo={siteLogo}
      onAdmin={()=>setMode("admin")}
      onUser={c=>{ setSelUser(c); setUserPage("dashboard"); setMode("user"); }}
    />;
  }
  /* ADMIN */
  if(mode==="admin") {
    const handleNav=k=>{setAdminPage(k);if(k!=="customers")setSelCust(null);};
    const renderAdmin=()=>{
      if(adminPage==="customers"&&selCust) return <CustDetail c={selCust} onBack={()=>setSelCust(null)}/>;
      switch(adminPage){
        case "dashboard": return <ADashboard onNav={handleNav}/>;
        case "customers": return <ACustomers onSelect={c=>setSelCust(c)}/>;
        case "invoices": return <AInvoices/>;
        case "orders": return <AOrders/>;
        case "pleskservers": return <AServers/>;
        case "domains": return <ADomains/>;
        case "tldpricing": return <ATldPricing/>;
        case "domainregistrars": return <ADomainRegistrars/>;
        case "tickets": return <ATickets/>;
        case "ticketsettings": return <ATicketSettings/>;
        case "automation": return <AAutomation/>;
        case "gib": return <AGIB/>;
        case "iyzico": return <AIyzico/>;
        case "catalog": return <ProductManager onPreview={()=>setPreview(true)}/>;
        case "reports": return <AReports/>;
        case "contracts": return <AContracts/>;
        case "settings": return <ASettings siteLogo={siteLogo} setSiteLogo={setSiteLogo}/>;
        default: return <ADashboard/>;
      }
    };
    const ptitle=adminPage==="customers"&&selCust?selCust.name:AT[adminPage];
    const adMob=mob;
    const sb=(
      <div style={{padding:"12px 14px 16px",borderTop:"1px solid rgba(255,255,255,.08)"}}>
        <div style={{marginBottom:8}}><LangPicker lang={lang} setLang={setLang}/></div>
        <button onClick={()=>setMode("login")} style={{
          width:"100%",padding:"8px",fontSize:13,fontWeight:500,
          border:"1px solid rgba(255,255,255,.18)",borderRadius:8,
          background:"rgba(255,255,255,.06)",color:"rgba(255,255,255,.8)",
          cursor:"pointer",fontFamily:"inherit",transition:"all .15s",
        }}
          onMouseEnter={e=>{e.currentTarget.style.background="rgba(255,255,255,.12)";e.currentTarget.style.color="#fff";}}
          onMouseLeave={e=>{e.currentTarget.style.background="rgba(255,255,255,.06)";e.currentTarget.style.color="rgba(255,255,255,.8)";}}
        >{t.logout}</button>
      </div>
    );
    return(
      <div style={{display:"flex",height:"100vh",background:G.canvas,overflow:"hidden"}}>
        <Sidebar nav={ANAV} active={adminPage} onNav={handleNav} accent={G.adminAccent} sub={t.adminPanel} bottom={sb} logo={siteLogo} mob={adMob} sbOpen={sbOpen} setSbOpen={setSbOpen}/>
        <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}}>
          <div style={{padding:adMob?"10px 12px":"12px 22px",borderBottom:`1px solid ${G.border}`,background:G.surface,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0,gap:8}}>
            <div style={{display:"flex",alignItems:"center",gap:10,minWidth:0}}>
              {adMob&&<button onClick={()=>setSbOpen(true)} style={{background:"none",border:`1px solid ${G.border}`,borderRadius:8,padding:"5px 9px",cursor:"pointer",fontSize:20,lineHeight:1,flexShrink:0,color:G.ink1}}>&#9776;</button>}
              <div style={{fontSize:14,fontWeight:600,color:G.ink0,letterSpacing:"-0.2px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{ptitle}</div>
            </div>
            {!adMob&&<div style={{fontSize:11,color:G.ink2,fontWeight:500,fontFamily:"'JetBrains Mono',monospace",flexShrink:0}}>4 Nis 2026</div>}
          </div>
          <div style={{flex:1,overflowY:"auto",padding:adMob?12:22}}>{renderAdmin()}</div>
        </div>
      </div>
    );
  }

  /* USER */
  const user=selUser||CUSTOMERS[0];
  const uMob=mob;
  const renderUser=()=>{
    switch(userPage){
      case "dashboard": return <UDash user={user} onNav={setUserPage}/>;
      case "services": return <UServices user={user}/>;
      case "invoices": return <UInvoices user={user}/>;
      case "domains": return <UDomains user={user}/>;
      case "tickets": return <UTickets user={user}/>;
      case "shop": return <PubCatalog products={PROD_INIT.filter(p=>p.active)} onBuy={setBuyP}/>;
      case "profile": return <UProfile user={user}/>;
      default: return <UDash user={user}/>;
    }
  };
  const sb2=(
    <div style={{padding:"12px 14px 16px",borderTop:"1px solid rgba(255,255,255,.08)"}}>
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10,padding:"6px 4px"}}>
        <Av name={user.name} size={28}/>
        <div style={{minWidth:0}}>
          <div style={{fontSize:12,fontWeight:600,color:"rgba(255,255,255,.9)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{user.name.split(" ")[0]}</div>
          <div style={{fontSize:11,color:"rgba(255,255,255,.4)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{user.company.slice(0,20)}</div>
        </div>
      </div>
      <div style={{marginBottom:8}}><LangPicker lang={lang} setLang={setLang}/></div>
      <button onClick={()=>setMode("login")} style={{
        width:"100%",padding:"8px",fontSize:13,fontWeight:500,
        border:"1px solid rgba(255,255,255,.18)",borderRadius:8,
        background:"rgba(255,255,255,.06)",color:"rgba(255,255,255,.8)",
        cursor:"pointer",fontFamily:"inherit",transition:"all .15s",
      }}
        onMouseEnter={e=>{e.currentTarget.style.background="rgba(255,255,255,.12)";e.currentTarget.style.color="#fff";}}
        onMouseLeave={e=>{e.currentTarget.style.background="rgba(255,255,255,.06)";e.currentTarget.style.color="rgba(255,255,255,.8)";}}
      >{t.logout}</button>
    </div>
  );
  return(
    <div style={{display:"flex",height:"100vh",background:G.canvas,overflow:"hidden"}}>
      <Sidebar nav={UNAV} active={userPage} onNav={setUserPage} accent={G.userAccent} sub={t.customerPanel} bottom={sb2} logo={siteLogo} mob={uMob} sbOpen={sbOpen2} setSbOpen={setSbOpen2}/>
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}}>
        <div style={{padding:uMob?"10px 12px":"12px 22px",borderBottom:`1px solid ${G.border}`,background:G.surface,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0,gap:8}}>
          <div style={{display:"flex",alignItems:"center",gap:10,minWidth:0}}>
            {uMob&&<button onClick={()=>setSbOpen2(true)} style={{background:"none",border:`1px solid ${G.border}`,borderRadius:8,padding:"5px 9px",cursor:"pointer",fontSize:20,lineHeight:1,flexShrink:0,color:G.ink1}}>&#9776;</button>}
            <div style={{fontSize:14,fontWeight:600,color:G.ink0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{UT[userPage]}</div>
          </div>
          {!uMob&&<div style={{fontSize:12,color:G.ink2,fontWeight:500,flexShrink:0}}>Hoş geldiniz, {user.name.split(" ")[0]}</div>}
        </div>
        <div style={{flex:1,overflowY:"auto",padding:userPage==="shop"?0:uMob?12:22}}>{renderUser()}</div>
      </div>
    </div>
  );
}