<div id="heiluna-app" class="heiluna-wrapper">
<style>
/* --- SCOPED CSS (Sitenin geri kalanını bozmaz) --- */
.heiluna-wrapper {
--h-primary: #1a1a1a; /* Kömür Siyahı */
--h-secondary: #c5a065; /* Lüks Altın */
--h-bg: #ffffff;
--h-bg-soft: #f8f9fa;
--h-border: #e2e8f0;
--h-text: #4a5568;
--h-radius: 12px;
--h-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: var(--h-text);
line-height: 1.6;
width: 100%;
margin: 0 auto;
max-width: 1200px;
}

.heiluna-wrapper * { box-sizing: border-box; }

/* HEADER */
.h-header { text-align: center; margin-bottom: 40px; padding: 40px 20px; background: linear-gradient(135deg, #fdfbf7 0%, #fff 100%); border-radius: var(--h-radius); border: 1px solid var(--h-border); }
.h-header h2 { font-size: 2rem; color: var(--h-primary); margin: 0 0 10px 0; font-weight: 300; letter-spacing: -0.5px; }
.h-header h2 strong { font-weight: 700; color: var(--h-secondary); }
.h-header p { color: #718096; max-width: 600px; margin: 0 auto; }

/* CONTROLS */
.h-controls { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; align-items: center; justify-content: space-between; }

.h-tabs { display: flex; gap: 10px; background: var(--h-bg-soft); padding: 5px; border-radius: 50px; border: 1px solid var(--h-border); }
.h-tab { padding: 8px 20px; border: none; background: transparent; cursor: pointer; border-radius: 40px; font-weight: 500; color: #64748b; transition: 0.3s; font-size: 0.95rem; }
.h-tab.active { background: var(--h-primary); color: #fff; shadow: var(--h-shadow); }

.h-search { position: relative; flex: 1; min-width: 280px; }
.h-search input { width: 100%; padding: 12px 20px 12px 45px; border: 1px solid var(--h-border); border-radius: 50px; outline: none; transition: 0.3s; font-size: 0.95rem; }
.h-search input:focus { border-color: var(--h-secondary); box-shadow: 0 0 0 3px rgba(197, 160, 101, 0.2); }
.h-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }

/* GRID */
.h-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; }

.h-card { background: #fff; border: 1px solid var(--h-border); border-radius: var(--h-radius); overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; position: relative; }
.h-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: var(--h-secondary); }

.h-card-top { padding: 20px; background: #fafafa; border-bottom: 1px solid var(--h-border); display: flex; justify-content: space-between; align-items: start; }
.h-category-badge { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--h-secondary); letter-spacing: 0.5px; background: rgba(197, 160, 101, 0.1); padding: 4px 8px; border-radius: 4px; }

.h-card-body { padding: 20px; flex: 1; }
.h-title { font-size: 1.15rem; color: var(--h-primary); font-weight: 600; margin-bottom: 10px; }
.h-approval { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #059669; margin-bottom: 15px; background: #ecfdf5; padding: 6px 10px; border-radius: 6px; width: fit-content; }

.h-details { margin-top: 15px; }
.h-toggle-btn { background: none; border: none; color: var(--h-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 5px; }
.h-accordion { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; font-size: 0.9rem; color: #64748b; }
.h-accordion.open { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--h-border); }

.h-actions { padding: 20px; border-top: 1px solid var(--h-border); display: flex; gap: 10px; }
.h-btn { flex: 1; padding: 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; text-align: center; border: 1px solid transparent; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none !important; }
.h-btn-primary { background: var(--h-primary); color: #fff !important; }
.h-btn-primary:hover { background: #000; }
.h-btn-outline { border-color: var(--h-border); background: #fff; color: var(--h-primary) !important; }
.h-btn-outline:hover { border-color: var(--h-primary); }

/* MODAL */
.h-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.h-modal-content { background: #fff; width: 90%; max-width: 900px; height: 85%; border-radius: 12px; display: flex; flex-direction: column; animation: modalPop 0.3s ease; }
.h-modal-header { padding: 15px 20px; border-bottom: 1px solid var(--h-border); display: flex; justify-content: space-between; align-items: center; }
.h-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; }
.h-modal-body { flex: 1; background: #eee; }
.h-modal-body iframe { width: 100%; height: 100%; border: none; }

/* CHATBOT */
.h-chat-widget { position: fixed; bottom: 25px; right: 25px; z-index: 9990; font-family: 'Segoe UI', sans-serif; }
.h-chat-toggle { width: 60px; height: 60px; background: var(--h-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: transform 0.3s; position: relative; }
.h-chat-toggle:hover { transform: scale(1.1); }
.h-chat-badge { position: absolute; top: 0; right: 0; width: 15px; height: 15px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; }

.h-chat-window { position: absolute; bottom: 80px; right: 0; width: 350px; height: 500px; background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: chatPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--h-border); }
.h-chat-window.active { display: flex; }

.h-chat-header { background: var(--h-primary); color: #fff; padding: 15px; display: flex; align-items: center; gap: 10px; }
.h-avatar { width: 32px; height: 32px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }

.h-chat-body { flex: 1; padding: 15px; overflow-y: auto; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.h-msg { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; max-width: 80%; line-height: 1.4; }
.h-msg.bot { background: #fff; border: 1px solid var(--h-border); align-self: flex-start; border-bottom-left-radius: 2px; }
.h-msg.user { background: var(--h-secondary); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }

.h-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.h-chip { font-size: 0.75rem; background: #e2e8f0; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: 0.2s; color: #475569; border: 1px solid transparent; }
.h-chip:hover { background: #cbd5e1; border-color: #94a3b8; }

.h-chat-input { padding: 12px; border-top: 1px solid var(--h-border); background: #fff; display: flex; gap: 8px; }
.h-chat-input input { flex: 1; padding: 8px 15px; border: 1px solid var(--h-border); border-radius: 20px; outline: none; font-size: 0.9rem; }
.h-chat-input button { background: var(--h-secondary); color: white; border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

@keyframes modalPop { from {opacity: 0; transform: scale(0.95);} to {opacity: 1; transform: scale(1);} }
@keyframes chatPop { from {opacity: 0; transform: scale(0.8);} to {opacity: 1; transform: scale(1);} }

@media (max-width: 768px) {
.h-controls { flex-direction: column; align-items: stretch; }
.h-tabs { overflow-x: auto; white-space: nowrap; justify-content: flex-start; }
.h-chat-window { width: 90vw; height: 60vh; position: fixed; bottom: 90px; right: 5vw; }
}
</style>

<header class="h-header">
<h2>Heiluna <strong>Şeffaflık Platformu</strong></h2>
<p>Ürünlerimize ait resmi bakanlık onayları, detaylı içerik analizleri ve sertifikalara buradan erişebilirsiniz.</p>
</header>

<div class="h-controls">
<div class="h-tabs">
<button class="h-tab active" onclick="filterCat('all', this)">Tümü</button>
<button class="h-tab" onclick="filterCat('supplement', this)">Takviye Edici Gıda</button>
<button class="h-tab" onclick="filterCat('cosmetic', this)">Kozmetik</button>
</div>
<div class="h-search">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" id="h-searchInput" placeholder="Ürün adı, içerik veya onay no ara..." onkeyup="filterSearch()">
</div>
</div>

<div id="h-documentModal" class="h-modal">
<div class="h-modal-content">
<div class="h-modal-header">
<h3 id="h-modalTitle" style="margin:0; font-size:1.1rem; color:#333;">Belge Önizleme</h3>
<span class="h-close" onclick="closeDoc()">×</span>
</div>
<div class="h-modal-body">
<iframe id="h-docFrame" src=""></iframe>
</div>
</div>
</div>

<div class="h-chat-widget">
<div class="h-chat-window" id="h-chatWindow">
<div class="h-chat-header">
<div class="h-avatar">H</div>
<span style="flex:1">Heiluna Asistan</span>
<small onclick="toggleChat()" style="cursor:pointer; opacity:0.8">Kapat</small>
</div>
<div class="h-chat-body" id="h-chatMessages">
<div class="h-msg bot">Merhaba! 👋 Ben Heiluna Asistan. Size nasıl yardımcı olabilirim?</div>
<div class="h-chips">
<span class="h-chip" onclick="quickAsk('Onay belgeleri nerede?')">📜 Onay Belgeleri</span>
<span class="h-chip" onclick="quickAsk('Nasıl kullanılır?')">💊 Kullanım Bilgisi</span>
<span class="h-chip" onclick="quickAsk('Ürünler vegan mı?')">🌱 Vegan mı?</span>
</div>
</div>
<div class="h-chat-input">
<input type="text" id="h-userMsg" placeholder="Bir soru sorun..." onkeypress="handleEnter(event)">
<button onclick="sendMessage()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"></path></svg>
</button>
</div>
</div>
<div class="h-chat-toggle" onclick="toggleChat()">
<span class="h-chat-badge"></span>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
</div>

// --- UYGULAMA MANTIĞI ---
let currentCat = 'all';
const grid = document.getElementById('h-productsGrid');

function init() {
render(h_products);
}

function render(data) {
grid.innerHTML = "";
if(data.length === 0) {
grid.innerHTML = `<div style="grid-column:1/-1; text-align:center; padding:40px; color:#999;">Aradığınız kriterlere uygun ürün bulunamadı.</div>`;
return;
}

data.forEach(p => {
const isSupp = p.category === 'supplement';
const html = `
<div class="h-card">
<div class="h-card-top">
<span class="h-category-badge">${isSupp ? 'Takviye Gıda' : 'Kozmetik'}</span>
<svg width="24" height="24" stroke="${isSupp ? '#2A9D8F' : '#E76F51'}" fill="none" stroke-width="1.5" viewBox="0 0 24 24">
${isSupp
? '<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>'
: '<path d="M20.2 7.8l-7.7 7.7a3.5 3.5 0 0 1-4.9-5l7.7-7.7a1 1 0 0 1 1.4 0l3.5 3.5a1 1 0 0 1 0 1.4zM5 19h4M5 15v4"></path>'}
</svg>
</div>
<div class="h-card-body">
<h3 class="h-title">${p.name}</h3>
<div class="h-approval">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
${p.approval}
</div>
<div class="h-details">
<button class="h-toggle-btn" onclick="toggleAcc(this)">
İçerik Detayları <span>▼</span>
</button>
<div class="h-accordion">
<p><strong>İçindekiler:</strong> ${p.ingredients}</p>
<p style="margin-top:5px; font-style:italic; font-size:0.85rem;">${p.notes}</p>
</div>
</div>
</div>
<div class="h-actions">
<button class="h-btn h-btn-outline" onclick="openDoc('${p.docUrl}', '${p.name}')">
👁️ İncele
</button>
<a href="${p.docUrl}" download class="h-btn h-btn-primary">
⬇ İndir
</a>
</div>
</div>
`;
grid.innerHTML += html;
});
}

// --- FİLTRELEME ---
window.filterCat = function(cat, btn) {
currentCat = cat;
document.querySelectorAll('.h-tab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
applyFilter();
};

window.filterSearch = function() {
applyFilter();
};

function applyFilter() {
const query = document.getElementById('h-searchInput').value.toLowerCase();
const filtered = h_products.filter(p => {
const catMatch = currentCat === 'all' || p.category === currentCat;
const searchMatch = p.name.toLowerCase().includes(query) ||
p.ingredients.toLowerCase().includes(query) ||
p.approval.includes(query);
return catMatch && searchMatch;
});
render(filtered);
}

// --- ACCORDION ---
window.toggleAcc = function(btn) {
const content = btn.nextElementSibling;
content.classList.toggle('open');
content.style.maxHeight = content.classList.contains('open') ? content.scrollHeight + "px" : "0";
};

// --- MODAL ---
const modal = document.getElementById('h-documentModal');
window.openDoc = function(url, title) {
document.getElementById('h-modalTitle').innerText = title;
document.getElementById('h-docFrame').src = url;
modal.style.display = "flex";
};
window.closeDoc = function() { modal.style.display = "none"; document.getElementById('h-docFrame').src = ""; };
modal.onclick = (e) => { if(e.target === modal) closeDoc(); };

// --- CHATBOT ---
const chatWin = document.getElementById('h-chatWindow');
const msgs = document.getElementById('h-chatMessages');
const input = document.getElementById('h-userMsg');

window.toggleChat = function() {
chatWin.classList.toggle('active');
document.querySelector('.h-chat-badge').style.display = 'none';
};

window.quickAsk = function(txt) {
input.value = txt;
sendMessage();
};

window.handleEnter = function(e) {
if(e.key === 'Enter') sendMessage();
};

window.sendMessage = function() {
const txt = input.value.trim();
if(!txt) return;

// Kullanıcı mesajı
addMsg(txt, 'user');
input.value = "";

// Bot Düşünüyor efekti (Simüle)
const loadId = addMsg('...', 'bot');

setTimeout(() => {
document.getElementById(loadId).remove(); // Loading sil
const answer = getBotAnswer(txt);
addMsg(answer, 'bot');
}, 800);
};

function addMsg(txt, sender) {
const id = 'msg-' + Date.now();
const div = document.createElement('div');
div.id = id;
div.className = `h-msg ${sender}`;
div.innerText = txt;
msgs.appendChild(div);
msgs.appendChild(document.querySelector('.h-chips')); // Butonları hep en alta taşı
msgs.scrollTop = msgs.scrollHeight;
return id;
}

function getBotAnswer(q) {
q = q.toLowerCase();
if(q.includes('onay') || q.includes('belge')) return "Tüm ürünlerimiz T.C. Tarım ve Orman Bakanlığı onaylıdır. İlgili belgeyi ürün kartındaki 'İncele' butonuna basarak görebilirsiniz.";
if(q.includes('nasıl') || q.includes('kullan')) return "Takviye edici gıdaların genel olarak sabah tok karnına alınması önerilir. Magnesium akşam, D3K2 ise yağlı bir öğünle alınmalıdır.";
if(q.includes('vegan')) return "Kapsül formdaki ürünlerimizin tamamı Vcaps (Bitkisel) kapsüldür ve vegan kullanıma uygundur.";
if(q.includes('fiyat') || q.includes('satın')) return "Güncel fiyat ve stok bilgisini sitemizin mağaza bölümünden görebilirsiniz.";
return "Bu konuda şu an net bir bilgi veremiyorum. Dilerseniz WhatsApp hattımızdan uzman eczacımıza danışabilirsiniz.";
}

// Başlat
init();

</script>