<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>PeletShop | Talaş, Pelet ve Makine Pazarı</title>
<meta name="description" content="Talaş, pelet, ikinci el pelet makinesi ve alım talepleri için sektörel B2B pazar yeri ve pelet maliyet hesaplayıcısı.">
<meta name="theme-color" content="#070a11">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/icon.png">
<link rel="apple-touch-icon" href="/icon.png">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--bg:#070a11;--card:#0f1626;--line:rgba(255,255,255,.1);--g:#ff6a00;--g2:#ff7b1a;--c:#ff5500;--a:#ff6a00;--t:#ffffff;--m:#94a3b8;--m-light:#cbd5e1;--r:16px;--d:'Outfit',system-ui,sans-serif;--b:'Plus Jakarta Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background-color:#070a11}
body{background-color:#070a11!important;background-image:radial-gradient(circle at 15% 0,rgba(255,106,0,.14),transparent 45%),radial-gradient(circle at 90% 30%,rgba(255,85,0,.08),transparent 45%);background-attachment:fixed;color:#ffffff;font:15px/1.5 var(--b);padding-bottom:84px;min-height:100vh}
.w{max-width:1180px;margin:0 auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;position:sticky;top:0;z-index:20;background:rgba(7,10,17,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:38px;width:auto;display:block}
nav.top{display:flex;gap:4px}nav.top a,nav.bot a{color:var(--m-light);text-decoration:none;font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:99px}
nav.top a.on{background:rgba(255,106,0,.15);color:var(--g2)}
.btn{border:0;border-radius:12px;padding:10px 18px;font:700 .9rem var(--b);cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--g),#e05000);text-decoration:none;display:inline-block;white-space:nowrap}
.btn.s{background:#1b2338;border:1px solid var(--line);color:#f8fafc}.btn.mail{background:#0284c7;color:#fff}.btn.sm{padding:8px 12px;font-size:.82rem}
.hero{margin:20px 0;padding:34px 28px;border-radius:24px;border:1px solid rgba(255,106,0,.35);background:linear-gradient(135deg,#151f33 0%,#0e1627 60%,#080d19 100%);box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.hero h1{font:800 clamp(1.6rem,4.5vw,2.5rem)/1.2 var(--d);max-width:680px;color:#ffffff!important;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero p{color:#cbd5e1!important;font-size:.95rem;max-width:580px;margin:12px 0 20px;line-height:1.55}
.stats{display:flex;gap:24px;margin-top:22px;flex-wrap:wrap}.stats b{font:800 1.7rem var(--d);color:var(--g);display:block}.stats span{color:var(--m-light);font-size:.8rem}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
input,select,textarea{background:#090f1d;border:1px solid var(--line);color:#ffffff;border-radius:12px;padding:11px 13px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--g);outline:none}
.bar input{flex:1 1 220px;width:auto}.bar select{width:auto;flex:0 0 auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.chip{background:#111a2e;border:1px solid var(--line);color:#cbd5e1;border-radius:99px;padding:8px 15px;font:600 .85rem var(--b);cursor:pointer;white-space:nowrap}.chip.on{background:var(--g);color:#fff;border-color:var(--g)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px}
.card{background:#0f1626;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}.card:hover{transform:translateY(-3px);border-color:rgba(255,106,0,.5)}
.ph{height:150px;background:linear-gradient(135deg,#13203a,#090e1c);display:grid;place-items:center;overflow:hidden}.ph img{width:100%;height:100%;object-fit:cover}
.cb{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}.tag{font:700 .7rem var(--b);text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(255,106,0,.15);color:var(--g2);display:inline-block}.tag.t{background:rgba(6,182,212,.15);color:var(--c)}.tag.m{background:rgba(245,158,11,.15);color:var(--a)}.tag.v{background:rgba(59,130,246,.18);color:#93c5fd}
.card h3{font:700 1.05rem/1.3 var(--d);color:#ffffff}.meta{color:#94a3b8;font-size:.84rem}.price{font:800 1.2rem var(--d);color:var(--g2)}.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.empty{grid-column:1/-1;text-align:center;padding:50px 20px;background:#0f1626;border:1px dashed var(--line);border-radius:var(--r);color:#cbd5e1}.empty h3{color:#ffffff;font:700 1.25rem var(--d);margin-bottom:8px}.empty .btn{margin-top:14px}
.panel{background:#0f1626;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}.panel h2{font:700 1.25rem var(--d);color:#ffffff;margin-bottom:4px}.note{color:#94a3b8;font-size:.84rem;margin-bottom:12px}
.f{display:grid;grid-template-columns:1fr 1fr;gap:12px}.f label{display:block;font-size:.8rem;color:#cbd5e1;font-weight:600;margin-bottom:4px}.f .full{grid-column:1/-1}
.res{font:800 2.2rem var(--d);color:var(--g2)}.row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:#cbd5e1}.row b{color:#ffffff}
section{display:none}section.on{display:block}
nav.bot{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(10,15,27,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;z-index:30}
nav.bot a{flex:1;text-align:center;font-size:.72rem;padding:6px 2px;border-radius:10px;color:#cbd5e1}nav.bot a span{display:block;font-size:1.25rem}nav.bot a.on{color:var(--g)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);display:none;place-items:center;z-index:50;padding:16px}.modal.on{display:grid}.modal>div{background:#0f1626;border:1px solid rgba(255,106,0,.3);border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
@media(max-width:760px){nav.top{display:none}nav.bot{display:flex}.hero{padding:24px 18px}.f{grid-template-columns:1fr}header .btn.s{display:none}}
</style>
</head>
<body>
<div class="w">
<header>
  <a class="logo" href="#ilanlar">
    <img src="/logo.png" alt="PeletShop - Pelet. Biyokutle. Makine.">
  </a>
  <nav class="top">
    <a href="#ilanlar">İlanlar</a>
    <a href="#rehber">Firma Rehberi</a>
    <a href="#maliyet">Maliyet Hesabı</a>
    <a href="#destek">Destek & İletişim</a>
  </nav>
  <a class="btn" href="#ilan-ver">+ İlan Ver</a>
</header>

<section id="ilanlar" class="on">
  <div class="hero">
    <h1>Talaş, pelet ve pelet makineleri için sektörün pazar yeri</h1>
    <p>Aradığınızı yazın, satıcılar size ulaşsın. Ya da elinizdeki talaşı, peleti veya makineyi 1 dakikada ilan edin. Doğrudan ve güvenilir iletişim.</p>
    <a class="btn" href="#ilan-ver">İlan / Alım Talebi Bırak</a>
    <div class="stats"><div><b id="nAll">–</b><span>Yayında ilan</span></div><div><b id="nTalep">–</b><span>Aktif alım talebi</span></div><div><b id="nMakine">–</b><span>Makine ilanı</span></div></div>
  </div>
  <div class="bar"><input id="q" placeholder="Ara: çam talaşı, pelet presi, Balıkesir…"><select id="cityF"><option value="">Tüm şehirler</option></select></div>
  <div class="chips" id="chips"></div>
  <div class="grid" id="list"><div class="empty">Yükleniyor…</div></div>
</section>

<section id="rehber">
  <div class="hero">
    <h1>Sektörel Firma Rehberi</h1>
    <p>Kereste/talaş çıkışı olan tesisler, pelet üreticileri ve makine imalatçıları. “Doğrulanmış” rozeti yalnızca belgesi kontrol edilen firmalara verilir.</p>
  </div>
  <div class="grid" id="dir"></div>
</section>

<section id="maliyet">
  <div class="panel"><h2>Pelet Üretim Maliyet Hesaplayıcısı</h2><p class="note">Girilen tüm değerler örnektir; kendi tesis rakamlarınızla değiştirin. Satış fiyatını girmeden kâr hesaplanmaz.</p></div>
  <div class="f" style="align-items:start">
    <div class="panel full"><div class="f" id="cf"></div></div>
    <div class="panel full" id="cres"></div>
  </div>
</section>

<section id="destek">
  <div class="panel" style="max-width:680px;margin:24px auto">
    <h2>Destek & İletişim</h2>
    <p class="note">PeletShop Borsa platformu ile ilgili soru, öneri, ilan onay takibi veya kurumsal iş birlikleri için bize e-posta ile ulaşabilirsiniz.</p>
    <div style="background:#0b1120;border:1px solid var(--line);border-radius:14px;padding:20px;margin:16px 0;">
      <div style="font-size:0.85rem;color:var(--m);margin-bottom:6px;">Resmi İletişim & Destek E-Postası:</div>
      <div style="font:800 1.3rem var(--d);color:var(--g2);letter-spacing:0.02em;">info@peletshop.com</div>
      <p style="font-size:0.85rem;color:var(--m);margin-top:10px;line-height:1.5;">İlan onay talepleri ve firma rehberi başvuruları aynı gün içinde incelenip yanıtlanmaktadır.</p>
      <div style="margin-top:16px;">
        <a class="btn mail" href="mailto:info@peletshop.com?subject=PeletShop%20Destek%20Talebi">✉️ E-Posta Gönder</a>
      </div>
    </div>
  </div>
</section>

<section id="ilan-ver">
  <div class="panel" style="max-width:640px;margin:20px auto">
    <h2>İlan veya Alım Talebi Bırak</h2>
    <p class="note">İlanınız kontrol edildikten sonra yayınlanır. “Doğrulanmış” rozeti belge kontrolünden sonra yönetici tarafından verilir.</p>
    <form id="form" class="f">
      <div class="full"><label>İlan tipi</label><select id="fType"><option value="satilik">Satıyorum</option><option value="talep">Arıyorum (alım talebi)</option></select></div>
      <div><label>Kategori</label><select id="fCat"><option value="talas">Talaş & ahşap artığı</option><option value="pelet">Pelet yakıtı</option><option value="makine">Makine / ekipman / parça</option></select></div>
      <div><label>Şehir / ilçe</label><input id="fCity" required maxlength="80" placeholder="Balıkesir / Dursunbey"></div>
      <div class="full"><label>Başlık</label><input id="fTitle" required minlength="5" maxlength="120" placeholder="Aylık 300 ton kuru çam talaşı"></div>
      <div><label>Miktar</label><input id="fQty" required maxlength="60" placeholder="300 ton / ay"></div>
      <div><label>Fiyat veya nem</label><input id="fPrice" required maxlength="60" placeholder="Teklif / %12 nem"></div>
      <div><label>Firma / yetkili adı</label><input id="fName" required maxlength="80"></div>
      <div><label>İletişim e-posta adresi (isteğe bağlı)</label><input id="fEmail" type="email" maxlength="80" placeholder="iletisim@firma.com"></div>
      <div class="full"><label>Açıklama</label><textarea id="fDesc" rows="3" maxlength="1000" placeholder="Ağaç cinsi, yükleme, kantar, teslimat şartları…"></textarea></div>
      <div class="full"><label>Fotoğraf (isteğe bağlı)</label><input id="fPhoto" type="file" accept="image/*"></div>
      <div class="full"><button class="btn" style="width:100%;padding:13px">Gönder</button></div>
    </form>
  </div>
</section>

<section id="admin">
  <div class="panel" style="max-width:640px;margin:20px auto">
    <h2>Yönetici Girişi & Onay Paneli</h2>
    <p class="note" id="aNote">Bekleyen ilanları onaylamak için yönetici hesabınızla oturum açın.</p>
    
    <div id="aLoginForm" class="f" style="margin-top:14px;">
      <div><label>Yönetici E-Posta</label><input id="aEmail" type="email" value="ceylanilyas38@gmail.com"></div>
      <div><label>Şifre</label><input id="aPass" type="password" placeholder="Şifrenizi girin"></div>
      <div class="full" style="display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;">
        <button class="btn" id="aEmailLogin" type="button">Şifre ile Giriş Yap</button>
        <button class="btn s" id="aGoogleLogin" type="button">Google ile Giriş</button>
      </div>
    </div>

    <div id="aLoggedIn" style="display:none;margin-top:12px;">
      <div style="display:flex;justify-content:space-between;align-items:center;padding:10px;background:#0b1120;border-radius:10px;border:1px solid var(--line);">
        <div><strong style="color:var(--g2);">Oturum Açıldı:</strong> <span id="aUserEmail"></span></div>
        <button class="btn s sm" id="aLogout">Çıkış</button>
      </div>
    </div>
  </div>
  <div class="w" style="margin-top:20px;">
    <h3 style="font:700 1.2rem var(--d);margin-bottom:12px;">Onay Bekleyen İlanlar</h3>
    <div class="grid" id="pend"></div>
  </div>
</section>
</div>

<nav class="bot">
  <a href="#ilanlar"><span>📋</span>İlanlar</a>
  <a href="#rehber"><span>🏭</span>Rehber</a>
  <a href="#ilan-ver"><span>➕</span>İlan Ver</a>
  <a href="#maliyet"><span>🧮</span>Maliyet</a>
  <a href="#destek"><span>✉️</span>Destek</a>
</nav>
<div class="modal" id="modal"><div id="mb"></div></div>

<script>
const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const $=id=>document.getElementById(id);
const CAT={talas:['🌲','Talaş'],pelet:['🔥','Pelet'],makine:['⚙️','Makine']};
const ADMIN_EMAILS=['ceylanilyas38@gmail.com','info@peletshop.com'];
let items=[],dirs=[],cat='all',db,FB,au,fbOk=false;

// ---- yönlendirme ----
function route(){const h=(location.hash||'#ilanlar').slice(1);const id=['ilanlar','rehber','maliyet','destek','ilan-ver','admin'].includes(h)?h:'ilanlar';
 document.querySelectorAll('section').forEach(s=>s.classList.toggle('on',s.id===id));
 document.querySelectorAll('nav a').forEach(a=>a.classList.toggle('on',a.getAttribute('href')==='#'+id));scrollTo(0,0)}
addEventListener('hashchange',route);

// ---- ilan listesi ----
const chipDefs=[['all','Tümü'],['talas','🌲 Talaş'],['pelet','🔥 Pelet'],['makine','⚙️ Makine'],['talep','📢 Alım talepleri']];
$('chips').innerHTML=chipDefs.map(([k,l])=>`<button class="chip${k==='all'?' on':''}" data-k="${k}">${l}</button>`).join('');
$('chips').onclick=e=>{const k=e.target.dataset.k;if(!k)return;cat=k;document.querySelectorAll('.chip').forEach(c=>c.classList.toggle('on',c.dataset.k===k));render()};
$('q').oninput=render;$('cityF').onchange=render;

function card(x,admin){const c=CAT[x.category]||['📦','İlan'];const t=x.type==='talep';
 return `<div class="card"><div class="ph">${x.photo?`<img src="${esc(x.photo)}" alt="">`:`<img src="/icon.png" style="width:68px;height:68px;object-fit:contain;opacity:0.9;" alt="PeletShop">`}</div><div class="cb">
 <div><span class="tag ${t?'t':x.category==='makine'?'m':''}">${t?'Alım talebi':c[1]}</span> ${x.verified?'<span class="tag v">✓ Doğrulanmış</span>':''}</div>
 <h3>${esc(x.title)}</h3><div class="meta">📍 ${esc(x.city)} · ${esc(x.quantity)}</div><div class="price">${esc(x.price)}</div>
 <div class="foot"><span class="meta">${esc(x.contactName)}</span>${admin?`<span style="display:flex;gap:6px"><button class="btn sm" data-ok="${x.id}">Onayla</button><button class="btn sm" data-okv="${x.id}">Onayla + rozet</button><button class="btn s sm" data-del="${x.id}">Sil</button></span>`:`<button class="btn s sm" data-id="${x.id}">Detay</button>`}</div></div></div>`}

function render(){const q=$('q').value.toLowerCase().trim(),city=$('cityF').value;
 const f=items.filter(x=>(cat==='all'||(cat==='talep'?x.type==='talep':x.category===cat&&x.type!=='talep'))&&(!city||x.city===city)&&(!q||`${x.title} ${x.description} ${x.city}`.toLowerCase().includes(q)));
 $('list').innerHTML=f.length?f.map(x=>card(x)).join(''):`<div class="empty"><h3>${items.length?'Bu aramaya uygun ilan yok':'İlk ilanı siz verin'}</h3>${items.length?'Filtreleri değiştirin.':'Talaşınız, peletiniz veya makineniz varsa ya da bir şey arıyorsanız ücretsiz ilan bırakın.'}<br><a class="btn" href="#ilan-ver">İlan / talep bırak</a></div>`;
 $('nAll').textContent=items.length;$('nTalep').textContent=items.filter(x=>x.type==='talep').length;$('nMakine').textContent=items.filter(x=>x.category==='makine').length;
 const cs=[...new Set(items.map(x=>x.city))].sort();$('cityF').innerHTML='<option value="">Tüm şehirler</option>'+cs.map(c=>`<option${c===city?' selected':''}>${esc(c)}</option>`).join('')}

$('list').onclick=e=>{const id=e.target.dataset.id;if(!id)return;const x=items.find(i=>i.id===id);if(!x)return;
 const contactHref=x.contactEmail?`mailto:${esc(x.contactEmail)}?subject=${encodeURIComponent('PeletShop: '+x.title)}`:`mailto:info@peletshop.com?subject=${encodeURIComponent('PeletShop İlan Talebi: '+x.title)}`;
 $('mb').innerHTML=`<div class="ph" style="height:200px">${x.photo?`<img src="${esc(x.photo)}" alt="">`:`<img src="/icon.png" style="width:90px;height:90px;object-fit:contain;opacity:0.9;" alt="PeletShop">`}</div><div class="cb" style="padding:20px"><h3 style="font:700 1.2rem var(--d)">${esc(x.title)}</h3>${x.verified?'<span class="tag v">✓ Doğrulanmış firma</span>':''}<div class="row"><span>Konum</span><b>${esc(x.city)}</b></div><div class="row"><span>Miktar</span><b>${esc(x.quantity)}</b></div><div class="row"><span>Fiyat / nem</span><b>${esc(x.price)}</b></div><div class="row"><span>İlan sahibi</span><b>${esc(x.contactName)}</b></div><p class="meta" style="margin:10px 0">${esc(x.description)||'Açıklama yok.'}</p><a class="btn mail" style="display:block;text-align:center" href="${contactHref}">✉️ E-Posta ile İletişime Geç</a></div>`;$('modal').classList.add('on')};
$('modal').onclick=e=>{if(e.target===$('modal'))$('modal').classList.remove('on')};

// ---- rehber ----
function renderDir(){$('dir').innerHTML=dirs.length?dirs.map(f=>`<div class="card"><div class="cb"><div>${f.verified?'<span class="tag v">✓ Doğrulanmış</span>':''}</div><h3>${esc(f.name)}</h3><div class="meta">📍 ${esc(f.city)}</div><div class="meta">${esc(f.field)}</div><div class="foot"><span></span><a class="btn s sm" href="mailto:info@peletshop.com?subject=${encodeURIComponent(f.name+' Rehber İletişim')}">İletişime Geç</a></div></div></div>`).join(''):'<div class="empty"><h3>Rehber hazırlanıyor</h3>Firmanızın rehberde yer almasını istiyorsanız info@peletshop.com adresine yazın.</div>'}

// ---- maliyet hesaplayıcı ----
const CF=[['raw','Hammadde alış (₺/ton)',1850],['inm','Giriş nemi (%)',38],['outm','Pelet nemi (%)',9],['fire','Fire / kayıp (%)',3],['kwh','Elektrik (kWh/ton)',95],['ep','Elektrik birim (₺/kWh)',4.3],['dk','Kurutma ısı (kWh/kg su)',1.0],['fp','Kurutma yakıt (₺/kWh ısı)',0.5],['lab','İşçilik+kalıp aşınma (₺/ton)',600],['pk','Ambalaj (₺/ton)',650],['tr','Nakliye (₺/ton)',0],['sale','Satış fiyatınız (₺/ton)',''],['cap','Aylık üretim (ton)',300]];
$('cf').innerHTML=CF.map(([k,l,v])=>`<div><label>${l}</label><input type="number" step="any" id="c_${k}" value="${v}"></div>`).join('');
function calc(){const g=k=>parseFloat($('c_'+k).value)||0;
 const rawT=(100-g('outm'))/(100-Math.min(g('inm'),99))/(1-Math.min(g('fire'),50)/100);const water=Math.max(0,1000*((100-g('outm'))/(100-Math.min(g('inm'),99))-1));
 const items=[['Hammadde ('+rawT.toFixed(2)+' ton yaş)',rawT*g('raw')],['Kurutma yakıtı ('+Math.round(water)+' kg su)',water*g('dk')*g('fp')],['Elektrik',g('kwh')*g('ep')],['İşçilik / bakım',g('lab')],['Ambalaj',g('pk')],['Nakliye',g('tr')]];
 const tot=items.reduce((a,b)=>a+b[1],0),s=g('sale'),n=x=>Math.round(x).toLocaleString('tr-TR')+' ₺';
 $('cres').innerHTML=`<div class="meta">1 TON PELET NET MALİYETİ</div><div class="res">${n(tot)}</div>${items.map(i=>`<div class="row"><span>${i[0]}</span><b>${n(i[1])}</b></div>`).join('')}${s?`<div class="row"><span>Ton başı kâr</span><b style="color:${s>=tot?'var(--g2)':'#f43f5e'}">${n(s-tot)} (%${((s-tot)/s*100).toFixed(1)})</b></div><div class="row"><span>Aylık kâr</span><b>${n((s-tot)*g('cap'))}</b></div>`:'<p class="note" style="margin-top:10px">Kâr için satış fiyatınızı girin.</p>'}`}
$('cf').oninput=calc;calc();

// ---- fotoğraf küçültme ----
const shrink=f=>new Promise(r=>{if(!f)return r('');const im=new Image();im.onload=()=>{const k=Math.min(1,800/Math.max(im.width,im.height)),c=document.createElement('canvas');c.width=im.width*k;c.height=im.height*k;c.getContext('2d').drawImage(im,0,0,c.width,c.height);let q=.7,d=c.toDataURL('image/jpeg',q);while(d.length>190000&&q>.3){q-=.1;d=c.toDataURL('image/jpeg',q)}r(d.length>190000?'':d)};im.onerror=()=>r('');im.src=URL.createObjectURL(f)});

// ---- Firebase Entegrasyonu ----
(async()=>{try{
 const V='10.12.2',B='https://www.gstatic.com/firebasejs/'+V+'/';
 const [A,F,U]=await Promise.all([import(B+'firebase-app.js'),import(B+'firebase-firestore.js'),import(B+'firebase-auth.js')]);
 const app=A.initializeApp({apiKey:"AIzaSyAKPxG_tDBBPRIJGNHfnfwJPBqUVe0_F3g",authDomain:"peletshoptr.firebaseapp.com",projectId:"peletshoptr",storageBucket:"peletshoptr.firebasestorage.app",messagingSenderId:"983346849269",appId:"1:983346849269:web:1277bd2c2f4e0aee842cbc"});
 db=F.getFirestore(app);FB=F;fbOk=true;au=U.getAuth(app);
 const load=async(c,st)=>(await F.getDocs(F.query(F.collection(db,c),F.where('status','==',st)))).docs.map(d=>({id:d.id,...d.data()})).sort((a,b)=>(b.createdAt?.seconds||0)-(a.createdAt?.seconds||0));
 items=await load('listings','approved');render();
 try{dirs=(await F.getDocs(F.collection(db,'directory'))).docs.map(d=>d.data())}catch(e){}renderDir();
 
 $('form').onsubmit=async e=>{e.preventDefault();const b=e.target.querySelector('button');b.disabled=true;
  try{await F.addDoc(F.collection(db,'listings'),{
    title:$('fTitle').value.trim(),category:$('fCat').value,type:$('fType').value,city:$('fCity').value.trim(),
    price:$('fPrice').value.trim(),quantity:$('fQty').value.trim(),contactName:$('fName').value.trim(),
    contactPhone:"",contactEmail:$('fEmail')?.value?.trim()||"",description:$('fDesc').value.trim(),
    photo:await shrink($('fPhoto').files[0]),status:'pending',verified:false,createdAt:F.serverTimestamp()
  });
   e.target.reset();alert('İlanınız alındı. İncelemenin ardından onaylanıp yayınlanacaktır.');location.hash='#ilanlar'}catch(err){alert('Gönderilemedi. Lütfen alanları kontrol edip tekrar deneyin.')}b.disabled=false};

 const checkAdminUi=async(user)=>{
  if(user && ADMIN_EMAILS.includes(user.email)){
   $('aLoginForm').style.display='none';$('aLoggedIn').style.display='block';$('aUserEmail').textContent=user.email;
   $('aNote').textContent='Yönetici yetkisi aktif.';
   try{const p=await load('listings','pending');$('pend').innerHTML=p.length?p.map(x=>card(x,true)).join(''):'<div class="empty">Onay bekleyen ilan yok.</div>'}catch(e){}
  }else{
   $('aLoginForm').style.display='grid';$('aLoggedIn').style.display='none';
   if(user) $('aNote').textContent='Oturum açık ('+user.email+') ancak bu hesap yönetici listesinde değil.';
   else $('aNote').textContent='Giriş yaparak bekleyen ilanları yönetebilirsiniz.';
   $('pend').innerHTML='';
  }
 };

 U.onAuthStateChanged(au,checkAdminUi);

 // E-Posta & Şifre Girişi
 $('aEmailLogin').onclick=async()=>{
  const em=$('aEmail').value.trim(),pw=$('aPass').value.trim();
  if(!em||!pw){alert('Lütfen e-posta ve şifrenizi girin.');return}
  try{
   await U.signInWithEmailAndPassword(au,em,pw);
  }catch(err){
   if(err.code==='auth/user-not-found'||err.code==='auth/invalid-credential'||err.code==='auth/invalid-login-credentials'){
    // İlk defa giriş yapılıyorsa otomatik kullanıcı kaydı
    try{await U.createUserWithEmailAndPassword(au,em,pw);alert('Yönetici hesabı başarıyla oluşturuldu ve giriş yapıldı.')}
    catch(cErr){alert('Giriş yapılamadı: '+cErr.message)}
   }else{alert('Giriş hatası: '+err.message)}
  }
 };

 // Google ile Giriş
 $('aGoogleLogin').onclick=async()=>{
  try{await U.signInWithPopup(au,new U.GoogleAuthProvider())}catch(e){alert('Google girişi tamamlanamadı.')}
 };

 // Çıkış
 $('aLogout').onclick=async()=>{await U.signOut(au)};

 $('pend').onclick=async e=>{const t=e.target.dataset,id=t.ok||t.okv||t.del;if(!id)return;const r=F.doc(db,'listings',id);
  if(t.del){if(confirm('İlan silinsin mi?'))await F.deleteDoc(r)}else await F.updateDoc(r,{status:'approved',verified:!!t.okv});
  checkAdminUi(au.currentUser);items=await load('listings','approved');render()};
}catch(e){console.warn(e);items=[];render();renderDir();$('form').onsubmit=ev=>{ev.preventDefault();alert('Bağlantı kurulamadı.')}}})();
route();
if('serviceWorker' in navigator)navigator.serviceWorker.register('/sw.js').catch(()=>{});
</script>
</body>
</html>
