SMALL THINGZ

Bu site, polimer biliminin mikroskobik evrenini makroskobik bir deneyime dönüştürmek için tasarlandı. Gözle görülemeyen moleküleri, karmaşık zincir reaksiyonlarını ve kimyasal mimariyi interaktif simülasyonlarla parmaklarınızın ucuna getiriyoruz. Amacımız, sadece teorik bilgi sunmak değil; maddenin en temel yapı taşlarının nasıl bir araya gelerek hayatımızı şekillendiren malzemelere dönüştüğünü keşfetmenizi sağlamaktır. Polimer kimyasının derinliklerine inen bu yolculukta, atomik düzeydeki "küçük şeylerin" nasıl devasa etkiler yarattığına tanıklık edeceksiniz. Bilimi sadece izlemeyin; ona dokunun, parametreleri değiştirin ve moleküler dünyayı kendi ellerinizle yönetin.

SİMÜLASYONLAR

Polimer Nedir?

Polimerlerin Tarihçesi ile devam et →

SMALL THINGZ -

← Ana Sayfaya Dön

Polimer Nedir?

Polimerlerin Tarihçesi

Polimer Biliminin Öncüleri

Charles Goodyear

Hermann Staudinger

Wallace Carothers

Karl Ziegler

Giulio Natta

← Ana Sayfaya Dön

SİMÜLASYONLAR

← Ana Sayfaya Dön

Başlık

Açıklama...

Özel not...

Simülasyon Aktif

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultra-Stabil Dev Polimer Simülasyonu v11 (Uzun Zincir Ölçekli)</title>
    <style>
        /* --- GENEL TASARIM --- */
        body {
            margin: 0;
            overflow: hidden;
            background-color: #020617; 
            color: #e2e8f0;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            user-select: none;
        }
        #canvas-container {
            position: relative;
            width: 100%;
            height: 100%;
            cursor: grab;
            /* Arka plan dokusu */
            background-image: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
        }
        #canvas-container:active { cursor: grabbing; }
        canvas { display: block; }
        
        /* --- BUZLU CAM (GLASSMORPHISM) PANEL - DAHA ŞEFFAF --- */
        #controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            /* Şeffaflık artırıldı: 0.40 -> 0.25 */
            background: rgba(15, 23, 42, 0.25); 
            backdrop-filter: blur(12px); 
            -webkit-backdrop-filter: blur(12px);
            padding: 20px 40px;
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70%;
            max-width: 600px;
            transition: background 0.3s;
        }

#controls:hover {
            background: rgba(15, 23, 42, 0.40);
        }

h2 {
            margin: 0;
            font-size: 1rem;
            color: #38bdf8;
            letter-spacing: 1.5px;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
        }

.slider-wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-top: 20px;
            position: relative;
        }

input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #ef4444 0%, #94a3b8 50%, #22c55e 100%);
            border-radius: 3px;
            outline: none;
            cursor: ew-resize;
            opacity: 0.9;
        }

input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 15px rgba(255,255,255,0.8);
            cursor: ew-resize;
            transition: transform 0.1s;
            border: 2px solid #0f172a;
            margin-top: -1px;
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        
        .label {
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
            opacity: 1;
            flex-basis: 20%;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        .poor { color: #fca5a5; text-align: left; }
        .good { color: #86efac; text-align: right; }
        .theta { 
            color: #f1f5f9; 
            position: absolute; 
            left: 50%; 
            transform: translateX(-50%); 
            top: -25px;
            font-size: 0.75rem;
            opacity: 0.8;
        }

#status {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #cbd5e1;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>

<div id="canvas-container">
        <canvas id="simCanvas"></canvas>
        
        <div id="controls">
            <h2>DİNAMİK ÇÖZÜCÜ SİMÜLASYONU</h2>
            <div class="slider-wrapper">
                <span class="label poor">ZAYIF (Yumak)</span>
                <span class="label theta">THETA (Θ)</span>
                <input type="range" id="solventSlider" min="0" max="100" value="50">
                <span class="label good">İYİ (Şişme)</span>
            </div>
            <div id="status">Durum: Theta (Θ) Koşulu - Dengeli</div>
        </div>
    </div>

let width, height;
    
    // --- KONFİGÜRASYON ---
    const config = {
        chainCount: 6, 
        // MODİFİKASYON: Zincir uzunlukları 2x artırıldı (32 -> 64)
        polymerLengths: [20, 30, 30, 64, 64, 20], 
        solventCount: 400, // Büyük zincirler için biraz daha çözücü
        particleRadius: 5.5,
        bondLength: 14,
        interactionRange: 60
    };

let particles = [];
    let chains = [];
    let solventQuality = 0.5;

let draggedParticle = null;

class Particle {
        constructor(x, y, type, chainId = -1, mass = 1) {
            this.x = x; this.y = y;
            this.vx = (Math.random() - 0.5) * 2;
            this.vy = (Math.random() - 0.5) * 2;
            this.type = type;
            this.chainId = chainId;
            this.radius = config.particleRadius;
            this.mass = mass;
        }

update() {
            if (this === draggedParticle) return;

if (this.type === 'solvent') {
                // Çözücüler: Yüksek hareketlilik
                this.vx += (Math.random() - 0.5) * 1.5;
                this.vy += (Math.random() - 0.5) * 1.5;
                this.vx *= 0.96; 
                this.vy *= 0.96;
            } else {
                // --- POLİMER FİZİĞİ (MODİFİYE EDİLDİ) ---
                
                let thermalNoise = 0.0;
                let friction = 0.92;

if (solventQuality < 0.45) {
                    // Zayıf Çözücü Modu:
                    // MODİFİKASYON: Titreşim (noise) ciddi oranda azaltıldı.
                    thermalNoise = 0.05; 
                    
                    // MODİFİKASYON: Stabilite için sürtünme artırıldı (hız daha çabuk sönümlenir).
                    // Bu, v8'deki "donma" hissine daha yakın ama çok hafif bir hareket var.
                    friction = 0.85; 
                } else {
                    // İyi Çözücü Modu:
                    thermalNoise = 0.05; 
                }

// Rastgele Termal Kuvvet Ekle
                this.vx += (Math.random() - 0.5) * thermalNoise;
                this.vy += (Math.random() - 0.5) * thermalNoise;

// Sürtünme
                this.vx *= friction; 
                this.vy *= friction;
            }

this.x += this.vx; this.y += this.vy;

// Duvarlardan Yumuşak Sekme
            if (this.x < 10) { this.x = 10; this.vx *= -0.8; }
            if (this.x > width - 10) { this.x = width - 10; this.vx *= -0.8; }
            if (this.y < 10) { this.y = 10; this.vy *= -0.8; }
            if (this.y > height - 10) { this.y = height - 10; this.vy *= -0.8; }
        }

draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            
            if (this.type === 'polymer') {
                const hue = 180 + (this.chainId * 35); 
                if (this === draggedParticle) {
                    ctx.fillStyle = '#ffffff';
                    ctx.shadowColor = '#ffffff';
                    ctx.shadowBlur = 20;
                } else {
                    ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
                    ctx.shadowColor = `hsl(${hue}, 100%, 60%)`;
                    ctx.shadowBlur = 12; // Neon efekt
                }
            } else {
                // Çözücü Renkleri
                let r, g, b;
                if (solventQuality < 0.5) {
                    r = 255;
                    g = Math.floor(255 * (solventQuality * 2));
                    b = Math.floor(100 + 100 * solventQuality); 
                } else {
                    r = Math.floor(255 * (1 - (solventQuality - 0.5) * 2));
                    g = 255;
                    b = Math.floor(200 - 100 * (solventQuality - 0.5)); 
                }
                ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.6)`; // Biraz daha şeffaf
                ctx.shadowBlur = 0;
            }
            ctx.fill();
            ctx.shadowBlur = 0; 
            ctx.closePath();
        }
    }

function lerp(start, end, t) { return start * (1 - t) + end * t; }

// --- YENİ EKLENEN FONKSİYON: EN UZUN ZİNCİRİ ÖLÇEKLEME ---
    function scaleLongestChainInitial() {
        if (chains.length === 0) return;

// 1. En uzun zincirin indeksini bul
        let longestIdx = -1;
        let maxLength = -1;

chains.forEach((indices, i) => {
            if (indices.length > maxLength) {
                maxLength = indices.length;
                longestIdx = i;
            }
        });

if (longestIdx === -1) return;

console.log(`En uzun zincir tespit edildi: Zincir ${longestIdx} (Uzunluk: ${maxLength})`);
        
        // Bu zincirdeki parçacık indeksleri
        const chainIndices = chains[longestIdx];
        
        // 2. Kütle Merkezini (COM) Hesapla
        let comX = 0;
        let comY = 0;
        
        chainIndices.forEach(idx => {
            comX += particles[idx].x;
            comY += particles[idx].y;
        });
        
        comX /= chainIndices.length;
        comY /= chainIndices.length;

// 3. Ölçekleme Faktörü (User Prompt: 2 katına çıkart)
        const scaleFactor = 2.0;

// 4. Parçacıkları merkezden dışarı doğru ötele
        chainIndices.forEach(idx => {
            const p = particles[idx];
            
            // Merkezden vektör
            let dx = p.x - comX;
            let dy = p.y - comY;
            
            // Ölçekle
            p.x = comX + dx * scaleFactor;
            p.y = comY + dy * scaleFactor;

// Patlamayı önlemek için hızı sıfırla
            p.vx = 0;
            p.vy = 0;
        });

console.log("En uzun zincir 2 katına genişletildi.");
    }

function init() {
        resize();
        particles = [];
        chains = [];

// IZGARA (GRID) BAŞLANGIÇ SİSTEMİ
        const cols = 3;
        const rows = 2;
        const cellWidth = width / cols;
        const cellHeight = height / rows;

for (let c = 0; c < config.chainCount; c++) {
            let chainIndices = [];
            
            let colIndex = c % cols;
            let rowIndex = Math.floor(c / cols);
            
            let centerX = (colIndex * cellWidth) + (cellWidth / 2);
            let centerY = (rowIndex * cellHeight) + (cellHeight / 2);

const length = config.polymerLengths[c % config.polymerLengths.length];
            // Büyük zincirler daha ağır
            const mass = 4 + (length / 15);

for (let i = 0; i < length; i++) {
                let p = new Particle(
                    centerX + (Math.random()-0.5)*20, 
                    centerY + (Math.random()-0.5)*20, 
                    'polymer', c, mass
                );
                particles.push(p);
                chainIndices.push(particles.length - 1);
            }
            chains.push(chainIndices);
        }

// Çözücüler
        for (let i = 0; i < config.solventCount; i++) {
            particles.push(new Particle(Math.random()*width, Math.random()*height, 'solvent'));
        }

// --- EN SON: En uzun zinciri bul ve genişlet ---
        scaleLongestChainInitial();
    }

function solveInteractions() {
        let ppForce, psForce;

if (solventQuality <= 0.5) {
            let t = solventQuality * 2; 
            ppForce = lerp(-0.7, 0.0, t);
            psForce = lerp(0.9, 0.0, t);
        } else {
            let t = (solventQuality - 0.5) * 2; 
            // Büyük zincirlerin açılması için itme kuvveti biraz artırıldı
            ppForce = lerp(0.0, 1.5, t);
            psForce = lerp(0.0, -0.4, t);
        }

const rangeSq = config.interactionRange * config.interactionRange;

for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                let p1 = particles[i]; let p2 = particles[j];
                let dx = p2.x - p1.x; let dy = p2.y - p1.y;
                let distSq = dx*dx + dy*dy;
                if (distSq > rangeSq) continue;

let dist = Math.sqrt(distSq); if (dist < 1) dist = 1;
                let nx = dx / dist; let ny = dy / dist;

if (p1.type === 'polymer' && p2.type === 'polymer') {
                        f = ppForce; 
                    } else if (p1.type === 'solvent' && p2.type === 'solvent') {
                        f = 0.01; 
                    } else {
                        f = psForce;
                    }

let factor = 1 - (dist / config.interactionRange);
                    if (p1.type === 'polymer' && p2.type === 'polymer' && solventQuality > 0.6) {
                        f *= 1.8; 
                    }

let fx = nx * f * factor; let fy = ny * f * factor;
                    if (p1 !== draggedParticle) { p1.vx -= fx; p1.vy -= fy; }
                    if (p2 !== draggedParticle) { p2.vx += fx; p2.vy += fy; }
                }
            }
        }
    }

canvas.addEventListener('mousedown', e => {
        const rect = canvas.getBoundingClientRect();
        const mx = e.clientX - rect.left; const my = e.clientY - rect.top;
        let closest = null; let minD = 50;
        particles.forEach(p => {
            if (p.type !== 'polymer') return;
            let d = Math.sqrt((p.x - mx)**2 + (p.y - my)**2);
            if (d < minD) { minD = d; closest = p; }
        });
        if (closest) draggedParticle = closest;
    });
    window.addEventListener('mouseup', () => draggedParticle = null);
    canvas.addEventListener('mousemove', e => {
        if (draggedParticle) {
            const rect = canvas.getBoundingClientRect();
            draggedParticle.x = e.clientX - rect.left;
            draggedParticle.y = e.clientY - rect.top;
            draggedParticle.vx = 0; draggedParticle.vy = 0;
        }
    });

slider.addEventListener('input', (e) => {
        const val = parseInt(e.target.value);
        solventQuality = val / 100;
        let status = "";
        
        if (val > 45 && val < 55) {
             status = `Durum: Theta (Θ) Koşulu - İdeal Zincir Davranışı`;
             statusText.style.color = "#f1f5f9"; 
        }
        else if (solventQuality <= 0.45) {
            status = `Durum: Zayıf Çözücü (%${val}) - Yumaklaşma & Çökme`;
            statusText.style.color = "#fca5a5"; 
        }
        else {
            status = `Durum: İyi Çözücü (%${val}) - Şişme & Açılma`;
            statusText.style.color = "#86efac"; 
        }
        statusText.innerText = status;
    });

window.addEventListener('resize', resize);
    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
    }

function animate() {
        ctx.clearRect(0,0,width,height);
        solveLinks();
        solveInteractions();
        particles.forEach(p => { p.update(); p.draw(); });
        requestAnimationFrame(animate);
    }

init();
    animate();

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Polimer Analiz - Gold Edition</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #050505; font-family: 'Segoe UI', sans-serif; color: white; display: flex; flex-direction: column; height: 100vh; }
        #canvas-container { flex-grow: 1; position: relative; background: radial-gradient(circle at center, #0a0a12 0%, #000000 100%); overflow: hidden; }
        canvas { display: block; }
        
        /* TASARIM DÜZELTME: align-items: flex-start kutuların birbirinden bağımsız uzamasını sağlar */
        #ui-layer { 
            position: absolute; top: 20px; left: 20px; pointer-events: none; z-index: 5; 
            display: flex; justify-content: space-between; width: 95%; 
            align-items: flex-start; 
        }
        
        .info-box, .stats-box { background: rgba(8, 8, 10, 0.9); padding: 15px; backdrop-filter: blur(12px); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .info-box { border-left: 3px solid #00d2ff; max-width: 320px; height: auto; }
        .stats-box { border-right: 3px solid #00ff88; width: 280px; max-height: 400px; overflow-y: auto; }
        
        .info-title { font-weight: 800; color: #00d2ff; text-transform: uppercase; margin-bottom: 8px; font-size: 1.1em; letter-spacing: 1px; }
        .info-desc { font-size: 0.9em; color: #b0b0b0; line-height: 1.5; }
        
        #stats-list { list-style: none; padding: 0; margin-top: 10px; font-family: 'Courier New', monospace; font-size: 12px; }
        .stat-item { display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.05); margin-bottom: 6px; border-radius: 4px; border-left: 3px solid #555; }
        
        #controls { background: #050505; border-top: 1px solid rgba(255,255,255,0.1); padding: 25px 0; display: flex; justify-content: center; box-shadow: 0 -20px 60px rgba(0,0,0,1); }
        .interface-wrapper { width: 750px; display: flex; flex-direction: column; gap: 15px; }
        
        .analysis-bar { display: flex; align-items: center; background: rgba(30,30,35,0.6); border-radius: 20px; padding: 12px 25px; gap: 20px; border: 1px solid rgba(255,255,255,0.1); }
        .metric-val { font-family: 'Courier New', monospace; font-weight: bold; min-width: 80px; font-size: 15px; }
        
        .progress-track { flex-grow: 1; height: 6px; background: #111; border-radius: 10px; overflow: hidden; }
        #dissolution-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff3333, #ffcc00, #00ff88); transition: width 0.3s ease-out; }
        
        .type-buttons { display: flex; justify-content: space-between; gap: 10px; }
        .btn { flex: 1; padding: 14px 0; border-radius: 30px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255, 255, 255, 0.03); color: #999; cursor: pointer; font-weight: 700; transition: all 0.3s ease; text-transform: uppercase; font-size: 11px; }
        .btn.active { color: black; border-color: transparent; transform: translateY(-2px); }
        .reset-btn { background: rgba(255, 68, 68, 0.1); border: 1px solid #ff4444; color: #ff4444; padding: 4px 10px; border-radius: 12px; cursor: pointer; font-size: 10px; font-weight: bold; }
    </style>
</head>
<body>

<div id="canvas-container">
    <div id="ui-layer">
        <div class="info-box">
            <div id="info-title" class="info-title">Yükleniyor...</div>
            <div id="info-desc" class="info-desc">Sistem başlatılıyor.</div>
        </div>
        <div class="stats-box">
            <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;">
                <span style="color:#00ff88; font-weight:800; font-size:1.1em;">İSTATİSTİKLER</span> 
                <button class="reset-btn" onclick="resetAllStats()">RESET</button>
            </div>
            <ul id="stats-list"></ul>
        </div>
    </div>
    <canvas id="simCanvas"></canvas>
</div>

<div id="controls">
    <div class="interface-wrapper">
        <div class="analysis-bar">
            <span id="time-display" class="metric-val" style="color: #00d2ff;">t = 0.00</span>
            <div class="progress-track"><div id="dissolution-fill"></div></div>
            <span id="dissolution-display" class="metric-val" style="color: #00ff88; min-width: 140px;">Çözünürlük: 0%</span>
        </div>
        <div class="type-buttons">
            <button class="btn" data-type="linear" onclick="setPolymerMode('linear')">Düz Zincir</button>
            <button class="btn" data-type="short" onclick="setPolymerMode('short')">Kısa Dallanmış</button>
            <button class="btn" data-type="long" onclick="setPolymerMode('long')">Uzun Dallanmış</button>
            <button class="btn" data-type="verylong" onclick="setPolymerMode('verylong')">Çok Uzun Dallanmış</button>
        </div>
    </div>
</div>

function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = document.getElementById('canvas-container').offsetHeight;
    }
    window.addEventListener('resize', resize);
    resize();

class Particle {
        constructor(x, y, isBranch, chainId) {
            this.x = x; this.y = y; this.vx = 0; this.vy = 0;
            this.mass = isBranch ? 1.3 : 2.5; this.isBranch = isBranch; this.chainId = chainId;
            this.phase = Math.random() * Math.PI * 2; this.hasContact = false;
        }
        update(dt) {
            this.x += this.vx * dt * 60; this.y += this.vy * dt * 60;
            this.vx *= 0.92; this.vy *= 0.92;
            if (this.x < 20 || this.x > width - 20) this.vx *= -0.8;
            if (this.y < 20 || this.y > height - 20) this.vy *= -0.8;
        }
    }

class Spring {
        constructor(p1, p2, len) { this.p1 = p1; this.p2 = p2; this.len = len; this.k = 0.22; }
        update() {
            let dx = this.p2.x - this.p1.x, dy = this.p2.y - this.p1.y;
            let dist = Math.sqrt(dx*dx + dy*dy) || 1;
            let force = (dist - this.len) * this.k;
            this.p1.vx += (dx / dist * force) / this.p1.mass; this.p1.vy += (dy / dist * force) / this.p1.mass;
            this.p2.vx -= (dx / dist * force) / this.p2.mass; this.p2.vy -= (dy / dist * force) / this.p2.mass;
        }
    }

function loop(timestamp) {
        let dt = (timestamp - lastTimestamp) / 1000;
        if (dt > 0.1) dt = 0.016;
        lastTimestamp = timestamp;
        if (!isComplete) simulationSeconds += dt;
        time += 0.03;

const conf = CONFIG[currentMode];
        if (autoSolventValue < 100) autoSolventValue += conf.speedMult * dt;

for (let s of springs) s.update();
        let contactCount = 0;
        const solventFactor = (autoSolventValue - 40) / 40;

for (let i = 0; i < particles.length; i++) {
            let p1 = particles[i]; p1.hasContact = false;
            p1.vx += Math.cos(time + p1.phase) * 0.05; p1.vy += Math.sin(time + p1.phase) * 0.05;

for (let j = i + 1; j < particles.length; j++) {
                let p2 = particles[j];
                let dx = p2.x - p1.x, dy = p2.y - p1.y;
                let distSq = dx*dx + dy*dy;
                if (distSq < 2500) {
                    let dist = Math.sqrt(distSq) || 1;
                    if (p1.chainId !== p2.chainId && dist < 18) p1.hasContact = p2.hasContact = true;
                    let force = solventFactor > 0 ? (solventFactor * conf.repulsionBase / dist) : (solventFactor * 0.4);
                    p1.vx -= (dx/dist*force) * 0.12; p1.vy -= (dy/dist*force) * 0.12;
                    p2.vx += (dx/dist*force) * 0.12; p2.vy += (dy/dist*force) * 0.12;
                }
            }
            p1.update(dt);
            if (p1.hasContact) contactCount++;
        }

let ratio = Math.min(100, Math.floor(((particles.length - contactCount) / particles.length) * 100));
        document.getElementById('dissolution-fill').style.width = ratio + "%";
        document.getElementById('dissolution-display').innerText = "Çözünürlük: " + ratio + "%";
        document.getElementById('time-display').innerText = "t = " + simulationSeconds.toFixed(2);

if (ratio >= 97 && !isLogged) {
            isComplete = true; isLogged = true;
            const li = document.createElement('li');
            li.className = 'stat-item'; li.style.borderLeftColor = conf.color;
            li.innerHTML = `<span>${conf.btnText}</span> <span>${simulationSeconds.toFixed(2)}s / %${ratio}</span>`;
            document.getElementById('stats-list').appendChild(li);
        }
        draw();
        requestAnimationFrame(loop);
    }

function draw() {
        ctx.fillStyle = '#050505'; ctx.fillRect(0, 0, width, height);
        const conf = CONFIG[currentMode];
        
        // Glow (Parlama) Efekti - Sadece hatlar için
        ctx.shadowBlur = 10;
        ctx.shadowColor = conf.color;
        ctx.strokeStyle = conf.color; 
        ctx.lineWidth = 1.5; 
        ctx.globalAlpha = 0.5;
        
        ctx.beginPath();
        for (let s of springs) { ctx.moveTo(s.p1.x, s.p1.y); ctx.lineTo(s.p2.x, s.p2.y); }
        ctx.stroke();

// Parçacıklar (Glowsuz daha temiz görünür)
        ctx.shadowBlur = 0;
        ctx.globalAlpha = 1;
        for (let p of particles) {
            ctx.fillStyle = p.isBranch ? '#fff' : conf.color;
            ctx.beginPath(); ctx.arc(p.x, p.y, p.isBranch ? 2 : 3.5, 0, 7); ctx.fill();
        }
    }

function setPolymerMode(mode) {
        currentMode = mode;
        const conf = CONFIG[mode];
        document.querySelectorAll('.btn').forEach(b => {
            const isActive = b.dataset.type === mode;
            b.classList.toggle('active', isActive);
            b.style.backgroundColor = isActive ? conf.color : 'rgba(255, 255, 255, 0.03)';
        });
        document.getElementById('info-title').innerText = conf.descTitle;
        document.getElementById('info-title').style.color = conf.color;
        document.getElementById('info-desc').innerText = conf.descText;
        document.querySelector('.info-box').style.borderLeftColor = conf.color;
        autoSolventValue = 0; simulationSeconds = 0; isComplete = false; isLogged = false;
        init();
    }

function resetAllStats() {
        document.getElementById('stats-list').innerHTML = '';
        setPolymerMode(currentMode);
    }

init();
    setPolymerMode('linear');
    requestAnimationFrame(loop);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polimerlerin Sınıflandırılması - Golden Final + Stereochemistry</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <style>
        /* --- GOLDEN VERSION CSS (TAMAMEN KORUNDU) --- */
        :root {
            --bg-color: #050505;
            --accent-cyan: #00ffaa;
            --accent-blue: #00a2ff;
            --text-main: #ffffff;
            --text-muted: rgba(255, 255, 255, 0.7);
        }

body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            overflow-x: hidden;
            display: block; 
        }

.ambient-light-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
        }
        .ambient-light {
            position: absolute; width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(0, 255, 179, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
            top: 50%; left: 50%; transform: translate(-50%, -50%); filter: blur(80px);
            animation: pulseLight 8s ease-in-out infinite alternate;
        }
        .ambient-light-2 {
            position: absolute; width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(0, 162, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
            top: 20%; right: 20%; filter: blur(60px);
            animation: pulseLight 10s ease-in-out infinite alternate-reverse;
        }
        @keyframes pulseLight {
            0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
        }

.container { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; min-height: 95vh; }
        
        header { text-align: center; margin-bottom: 50px; position: relative; z-index: 2; }
        h1 {
            font-size: 3rem; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -1px;
            background: linear-gradient(to right, #fff, #aaffdd);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 20px rgba(0, 255, 179, 0.3));
            text-transform: uppercase;
        }
        p.subtitle { color: var(--text-muted); font-size: 1.1rem; margin-top: 10px; font-weight: 300; }

.tabs-wrapper { display: flex; justify-content: center; width: 100%; margin-bottom: 40px; position: relative; z-index: 2; }
        .tabs-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
        
        .tab-btn {
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-muted); 
            padding: 14px 28px; 
            border-radius: 50px; cursor: pointer;
            font-family: 'Outfit', sans-serif; font-weight: 500; 
            font-size: 1.15rem; 
            transition: all 0.3s ease; backdrop-filter: blur(5px);
        }
        .tab-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; transform: translateY(-3px); }
        .tab-btn.active { 
            background: linear-gradient(90deg, rgba(0, 255, 179, 0.2), rgba(0, 162, 255, 0.2));
            color: #fff; border-color: rgba(0, 255, 179, 0.5);
            box-shadow: 0 0 25px rgba(0, 255, 179, 0.2);
        }

.content-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); 
            justify-content: center;
            gap: 20px; 
            padding: 10px; 
            flex-grow: 1;
        }

.card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-radius: 40px; 
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 
                0 15px 40px rgba(0, 0, 0, 0.6), 
                inset 0 0 30px rgba(0, 0, 0, 0.8),
                0 -8px 30px rgba(0, 255, 179, 0.2);
            padding: 30px 20px; 
            position: relative;
            cursor: pointer;
            overflow: hidden;
            display: flex; flex-direction: column; justify-content: space-between;
            min-height: 520px; 
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
        }

.card::after {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 40px;
            box-shadow: inset 0 0 20px rgba(0, 255, 179, 0.05);
            pointer-events: none; z-index: 0;
        }

.card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow:
                0 30px 60px rgba(0, 0, 0, 0.7), 
                0 -15px 50px rgba(0, 255, 179, 0.35);
            z-index: 10;
        }

.visual-circle {
            position: absolute; top: -50px; right: -50px; width: 160px; height: 160px;
            background: linear-gradient(135deg, #00ffaa, #00a2ff);
            border-radius: 50%; filter: blur(40px); opacity: 0.25; transition: 0.5s; z-index: 0;
        }
        .card:hover .visual-circle { transform: scale(1.2); opacity: 0.5; }

.card-content-wrapper { position: relative; z-index: 2; flex-grow: 1; pointer-events: none; }

.icon-circle {
            width: 50px; height: 50px; border-radius: 50%;
            background: rgba(255,255,255,0.05);
            display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            transition: transform 0.4s ease;
        }
        .card:hover .icon-circle { transform: scale(1.1) rotate(5deg); border-color: var(--accent-cyan); background: rgba(0, 255, 179, 0.1); }

.card h3 { margin: 0 0 10px 0; color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; }
        
        .card-text { 
            color: rgba(255,255,255,0.8); 
            font-size: 0.95rem; 
            line-height: 1.6; 
            font-weight: 300; 
            margin-bottom: 20px; 
        }

.bottom-link {
            position: relative; z-index: 2; margin-top: 20px;
            text-align: right; font-size: 0.8rem; font-weight: 500;
            color: var(--accent-cyan); letter-spacing: 0.5px;
            transition: all 0.3s ease; opacity: 0.7;
            display: flex; align-items: center; justify-content: flex-end; gap: 6px;
        }
        .card:hover .bottom-link { opacity: 1; transform: translateX(5px); text-shadow: 0 0 15px rgba(0, 255, 170, 0.6); }

/* --- MODAL --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(25px);
            z-index: 2000; display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: all; }
        .modal-content {
            background: #080808; border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 100px rgba(0,0,0,1);
            width: 95%; max-width: 1100px; border-radius: 40px; padding: 50px;
            position: relative; transform: scale(0.9) translateY(40px); opacity: 0;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); max-height: 95vh; overflow-y: auto;
        }
        .modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
        
        .close-btn { position: absolute; top: 30px; right: 30px; background: rgba(255,255,255,0.08); border: none; color: white; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
        .close-btn:hover { background: #ff4757; transform: rotate(90deg); }
        .modal-header { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px; }
        .modal-icon { font-size: 4rem; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
        .modal-title h2 { margin: 0; font-size: 2.5rem; color: #fff; line-height: 1.1; }
        .modal-title span { color: var(--accent-cyan); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; display: block; margin-bottom: 5px; }
        .modal-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; }
        @media (max-width: 900px) { .modal-grid { grid-template-columns: 1fr; gap: 40px; } }
        .detail-box h4 { color: var(--accent-blue); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
        .detail-box h4::before { content:''; display: block; width: 25px; height: 3px; background: var(--accent-blue); border-radius: 2px; }
        .detail-box p { color: #d1d5db; line-height: 1.8; margin-bottom: 30px; font-weight: 300; font-size: 1rem; }
        
        .tech-list { list-style: none; padding: 0; margin: 0; }
        .tech-list li { margin-bottom: 12px; font-size: 0.95rem; line-height: 1.5; color: #e2e8f0; padding-left: 15px; border-left: 2px solid rgba(0, 255, 179, 0.3); }

.example-tag { display: inline-block; background: rgba(0, 162, 255, 0.15); color: #7dd3fc; padding: 10px 20px; border-radius: 30px; margin: 0 8px 8px 0; font-size: 0.85rem; border: 1px solid rgba(0, 162, 255, 0.3); font-weight: 500; }
        
        @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .animate-item { animation: fadeUp 0.6s ease-out forwards; }

footer { margin-top: auto; padding-top: 60px; padding-bottom: 20px; text-align: center; color: rgba(255, 255, 255, 0.2); font-size: 0.85rem; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; }
    </style>
</head>
<body>

<div class="container">
    <header>
        <h1>POLİMERLERİN SINIFLANDIRILMASI</h1>
        <p class="subtitle">Polimerlerin sınıflandırılmasında kullanılan temel kriterler</p>
    </header>

<div class="tabs-wrapper">
        <div class="tabs-container">
            <button class="tab-btn active" onclick="filterCategory('kimyasal')">Kimyasal Yapı</button>
            <button class="tab-btn" onclick="filterCategory('mimari')">Zincir Mimarisi</button>
            <button class="tab-btn" onclick="filterCategory('mekanizma')">Mekanizma</button>
            <button class="tab-btn" onclick="filterCategory('dizilim')">Monomer Bileşimi</button>
            <button class="tab-btn" onclick="filterCategory('stereokimya')">Stereokimya</button>
            <button class="tab-btn" onclick="filterCategory('morfoloji')">Morfoloji</button>
            <button class="tab-btn" onclick="filterCategory('kullanim')">Kullanım Alanı</button>
            <button class="tab-btn" onclick="filterCategory('köken')">Köken</button>
            <button class="tab-btn" onclick="filterCategory('fonksiyonel')">Fonksiyonel</button>
        </div>
    </div>

<footer>SMALL THINGZ - <span id="currentYear"></span></footer>
</div>

<div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <button class="close-btn" onclick="closeModalDirect()">✕</button>
        <div class="modal-header">
            <div class="modal-icon" id="mIcon">-</div>
            <div class="modal-title"><span id="mCategory">-</span><h2 id="mTitle">-</h2></div>
        </div>
        <div class="modal-grid">
            <div class="detail-box">
                <h4>Detaylı Açıklama</h4>
                <p id="mFullDesc">-</p>
                <h4>Yaygın Örnekler</h4>
                <div id="mExamples"></div>
            </div>
            <div class="detail-box">
                <h4>Teknik Detaylar (Yapı-Özellik)</h4>
                <ul class="tech-list" id="mTechDetails"></ul>
            </div>
        </div>
    </div>
</div>

// 2. MİMARİ
        {
            category: 'mimari', title: 'Lineer (Doğrusal)', 
            cardText: 'Monomerlerin tek bir hat üzerinde dizildiği, yan dallanma içermeyen yapılardır. Zincirler birbirine çok yaklaşabildiği için sıkı paketlenir, bu da yüksek yoğunluk ve mukavemet sağlar.',
            fullDesc: 'Dallanma içermeyen uzun zincirlerdir. Zincirler birbirine çok yaklaşabilir, bu da kristaliniteyi, yoğunluğu ve mekanik mukavemeti artırır. Çözücü ve gaz geçirgenliği düşüktür.',
            techDetails: [
                'Yan dallanma içermez',
                'Zincirler düzenli paketlenebilir',
                'Kristalinite ve yoğunluk genellikle yüksektir',
                'Mekanik mukavemet ve kimyasal direnç iyidir',
                'Difüzyon ve çözücü direnci yüksektir'
            ],
            examples: ['HDPE', 'PVC', 'Poliester', 'PP', 'PS'], visual: '📏'
        },
        {
            category: 'mimari', title: 'Dallanmış', 
            cardText: 'Ana zincire bağlı kısa veya uzun yan kollar içerir. Bu kollar zincirlerin düzenli istiflenmesini engeller, böylece malzeme daha düşük yoğunluklu, daha esnek ve daha düşük erime noktasına sahip olur.',
            fullDesc: 'Ana zincirden çıkan yan kollar, moleküllerin düzenli kristalleşmesini engeller. Bu da yoğunluğu düşürür ve esneklik sağlar. Gaz ve sıvı geçirgenliği lineer yapılara göre daha yüksektir.',
            techDetails: [
                'Ana zincire bağlı kısa veya uzun yan zincirler içerir',
                'Dallanma kristalleşmeyi sınırlar',
                'Düşük yoğunluk ve düşük erime sıcaklığına sahiptir',
                'Esnek ve sünektir',
                'Gaz ve sıvı geçirgenliği yüksektir'
            ],
            examples: ['LDPE', 'Glikojen', 'Nişasta'], visual: '🌵'
        },
        {
            category: 'mimari', title: 'Ağ Yapılı (Çapraz Bağlı)', 
            cardText: 'Polimer zincirleri birbirine kovalent bağlarla (köprülerle) bağlanarak dev bir ağ oluşturur. Isıtıldığında erimezler, sadece çok yüksek sıcaklıkta bozunurlar. Çözücülerde çözünmezler.',
            fullDesc: 'Zincirler kovalent bağlarla birbirine bağlanır (kürlenme). Moleküler hareket kısıtlandığı için ısıtılınca akmazlar, sadece yanarlar. Yüksek mekanik ve termal kararlılık gösterirler.',
            techDetails: [
                'Zincirler kovalent çapraz bağlarla birbirine bağlanmıştır',
                'Isıtıldığında erimez, bozunur',
                'Çözünmez, yalnızca şişme gösterir',
                'Elastomer veya sert termoset davranışı sergileyebilir',
                'Mekanik ve termal kararlılığı yüksektir'
            ],
            examples: ['Bakalit', 'Epoksi', 'PU Köpük', 'Hidrojeller'], visual: '🕸️'
        },

// 3. MEKANİZMA
        {
            category: 'mekanizma', title: 'Zincir Polimerizasyonu', 
            cardText: 'Aktif bir merkez (radikal, iyon) üzerinden monomerlerin hızla zincire eklenmesiyle yürür. Yüksek molekül ağırlığına reaksiyonun hemen başında ulaşılır ve yan ürün oluşmaz.',
            fullDesc: 'Radikalik veya iyonik merkezler üzerinden yürür. Monomerler teker teker ve çok hızlı bir şekilde büyüyen zincire eklenir. Endüstriyel plastik üretiminde (PE, PP, PVC) çok yaygındır.',
            techDetails: [
                'Aktif merkez (radikal, anyon, katyon) üzerinden ilerler',
                'Yüksek molekül ağırlığı erken aşamada oluşur',
                'Yan ürün oluşmaz',
                'Molekül ağırlığı kontrolü sınırlıdır',
                'Endüstriyel üretimde yaygındır'
            ],
            examples: ['Polietilen', 'Polistiren'], visual: '🔗'
        },
        {
            category: 'mekanizma', title: 'Basamaklı Polimerizasyon', 
            cardText: 'Fonksiyonel gruplar arasında adım adım gerçekleşen reaksiyondur. Yüksek molekül ağırlığına ancak reaksiyonun sonlarına doğru ulaşılır. Genellikle su gibi küçük yan moleküller açığa çıkar.',
            fullDesc: 'Monomerlerin, dimerlerin ve oligomerlerin rastgele birleşmesiyle ilerler. Genellikle su veya alkol gibi küçük moleküller açığa çıkar. Yapısal kontrol daha yüksektir.',
            techDetails: [
                'Fonksiyonel gruplar arasında reaksiyon gerçekleşir',
                'Yüksek molekül ağırlığı ancak yüksek dönüşümde elde edilir',
                'Genellikle küçük moleküller (H₂O, MeOH) açığa çıkar',
                'Zincir uzunluğu reaksiyon süresine bağlıdır',
                'Yapısal kontrol daha yüksektir'
            ],
            examples: ['PET', 'Nylon', 'PC', 'Poliester'], visual: '🪜'
        },

// 4. MONOMER BİLEŞİMİ
        {
            category: 'dizilim', title: 'Homopolimer', 
            cardText: 'Zincir boyunca sadece tek tip monomerin tekrar ettiği yapılardır. Yapısal düzenliliği yüksektir, bu da termal ve mekanik özelliklerinin sabit ve öngörülebilir olmasını sağlar.',
            fullDesc: 'Sadece bir çeşit monomer içerir. Üretimi genellikle daha ekonomiktir ve standart özellikler sunar. Kristalleşme eğilimleri kopolimerlere göre daha yüksektir.',
            techDetails: [
                'Tek tip monomerden oluşur',
                'Yapı düzenliliği yüksektir',
                'Termal ve mekanik özellikler sabittir',
                'Kristalleşme eğilimi daha yüksektir',
                'Modifikasyon imkânı sınırlıdır'
            ],
            examples: ['Polipropilen', 'Polistiren', 'PVC'], visual: 'A'
        },
        {
            category: 'dizilim', title: 'Kopolimer', 
            cardText: 'İki veya daha fazla farklı monomerin aynı zincirde birleşmesiyle oluşur. Rastgele, blok veya aşı şeklinde dizilerek malzemenin özelliklerini (darbe dayanımı, esneklik vb.) modifiye eder.',
            fullDesc: 'Kırılganlığı azaltmak veya yapışmayı artırmak için farklı monomerler kullanılır. Mekanik ve termal özellikler ihtiyaca göre ayarlanabilir. Kristalinite genellikle homopolimerlere göre daha düşüktür.',
            techDetails: [
                'İki veya daha fazla monomer içerir',
                'Rastgele, blok, graft veya alternatif dizilim gösterebilir',
                'Mekanik ve termal özellikler ayarlanabilir',
                'Kristalinite genellikle düşer',
                'Darbe dayanımı artırılabilir'
            ],
            examples: ['ABS', 'SAN', 'PEVA'], visual: 'AB'
        },

// --- YENİ EKLENEN KATEGORİ: STEREOKİMYA ---
        {
            category: 'stereokimya', title: 'İzotaktik', 
            cardText: 'Polimer zincirindeki yan grupların (R) tamamı düzlemin aynı tarafında yer alır. Bu yüksek düzenlilik, zincirlerin mükemmel şekilde kristalleşmesini sağlar.',
            fullDesc: 'Tüm sübstitüentler (yan gruplar) polimer zincirinin aynı tarafında yer alır. Bu sterik düzenlilik, zincirlerin birbiri üzerine sıkıca paketlenmesine olanak tanır, bu da yüksek yoğunluk ve mekanik mukavemet getirir.',
            techDetails: [
                'Yan gruplar aynı tarafta dizilir',
                'Yüksek kristalinite gösterir',
                'Mekanik mukavemeti ve erime noktası yüksektir',
                'Opak veya yarı saydam olabilir',
                'Ziegler-Natta katalizörleri ile üretilir'
            ],
            examples: ['İzotaktik PP (i-PP)'], visual: '📐'
        },
        {
            category: 'stereokimya', title: 'Sindiotaktik', 
            cardText: 'Yan gruplar zincir boyunca bir sağda bir solda olacak şekilde, mükemmel bir alternatif düzenle sıralanmıştır. Bu düzen sayesinde kristalleşebilirler.',
            fullDesc: 'Sübstitüentler ana zincir boyunca düzenli olarak ve alternatifli (bir sağ, bir sol) şekilde yerleşmiştir. İzotaktik kadar olmasa da, bu düzenli yapı kristalleşmeye izin verir.',
            techDetails: [
                'Yan gruplar alternatifli (sırayla zıt) dizilir',
                'Kristalleşme yeteneğine sahiptir',
                'Daha şeffaf olabilir',
                'İşlenmesi izotaktiğe göre farklılık gösterebilir',
                'Metallocene katalizörleri ile üretilebilir'
            ],
            examples: ['Sindiotaktik PS (s-PS)'], visual: '🧬'
        },
        {
            category: 'stereokimya', title: 'Ataktik', 
            cardText: 'Yan grupların dizilimi tamamen rastgele ve düzensizdir. Bu düzensizlik zincirlerin paketlenmesini engeller, bu nedenle genellikle amorf, yapışkan veya mumsu yapıdadırlar.',
            fullDesc: 'Sübstitüentlerin dizilimi tamamen rastgele ve düzensizdir. Herhangi bir düzen takip etmez. Bu düzensizlik kristalleşmeyi imkansız hale getirir, bu nedenle tamamen amorf yapıdadırlar.',
            techDetails: [
                'Yan gruplar rastgele dizilir',
                'Kristalleşemez, tamamen amorftur',
                'Düşük erime noktası veya yumuşama gösterir',
                'Genellikle yapışkan, mumsu veya kauçuksu özelliktedir',
                'Genelde ticari değeri düşüktür (özel uygulamalar hariç)'
            ],
            examples: ['Ataktik PP (a-PP)', 'PVC (Ticari)'], visual: '🎲'
        },

// 5. MORFOLOJİ
        {
            category: 'morfoloji', title: 'Amorf', 
            cardText: 'Polimer zincirlerinin spagetti gibi rastgele ve düzensiz bulunduğu yapıdır. Düzenli bir kristal yapı içermediği için şeffaftır ve belirli bir erime noktası yerine yumuşama aralığı (Tg) gösterir.',
            fullDesc: 'Zincirler rastgele ve düzensiz dağılır. Kristal bölge içermez veya ihmal edilecek kadar azdır. Bu sayede ışığı kırmadan geçirirler (şeffaf). Mekanik olarak genellikle sert ve gevrek olabilirler ancak modifiye edilebilirler.',
            techDetails: [
                'Zincirler rastgele ve düzensiz dağılır',
                'Genellikle şeffaf ve saydamdır',
                'Belirli bir erime noktası (Tm) yoktur, camsı geçiş (Tg) gösterir',
                'Kimyasal direnci kristalinlere göre daha düşüktür',
                'Termoform yöntemine uygundur'
            ],
            examples: ['PMMA', 'PC', 'Polistiren'], visual: '🌫️'
        },
        {
            category: 'morfoloji', title: 'Yarı-Kristalin', 
            cardText: 'Yapısında hem düzenli paketlenmiş kristal bölgeler hem de düzensiz amorf bölgeler bir arada bulunur. Kristal bölgeler mukavemet ve kimyasal direnç sağlarken, amorf bölgeler esneklik katar.',
            fullDesc: 'Hem kristal hem amorf bölgeler içerir. Kristal bölgeler ışığı kırdığı için genellikle opak veya yarı saydamdırlar. Belirgin bir erime sıcaklığına (Tm) sahiptirler.',
            techDetails: [
                'Hem kristal hem amorf bölgeler içerir',
                'Belirgin erime sıcaklığı (Tm) vardır',
                'Mekanik dayanım yüksektir',
                'Kimyasal ve aşınma direnci iyidir',
                'Opak veya yarı saydam yapıdadır'
            ],
            examples: ['Polietilen', 'Poliamid (PA)'], visual: '💎'
        },

// 6. KULLANIM ALANI
        {
            category: 'kullanim', title: 'Termoplastik', 
            cardText: 'Isıtıldığında yumuşayan ve şekil verilebilen, soğuduğunda sertleşen polimerlerdir. Bu döngü defalarca tekrarlanabilir, bu sayede geri dönüştürülebilirler.',
            fullDesc: 'Zincirler fiziksel etkileşimlerle bir arada tutulur. Isı ile bu bağlar zayıflar ve malzeme akar. İşlenebilirliği yüksektir ancak yük altında zamanla sünme (creep) davranışı gösterebilirler.',
            techDetails: [
                'Fiziksel etkileşimlerle tutulan zincir yapısı',
                'Isıtıldığında yumuşar, soğutulunca sertleşir',
                'Geri dönüştürülebilir',
                'İşlenebilirliği yüksektir',
                'Sünme davranışı gösterebilir'
            ],
            examples: ['PET', 'PE', 'PVC', 'PS', 'PC'], visual: '🔄'
        },
        {
            category: 'kullanim', title: 'Termoset', 
            cardText: 'Üretim sırasında (kürleme) kimyasal reaksiyonla sertleşen ve kalıcı bir şekil alan polimerlerdir. Isıtıldıklarında tekrar yumuşamazlar ve eritilemezler, yüksek ısıya dayanıklıdırlar.',
            fullDesc: 'Kürleme sonrası kalıcı, çapraz bağlı bir ağ yapı oluşur. Erimez ve tekrar şekillendirilemezler. Bu sayede yüksek ısı, kimyasal ve mekanik dayanım sağlarlar ancak geri dönüşümleri zordur.',
            techDetails: [
                'Kürleme sonrası kalıcı ağ yapı oluşur',
                'Erimez, tekrar şekillendirilemez',
                'Yüksek ısı ve kimyasal dayanım',
                'Mekanik olarak sert ve gevrektir',
                'Geri dönüşümü zordur'
            ],
            examples: ['Bakalit', 'Epoksi', 'Hidrojeller', 'PU Köpük'], visual: '🔥'
        },
        {
            category: 'kullanim', title: 'Elastomer', 
            cardText: 'Oda sıcaklığında lastik gibi davranan, çekildiğinde uzayan ve bırakıldığında eski haline dönen malzemelerdir. Moleküller arası seyrek çapraz bağlar içerirler.',
            fullDesc: 'Kullanım sıcaklığı camsı geçiş sıcaklığının (Tg) çok üzerindedir. Moleküller yay gibi davranır. Çok yüksek elastik uzama gösterirler ve mekanik enerjiyi sönümleme yetenekleri yüksektir.',
            techDetails: [
                'Tg değeri kullanım sıcaklığının altındadır',
                'Seyrek çapraz bağ içerir',
                'Çok yüksek elastik uzama gösterir',
                'Düşük elastik modül',
                'Mekanik enerji sönümleme yeteneği yüksektir'
            ],
            examples: ['Kauçuk', 'Silikon'], visual: '👟'
        },
        {
            category: 'kullanim', title: 'Fiber (Elyaf)', 
            cardText: 'Uzunluğu çapından çok büyük olan, iplik haline getirilebilen polimerlerdir. Zincirler lif ekseni boyunca yönlenmiştir, bu da onlara çok yüksek çekme mukavemeti kazandırır.',
            fullDesc: 'Yüksek oryantasyonlu zincir yapısına sahiptir. Genellikle kristaliniteleri yüksektir. Tekstil endüstrisinde ve kompozit malzemelerde güçlendirici olarak kullanılırlar.',
            techDetails: [
                'Yüksek oryantasyonlu zincir yapısı',
                'Çok yüksek çekme mukavemeti',
                'Kristalinite genellikle yüksektir',
                'Anizotropik mekanik davranış gösterir',
                'Tekstil ve kompozitlerde kullanılır'
            ],
            examples: ['Nylon', 'PET', 'Akrilik', 'Kevlar'], visual: '🧵'
        },

// 7. KÖKEN
        {
            category: 'köken', title: 'Doğal', 
            cardText: 'Doğadaki canlı organizmalar (bitkiler, hayvanlar, bakteriler) tarafından biyolojik süreçlerle üretilirler. Genellikle biyobozunur ve biyouyumludurlar.',
            fullDesc: 'Biyolojik sistemler tarafından sentezlenir. Yapı düzeni genellikle çok yüksektir. Termal olarak sentetiklere göre daha hassastırlar. Tıp ve gıda sektöründe yaygın kullanılırlar.',
            techDetails: [
                'Biyolojik sistemler tarafından sentezlenir',
                'Yapı düzeni genellikle yüksektir',
                'Termal olarak bozunmaya yatkındır',
                'Biyobozunur ve biyouyumludur',
                'İşlenebilirlik sınırlı olabilir'
            ],
            examples: ['Doğal Kauçuk', 'Nişasta', 'Selüloz', 'Kitin', 'Kolajen'], visual: '🌿'
        },
        {
            category: 'köken', title: 'Sentetik', 
            cardText: 'Laboratuvar veya fabrika ortamında, petrokimyasal kaynaklardan kimyasal reaksiyonlarla üretilen yapay polimerlerdir. Özellikleri ihtiyaca göre tam olarak ayarlanabilir.',
            fullDesc: 'Endüstriyel olarak kontrollü koşullarda üretilir. Molekül ağırlığı, yapı ve özellikler hassas bir şekilde ayarlanabilir. Doğal polimerlere göre genellikle daha dayanıklı ve ucuzdurlar.',
            techDetails: [
                'Endüstriyel olarak kontrollü üretilir',
                'Molekül ağırlığı ve yapı ayarlanabilir',
                'Geniş kullanım alanı vardır',
                'Doğal ortamda kalıcılık gösterebilir',
                'Maliyet avantajı sağlar'
            ],
            examples: ['PE', 'PP'], visual: '🛢️'
        },

// 8. FONKSİYONEL
        {
            category: 'fonksiyonel', title: 'İletken Polimer', 
            cardText: 'Normalde yalıtkan olan plastiklerin aksine, özel kimyasal yapısı (konjuge çift bağlar) sayesinde elektriği iletebilen polimerlerdir. Elektronik ve sensör teknolojilerinde kullanılırlar.',
            fullDesc: 'Omurgasında konjuge π-elektron sistemi içerir. "Doping" işlemi ile iletkenlik seviyesi yarı iletkenden metale kadar artırılabilir. Mekanik olarak genellikle kırılgandırlar.',
            techDetails: [
                'Konjuge π-elektron sistemi içerir',
                'Doping ile elektriksel iletkenlik kazanır',
                'Mekanik olarak kırılgandır',
                'Elektronik ve sensör uygulamalarında kullanılır',
                'Çevresel kararlılık sınırlıdır'
            ],
            examples: ['Poliasetilen', 'Polianilin', 'Politiyofen', 'Polipirol'], visual: '⚡'
        },
        {
            category: 'fonksiyonel', title: 'Biyobozunur', 
            cardText: 'Doğada bulunan mikroorganizmalar tarafından parçalanarak suya ve karbondioksite dönüşebilen çevre dostu polimerlerdir. Ambalaj ve tıbbi uygulamalarda öne çıkar.',
            fullDesc: 'Hidroliz veya enzimatik yollarla bozunurlar. Çevresel kirliliği azaltmak için geliştirilmişlerdir. Genellikle düşük veya orta ısı dayanımına sahiptirler.',
            techDetails: [
                'Hidroliz veya enzimatik bozunma gösterir',
                'Düşük–orta ısı dayanımı',
                'Genellikle yarı-kristalin yapıdadır',
                'Çevresel etkiyi azaltmaya yöneliktir',
                'Mekanik dayanımı sınırlı olabilir'
            ],
            examples: ['PCL', 'PVOH', 'PLA'], visual: '♻️'
        },
        {
            category: 'fonksiyonel', title: 'Yüksek Performans Polimerleri', 
            cardText: 'Çok yüksek sıcaklıklara, ağır kimyasallara ve zorlu mekanik koşullara dayanabilen özel mühendislik plastikleridir. Metallerin yerine havacılık ve uzay sanayinde kullanılırlar.',
            fullDesc: 'Aromatik ve rijit zincir yapısına sahiptirler. Çok yüksek erime ve camsı geçiş sıcaklıkları gösterirler. İşlenmeleri zordur ve maliyetleri yüksektir.',
            techDetails: [
                'Aromatik ve rijit zincir yapısı',
                'Çok yüksek Tg ve/veya Tm değerleri',
                'Kimyasal ve termal kararlılık üst düzeydedir',
                'İşlenmesi zordur',
                'Havacılık ve savunma uygulamalarında kullanılır'
            ],
            examples: ['Polisülfon', 'PEEK', 'Kapton'], visual: '🚀'
        }
    ];

const contentArea = document.getElementById('contentArea');
    const buttons = document.getElementsByClassName('tab-btn');
    const modal = document.getElementById('modalOverlay');

function filterCategory(category) {
        for (let btn of buttons) {
            btn.classList.remove('active');
            if (btn.getAttribute('onclick').includes(category)) btn.classList.add('active');
        }
        
        contentArea.innerHTML = '';
        const filteredData = polymerData.filter(item => item.category === category);
        
        filteredData.forEach((item, index) => {
            const card = document.createElement('div');
            card.className = 'card animate-item';
            card.style.animationDelay = `${index * 0.1}s`;
            card.onclick = () => openModal(item);

function openModal(item) {
        document.getElementById('mTitle').innerHTML = item.title;
        document.getElementById('mCategory').innerText = item.category.toUpperCase();
        document.getElementById('mIcon').innerText = item.visual;
        document.getElementById('mFullDesc').innerText = item.fullDesc;
        
        const techList = document.getElementById('mTechDetails');
        techList.innerHTML = (item.techDetails || []).map(detail => `<li>${detail}</li>`).join('');

const examplesDiv = document.getElementById('mExamples');
        examplesDiv.innerHTML = (item.examples || []).map(ex => `<span class="example-tag">${ex}</span>`).join('');
        
        modal.classList.add('active');
    }

document.getElementById('currentYear').innerText = new Date().getFullYear();

filterCategory('kimyasal');
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Molekül Ağırlığı Simülasyonu v14 (Center Align)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

body {
            background-color: var(--bg-body);
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.15), transparent 40%);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
        }

h1 {
            background: var(--primary-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin: 5px 0 5px 0;
            font-size: 1.8rem;
        }

.subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 20px;
            font-weight: 300;
        }

.container {
            display: grid;
            grid-template-columns: 1.4fr 1.2fr;
            gap: 24px;
            width: 98%;
            max-width: 1600px;
            height: 85vh;
            min-height: 0; 
        }

@media (max-width: 1100px) {
            .container { grid-template-columns: 1fr; height: auto; overflow-y: auto;}
        }

/* --- PANELLER --- */
        .panel {
            background: var(--bg-panel);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(12px);
        }

.panel-header {
            padding: 15px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255,255,255,0.01);
            min-height: 50px;
            flex-shrink: 0;
        }

h2 { margin: 0; font-size: 0.95rem; color: var(--text-main); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }

/* --- BUTON --- */
        .btn-primary {
            background: var(--primary-grad);
            color: white; border: none; padding: 10px 30px; border-radius: 99px;
            font-weight: 600; cursor: pointer; font-size: 0.9em; font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); transition: all 0.3s ease;
            display: block;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6); }

/* --- SOL PANEL İÇERİK --- */
        #solution-tank {
            background: rgba(15, 23, 42, 0.4);
            flex-grow: 1;
            padding: 24px;
            overflow-y: auto;
            position: relative;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 24px 24px;
        }

.polymer-row {
            display: flex; align-items: center; margin-bottom: 24px; padding: 4px;
        }

.row-info {
            min-width: 110px; text-align: right; margin-right: 20px;
            font-family: 'JetBrains Mono', monospace; line-height: 1.4;
            border-right: 2px solid var(--accent-cyan); padding-right: 12px;
            z-index: 2; 
        }
        .count-badge { color: var(--accent-green); font-size: 1.1em; font-weight: 700; }
        .mw-label { color: var(--text-muted); font-size: 0.8em; }

.chain-visual { flex-grow: 1; display: flex; align-items: center; height: 40px; }

.bead {
            width: 12px; height: 12px; border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #a5b4fc, #4338ca);
            box-shadow: 0 2px 4px rgba(0,0,0,0.4);
            margin-right: 3px; flex-shrink: 0;
            animation: slowWave 3s ease-in-out infinite alternate;
        }
        .bead.end { 
            width: 14px; height: 14px; 
            background: radial-gradient(circle at 35% 35%, #ffffff, #94a3b8);
            box-shadow: 0 0 10px rgba(255,255,255,0.3); z-index: 1;
        }

@keyframes slowWave {
            0% { transform: translateY(-3px); }
            100% { transform: translateY(3px); }
        }

/* --- DENKLEMLER (FOOTER) --- */
        .equations-footer {
            background: rgba(15, 23, 42, 0.6);
            border-top: 1px solid var(--border-color);
            padding: 15px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-shrink: 0;
        }

.equation-box {
            display: flex; align-items: center;
            font-family: 'Georgia', serif; font-size: 1.1em; color: var(--text-muted);
        }
        .eq-var { font-style: italic; font-weight: bold; margin-right: 10px; color: var(--text-main); }
        .fraction { display: flex; flex-direction: column; align-items: center; margin-left: 5px; }
        .num { border-bottom: 1px solid var(--text-muted); padding-bottom: 3px; text-align: center; font-size: 0.9em; }
        .den { padding-top: 3px; text-align: center; font-size: 0.9em;}
        .sym-sum { font-size: 1.1em; margin-right: 2px; }
        .sym-n { color: var(--accent-green); }
        .sym-m { color: var(--accent-cyan); }

/* --- SAĞ PANEL İÇERİK --- */
        .right-content { 
            padding: 20px; 
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            box-sizing: border-box; 
            overflow: hidden; 
        }

.data-wrapper {
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
        }
        table { width: 100%; border-collapse: collapse; font-size: 0.8em; }
        th { padding: 10px; text-align: center; background: rgba(255, 255, 255, 0.03); color: var(--text-main); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
        td { padding: 10px; text-align: center; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
        tr:last-child td { border-bottom: none; }

.calc-dashboard {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
            margin-bottom: 15px; flex-shrink: 0;
        }
        .calc-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            padding: 12px;
            border-radius: 12px;
            text-align: center;
        }
        .card-label { font-size: 0.7em; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
        .card-value { font-size: 1.2em; font-weight: 700; color: var(--text-main); font-family: 'JetBrains Mono', monospace; }

/* --- FORMÜL ALANI (CENTER ALIGN UPDATE) --- */
        .formula-details {
            background: #0f172a;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: auto;
            color: var(--text-muted);
            scrollbar-width: thin;
            scrollbar-color: #334155 #0f172a;
        }

.formula-row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 30px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8em;
            width: 100%;
        }

.formula-label {
            width: 100%;
            color: var(--accent-cyan);
            font-weight: 700;
            font-size: 1.2em;
            font-family: 'Inter', sans-serif;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 5px;
        }

/* ORTALAMA GÜNCELLEMESİ */
        .big-fraction {
            display: flex;
            flex-direction: column;
            align-items: center; /* DEĞİŞİKLİK: Center */
            justify-content: center; /* DEĞİŞİKLİK: Center */
            overflow-x: auto;
            padding-bottom: 10px;
            width: 100%;
            scrollbar-width: none; 
        }

.big-num {
            border-bottom: 1px solid #cbd5e1;
            padding-bottom: 4px;
            margin-bottom: 4px;
            text-align: center; /* DEĞİŞİKLİK: Center */
            color: var(--text-main);
            white-space: nowrap; 
            padding-left: 10px;
            padding-right: 10px;
        }

.big-den {
            padding-top: 2px;
            text-align: center; /* DEĞİŞİKLİK: Center */
            color: var(--text-main);
            white-space: nowrap;
            padding-left: 10px;
            padding-right: 10px;
        }

.highlight-num { color: var(--accent-green); }
        .highlight-op { 
            color: var(--accent-yellow); 
            font-weight: 900; 
            margin: 0 6px; 
            font-size: 1.1em;
            text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
        }

.empty-state {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: var(--text-muted); text-align: center; font-weight: 300;
        }

</style>
</head>
<body>

<h1>Molekül Ağırlığı Simülasyonu</h1>
    <div class="subtitle">Molekül Ağırlığı Dağılımı (M<sub>n</sub>, M<sub>w</sub>) ve PDI Analizi</div>

<div class="container">
        
        <div class="panel">
            <div class="panel-header">
                <button class="btn-primary" onclick="generateScenario()">Senaryo Oluştur</button>
            </div>
            
            <div id="solution-tank">
                <div class="empty-state">Başlamak için "Senaryo Oluştur" butonuna tıklayın.</div>
            </div>

<div class="panel">
            <div class="panel-header">
                <h2>Analiz Verileri</h2>
            </div>

<div class="right-content">
                <div class="data-wrapper">
                    <table id="dataTable">
                        <thead>
                            <tr>
                                <th>Zincir (N<sub>i</sub>)</th>
                                <th>Mol. Ağ. (M<sub>i</sub>)</th>
                                <th>(N<sub>i</sub> x M<sub>i</sub>)</th>
                                <th>(N<sub>i</sub> x M<sub>i</sub>²)</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

<div class="calc-dashboard">
                    <div class="calc-card">
                        <div class="card-label">M<sub>n</sub> (Sayıca Ort.)</div>
                        <div class="card-value" id="val-mn">---</div>
                    </div>
                    <div class="calc-card">
                        <div class="card-label">M<sub>w</sub> (Ağırlıkça Ort.)</div>
                        <div class="card-value" id="val-mw">---</div>
                    </div>
                    <div class="calc-card">
                        <div class="card-label" style="color:var(--accent-green)">PDI Değeri</div>
                        <div class="card-value" id="val-pdi" style="color:var(--accent-green)">---</div>
                    </div>
                </div>

<div class="formula-details" id="formula-area">
                    <div style="text-align:center; padding-top:40px; color:var(--text-muted); opacity:0.6;">
                        İşlem adımları senaryo oluşturulduğunda burada görünecek.
                    </div>
                </div>
            </div>
        </div>
    </div>

function generateScenario() {
            clearSystem(false);

const numGroups = Math.floor(Math.random() * 3) + 3;

for (let i = 0; i < numGroups; i++) {
                let rawMw = Math.floor(Math.random() * 45000) + 5000; 
                const mw = Math.round(rawMw / 500) * 500; 
                const count = Math.floor(Math.random() * 8) + 2;

groups.push({ mw: mw, count: count });
            }

groups.sort((a, b) => a.mw - b.mw);

drawSimulation();
            calculateResults();
        }

function drawSimulation() {
            const tank = document.getElementById('solution-tank');
            tank.innerHTML = '';

const maxMw = Math.max(...groups.map(g => g.mw));

groups.forEach(group => {
                let visualCount = Math.floor((group.mw / maxMw) * MAX_VISUAL_BEADS);
                if (visualCount < MIN_VISUAL_BEADS) visualCount = MIN_VISUAL_BEADS;

const row = document.createElement('div');
                row.className = 'polymer-row';

const info = document.createElement('div');
                info.className = 'row-info';
                info.innerHTML = `
                    <div class="count-badge">${group.count}x</div>
                    <div class="mw-label">${group.mw.toLocaleString()}</div>
                `;

const visual = document.createElement('div');
                visual.className = 'chain-visual';

const start = document.createElement('div');
                start.className = 'bead end';
                start.style.animationDelay = `-${Math.random() * 2}s`;
                visual.appendChild(start);

for(let k=0; k < visualCount; k++) {
                    const bead = document.createElement('div');
                    bead.className = 'bead';
                    bead.style.animationDelay = `-${Math.random() * 3}s`;
                    visual.appendChild(bead);
                }

const end = document.createElement('div');
                end.className = 'bead end';
                end.style.animationDelay = `-${Math.random() * 2}s`;
                visual.appendChild(end);

row.appendChild(info);
                row.appendChild(visual);
                tank.appendChild(row);
            });
        }

function calculateResults() {
            let sumNi = 0;
            let sumNiMi = 0;
            let sumNiMi2 = 0;

const tbody = document.querySelector('#dataTable tbody');
            tbody.innerHTML = '';

let mnNumeratorParts = [];
            let mnDenominatorParts = [];
            let mwNumeratorParts = [];
            let mwDenominatorParts = [];

groups.forEach(group => {
                const Ni = group.count;
                const Mi = group.mw;
                
                const NiMi = Ni * Mi;
                const NiMi2 = Ni * Math.pow(Mi, 2);

sumNi += Ni;
                sumNiMi += NiMi;
                sumNiMi2 += NiMi2;

mnNumeratorParts.push(partNiMi);
                mnDenominatorParts.push(partNi);
                
                mwNumeratorParts.push(partNiMi2);
                mwDenominatorParts.push(partNiMi);

const Mn = sumNiMi / sumNi;
            const Mw = sumNiMi2 / sumNiMi;
            const PDI = Mw / Mn;

document.getElementById('val-mn').innerText = Math.round(Mn).toLocaleString();
            document.getElementById('val-mw').innerText = Math.round(Mw).toLocaleString();
            document.getElementById('val-pdi').innerText = PDI.toFixed(3);

const formulaDiv = document.getElementById('formula-area');
            
            formulaDiv.innerHTML = `
                <div class="formula-row">
                    <div class="formula-label">M<sub>n</sub> Hesabı:</div>
                    <div class="big-fraction">
                        <div class="big-num">
                            ${mnNumeratorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                        <div class="big-den">
                            ${mnDenominatorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                    </div>
                </div>

<div class="formula-row" style="margin-bottom:0;">
                    <div class="formula-label">M<sub>w</sub> Hesabı:</div>
                    <div class="big-fraction">
                        <div class="big-num">
                            ${mwNumeratorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                        <div class="big-den">
                            ${mwDenominatorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                    </div>
                </div>
            `;
        }

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPC/SEC Master Simulation V3</title>
    <style>
        :root {
            /* Arka plan */
            --bg-color: #020202; 
            --panel-bg: #121214;
            --text-color: #e0e0e0;
            
            /* Renk Paleti */
            --pink-modern: #ff2a6d;
            --green-modern: #05d5fa; 
            --green-real: #00e676;
            --blue-modern: #2d70fd;
            
            --neon-accent: #00f3ff;
        }

body {
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }

/* --- 5) ANA BAŞLIK MODERNİZASYONU --- */
        h1 {
            margin: 10px 0 5px 0;
            font-weight: 700; /* Daha kalın */
            font-size: 1.6rem;
            color: #ffffff;
            letter-spacing: 2px;
            text-transform: uppercase;
            /* Hafif modern gölge */
            text-shadow: 0 4px 10px rgba(0, 243, 255, 0.15); 
            font-family: 'Montserrat', 'Segoe UI', sans-serif;
        }

/* --- ÜST KONTROLLER --- */
        #top-controls {
            width: 95%;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 8px;
            z-index: 10;
        }

.controls button {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--neon-accent);
            padding: 10px 25px;
            margin-left: 15px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 30px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }

.controls button:hover {
            background: var(--neon-accent);
            color: #000;
            border-color: var(--neon-accent);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
            transform: translateY(-2px);
        }

/* --- SİMÜLASYON ALANI --- */
        #simulation-container {
            position: relative;
            width: 95%;
            height: 45vh;
            border: 1px solid #333;
            background: radial-gradient(circle at 50% 50%, #0a0a0c 0%, #000000 100%);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }

.zone-marker {
            position: absolute;
            top: 0;
            height: 100%;
            border-right: 1px dashed rgba(255,255,255,0.1);
            pointer-events: none;
        }
        
        /* --- 3) KOLON YAZILARI BEYAZ --- */
        .zone-text {
            position: absolute;
            top: 15px;
            width: 100%;
            text-align: center;
            font-size: 0.85rem;
            color: #ffffff; /* Tam Beyaz */
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Okunabilirlik için gölge */
            opacity: 0.9;
        }

/* --- GRAFİK ALANI --- */
        #chromatogram {
            width: 95%;
            height: 30vh;
            margin-top: 15px;
            background: var(--panel-bg);
            border: 1px solid #333;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        }

/* --- ALT BİLGİ (LEJANT) --- */
        #bottom-container {
            width: 95%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.05);
            backdrop-filter: blur(5px);
        }

.legend-large { display: flex; gap: 35px; align-items: center; }

.legend-item {
            display: flex; align-items: center;
            font-size: 0.9rem; font-weight: 500;
            color: #ccc;
            letter-spacing: 0.5px;
        }
        
        .dot-large { 
            width: 14px; height: 14px; display: inline-block; 
            border-radius: 50%; margin-right: 10px; 
            box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(255,255,255,0.1);
        }
        
        /* Küçük molekül dotu için özel stil (Flat) */
        .dot-flat {
            width: 14px; height: 14px; display: inline-block; 
            border-radius: 50%; margin-right: 10px;
            box-shadow: none; /* Gölge yok */
        }
    </style>
</head>
<body>

<h1>JEL GEÇİRGENLİK KROMATOGRAFİSİ (GPC)</h1>

<div id="top-controls">
        <div class="controls">
            <button onclick="injectSample()">Numune Enjekte Et</button>
            <button onclick="resetSimulation()">Sıfırla</button>
        </div>
    </div>

<div id="simulation-container">
        <div class="zone-marker" style="left: 0; width: 33%;">
            <div class="zone-text">1. KOLON</div>
        </div>
        <div class="zone-marker" style="left: 33%; width: 33%;">
            <div class="zone-text">2. KOLON</div>
        </div>
        <div class="zone-marker" style="left: 66%; width: 34%; border:none;">
            <div class="zone-text">3. KOLON</div>
        </div>
        <canvas id="simCanvas"></canvas>
    </div>

<div id="bottom-container">
        <div class="legend-large">
            <div class="legend-item" style="color:var(--pink-modern);">
                <span class="dot-large" style="background:var(--pink-modern);"></span>Yüksek Molekül Ağırlıklı
            </div>
            <div class="legend-item" style="color:var(--green-real);">
                <span class="dot-large" style="background:var(--green-real);"></span>Orta Molekül Ağırlıklı
            </div>
            <div class="legend-item" style="color:var(--blue-modern);">
                <span class="dot-flat" style="background:var(--blue-modern);"></span>Düşük Molekül Ağırlıklı
            </div>
            <div class="legend-item" style="color:rgba(100, 180, 240, 0.9);">
                <span style="font-size:1.4rem; margin-right:8px; line-height:0;">≋</span> Çözücü
            </div>
        </div>
    </div>

const simContainer = document.getElementById('simulation-container');
        const canvas = document.getElementById('simCanvas');
        const ctx = canvas.getContext('2d');
        const gCanvas = document.getElementById('graphCanvas');
        const gCtx = gCanvas.getContext('2d');

// --- FİZİK SABİTLERİ (DOKUNULMADI) ---
        const SIMULATION_SPEED = 2; 
        const CONSTANT_VELOCITY = 1.0; 
        const TOTAL_TIME_BINS = 8000; 
        const LARGE_RADIUS = 7.5;
        const GAP = 5;
        const SAFE_DIST = (LARGE_RADIUS * 2) + GAP;

let width, height, gWidth, gHeight;
        let polymers = [];
        let solventParticles = [];
        let obstacles = [];
        let signalData = [];
        let physicsTime = 0; 
        let isRunning = true;

for(let i=0; i<TOTAL_TIME_BINS; i++) signalData[i] = 0;

function resize() {
            width = simContainer.clientWidth;
            height = simContainer.clientHeight;
            canvas.width = width;
            canvas.height = height;
            gWidth = gCanvas.parentElement.clientWidth;
            gHeight = gCanvas.parentElement.clientHeight;
            gCanvas.width = gWidth;
            gCanvas.height = gHeight;
            generateObstacles();
            initSolvent();
        }

/* --- 1. ÇÖZÜCÜ --- */
        class Solvent {
            constructor() { this.reset(); this.x = Math.random() * width; }
            reset() {
                this.x = -10;
                this.y = Math.random() * height;
                this.size = Math.random() * 2 + 1;
                this.speed = CONSTANT_VELOCITY + (Math.random() * 0.1); 
            }
            update() { this.x += this.speed; if(this.x > width) this.reset(); }
            draw() {
                ctx.fillStyle = 'rgba(100, 180, 255, 0.12)'; 
                ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fill();
            }
        }
        function initSolvent() {
            solventParticles = [];
            for(let i=0; i<450; i++) solventParticles.push(new Solvent());
        }

/* --- 2. ENGEL (Açık Renk) --- */
        class Obstacle {
            constructor(x, y, r) {
                this.x = x; this.y = y; this.r = r;
                this.points = [];
                let sides = 5 + Math.floor(Math.random() * 5); 
                for(let i=0; i<sides; i++) {
                    let angle = (i/sides) * Math.PI*2;
                    let variation = 0.7 + Math.random() * 0.6; 
                    this.points.push({x: Math.cos(angle)*r*variation, y: Math.sin(angle)*r*variation});
                }
                
                // Açık Kil/Kiremit Rengi
                let hue = 15 + Math.random() * 15; 
                let sat = 25;
                let lit = 45 + Math.random() * 10; 
                this.color = `hsl(${hue}, ${sat}%, ${lit}%)`;
            }
            draw() {
                ctx.save(); ctx.translate(this.x, this.y);
                ctx.beginPath(); ctx.moveTo(this.points[0].x, this.points[0].y);
                for(let i=1; i<this.points.length; i++) ctx.lineTo(this.points[i].x, this.points[i].y);
                ctx.closePath();
                ctx.fillStyle = this.color; ctx.fill();
                ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1; ctx.stroke();
                ctx.restore();
            }
        }

function generateObstacles() {
            obstacles = [];
            createZone(0, width*0.33, 45, 16, 22);
            createZone(width*0.33, width*0.66, 75, 10, 16);
            createZone(width*0.66, width, 130, 7, 12);
        }

/* --- 3. POLİMER --- */
        class Polymer {
            constructor() {
                this.x = 20;
                this.y = height/2 + (Math.random()-0.5)*120;
                this.vx = CONSTANT_VELOCITY; 
                this.vy = 0;
                this.finished = false;
                
                this.stuckTimer = 0; 
                this.lastX = this.x;
                this.poreHoldTimer = 0; 
                this.immunityTimer = 0;

update() {
                if(this.finished) return;

if(this.immunityTimer > 0) this.immunityTimer--;

if(this.poreHoldTimer > 0) {
                    this.poreHoldTimer--;
                    this.vx = 0; this.vy = 0; 
                    if(this.poreHoldTimer <= 0) {
                         this.immunityTimer = 30; 
                         this.vx = CONSTANT_VELOCITY * 0.5; 
                    }
                    return; 
                }

if (this.vx < CONSTANT_VELOCITY) {
                    this.vx = this.vx * 0.9 + CONSTANT_VELOCITY * 0.1; 
                }
                if (this.vx > CONSTANT_VELOCITY) this.vx = CONSTANT_VELOCITY;

this.vy += (Math.random()-0.5) * 0.05;
                this.vy *= 0.95;

let nextX = this.x + this.vx;
                let nextY = this.y + this.vy;
                let collided = false;

if(this.immunityTimer <= 0) {
                    for(let obs of obstacles) {
                        let dx = nextX - obs.x;
                        let dy = nextY - obs.y;
                        let dist = Math.hypot(dx, dy);
                        let minDist = this.r + obs.r * 0.85;

if(dist < minDist) {
                            collided = true;
                            let nx = dx / dist;
                            let ny = dy / dist;
                            this.x = obs.x + nx * minDist;
                            this.y = obs.y + ny * minDist;

if(this.type === 'large') {
                                let dot = this.vx * nx + this.vy * ny;
                                this.vx = (this.vx - 2 * dot * nx);
                                this.vy = (this.vy - 2 * dot * ny);
                            } else {
                                this.poreHoldTimer = Math.floor(Math.random() * this.poreWaitMax) + 15;
                                this.vx = 0; this.vy = 0;
                            }
                            break;
                        }
                    }
                }

if(!collided) { this.x = nextX; this.y = nextY; }

// Anti-Stuck
                if(Math.abs(this.x - this.lastX) < 0.1 && this.poreHoldTimer <= 0) {
                    this.stuckTimer++;
                } else {
                    this.stuckTimer = 0;
                }
                this.lastX = this.x;
                
                if(this.stuckTimer > 90) { 
                    let dir = Math.random() < 0.5 ? -1 : 1;
                    this.vy = dir * 3.0; 
                    this.vx = CONSTANT_VELOCITY * 0.2; 
                    this.immunityTimer = 45; 
                    this.stuckTimer = 0;
                }

if(this.y < 10) { this.y = 10; this.vy *= -0.5; }
                if(this.y > height-10) { this.y = height-10; this.vy *= -0.5; }
                
                if(this.x > width - 20) {
                    this.finished = true;
                    addToGraph(this.type, physicsTime);
                }
            }

draw() {
                if(this.finished) return;
                
                // --- 4) GÖRSEL AYRIM: KÜÇÜKLER DÜZ, DİĞERLERİ 3D ---
                if (this.type === 'small') {
                    // DÜZ (FLAT) GÖRÜNÜM
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
                    ctx.fillStyle = this.color;
                    ctx.shadowBlur = 0; // Neon yok
                    if(this.poreHoldTimer > 0) ctx.globalAlpha = 0.6;
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                } else {
                    // 3D KÜRE + NEON
                    ctx.shadowBlur = 6;
                    ctx.shadowColor = this.color;

let grad = ctx.createRadialGradient(
                        this.x - this.r/3, this.y - this.r/3, this.r/4,
                        this.x, this.y, this.r
                    );
                    grad.addColorStop(0, '#ffffff');
                    grad.addColorStop(0.4, this.color);
                    grad.addColorStop(1, this.color + '10');

ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
                    ctx.fillStyle = grad;
                    
                    if(this.poreHoldTimer > 0) ctx.globalAlpha = 0.6;
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                    ctx.shadowBlur = 0; // Reset
                }
            }
        }

/* --- 4. GRAFİK --- */
        function addToGraph(type, time) {
            let bin = Math.floor(time / 2.0); 
            if(bin >= TOTAL_TIME_BINS) return;
            
            let spread = 150; 
            let intensity = (type==='large')?16 : (type==='medium')?14 : 12;

for(let i = bin - spread; i <= bin + spread; i++) {
                if(i>=0 && i < TOTAL_TIME_BINS) {
                    let diff = i - bin;
                    let val = intensity * Math.exp(-(diff*diff)/(2*(spread/2.5)*(spread/2.5)));
                    signalData[i] += val;
                }
            }
        }

function drawGraph() {
            gCtx.clearRect(0, 0, gWidth, gHeight);
            
            let maxVal = 0;
            for(let i=0; i<TOTAL_TIME_BINS; i++) {
                if(signalData[i] > maxVal) maxVal = signalData[i];
            }
            if(maxVal < 10) maxVal = 10; 
            
            // --- 2) NORMALİZASYON (TAVAN PAYI) ---
            // Grafiğin %85'ini dolduracak şekilde ayarlandı. Asla kesilmez.
            let scaleFactor = (gHeight * 0.85) / maxVal;

gCtx.strokeStyle = '#555'; gCtx.lineWidth = 1;
            gCtx.beginPath();
            gCtx.moveTo(40, gHeight-30); gCtx.lineTo(gWidth, gHeight-30); 
            gCtx.moveTo(40, gHeight-30); gCtx.lineTo(40, 10);
            gCtx.stroke();

gCtx.fillStyle = '#aaa'; gCtx.font = '12px Arial'; // Font biraz büyüdü
            gCtx.fillText("Sinyal (mV)", 10, 20);
            
            // --- 1) ALIKONMA SÜRESİ YAZISI ---
            gCtx.font = 'bold 13px Arial';
            gCtx.fillText("ALIKONMA SÜRESİ ->", gWidth - 200, gHeight - 10);

gCtx.beginPath();
            gCtx.moveTo(40, gHeight-30);
            
            // Modern Gradyan
            let grad = gCtx.createLinearGradient(40, 0, gWidth, 0);
            grad.addColorStop(0.15, '#ff2a6d'); 
            grad.addColorStop(0.45, '#00e676'); 
            grad.addColorStop(0.85, '#2d70fd'); 
            
            gCtx.strokeStyle = grad; gCtx.lineWidth = 2.5;

for(let i=0; i<TOTAL_TIME_BINS; i++) {
                let x = 40 + i * ((gWidth-40) / TOTAL_TIME_BINS); 
                let y = (gHeight - 31) - (signalData[i] * scaleFactor);
                gCtx.lineTo(x, y);
            }
            gCtx.stroke();
            
            gCtx.fillStyle = 'rgba(255,255,255,0.03)';
            gCtx.lineTo(gWidth, gHeight-30);
            gCtx.fill();
        }

function injectSample() {
            let interval = 8; 
            for(let i=0; i<150; i++) {
                setTimeout(() => polymers.push(new Polymer()), i * interval);
            }
        }

function resetSimulation() {
            polymers = [];
            physicsTime = 0; 
            for(let i=0; i<TOTAL_TIME_BINS; i++) signalData[i] = 0;
            gCtx.clearRect(0,0,gWidth, gHeight);
        }

function loop() {
            if(!isRunning) return;
            ctx.clearRect(0, 0, width, height);

// 2x Hız
            for(let k=0; k < SIMULATION_SPEED; k++) {
                physicsTime++;
                solventParticles.forEach(s => s.update());
                polymers.forEach(p => p.update());
            }

solventParticles.forEach(s => s.draw());
            obstacles.forEach(o => o.draw());
            polymers.forEach(p => p.draw());

if(physicsTime % 5 === 0) drawGraph();

requestAnimationFrame(loop);
        }

window.addEventListener('resize', resize);
        setTimeout(() => { resize(); loop(); }, 100);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polimerlerde Taktisite</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #1c202b 0%, #0b0d12 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #ffffff;
        }

#main-title {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Helvetica Neue', 'Arial', sans-serif; 
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 700;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            z-index: 20;
            text-align: center;
            width: 100%;
        }

#tacticity-description {
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 15px;
            color: #d0d0d0;
            text-align: center;
            width: 85%;
            max-width: 650px;
            line-height: 1.6;
            background: rgba(255, 255, 255, 0.07);
            padding: 20px 30px;
            border-radius: 20px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            pointer-events: none;
            z-index: 20;
            transition: opacity 0.3s;
        }

#tacticity-description strong {
            color: #2ecc71; /* Yeşil vurgu */
            font-weight: 600;
        }

#ui-container {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            background: rgba(255, 255, 255, 0.05);
            padding: 15px 30px;
            border-radius: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }

button {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #aaa;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

button:hover {
            color: #fff;
            border-color: #fff;
        }

button.active {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
            color: #fff;
            border: none;
            box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
        }
    </style>
</head>
<body>

<div id="main-title">Polimerlerde Taktisite</div>
    <div id="tacticity-description"></div>

<div id="ui-container">
        <button id="btn-iso" class="active" onclick="setMode('isotactic')">İzotaktik</button>
        <button id="btn-syn" onclick="setMode('syndiotactic')">Sindiyotaktik</button>
        <button id="btn-ata" onclick="setMode('atactic')">Ataktik</button>
    </div>

const descriptions = {
            'isotactic': "<strong>İzotaktik:</strong> Tüm yan gruplar (yeşil küreler) ana zincirin aynı tarafındadır. Bu düzenli yapı, polimerin yüksek oranda <strong>kristallenebilmesini</strong> sağlar.",
            'syndiotactic': "<strong>Sindiyotaktik:</strong> Yan gruplar, ana zincir boyunca düzenli bir şekilde bir öne, bir arkaya dizilir. Bu da <strong>kristallenmeye</strong> izin veren düzenli bir yapıdır.",
            'atactic': "<strong>Ataktik:</strong> Yan grupların dizilişi tamamen rastgeledir. Belirli bir düzen yoktur. Bu düzensizlik nedeniyle zincirler paketlenemez; polimer amorf ve yumuşak olur."
        };

const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 35);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

// --- PARTİKÜL SİSTEMİ (Uçuşan Yıldızlar) ---
        let particles;
        const particleCount = 2000;

function createSnowflakeTexture() {
            const canvas = document.createElement('canvas');
            canvas.width = 32; canvas.height = 32;
            const ctx = canvas.getContext('2d');
            const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
            gradient.addColorStop(0, 'rgba(255,255,255,1)');
            gradient.addColorStop(0.4, 'rgba(230,255,230,0.5)'); // Hafif yeşilimsi beyaz
            gradient.addColorStop(1, 'rgba(0,0,0,0)');
            ctx.fillStyle = gradient; ctx.fillRect(0, 0, 32, 32);
            return new THREE.CanvasTexture(canvas);
        }

// --- IŞIKLANDIRMA ---
        scene.add(new THREE.AmbientLight(0xffffff, 0.7)); 
        const mainLight = new THREE.DirectionalLight(0xffffff, 2.5);
        mainLight.position.set(10, 20, 15);
        scene.add(mainLight);

// Materyaller ve Geometriler
        const atomGeom = new THREE.SphereGeometry(0.5, 20, 20); 
        const sideAtomGeom = new THREE.SphereGeometry(0.65, 20, 20);
        const bondGeom = new THREE.CylinderGeometry(0.12, 0.12, 1, 10);

let polymerGroup = new THREE.Group();
        scene.add(polymerGroup);

// --- UYDU MODELİ ---
        let satelliteGroup = new THREE.Group();
        const bodyMat = new THREE.MeshStandardMaterial({ color: 0x4a5568, metalness: 0.8, roughness: 0.2 });
        const solarMat = new THREE.MeshStandardMaterial({ color: 0x2ecc71, emissive: 0x145a32, emissiveIntensity: 0.8, side: THREE.DoubleSide });

function createSatellite() {
            // Ana Gövde
            const mainBody = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1, 1), bodyMat);
            satelliteGroup.add(mainBody);

// Anten
            const antennaRod = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 1.2, 8), bodyMat);
            antennaRod.position.set(0, 0.8, 0);
            satelliteGroup.add(antennaRod);
            const antennaDish = new THREE.Mesh(new THREE.SphereGeometry(0.3, 16, 16), bodyMat);
            antennaDish.position.set(0, 1.4, 0);
            satelliteGroup.add(antennaDish);

// Güneş Panelleri
            const panel1 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 2, 1.5), solarMat);
            panel1.position.set(1, 0, 0);
            panel1.rotation.y = Math.PI / 2;
            satelliteGroup.add(panel1);

const panel2 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 2, 1.5), solarMat);
            panel2.position.set(-1, 0, 0);
            panel2.rotation.y = Math.PI / 2;
            satelliteGroup.add(panel2);

satelliteGroup.position.set(30, 15, -20); // Başlangıç pozisyonu
            satelliteGroup.scale.set(1.5, 1.5, 1.5); // Boyut
            scene.add(satelliteGroup);
        }
        createSatellite();
        // --- UYDU MODELİ SONU ---

function createPolymer(type) {
            polymerGroup.clear();
            const chainLength = 22;
            const bondLength = 1.8;

for (let i = 0; i < chainLength; i++) {
                const x = (i - chainLength / 2) * bondLength;
                const y = (i % 2 === 0) ? 0.4 : -0.4;

const atom = new THREE.Mesh(atomGeom, backboneMat);
                atom.position.set(x, y, 0);
                polymerGroup.add(atom);

if (i > 0) {
                    const prevX = (i - 1 - chainLength / 2) * bondLength;
                    const prevY = ((i - 1) % 2 === 0) ? 0.4 : -0.4;
                    const p1 = new THREE.Vector3(prevX, prevY, 0);
                    const p2 = new THREE.Vector3(x, y, 0);
                    const bond = new THREE.Mesh(bondGeom, bondMat);
                    bond.scale.y = p1.distanceTo(p2);
                    bond.position.copy(p1.add(p2).multiplyScalar(0.5));
                    bond.lookAt(p2);
                    bond.rotateX(Math.PI / 2);
                    polymerGroup.add(bond);
                }

if (i % 2 === 0) {
                    const sAtom = new THREE.Mesh(sideAtomGeom, sideMat);
                    let zPos = (type === 'isotactic') ? 1.8 : 
                             (type === 'syndiotactic') ? 1.8 * ((i % 4 === 0) ? 1 : -1) :
                             (Math.random() * 0.4 + 1.4) * (Math.random() > 0.5 ? 1 : -1);
                    
                    sAtom.position.set(x, y - 2.2, zPos);
                    polymerGroup.add(sAtom);

const p1 = new THREE.Vector3(x, y, 0);
                    const p2 = new THREE.Vector3(x, y - 2.2, zPos);
                    const sBond = new THREE.Mesh(bondGeom, bondMat);
                    sBond.scale.y = p1.distanceTo(p2);
                    sBond.position.copy(p1.add(p2).multiplyScalar(0.5));
                    sBond.lookAt(p2);
                    sBond.rotateX(Math.PI / 2);
                    polymerGroup.add(sBond);
                }
            }
        }

window.setMode = function(mode) {
            document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
            document.getElementById('btn-' + mode.substring(0,3)).classList.add('active');
            const descBox = document.getElementById('tacticity-description');
            descBox.style.opacity = '0';
            setTimeout(() => {
                descBox.innerHTML = descriptions[mode];
                descBox.style.opacity = '1';
            }, 150);
            createPolymer(mode);
        }

setMode('isotactic');

function animate() {
            requestAnimationFrame(animate);
            controls.update();

const time = performance.now() * 0.001;

// POLİMER MODEL SÜZÜLME
            polymerGroup.position.y = Math.sin(time * 0.6) * 0.4;
            polymerGroup.rotation.x = Math.cos(time * 0.4) * 0.05;

// YILDIZLARIN UÇUŞMASI
            if (particles) {
                const positions = particles.geometry.attributes.position.array;
                for (let i = 0; i < particleCount; i++) {
                    positions[i * 3 + 1] += 0.05;
                    if (positions[i * 3 + 1] > 100) positions[i * 3 + 1] = -100;
                }
                particles.geometry.attributes.position.needsUpdate = true;
                particles.rotation.y += 0.0005;
            }

// UYDU SÜZÜLME VE YÖRÜNGE HAREKETİ
            if (satelliteGroup) {
                satelliteGroup.rotation.y += 0.002;
                satelliteGroup.rotation.z = Math.sin(time * 0.2) * 0.2;
                satelliteGroup.position.x = Math.sin(time * 0.1) * 35;
                satelliteGroup.position.y = Math.cos(time * 0.1) * 20 + Math.sin(time * 0.3) * 5;
                satelliteGroup.position.z = Math.cos(time * 0.08) * -25;
            }

renderer.render(scene, camera);
        }

window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BASAMAKLI POLİMERİZASYON</title>
    <style>
        :root {
            --bg-color: #020205;
            --panel-bg: rgba(12, 12, 16, 0.45); 
            --text-main: #e0e0e0;
            --neon-blue: #00f3ff;
            --neon-pink: #ff00ff;
            --neon-green: #00ff41;
            --neon-yellow: #ffee00;
            --danger-red: #ff3838;
            --card-bg: rgba(16, 20, 30, 0.85);
            --graph-bg: rgba(0, 0, 0, 0.3);
        }

body { margin: 0; overflow: hidden; background-color: var(--bg-color); color: var(--text-main); font-family: 'Segoe UI', Roboto, sans-serif; display: flex; height: 100vh; }

/* PANEL */
        #panel { 
            width: 380px; 
            background: var(--panel-bg); 
            border-right: 1px solid rgba(255,255,255,0.08); 
            display: flex; flex-direction: column; padding: 10px 15px; gap: 8px; 
            box-shadow: 10px 0 40px rgba(0,0,0,0.5); 
            z-index: 100; height: 100vh; box-sizing: border-box; overflow: hidden;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

h2 { margin: 0; background: linear-gradient(90deg, var(--neon-blue), #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.2rem; letter-spacing: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; flex-shrink: 0; text-shadow: 0 2px 10px rgba(0,243,255,0.3); }
        
        .monitor-box { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 8px; flex-shrink: 0; }
        .progress-container { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; position: relative; margin-top: 5px; }
        .progress-bar { height: 100%; background: var(--neon-green); width: 100%; transition: width 0.15s ease-out; box-shadow: 0 0 10px var(--neon-green); }
        .phase-badge { text-align: center; padding: 5px; margin-top: 5px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; border: 1px solid transparent; transition: 0.3s; }
        
        .phase-wait { background: rgba(255,255,0,0.1); color: var(--neon-yellow); border-color: rgba(255,255,0,0.3); }
        .phase-go { background: rgba(0,255,65,0.1); color: var(--neon-green); border-color: rgba(0,255,65,0.3); box-shadow: 0 0 15px rgba(0,255,65,0.1); }
        
        .control-group { margin-bottom: 2px; flex-shrink: 0; } 
        label { font-size: 0.7rem; color: #ddd; display: flex; justify-content: space-between; margin-bottom: 2px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; height: 15px; cursor: pointer; --thumb-color: #fff; --thumb-scale: 1; }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; transition: 0.2s; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: var(--thumb-color); transform: scale(var(--thumb-scale)); margin-top: -4.5px; box-shadow: 0 0 8px var(--thumb-color); transition: transform 0.1s, background 0.2s; }

.btn-row { margin-top: 5px; display: flex; flex-shrink: 0; }
        button { flex: 1; padding: 10px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; font-size: 0.8rem; }
        #btn-main.state-start { background: rgba(0,243,255,0.15); color: var(--neon-blue); border: 1px solid var(--neon-blue); }
        #btn-main.state-start:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 25px var(--neon-blue); }
        #btn-main.state-stop { background: rgba(255,56,56,0.15); color: var(--danger-red); border: 1px solid var(--danger-red); }
        #btn-main.state-stop:hover { background: var(--danger-red); color: #fff; box-shadow: 0 0 25px var(--danger-red); }

.graph-wrapper { flex-grow: 1; background: var(--graph-bg); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; min-height: 100px; }
        .graph-container { flex-grow: 1; position: relative; width: 100%; }
        .graph-title { font-size: 0.65rem; color: #ccc; margin-bottom: 4px; flex-shrink: 0; text-shadow: 0 1px 2px black;}
        canvas.graph-canvas { width: 100%; height: 100%; display: block; }
        
        .stats-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 5px; flex-shrink: 0; }
        .stat-box { background: rgba(255,255,255,0.05); padding: 5px; border-radius: 4px; text-align: center; border: 1px solid rgba(255,255,255,0.1); }
        .stat-label { font-size: 0.6rem; color: #ccc; margin-bottom: 2px; }
        .stat-value { font-family: 'Courier New', monospace; font-weight: bold; font-size: 0.75rem; color: var(--neon-blue); text-shadow: 0 0 5px rgba(0, 243, 255, 0.5); }

#sim-area { flex-grow: 1; position: relative; background: #080808; overflow: hidden; }
        canvas#main-canvas { display: block; width: 100%; height: 100%; }

/* CARDS - PERFECT PROPORTIONS */
        #intro-overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            display: flex; justify-content: center; align-items: center; 
            gap: 25px; 
            background: radial-gradient(circle at center, rgba(0,243,255,0.1) 0%, rgba(0,0,0,0.9) 80%); 
            backdrop-filter: blur(8px); z-index: 10; transition: opacity 0.3s, transform 0.3s; 
        }
        .monomer-card { 
            width: 240px; min-height: 420px; 
            background: var(--card-bg); border: 2px solid; border-radius: 20px; 
            display: flex; flex-direction: column; padding: 30px 25px; /* Padding artırıldı */
            position: relative; backdrop-filter: blur(20px); 
            animation: float 2.5s ease-in-out infinite; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.6); overflow: hidden;
            justify-content: space-between; /* İÇERİĞİ ORANTILI DAĞITIR */
        }
        .monomer-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
        .monomer-card:nth-child(2) { animation-delay: 1.25s; }
        .card-blue { border-color: var(--neon-blue); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 30px rgba(0, 243, 255, 0.05); }
        .card-pink { border-color: var(--neon-pink); box-shadow: 0 0 30px rgba(255, 0, 255, 0.2), inset 0 0 30px rgba(255, 0, 255, 0.05); }
        
        .card-header { text-align: center; position: relative; z-index: 2; flex-shrink: 0;}
        .card-type { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; margin-bottom: 5px;}
        .card-title { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; text-shadow: 0 0 10px currentColor; }
        .card-subtitle { font-size: 0.85rem; color: #aaa; font-style: italic; }
        
        /* GÜNCELLENDİ: Esnek ve ortalanmış */
        .visual-container { 
            display: flex; justify-content: center; align-items: center; 
            position: relative; z-index: 2; 
            flex-grow: 1; /* Boşluğu doldur */
            margin: 0; /* Reset margins */
        }
        .monomer-visual { width: 70px; height: 70px; border-radius: 50%; animation: pulse 1.5s infinite alternate; }
        .visual-blue { background: var(--neon-blue); box-shadow: 0 0 40px var(--neon-blue); }
        .visual-pink { background: var(--neon-pink); box-shadow: 0 0 40px var(--neon-pink); }
        
        /* GÜNCELLENDİ: Margin-top sıfırlandı, flex ile itiliyor */
        .card-data-grid { 
            display: grid; grid-template-columns: auto 1fr; gap: 12px 15px; 
            font-size: 0.8rem; position: relative; z-index: 2; 
            background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; 
            border: 1px solid rgba(255,255,255,0.1); margin-top: 0; flex-shrink: 0;
        }
        .data-label { color: #888; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 1px;}
        .data-value { text-align: right; font-family: 'Courier New', monospace; font-weight: bold; color: #fff; font-size: 0.85rem;}
        
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
        @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
        .hidden-overlay { opacity: 0; transform: scale(1.1); pointer-events: none; }
    </style>
</head>
<body>

<div id="panel">
    <h2>BASAMAKLI POLİMERİZASYON</h2>

<div class="monitor-box">
        <div style="display:flex; justify-content:space-between; font-size:0.8rem; color:#888;">
            <span>Serbest Monomer</span>
            <span id="monomer-pct" style="color:#fff">100%</span>
        </div>
        <div class="progress-container"><div class="threshold-line"></div><div id="monomer-bar" class="progress-bar"></div></div>
        <div id="phase-badge" class="phase-badge phase-wait">SİSTEM BEKLİYOR</div>
    </div>

<div class="control-group" style="margin-top:10px;">
        <label>Mekanizma Tipi</label>
        <div style="display:flex; flex-direction:column; gap:3px;">
            <label style="justify-content: flex-start; gap:10px; cursor:pointer;"><input type="radio" name="rtype" value="step" checked> Basamaklı (Poliüretan)</label>
            <label style="justify-content: flex-start; gap:10px; cursor:pointer;"><input type="radio" name="rtype" value="cond"> Kondenzasyon (Poliamid)</label>
        </div>
    </div>

<div class="control-group"><label><span id="lbl-a" style="color:var(--neon-blue)">Monomer A</span><span id="val-a">100</span></label><input type="range" id="input-a" min="20" max="500" step="5" value="100" class="reactive-slider"></div>
    <div class="control-group"><label><span id="lbl-b" style="color:var(--neon-pink)">Monomer B</span><span id="val-b">100</span></label><input type="range" id="input-b" min="20" max="500" step="5" value="100" class="reactive-slider"></div>
    <div class="control-group" style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 5px; margin-top: 5px;">
        <label><span>Çözücü</span><span id="val-solvent" style="color:#aaa">0</span></label>
        <input type="range" id="input-solvent" min="0" max="500" step="5" value="0" class="reactive-slider" style="--thumb-color:#aaa">
    </div>
    <div class="control-group">
        <label><span>Sıcaklık (T) / Hız</span><span id="val-speed" style="color:orange">2.0x</span></label>
        <input type="range" id="input-speed" min="1" max="5" step="0.5" value="2.0" class="reactive-slider">
    </div>

<div class="graph-wrapper">
        <div class="graph-title">Grafik: Dönüşüm (p) vs Mw</div>
        <div class="graph-container">
            <canvas id="graphCanvas" class="graph-canvas"></canvas>
        </div>
        <div class="stats-container">
            <div class="stat-box"><div class="stat-label">Mn</div><div id="stat-mn" class="stat-value">0</div></div>
            <div class="stat-box"><div class="stat-label">Mw</div><div id="stat-mw" class="stat-value">0</div></div>
            <div class="stat-box"><div class="stat-label">PDI</div><div id="stat-pdi" class="stat-value">1.00</div></div>
        </div>
    </div>

<div class="btn-row">
        <button id="btn-main" class="state-start">BAŞLAT</button>
    </div>
</div>

<div id="sim-area">
    <div id="intro-overlay">
        <div class="monomer-card card-blue">
            <div class="card-header" style="color:var(--neon-blue)"><div class="card-type">Monomer A</div><div class="card-title" id="title-a">-</div><div class="card-subtitle" id="sub-a">-</div></div>
            <div class="visual-container"><div class="monomer-visual visual-blue"></div></div>
            <div class="card-data-grid" id="grid-a"></div>
        </div>
        <div class="monomer-card card-pink">
            <div class="card-header" style="color:var(--neon-pink)"><div class="card-type">Monomer B</div><div class="card-title" id="title-b">-</div><div class="card-subtitle" id="sub-b">-</div></div>
            <div class="visual-container"><div class="monomer-visual visual-pink"></div></div>
            <div class="card-data-grid" id="grid-b"></div>
        </div>
    </div>
    <canvas id="main-canvas"></canvas>
</div>

const mainCanvas=document.getElementById('main-canvas'), ctx=mainCanvas.getContext('2d');
    const graphCanvas=document.getElementById('graphCanvas'), gCtx=graphCanvas.getContext('2d');
    const inputA=document.getElementById('input-a'), inputB=document.getElementById('input-b'), inputSpeed=document.getElementById('input-speed'), inputSolvent = document.getElementById('input-solvent');
    const btnMain=document.getElementById('btn-main'); 
    const radios=document.querySelectorAll('input[name="rtype"]');
    const introOverlay=document.getElementById('intro-overlay'), displayPct=document.getElementById('monomer-pct'), bar=document.getElementById('monomer-bar'), badge=document.getElementById('phase-badge');
    const sliders=document.querySelectorAll('.reactive-slider');
    const statMn=document.getElementById('stat-mn'), statMw=document.getElementById('stat-mw'), statPdi=document.getElementById('stat-pdi');
    const lblA = document.getElementById('lbl-a'), lblB = document.getElementById('lbl-b');

let width, height, isRunning=false, particles=[], solvents=[], byproducts=[], animId, totalMonomers=0, graphData=[];
    let simStartTime = 0;
    
    // VARS
    let phase1ThresholdTime = null;
    let currentPhase = 1;

// STRICT CONSTANTS
    const CONF = { rad: 5, bond: 12, cA: '#00f3ff', cB: '#ff00ff', maxOligomer: 3, threshold: 5.0, type: 'step' };

if(graphData.length===0 || conversionPct > graphData[graphData.length-1].p + 0.5) {
            graphData.push({p:conversionPct, mw:Mw});
        }

class Solvent {
        constructor(x, y) { this.x=x; this.y=y; this.radius=3; this.vx=(Math.random()-0.5)*3; this.vy=(Math.random()-0.5)*3; }
        update(spd) { 
            const margin = 50; const force = 0.1 * spd;
            if(this.x < margin) this.vx += force; if(this.x > width - margin) this.vx -= force;
            if(this.y < margin) this.vy += force; if(this.y > height - margin) this.vy -= force;
            this.x+=this.vx*spd*0.5; this.y+=this.vy*spd*0.5; 
            if(this.x<0||this.x>width)this.vx*=-1; if(this.y<0||this.y>height)this.vy*=-1; 
        }
        draw() { ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,6.28); ctx.fillStyle="rgba(150,150,150,0.5)"; ctx.fill(); }
    }
    function updateSolventCount(target) {
        if(target>solvents.length)for(let i=0;i<target-solvents.length;i++)solvents.push(new Solvent(Math.random()*width, Math.random()*height));
        else if(target<solvents.length)solvents.splice(0,solvents.length-target);
    }
    
    // --- PHYSICS (GOLDEN MASTER + ANTI-OVERLAP) ---
    class Chain {
        constructor(x, y, type) { 
            this.monomers=[{x,y,type,color:type===0?CONF.cA:CONF.cB}]; 
            this.angle=Math.random()*6.28; 
            this.vx=0; this.vy=0; 
        }
        get len() { return this.monomers.length; } get head() { return this.monomers[0]; } get tail() { return this.monomers[this.len-1]; }
        
        update(spd) {
            let m = Math.max(0.3, 1 / (this.len ** 0.35));
            let v = spd * m; 
            
            // Random Wander (No more seeking)
            this.angle += (Math.random()-0.5)*0.2;

this.head.x+=Math.cos(this.angle)*v; this.head.y+=Math.sin(this.angle)*v;
            
            if(this.head.x<0||this.head.x>width) { this.head.x=Math.max(0,Math.min(width,this.head.x)); this.angle=Math.PI-this.angle; }
            if(this.head.y<0||this.head.y>height) { this.head.y=Math.max(0,Math.min(height,this.head.y)); this.angle=-this.angle; }
            
            for(let i=1; i<this.len; i++){
                let leader = this.monomers[i-1];
                let follower = this.monomers[i];
                let dx = leader.x - follower.x;
                let dy = leader.y - follower.y;
                let dist = Math.sqrt(dx*dx + dy*dy);
                if (dist > CONF.bond) {
                    let scale = (dist - CONF.bond) / dist;
                    follower.x += dx * scale;
                    follower.y += dy * scale;
                }
            }
        }
        draw(spd) {
            let g=10+(spd*5); if(this.len>1){ctx.beginPath(); ctx.moveTo(this.monomers[0].x,this.monomers[0].y); for(let i=1;i<this.len;i++)ctx.lineTo(this.monomers[i].x,this.monomers[i].y); ctx.strokeStyle=`rgba(255,255,255,${0.2+0.5/this.len})`; ctx.lineWidth=2; ctx.stroke();}
            for(let m of this.monomers){ctx.beginPath(); ctx.arc(m.x,m.y,CONF.rad,0,6.28); ctx.fillStyle=m.color; ctx.shadowColor=m.color; if(m===this.head||m===this.tail)ctx.shadowBlur=g;else ctx.shadowBlur=spd>3.0?g*0.3:0; ctx.fill();ctx.shadowBlur=0;}
        }
    }
    class Byprod {
        constructor(x,y){this.x=x;this.y=y;this.l=1;let a=Math.random()*6.28, s=(Math.random()*3+1)*2;this.vx=Math.cos(a)*s;this.vy=Math.sin(a)*s;}
        up(s){this.x+=this.vx*s;this.y+=this.vy*s;this.l-=0.02*s;} dr(){if(this.l<=0)return;ctx.beginPath();ctx.arc(this.x,this.y,2,0,6.28);ctx.fillStyle=`rgba(255,242,0,${this.l})`;ctx.fill();}
    }

function loop() {
        if(!isRunning) return;
        let rawSpeed = parseFloat(inputSpeed.value); 
        let spd = rawSpeed * 2;
        
        let now = Date.now(), elapsed = now - simStartTime;
        let free=particles.filter(p=>p.len===1).length, pct=(free/totalMonomers)*100;

if (pct > 5.0) {
            currentPhase = 1; phase1ThresholdTime = null;
        } else {
            if (!phase1ThresholdTime) phase1ThresholdTime = now;
            if (now - phase1ThresholdTime < 7000) currentPhase = 1; else currentPhase = 2;
        }

displayPct.innerText=pct.toFixed(1)+"%"; bar.style.width=pct+"%";
        if (currentPhase === 1) { badge.innerText="FAZ 1: OLİGOMERLEŞME"; badge.className="phase-badge phase-wait"; } 
        else { badge.innerText="FAZ 2: POLİMERİZASYON"; badge.className="phase-badge phase-go"; }

ctx.clearRect(0,0,width,height);
        
        // Anti-Overlap
        for(let i=0; i<particles.length; i++){
            let p1 = particles[i];
            for(let j=i+1; j<particles.length; j++){
                let p2 = particles[j];
                let dx = p1.head.x - p2.head.x;
                let dy = p1.head.y - p2.head.y;
                let distSq = dx*dx + dy*dy;
                if(distSq < 400 && distSq > 0.1) { 
                    let dist = Math.sqrt(distSq);
                    let force = (20 - dist) / 20; 
                    let push = Math.min(2.0, force * 2.0); 
                    let px = (dx/dist) * push; let py = (dy/dist) * push;
                    p1.head.x += px; p1.head.y += py;
                    p2.head.x -= px; p2.head.y -= py;
                }
            }
        }

solvents.forEach(s=>{s.update(spd);s.draw();}); 
        particles.forEach(p=>{p.update(spd);p.draw(rawSpeed);}); 
        for(let i=byproducts.length-1;i>=0;i--){byproducts[i].up(spd);byproducts[i].dr();if(byproducts[i].l<=0)byproducts.splice(i,1);}
        
        let bonds=totalMonomers-particles.length, p_conv=(bonds/(totalMonomers-1))*100;
        updateStatsAndGraph(p_conv);
        
        const reactionDistSq = (CONF.bond * 0.9)**2; 
        
        for(let i=particles.length-1; i>=0; i--){
            let c1=particles[i];
            for(let s of solvents){
                let dx=c1.head.x-s.x, dy=c1.head.y-s.y; 
                if((dx*dx+dy*dy)<80){ c1.angle += (Math.random()-0.5); s.vx*=-1; s.vy*=-1; }
            }
            for(let j=i-1; j>=0; j--){
                let c2=particles[j];
                if (currentPhase === 1 && (c1.len + c2.len > 3)) continue;

let hitType = null;
                if ((c1.head.x-c2.head.x)**2+(c1.head.y-c2.head.y)**2 < reactionDistSq && c1.head.type !== c2.head.type) hitType='HH';
                else if ((c1.head.x-c2.tail.x)**2+(c1.head.y-c2.tail.y)**2 < reactionDistSq && c1.head.type !== c2.tail.type) hitType='HT';
                else if ((c1.tail.x-c2.head.x)**2+(c1.tail.y-c2.head.y)**2 < reactionDistSq && c1.tail.type !== c2.head.type) hitType='TH';
                else if ((c1.tail.x-c2.tail.x)**2+(c1.tail.y-c2.tail.y)**2 < reactionDistSq && c1.tail.type !== c2.tail.type) hitType='TT';

if (hitType) {
                    if(CONF.type==='cond') byproducts.push(new Byprod((c1.monomers[0].x+c2.monomers[0].x)/2,(c1.monomers[0].y+c2.monomers[0].y)/2));
                    
                    let m;
                    if(hitType==='HH') m = [...c1.monomers].reverse().concat(c2.monomers);
                    else if(hitType==='HT') m = c2.monomers.concat(c1.monomers);
                    else if(hitType==='TH') m = c1.monomers.concat(c2.monomers);
                    else if(hitType==='TT') m = c1.monomers.concat([...c2.monomers].reverse());

c1.monomers = m; 
                    particles.splice(j,1); break;
                }
            }
        }
        animId = requestAnimationFrame(loop);
    }

function init() {
        particles=[]; byproducts=[]; graphData=[]; solvents=[];
        let cA=parseInt(inputA.value), cB=parseInt(inputB.value); totalMonomers=cA+cB;
        for(let i=0;i<cA;i++)particles.push(new Chain(Math.random()*(width-20)+10,Math.random()*(height-20)+10,0));
        for(let i=0;i<cB;i++)particles.push(new Chain(Math.random()*(width-20)+10,Math.random()*(height-20)+10,1));
        updateSolventCount(parseInt(inputSolvent.value)); initGraph();
        simStartTime = Date.now();
        phase1ThresholdTime = null; 
        currentPhase = 1;
    }
    
    function resize() { 
        width=document.getElementById('sim-area').clientWidth; 
        height=document.getElementById('sim-area').clientHeight; 
        mainCanvas.width=width; 
        mainCanvas.height=height; 
        initGraph(); 
    }
    window.addEventListener('resize', resize);
    resize(); updateUI();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polimerizasyon V83: Correct MW Logic</title>
    <style>
        :root {
            --bg-color: #080808;
            --panel-bg: rgba(20, 25, 35, 0.85); 
            --panel-bg-ghost: rgba(20, 25, 35, 0.15); 
            --text-color: #e0e0e0;
            --accent-cyan: #00f3ff;
            --accent-pink: #ff0055;
            --accent-green: #00ff66;
            --accent-yellow: #ffcc00;
            --accent-purple: #aa00ff;
            --accent-orange: #ffaa00;
        }
 
        body {
            margin: 0;
            overflow: hidden;
            background-color: var(--bg-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            display: flex;
            height: 100vh;
        }
 
        canvas#simCanvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0; left: 0;
            z-index: 1;
            cursor: crosshair; 
        }

/* --- ÜST İPUCU KATMANI --- */
        #hint-layer {
            position: absolute;
            bottom: 380px; 
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            text-align: center;
            z-index: 25;
            pointer-events: none;
        }

#solventHintText {
            font-size: 1rem;
            color: var(--accent-green);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 0 10px #000, 0 0 20px rgba(0, 255, 100, 0.5);
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            background: rgba(0, 0, 0, 0.6);
            padding: 8px 20px;
            border-radius: 8px;
            border: none; 
        }
        #solventHintText.show { opacity: 1; }
 
        /* --- GHOST PANEL --- */
        #controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 95%;
            max-width: 1100px;
            background: var(--panel-bg-ghost);
            backdrop-filter: none;
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: none;
            padding: 20px 30px;
            border-radius: 20px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

#controls.force-visible,
        #controls:hover {
            background: var(--panel-bg);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 -5px 30px rgba(0,0,0,0.5);
            opacity: 1; 
        }

.fading-content {
            opacity: 0.15;
            transition: opacity 0.5s;
        }
        
        #controls.force-visible .fading-content,
        #controls:hover .fading-content {
            opacity: 1;
        }

/* --- SES BUTONU --- */
        #soundBtn {
            position: absolute;
            top: 15px;
            right: 20px;
            width: 32px;
            height: 32px;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 20;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            opacity: 0.3; 
            filter: grayscale(100%);
        }

#soundBtn.active {
            opacity: 1;
            filter: drop-shadow(0 0 5px var(--accent-cyan));
        }

#soundBtn svg {
            fill: var(--accent-cyan);
            width: 22px;
            height: 22px;
        }
 
        h2 {
            width: 100%;
            margin: 0;
            font-size: 0.9rem;
            color: var(--accent-cyan);
            text-align: center;
            letter-spacing: 2px;
            opacity: 0.9;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
            font-weight: 700;
            padding-bottom: 5px;
            padding-right: 30px; 
        }
 
        .info-row {
            display: flex;
            justify-content: center;
            gap: 20px;
            width: 100%;
            margin-bottom: 5px;
        }
 
        .chem-tag {
            text-align: center;
            font-family: 'Consolas', monospace;
            font-size: 0.8rem;
            color: #aaa;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.3);
            padding: 6px 15px;
            border-radius: 6px;
            letter-spacing: 1px;
        }
 
        .conv-value {
            color: var(--accent-green);
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0, 255, 100, 0.3);
        }
 
        .radio-top-container {
            display: flex; justify-content: center; gap: 40px;
            padding: 5px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px;
            border-top: 1px solid rgba(255,255,255,0.05);
            padding-top: 15px;
        }
        .radio-label {
            display: flex; align-items: center; cursor: pointer;
            font-size: 0.85rem; color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
            white-space: nowrap; transition: color 0.3s;
        }
        .radio-label:hover { color: var(--accent-green); }
        .radio-label input { margin-right: 10px; cursor: pointer; accent-color: var(--accent-green); transform: scale(1.3); }
 
        .control-wrapper {
            display: flex; width: 100%;
            justify-content: space-between; align-items: center; gap: 20px;
        }
        .control-group { 
            flex: 1; min-width: 100px;
            display: flex; flex-direction: column; justify-content: center;
        }
        label.slider-label { 
            display: flex; justify-content: space-between; 
            font-size: 0.75rem; margin-bottom: 5px; color: #ccc; 
            text-shadow: 0 1px 2px black; white-space: nowrap; text-transform: uppercase; font-weight: 600;
        }
        span.value-display { color: var(--accent-cyan); font-weight: bold; font-family: monospace; }
 
        input[type=range] { 
            width: 100%; -webkit-appearance: none; background: transparent; 
            cursor: pointer; transition: opacity 0.3s;
            --thumb-color: #fff; --thumb-size: 14px;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: var(--thumb-size); width: var(--thumb-size); 
            border-radius: 50%; background: var(--thumb-color); 
            margin-top: calc( (4px - var(--thumb-size)) / 2 ); 
            box-shadow: 0 0 10px var(--thumb-color); border: 1px solid rgba(0,0,0,0.5); transition: all 0.1s ease;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;
        }
        input[type=range]:disabled { opacity: 0.4; cursor: not-allowed; }
        input[type=range]:disabled::-webkit-slider-thumb { background: #555; box-shadow: none; }
 
        button.action-btn {
            width: auto; min-width: 140px; padding: 10px 20px; height: 55px;
            background: rgba(255, 0, 85, 0.2); color: var(--accent-pink);
            border: 1px solid var(--accent-pink); font-weight: bold;
            cursor: pointer; border-radius: 12px; transition: 0.3s;
            text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;
        }
        button.action-btn:hover { background: var(--accent-pink); color: white; box-shadow: 0 0 25px var(--accent-pink); }
        button.action-btn.active { background: var(--accent-green); border-color: var(--accent-green); color: black; box-shadow: 0 0 25px var(--accent-green); }
        button.action-btn.stop-mode { background: rgba(255, 200, 0, 0.2); border-color: var(--accent-yellow); color: var(--accent-yellow); }
        button.action-btn.stop-mode:hover { background: var(--accent-yellow); color: black; box-shadow: 0 0 25px var(--accent-yellow); }
 
        .info-container { 
            width: 100%; text-align: center; margin-top: 5px; min-height: 24px;
            display: flex; justify-content: center; align-items: center; gap: 15px;
            opacity: 1 !important;
        }
        
        .info { 
            font-size: 0.9rem; color: #fff; margin: 0; display: inline-block; 
            text-shadow: 0 0 8px #000, 0 0 4px #000; 
            transition: all 0.3s;
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
            background: transparent !important; 
            padding: 4px 12px;
        }
 
        .living-glow {
            color: var(--accent-orange) !important;
            text-shadow: 0 0 10px var(--accent-orange), 0 0 15px black !important;
            font-weight: bold;
            background: transparent !important;
        }
        
        @keyframes blink3 { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
        .blink-3-anim { animation: blink3 0.5s ease-in-out 3; }
        
        #statusInd {
            display: inline-block; font-weight: bold; color: var(--accent-yellow);
            font-size: 0.85rem; animation: pulse 1s infinite alternate; display: none;
            text-shadow: 0 0 5px var(--accent-yellow), 0 0 10px black;
            text-transform: uppercase; letter-spacing: 0.5px;
            background: transparent !important; 
            padding: 4px 8px;
        }
 
        .msg-warning { 
            color: var(--accent-orange) !important; font-weight: bold; 
            text-shadow: 0 0 15px rgba(255, 85, 0, 1), 0 0 5px black; 
            background: transparent !important;
        }
        .msg-success { color: var(--accent-green) !important; font-weight: bold; text-shadow: 0 0 10px rgba(0, 255, 100, 0.8), 0 0 5px black; background: transparent !important; }
        .msg-info { color: var(--accent-cyan) !important; font-weight: bold; background: transparent !important; text-shadow: 0 0 10px rgba(0, 243, 255, 0.8), 0 0 5px black; }
        
        .msg-hint {
            color: var(--accent-green) !important; font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 255, 100, 0.8), 0 0 5px black;
            background: transparent !important;
        }
 
        @keyframes pulse { from { opacity: 0.6; } to { opacity: 1; } }
 
        #graphModal {
            position: absolute;
            top: 45%; left: 50%; 
            transform: translate(-50%, -50%) scale(0.95);
            width: 950px; height: 550px;
            background: rgba(10, 15, 25, 0.85);
            backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 243, 255, 0.3); border-radius: 15px;
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.8); z-index: 100;
            display: flex; flex-direction: column; padding: 25px;
            opacity: 0; visibility: hidden;
            transition: opacity 3s cubic-bezier(0.4, 0, 0.2, 1), transform 3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none; 
        }
        #graphModal.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
 
        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 10px; flex-shrink: 0;
        }
        .modal-header h3 { margin: 0; color: var(--accent-cyan); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; }
        .close-btn { background: none; border: none; color: #aaa; font-size: 1.8rem; cursor: pointer; padding: 0; transition: 0.2s;}
        .close-btn:hover { color: white; text-shadow: 0 0 10px white; }
 
        #graphScrollContainer {
            flex: 1; width: 100%; overflow-x: auto; overflow-y: hidden;
            position: relative; border: 1px solid rgba(255,255,255,0.05);
            background: rgba(0,0,0,0.3); border-radius: 8px;
        }
        #graphScrollContainer::-webkit-scrollbar { height: 8px; }
        #graphScrollContainer::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
        #graphScrollContainer::-webkit-scrollbar-thumb { background: var(--accent-cyan); border-radius: 4px; }
        canvas#mwdCanvas { display: block; height: 100%; }
 
        #statsFooter {
            margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1);
            display: flex; justify-content: space-around; color: #eee; font-size: 1rem; flex-shrink: 0;
        }
        .stat-box span { font-weight: bold; font-family: 'Consolas', monospace; font-size: 1.1rem;}
        .stat-mn { color: #00ff66; }
        .stat-mw { color: #ffcc00; }
        .stat-pdi { color: #00f3ff; }
        .stat-conv { color: var(--accent-purple); }
 
        @media (max-width: 900px) {
            .radio-top-container { flex-direction: column; gap: 10px; align-items: center; }
            .control-wrapper { flex-wrap: wrap; }
            .control-group { min-width: 45%; }
            #graphModal { width: 95%; height: 450px; }
        }
    </style>
</head>
<body>
 
    <div id="hint-layer">
        <span id="solventHintText"></span>
    </div>

<div class="fading-content">
            <h2>SERBEST RADİKAL & YAŞAYAN POLİMERİZASYON SİMÜLASYONU</h2>
            
            <div class="info-row">
                <div class="chem-tag">MONOMER: STIREN</div>
                <div class="chem-tag">DÖNÜŞÜM: <span class="conv-value" id="rtConv">0.0</span>%</div>
            </div>
    
            <div class="radio-top-container">
                <label class="radio-label">
                    <input type="radio" name="polyMode" value="free" checked> Serbest Radikal Polimerizasyonu
                </label>
                <label class="radio-label">
                    <input type="radio" name="polyMode" value="living"> Yaşayan Polimerizasyon
                </label>
            </div>
    
            <div class="control-wrapper">
                <div class="control-group">
                    <label class="slider-label">MONOMER: <span id="monomerVal">300</span></label>
                    <input type="range" id="monomerRange" min="50" max="3000" value="300">
                </div>
                <div class="control-group">
                    <label class="slider-label">BAŞLATICI: <span id="initiatorVal">20</span></label>
                    <input type="range" id="initiatorRange" min="10" max="100" value="20">
                </div>
                <div class="control-group">
                    <label class="slider-label">ÇÖZÜCÜ: <span id="solventVal">40</span></label>
                    <input type="range" id="solventRange" min="0" max="100" value="40">
                </div>
                <div class="control-group">
                    <label class="slider-label">SICAKLIK: <span id="tempVal">90°C</span></label>
                    <input type="range" id="tempRange" min="65" max="125" value="90">
                </div>
                <button id="initBtn" class="action-btn">BAŞLAT</button>
            </div>
        </div>

<div class="info-container">
            <span id="statusInd">ANALİZ MODU</span>
            <span id="mainInfoText" class="info"></span>
        </div>
    </div>
 
    <div id="graphModal">
        <div class="modal-header">
            <h3>MOLEKÜLER AĞIRLIK DAĞILIMI (MWD)</h3>
            <button class="close-btn" onclick="closeGraph()">×</button>
        </div>
        
        <div id="graphScrollContainer">
            <canvas id="mwdCanvas"></canvas>
        </div>
 
        <div id="statsFooter">
            <div class="stat-box">Mn: <span class="stat-mn" id="valMn">-</span></div>
            <div class="stat-box">Mw: <span class="stat-mw" id="valMw">-</span></div>
            <div class="stat-box">PDI: <span class="stat-pdi" id="valPdi">-</span></div>
            <div class="stat-box">% Dönüşüm: <span class="stat-conv" id="valConv">-</span></div>
        </div>
    </div>
 
    <canvas id="simCanvas"></canvas>
 
<script>
window.onload = function() {
    // --- SES MOTORU ---
    const sfx = {
        ctx: null,
        enabled: true, 
        muted: false,
        
        init: function() {
            if (!this.ctx) {
                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
            } else if (this.ctx.state === 'suspended') {
                this.ctx.resume();
            }
        },

trigger: function(type) {
            if (this.muted || !this.ctx) return;
            const t = this.ctx.currentTime;

const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);

if (type === 'ui') {
                osc.type = 'square';
                osc.frequency.setValueAtTime(600, t);
                gain.gain.setValueAtTime(0.05, t);
                gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
                osc.start(t);
                osc.stop(t + 0.05);
            }
        },

toggleMute: function() {
            this.muted = !this.muted;
            if(!this.muted) this.trigger('ui');
            return this.muted;
        }
    };

soundBtn.addEventListener('click', () => {
        sfx.init(); 
        const isMuted = sfx.toggleMute();
        if(isMuted) {
            soundBtn.classList.remove('active');
        } else {
            soundBtn.classList.add('active');
        }
    });

canvas.addEventListener('mousedown', (e) => {
        const rect = canvas.getBoundingClientRect();
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;

const worldX = (mx - width/2) / camera.zoom + camera.x;
        const worldY = (my - height/2) / camera.zoom + camera.y;

let clickedParticle = null;
        let minDist = 1000;

for (let p of particles) {
            if (p.type === 'solvent') continue;

const dx = p.x - worldX;
            const dy = p.y - worldY;
            const dist = Math.sqrt(dx*dx + dy*dy);
            
            if (dist < 20 && dist < minDist) {
                minDist = dist;
                clickedParticle = p;
            }
        }

if (clickedParticle) {
            const activeEnd = clickedParticle.getActiveEnd();
            
            if (camera.target === activeEnd) {
                camera.target = null;
                camera.targetZoom = 1.0;
                showTempInfo("GENEL GÖRÜNÜM", "normal", 1000);
            } else {
                camera.target = activeEnd;
                camera.targetZoom = 2.5; 
                showTempInfo("ZİNCİR ANALİZİ AKTİF", "info", 2000);
            }
        } else {
            camera.target = null;
            camera.targetZoom = 1.0;
        }
    });
 
    function updateSpeedFactor() {
        const temp = parseInt(ui.tRange.value);
        temperatureSpeedFactor = 0.3 + ((temp - 65) / (120 - 65)) * 2.7;
    }
 
    function updateDisplays() {
        ui.displays.m.innerText = ui.mRange.value;
        ui.displays.i.innerText = ui.iRange.value;
        ui.displays.s.innerText = ui.sRange.value;
        ui.displays.t.innerText = ui.tRange.value + "°C";
        updateSliderVisual(ui.mRange);
        updateSliderVisual(ui.iRange);
        updateSliderVisual(ui.sRange);
        updateSliderVisual(ui.tRange);
    }
 
    function updateSliderVisual(input) {
        const min = parseFloat(input.min);
        const max = parseFloat(input.max);
        const val = parseFloat(input.value);
        const ratio = (val - min) / (max - min); 
        const size = 12 + (ratio * 12);
        input.style.setProperty('--thumb-size', `${size}px`);
        let r, g, b;
        if (ratio < 0.33) {
            const localRatio = ratio / 0.33; r = 255; g = 255; b = Math.floor(255 * (1 - localRatio));
        } else if (ratio < 0.66) {
            const localRatio = (ratio - 0.33) / 0.33; r = 255; g = Math.floor(255 - (90 * localRatio)); b = 0;
        } else {
            const localRatio = (ratio - 0.66) / 0.34; r = 255; g = Math.floor(165 * (1 - localRatio)); b = 0;
        }
        input.style.setProperty('--thumb-color', `rgb(${r}, ${g}, ${b})`);
    }
 
    function toggleInputLocks(lock) {
        ui.mRange.disabled = lock;
        ui.iRange.disabled = lock;
        ui.sRange.disabled = false;
        updateSliderVisual(ui.mRange);
        updateSliderVisual(ui.iRange);
        updateSliderVisual(ui.sRange);
    }

function triggerGelSequence() {
        if (isGelSequenceActive) return; 
        isGelSequenceActive = true;

if (notificationTimer) clearTimeout(notificationTimer);

infoText.innerText = "VİSKOZİTE ARTIYOR (NORRISH-TROMMSDORFF ETKİSİ). SONLANMALAR GERÇEKLEŞMEYECEK";
        infoText.className = "info msg-warning blink-3-anim";

gelSequenceTimer = setTimeout(() => {
            infoText.className = "info msg-hint"; 
            infoText.innerText = "Viskoziteyi düşürmek için ÇÖZÜCÜ MİKTARINI %50'NİN ÜZERİNE ÇIKARTABİLİRSİNİZ.";

setTimeout(() => {
                infoText.innerText = "";
                infoText.className = "info";
                isGelSequenceActive = false; 
            }, 3000);

}, 4500); 
    }
 
    function showTempInfo(msg, type = "normal", duration = 4000) {
        if (isGelSequenceActive) return;

if (isGelEffectActive && currentMode === 'free' && type !== "warning" && type !== "success") return;
 
        infoText.innerText = msg;
        infoText.className = "info"; 
        
        if (msg.includes("YAŞAYAN MOD")) {
            infoText.classList.add("living-glow", "blink-3-anim"); 
            setTimeout(() => {
                infoText.classList.remove("blink-3-anim");
            }, 1500);
            if(notificationTimer) clearTimeout(notificationTimer);
            return;
        }
 
        if (type === "warning") infoText.classList.add("msg-warning");
        if (type === "success") infoText.classList.add("msg-success");
        if (type === "info") infoText.classList.add("msg-info");
 
        if (notificationTimer) clearTimeout(notificationTimer);
 
        if (!isGelEffectActive || type === "success") {
            notificationTimer = setTimeout(() => {
                infoText.className = "info";
                if(currentMode === 'living' && reactionStarted && !analysisMode) {
                    infoText.innerText = "YAŞAYAN MOD: SONLANMA YOK, TÜM ZİNCİRLER AKTİF";
                    infoText.classList.add("living-glow");
                } else {
                    infoText.innerText = "";
                }
            }, duration);
        }
    }
 
    class Particle {
        constructor(type, x, y) {
            this.type = type; 
            this.x = x || Math.random() * (width || 800);
            this.y = y || Math.random() * (height || 600);
            const angle = Math.random() * Math.PI * 2;
            this.vx = Math.cos(angle);
            this.vy = Math.sin(angle);
 
            if (type === 'monomer') this.radius = CONFIG.monomerRadius;
            else if (type === 'initiator') this.radius = CONFIG.initiatorRadius;
            else this.radius = CONFIG.solventRadius;
 
            this.parent = null; 
            this.isRadical = false; 
            this.isChainPart = (type === 'initiator'); 
            this.hasActivated = false; 
            
            this.chainLength = 0; 
 
            this.isDead = false;
            this.deathTime = 0;
            this.targetX = null;
            this.targetY = null;
        }
 
        getHead() {
            let curr = this;
            let count = 0;
            while(curr.parent && count < 5000) { curr = curr.parent; count++; }
            return curr;
        }

getActiveEnd() {
            let curr = this;
            let count = 0;
            while (curr.parent && count < 5000) {
                curr = curr.parent;
                count++;
            }
            return curr;
        }
 
        findNearestMonomer() {
            let minDist = 100000;
            let target = null;
            for(let p of particles) {
                if (p.type === 'monomer' && !p.isChainPart) {
                    const dx = p.x - this.x;
                    const dy = p.y - this.y;
                    const d2 = dx*dx + dy*dy;
                    if (d2 < minDist) { minDist = d2; target = p; }
                }
            }
            return target;
        }
 
        kill() {
            if (currentMode === 'living' && !isStopping) return;
            if (!this.isDead) {
                this.isRadical = false;
                this.isDead = true;
                this.deathTime = Date.now();
                this.vx *= 0.1; this.vy *= 0.1;
            }
        }
 
        update() {
            if (analysisMode) {
                if (this.type === 'solvent' || (!this.isChainPart && this.type === 'monomer')) {
                    this.y += 3; return;
                }
                if (this.targetX !== null && this.targetY !== null) {
                    const dx = this.targetX - this.x;
                    const dy = this.targetY - this.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    const speed = 15; 
                    if (dist > 1) {
                        this.x += (dx / dist) * Math.min(dist, speed);
                        this.y += (dy / dist) * Math.min(dist, speed);
                    }
                }
                if (this.parent) {
                    const idealX = this.parent.x;
                    const idealY = this.parent.y + CONFIG.bondLength;
                    this.x += (idealX - this.x) * 0.2; 
                    this.y += (idealY - this.y) * 0.2;
                    const time = Date.now() * 0.002;
                    this.x += Math.sin(time + this.y * 0.05) * 0.5;
                }
                return; 
            }
 
            const head = this.getHead();
            let isChainDead = false;
            if (this.type !== 'solvent') {
                if (this.parent) isChainDead = !head.isRadical;
                else if (!this.isRadical && (this.isChainPart || this.isDead)) {
                    if (this.type === 'initiator' && !this.hasActivated) isChainDead = false; 
                    else isChainDead = true;
                }
            }
            if (isChainDead && !this.isDead) {
                this.isDead = true;
                this.deathTime = Date.now();
            }
 
            if (this.parent) {
                const dx = this.parent.x - this.x;
                const dy = this.parent.y - this.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist > CONFIG.bondLength) {
                    const angle = Math.atan2(dy, dx);
                    const factor = 0.4;
                    const moveX = Math.cos(angle) * (dist - CONFIG.bondLength) * factor;
                    const moveY = Math.sin(angle) * (dist - CONFIG.bondLength) * factor;
                    this.x += moveX; this.y += moveY;
                }
            } else {
                let currentSpeed = CONFIG.baseSpeed * temperatureSpeedFactor;
                if (this.isDead) {
                     // V82: %98 HAREKETSİZLİK
                     currentSpeed *= 0.02; 
                } 
                else if (this.type === 'solvent') currentSpeed *= 1.2;
                else if (this.isRadical) {
                    const freeCount = particles.filter(p => p.type === 'monomer' && !p.isChainPart).length;
                    if (freeCount < initialMonomerCount * 0.2) {
                         const prey = this.findNearestMonomer();
                         if (prey) {
                            const dx = prey.x - this.x;
                            const dy = prey.y - this.y;
                            const dist = Math.sqrt(dx*dx + dy*dy);
                            this.vx += (dx/dist) * 0.25;
                            this.vy += (dy/dist) * 0.25;
                            const mag = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
                            if (mag > 0) { this.vx = (this.vx/mag); this.vy = (this.vy/mag); }
                         }
                    }
                }
                this.x += this.vx * currentSpeed;
                this.y += this.vy * currentSpeed;
                if (this.x < this.radius) { this.x = this.radius; this.vx *= -1; }
                if (this.x > width - this.radius) { this.x = width - this.radius; this.vx *= -1; }
                if (this.y < this.radius) { this.y = this.radius; this.vy *= -1; }
                if (this.y > height - this.radius) { this.y = height - this.radius; this.vy *= -1; }
            }
        }
 
        draw() {
            if (analysisMode && this.type === 'initiator' && this.chainLength < 1) return;

const mCount = parseInt(ui.mRange.value);
        const iCount = parseInt(ui.iRange.value);
        const sCount = parseInt(ui.sRange.value);
        initialMonomerCount = mCount;
        updateSpeedFactor();
 
        for (let i = 0; i < mCount; i++) particles.push(new Particle('monomer'));
        for (let i = 0; i < iCount; i++) particles.push(new Particle('initiator')); 
        for (let i = 0; i < sCount; i++) particles.push(new Particle('solvent'));
    }
 
    function forceStopAndAnalyze() {
        if (isStopping || analysisMode) return;
        isStopping = true;
        sfx.trigger('ui');
        ui.btn.innerText = "DURDURULUYOR...";
        ui.btn.disabled = true;
        
        camera.target = null;
        camera.targetZoom = 1.0;

if (activationTimer) clearInterval(activationTimer);
        showTempInfo("ANALİZE GEÇİLİYOR...", "normal", 2000);
        
        controlsDiv.classList.add('force-visible');

function handleLivingReactions() {
        const radicals = particles.filter(p => p.isRadical && !p.parent);
        const freeMonomers = particles.filter(p => p.type === 'monomer' && !p.isChainPart);

if (freeMonomers.length < 1 && radicals.length > 0) {
             forceStopAndAnalyze();
             return;
        }

for (let r1 of radicals) {
            for (let m of freeMonomers) {
                if(m.isChainPart) continue; 
                const dx = r1.x - m.x;
                const dy = r1.y - m.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist < (r1.radius + m.radius + 6)) {
                    // sfx.trigger('pop');
                    r1.isRadical = false; 
                    r1.parent = m; 
                    m.isRadical = true;   
                    m.isChainPart = true; 
                    m.parent = null; 
                    m.chainLength = r1.chainLength + 1;
                    break; 
                }
            }
        }
    }

if (!isGelEffectActive) {
                for (let s of solvents) {
                    const dx = r1.x - s.x;
                    const dy = r1.y - s.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < (r1.radius + s.radius + 4)) {
                        if (Math.random() < CONFIG.chainTransferRate) {
                            r1.kill(); 
                            if (freeMonomers.length > 0) {
                                const luckyMonomer = freeMonomers[Math.floor(Math.random() * freeMonomers.length)];
                                luckyMonomer.isRadical = true;
                                luckyMonomer.isChainPart = true;
                                luckyMonomer.chainLength = 1;
                            }
                            const now = Date.now();
                            if (now - lastTransferMsgTime > 1000) { 
                                showTempInfo("ÇÖZÜCÜYE TRANSFER GÖZLENDİ", "warning", 1500);
                                lastTransferMsgTime = now;
                            }
                            return; 
                        }
                    }
                }
            }
 
            if (!isGelEffectActive) {
                for (let j = i + 1; j < radicals.length; j++) {
                    const r2 = radicals[j];
                    const dx = r1.x - r2.x;
                    const dy = r1.y - r2.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < (r1.radius + r2.radius + 6)) {
                        const chance = Math.random();
                        if (chance < CONFIG.disproportionationRate) {
                            r1.kill();
                            r2.kill();
                            const now = Date.now();
                            if (now - lastTerminationMsgTime > 1500) {
                                showTempInfo("ORANTISIZ SONLANMALAR GÖZLENDİ", "info", 1500);
                                lastTerminationMsgTime = now;
                            }
                        } else {
                            r1.isRadical = false;
                            r2.isRadical = false;
                            r1.parent = r2; 
                            r2.chainLength += r1.chainLength;
                            r2.kill(); 
                            const now = Date.now();
                            if (now - lastTerminationMsgTime > 1500) {
                                showTempInfo("BİRLEŞEREK SONLANMALAR GÖZLENDİ", "info", 1500);
                                lastTerminationMsgTime = now;
                            }
                        }
                        return;
                    }
                }
            }
        }
    }
 
    function startAnalysisMode() {
        if (analysisMode) return;
        analysisMode = true;
        if (activationTimer) clearInterval(activationTimer);
        
        if (notificationTimer) clearTimeout(notificationTimer);
        infoText.className = "info"; 
        infoText.innerText = ""; 
 
        ui.status.style.display = 'inline-block';
        ui.status.innerText = "ZİNCİRLER KONUMLANIYORLAR";
        
        ui.btn.classList.remove('stop-mode');
        ui.btn.classList.add('active');
        ui.btn.innerText = "YENİDEN BAŞLAT";
 
        toggleInputLocks(false);
 
        const heads = particles.filter(p => p.parent === null && p.isChainPart && p.type !== 'solvent');
        const chainLengths = new Map(); 
        
        heads.forEach(h => chainLengths.set(h, 0));
 
        particles.forEach(p => {
            if (p.isChainPart && p.type === 'monomer') {
                const head = p.getHead();
                if (chainLengths.has(head)) {
                    chainLengths.set(head, chainLengths.get(head) + 1);
                }
            }
        });

// --- YARDIMCI: DİJİTAL ÇERÇEVE ÇİZİMİ ---
    function drawDigitalFrame(ctx, x, y, zoom) {
        const time = Date.now() * 0.003;
        const radius = (20 * zoom) + Math.sin(time * 2) * 2; 
        const color = 'rgba(0, 243, 255, 0.8)';
        
        ctx.save();
        ctx.strokeStyle = color;
        ctx.lineWidth = 2;
        ctx.shadowBlur = 10;
        ctx.shadowColor = color;

// Köşe Çizgileri
        const s = radius;
        ctx.beginPath();
        // Sol Üst
        ctx.moveTo(x - s, y - s * 0.5); ctx.lineTo(x - s, y - s); ctx.lineTo(x - s * 0.5, y - s);
        // Sağ Üst
        ctx.moveTo(x + s * 0.5, y - s); ctx.lineTo(x + s, y - s); ctx.lineTo(x + s, y - s * 0.5);
        // Sağ Alt
        ctx.moveTo(x + s, y + s * 0.5); ctx.lineTo(x + s, y + s); ctx.lineTo(x + s * 0.5, y + s);
        // Sol Alt
        ctx.moveTo(x - s * 0.5, y + s); ctx.lineTo(x - s, y + s); ctx.lineTo(x - s, y + s * 0.5);
        ctx.stroke();

ctx.restore();
    }

// --- YENİ ETIKET SISTEMI (Dynamic Tag) ---
    function drawDynamicTag(ctx, x, y, mwValue, isDead) {
        const offsetX = 50; 
        const offsetY = -50;
        const endX = x + offsetX;
        const endY = y + offsetY;
        
        const mainColor = isDead ? '#ff0055' : '#00f3ff';

ctx.save();
        
        // 1. Beyaz İnce Çizgi (Leader Line)
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(endX, endY); 
        ctx.lineTo(endX + 110, endY); 
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.lineWidth = 1;
        ctx.stroke();

// 2. Nokta (Bağlantı noktası)
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI*2);
        ctx.fillStyle = mainColor;
        ctx.fill();

// 3. Metin
        ctx.font = 'bold 16px Consolas';
        ctx.fillStyle = mainColor; 
        ctx.textBaseline = 'bottom';
        ctx.shadowColor = mainColor;
        ctx.shadowBlur = 4;
        
        const labelText = isDead ? "SONLANDI" : "AKTİF";
        
        // --- V83 FIX: SMART LABELING ---
        let finalLabel = labelText;
        let finalValue = "MW: " + mwValue;

if (camera.target.type === 'monomer' && !camera.target.isChainPart) {
            finalLabel = "SERBEST MONOMER";
            finalValue = "MW: 104"; // Hardcoded for pure monomer
        } else if (camera.target.type === 'initiator' && !camera.target.hasActivated) {
            finalLabel = "BAŞLATICI";
            finalValue = "MW: 68"; // Hardcoded for pure initiator
        } else {
            // Normal chain logic (calculated above)
            finalLabel = isDead ? "SONLANDI" : "AKTİF";
        }

const labelX = endX + 5;
        
        ctx.fillText(finalValue, labelX, endY - 5);
        
        ctx.font = 'bold 11px Arial';
        ctx.fillStyle = isDead ? '#ffaaaa' : '#ccffff';
        ctx.shadowBlur = 0;
        ctx.fillText(`${finalLabel} | g/mol`, labelX, endY + 12);

ctx.restore();
    }
 
    function animate() {
        // --- KAMERA LOGIC ---
        camera.zoom += (camera.targetZoom - camera.zoom) * 0.1;

let targetX, targetY;
        if (camera.target) {
            const currentHead = camera.target.getActiveEnd();
            if (currentHead !== camera.target) {
                camera.target = currentHead; 
            }
            targetX = camera.target.x;
            targetY = camera.target.y;
        } else {
            targetX = width / 2;
            targetY = height / 2;
        }

camera.x += (targetX - camera.x) * 0.1;
        camera.y += (targetY - camera.y) * 0.1;

// --- RENDER WORLD ---
        ctx.clearRect(0, 0, width, height);

ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.scale(camera.zoom, camera.zoom);
        ctx.translate(-camera.x, -camera.y);

ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
        ctx.lineWidth = 2;
        ctx.strokeRect(0, 0, width, height);

if (!analysisMode) {
             const steps = Math.floor(temperatureSpeedFactor); 
             for(let s=0; s<steps; s++) handleReactions();
 
             for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    if (particles[i].parent === particles[j] || particles[j].parent === particles[i]) continue;
                    resolveCollision(particles[i], particles[j]);
                }
            }
        } else {
            checkArrivalAndTriggerGraph();
        }
        if(Math.floor(temperatureSpeedFactor) < 1) handleReactions();
 
        particles.forEach(p => {
            p.update();
            p.draw();
        });

ctx.restore();

// --- RENDER SCREEN SPACE UI (En Üst Katman) ---
        if (camera.target) {
            const screenX = (camera.target.x - camera.x) * camera.zoom + width / 2;
            const screenY = (camera.target.y - camera.y) * camera.zoom + height / 2;
            
            drawDigitalFrame(ctx, screenX, screenY, camera.zoom);

// REAL-TIME MW HESABI (Cumulative Calculation)
            let dp = camera.target.chainLength;
            let totalWeight = 0;
            
            // --- V83: SMART CALCULATION ---
            if (camera.target.type === 'monomer' && !camera.target.isChainPart) {
                totalWeight = 104;
            } else if (camera.target.type === 'initiator' && !camera.target.hasActivated) {
                totalWeight = 68;
            } else {
                totalWeight = (dp * CONFIG.styreneMW) + CONFIG.initiatorFragmentMW;
            }
            
            const mwFormatted = Math.floor(totalWeight).toLocaleString();
            const isDead = camera.target.isDead;

drawDynamicTag(ctx, screenX, screenY, mwFormatted, isDead);
        }

requestAnimationFrame(animate);
    }
 
    resize();
    updateDisplays();
    initSimulation();
    animate();
};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent HUD Polymerization</title>
    <style>
        :root {
            --bg: #050505;
            --panel: rgba(20, 20, 20, 0.95);
            --neon-red: #ff3333;
            --neon-pale-blue: #80dfff; 
            --neon-purple: #d500f9;
            --text: #ffffff;
            --font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --graph-bg: rgba(10, 15, 20, 0.8);
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg);
            color: var(--text);
            font-family: var(--font);
            overflow: hidden;
            cursor: crosshair; 
        }

canvas { display: block; }

/* UI PANELİ */
        #ui-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 340px;
            padding: 20px;
            background: var(--panel);
            border: 1px solid #444;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,1);
            user-select: none;
            z-index: 999;
            max-height: 95vh;
            overflow-y: auto;
        }

h2 {
            margin: 0 0 15px 0;
            font-size: 1rem;
            color: var(--neon-pale-blue);
            text-align: center;
            border-bottom: 1px solid #555;
            padding-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.row { margin-bottom: 18px; } 
        
        label {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            margin-bottom: 8px;
            color: #ccc;
            font-weight: 500;
        }

/* --- MODERN SLIDER TASARIMI --- */
        input[type="range"] { 
            -webkit-appearance: none; 
            width: 100%; 
            height: 8px;
            background: #2a2a2a; 
            border-radius: 4px;
            outline: none;
            cursor: pointer;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
            transition: opacity 0.3s;
            
            /* Dinamik Değişkenler */
            --thumb-color: #ffffff;
            --thumb-scale: 1;
        }

/* Thumb (Tutamak) Stili - Webkit */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: var(--thumb-color);
            border-radius: 50%;
            cursor: pointer;
            border: none; 
            box-shadow: 0 0 10px var(--thumb-color); 
            transform: scale(var(--thumb-scale));
            transition: transform 0.1s ease-out, background-color 0.2s, box-shadow 0.2s;
        }

/* Thumb Stili - Firefox */
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: var(--thumb-color);
            border: none; 
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 10px var(--thumb-color);
            transform: scale(var(--thumb-scale));
            transition: transform 0.1s ease-out, background-color 0.2s, box-shadow 0.2s;
        }

input[type="range"]:active::-webkit-slider-thumb {
            box-shadow: 0 0 20px var(--thumb-color);
        }

input[type="range"]:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        input[type="range"]:disabled::-webkit-slider-thumb {
            background: #555;
            box-shadow: none;
            transform: scale(1);
        }

button {
            width: 100%;
            padding: 12px;
            margin-top: 10px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            transition: 0.2s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

#btn-start { background: var(--neon-pale-blue); color: #000; }
        #btn-start:hover { background: #fff; box-shadow: 0 0 15px var(--neon-pale-blue); }
        #btn-start.active { background: var(--neon-red); color: #fff; box-shadow: 0 0 15px var(--neon-red); }

.legend {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 0.7rem;
            margin-bottom: 15px;
            padding: 10px;
            background: rgba(255,255,255,0.03);
            border-radius: 8px;
            border: 1px solid #333;
        }
        .icon { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
        .icon.diamond { transform: rotate(45deg); }
        .icon.circle { border-radius: 50%; }

#graph-container {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #555;
        }
        canvas#graph-canvas {
            background: var(--graph-bg);
            border: 1px solid #444;
            border-radius: 6px;
            margin-bottom: 8px;
            display: block;
        }
        #chem-stats {
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 0.75rem;
            color: #ccc;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .stat-item { background: rgba(0,0,0,0.4); padding: 6px; border-radius: 4px; border-left: 2px solid #444; }
        .stat-val { color: var(--neon-pale-blue); font-weight: bold; float: right; }
        
        .sub-label { font-size: 0.7rem; color: #888; display: block; margin-top:-4px; margin-bottom: 4px;}
        
        #zoom-hint {
            position: absolute;
            bottom: 20px;
            right: 30px;
            color: #FFFC67;
            font-family: monospace;
            font-size: 1.2rem;
            pointer-events: none;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

</style>
</head>
<body>

<div id="ui-panel">
        <h2>MMA Polimerizasyonu</h2>
        
        <div class="legend">
            <div><span class="icon diamond" style="background:var(--neon-purple)"></span>BAŞLATICI</div>
            <div><span class="icon circle" style="background:#fff; box-shadow:0 0 5px var(--neon-pale-blue)"></span>AKTİF UÇ</div>
            <div><span class="icon circle" style="background:var(--neon-red)"></span>DEAKTİVATÖR</div>
            <div><span class="icon circle" style="background:var(--neon-pale-blue)"></span>MONOMER</div>
        </div>

<div class="row">
            <label>Simülasyon Hızı: <span id="lbl-speed">1x</span></label>
            <input type="range" id="rng-speed" min="1" max="5" value="1" step="0.5">
        </div>

<div class="row">
            <label>
                <span>Deaktivasyon: <span id="lbl-mode" style="color:var(--neon-red)">DÜŞÜK (Kaotik)</span></span>
            </label>
            <input type="range" id="rng-mode" min="1" max="2" value="1" step="1">
        </div>

<div class="row">
            <label>Monomer (MMA): <span id="lbl-mono">200</span></label>
            <input type="range" id="rng-mono" min="50" max="500" value="200">
        </div>

<div class="row">
            <label>Başlatıcı: <span id="lbl-init">10</span></label>
            <input type="range" id="rng-init" min="2" max="50" value="10">
        </div>

<button id="btn-start">BAŞLAT</button>
        
        <div id="graph-container">
            <label>Grafik: Mn vs. %Dönüşüm</label>
            <canvas id="graph-canvas" width="300" height="150"></canvas>
            <div id="chem-stats">
                <div class="stat-item">Mn: <span id="val-mn" class="stat-val">0</span></div>
                <div class="stat-item">Mw: <span id="val-mw" class="stat-val">0</span></div>
                <div class="stat-item">PDI: <span id="val-pdi" class="stat-val">1.00</span></div>
                <div class="stat-item">%Dönüşüm: <span id="val-conv" class="stat-val">0%</span></div>
            </div>
        </div>
    </div>

<div id="zoom-hint">ANALİZ MODU:ZİNCİRE TIKLAYIN</div>
    <canvas id="sim-canvas"></canvas>

const scale = 1 + (percent * 0.4);

let color;
            if (percent < 0.1) {
                color = '#ffffff';
            } else {
                let pColor = (percent - 0.1) / 0.9; 
                let hue = 60 - (pColor * 60); 
                color = `hsl(${hue}, 100%, 50%)`;
            }

slider.style.setProperty('--thumb-scale', scale);
            slider.style.setProperty('--thumb-color', color);
        }

const CFG = {
            radius: 6,
            speed: 1.8,
            reactionDist: 35,
            
            fastRatio: 0.35,  
            slowRatio: 0.20,  
            
            hoverDist: 60,    
            unlockSpeed: 2.0, 
            lockSpeed: 4.0,
            simSpeedMultiplier: 1, 
            MW_MMA: 100, 
            MW_INIT: 100,
            
            activeTimeMin: 40,  
            activeTimeMax: 100, 
            dormantTimeMin: 120, 
            dormantTimeMax: 400, 
            dormantMultiplier: 1.0 
        };

let camera = { x: 0, y: 0, scale: 1 };
        let followedChain = null;

if (isChainActive && distToHead < grabRange) {
                        m.active = false;
                        eaten = true;
                        let dir = Vec.norm(c.vel);
                        if (dir.x===0 && dir.y===0) dir = Vec.create(1,0);
                        c.beads.push(Vec.add(head, Vec.mult(dir, CFG.radius * 2)));
                        break; 
                    }
                    if (!eaten) {
                        for (let b of c.beads) {
                            let d = Vec.dist(m.pos, b);
                            if (d < CFG.radius * 2) {
                                let overlap = CFG.radius * 2 - d;
                                let dir = Vec.norm(Vec.sub(m.pos, b));
                                m.pos = Vec.add(m.pos, Vec.mult(dir, overlap));
                                m.vel = Vec.add(m.vel, Vec.mult(dir, 1.2)); 
                                m.vel = Vec.limit(m.vel, CFG.speed * 1.5);
                            }
                        }
                    }
                }
            }
        }

class Monomer {
            constructor() {
                this.pos = this.getSafePosition();
                this.vel = Vec.mult(Vec.norm(Vec.create(Math.random()-0.5, Math.random()-0.5)), 0.8);
                this.active = true;
            }
            getSafePosition() {
                let x, y, safe = false;
                let attempts = 0;
                while(!safe && attempts < 100) {
                    x = Math.random() * (W - 40) + 20;
                    y = Math.random() * (H - 40) + 20;
                    if (x < panelBox.w + 20 && y < panelBox.h + 20) safe = false;
                    else safe = true;
                    attempts++;
                }
                return Vec.create(x, y);
            }
            update() {
                if (!this.active) return;
                this.pos = Vec.add(this.pos, this.vel);
                this.checkWalls();
            }
            checkWalls() {
                let r = CFG.radius;
                if (this.pos.x < r) { this.pos.x = r+1; this.vel.x = Math.abs(this.vel.x); }
                else if (this.pos.x > W - r) { this.pos.x = W-r-1; this.vel.x = -Math.abs(this.vel.x); }
                if (this.pos.y < r) { this.pos.y = r+1; this.vel.y = Math.abs(this.vel.y); }
                else if (this.pos.y > H - r) { this.pos.y = H-r-1; this.vel.y = -Math.abs(this.vel.y); }
                if (this.pos.x < panelBox.w && this.pos.y < panelBox.h) {
                    let distToRight = Math.abs(this.pos.x - panelBox.w);
                    let distToBottom = Math.abs(this.pos.y - panelBox.h);
                    if (distToRight < distToBottom) { this.pos.x = panelBox.w + r + 1; this.vel.x = Math.abs(this.vel.x); }
                    else { this.pos.y = panelBox.h + r + 1; this.vel.y = Math.abs(this.vel.y); }
                }
            }
            draw() {
                if (!this.active) return;
                ctx.beginPath();
                ctx.arc(this.pos.x, this.pos.y, CFG.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#80dfff"; 
                ctx.shadowBlur = 10; ctx.shadowColor = "#80dfff";
                ctx.fill();
                ctx.shadowBlur = 0;
            }
        }

class Deactivator {
            constructor(chain) {
                this.chain = chain;
                let head = chain.head || Vec.create(0,0);
                this.pos = Vec.create(head.x, head.y);
                this.state = "LOCKED"; 
                this.timer = 0;
                this.timeToSwitch = Math.random() * 200 + 100;
                this.oscillationTime = Math.random() * 1000;
            }
            update() {
                if (!this.chain.head) return;
                let head = this.chain.head;
                let type = this.chain.type;

if (running) {
                    this.timer++;
                    if (this.timer >= this.timeToSwitch) {
                        this.timer = 0;
                        if (this.state === "LOCKED") {
                            if (type === 2 && Math.random() > 0.3) {
                                this.timeToSwitch = 100; 
                            } else {
                                this.state = "UNLOCKING";
                                let baseTime = Math.random() * (CFG.activeTimeMax - CFG.activeTimeMin) + CFG.activeTimeMin;
                                if (type === 0) { 
                                    this.timeToSwitch = baseTime * 3.0; 
                                } else if (type === 2) { 
                                    this.timeToSwitch = baseTime * 0.3; 
                                } else {
                                    this.timeToSwitch = baseTime;
                                }
                            }
                        } 
                        else if (this.state === "HOVERING") {
                            this.state = "LOCKING";
                            let min = CFG.dormantTimeMin * CFG.dormantMultiplier;
                            let max = CFG.dormantTimeMax * CFG.dormantMultiplier;
                            let baseTime = Math.random() * (max - min) + min;
                            if (type === 0) { 
                                this.timeToSwitch = 20; 
                            } else if (type === 2) { 
                                this.timeToSwitch = baseTime * 3.0; 
                            } else {
                                this.timeToSwitch = baseTime;
                            }
                        }
                    }
                }

let chainHeading = 0;
                if (Vec.mag(this.chain.vel) > 0.1) chainHeading = Math.atan2(this.chain.vel.y, this.chain.vel.x);
                this.oscillationTime += 0.05;
                let swing = Math.sin(this.oscillationTime) * (Math.PI / 3); 
                let finalAngle = chainHeading + swing;
                let orbitTargetX = head.x + Math.cos(finalAngle) * CFG.hoverDist;
                let orbitTargetY = head.y + Math.sin(finalAngle) * CFG.hoverDist;
                let orbitTarget = Vec.create(orbitTargetX, orbitTargetY);

if (this.state === "LOCKED") {
                    this.pos = Vec.create(head.x, head.y);
                } else if (this.state === "UNLOCKING") {
                    let dir = Vec.norm(Vec.sub(orbitTarget, this.pos));
                    let move = Vec.mult(dir, CFG.unlockSpeed);
                    this.pos = Vec.add(this.pos, move);
                    if (Vec.dist(this.pos, head) >= CFG.hoverDist * 0.9) this.state = "HOVERING";
                } else if (this.state === "HOVERING") {
                    let desired = Vec.sub(orbitTarget, this.pos);
                    this.pos = Vec.add(this.pos, Vec.mult(desired, 0.2)); 
                } else if (this.state === "LOCKING") {
                    let dir = Vec.norm(Vec.sub(head, this.pos));
                    let move = Vec.mult(dir, CFG.lockSpeed);
                    this.pos = Vec.add(this.pos, move);
                    let dist = Vec.dist(this.pos, head);
                    if (dist < 30) this.pos = Vec.add(this.pos, Vec.mult(dir, 2.0)); 
                    if (dist < 5) this.state = "LOCKED";
                }
            }
            draw() {
                if (!this.chain.head) return;
                if (this.state !== "LOCKED") {
                    ctx.beginPath();
                    ctx.moveTo(this.pos.x, this.pos.y);
                    ctx.lineTo(this.chain.head.x, this.chain.head.y);
                    let dist = Vec.dist(this.pos, this.chain.head);
                    let alpha = Math.max(0.2, 1 - (dist / 100));
                    ctx.strokeStyle = `rgba(255, 50, 50, ${alpha})`;
                    ctx.setLineDash([3, 3]);
                    ctx.stroke();
                    ctx.setLineDash([]);
                }
                ctx.beginPath();
                ctx.arc(this.pos.x, this.pos.y, CFG.radius, 0, Math.PI * 2);
                if (this.state === "LOCKED") {
                    ctx.fillStyle = "#cc0000"; ctx.shadowBlur = 0;
                } else {
                    ctx.fillStyle = "#ff3333"; ctx.shadowBlur = 10; ctx.shadowColor = "#ff3333";
                }
                ctx.fill();
                ctx.shadowBlur = 0;
            }
            isCapping() { return (this.state === "LOCKED" || this.state === "LOCKING"); }
        }

class Chain {
            constructor(type, id) {
                this.type = type; 
                this.id = id;
                let safe = false, sx, sy;
                let attempts = 0;
                while(!safe && attempts < 100) {
                    sx = Math.random() * (W - 100) + 50;
                    sy = Math.random() * (H - 100) + 50;
                    if (sx > panelBox.w + 50 || sy > panelBox.h + 50) safe = true;
                    attempts++;
                }
                this.beads = [Vec.create(sx, sy), Vec.create(sx, sy)];
                this.vel = Vec.create(0, 0);
                this.deactivator = new Deactivator(this);
            }
            get head() { return this.beads[this.beads.length - 1]; }
            get length() { return this.beads.length; }

update() {
                this.deactivator.update();
                let isCapped = this.deactivator.isCapping(); 
                let target = null;
                let minDist = 9999;

if (!isCapped) {
                    for (let m of monomers) {
                        if (!m.active) continue;
                        let d = Vec.dist(this.head, m.pos);
                        if (d < minDist && d < 150) { minDist = d; target = m; }
                    }
                }

let currentSpeed = CFG.speed; 
                if (target) {
                    let desired = Vec.mult(Vec.norm(Vec.sub(target.pos, this.head)), currentSpeed);
                    let steer = Vec.mult(Vec.sub(desired, this.vel), 0.2); 
                    this.vel = Vec.add(this.vel, steer);
                } else {
                    let wander = Vec.create(Math.random()-0.5, Math.random()-0.5);
                    this.vel = Vec.add(this.vel, Vec.mult(wander, 0.4));
                }

this.vel = Vec.limit(this.vel, currentSpeed);
                this.checkWalls();
                this.beads[this.beads.length - 1] = Vec.add(this.head, this.vel);

for (let i = this.beads.length - 2; i >= 0; i--) {
                    let curr = this.beads[i];
                    let next = this.beads[i + 1];
                    let d = Vec.dist(curr, next);
                    let reqDist = CFG.radius * 2;
                    if (d > reqDist) {
                        let angle = Math.atan2(next.y - curr.y, next.x - curr.x);
                        let tx = next.x - Math.cos(angle) * reqDist;
                        let ty = next.y - Math.sin(angle) * reqDist;
                        this.beads[i] = Vec.create(tx, ty);
                    }
                }
            }
            checkWalls() {
                let next = Vec.add(this.head, this.vel);
                let r = CFG.radius;
                if (next.x < r) { next.x = r+1; this.vel.x = Math.abs(this.vel.x); }
                else if (next.x > W - r) { next.x = W-r-1; this.vel.x = -Math.abs(this.vel.x); }
                if (next.y < r) { next.y = r+1; this.vel.y = Math.abs(this.vel.y); }
                else if (next.y > H - r) { next.y = H-r-1; this.vel.y = -Math.abs(this.vel.y); }
                if (next.x < panelBox.w && next.y < panelBox.h) {
                    let distToRight = Math.abs(next.x - panelBox.w);
                    let distToBottom = Math.abs(next.y - panelBox.h);
                    if (distToRight < distToBottom) { next.x = panelBox.w + r + 1; this.vel.x = Math.abs(this.vel.x); }
                    else { next.y = panelBox.h + r + 1; this.vel.y = Math.abs(this.vel.y); }
                }
                this.beads[this.beads.length - 1] = next;
            }
            draw() {
                ctx.beginPath();
                ctx.strokeStyle = "rgba(128, 223, 255, 0.2)";
                ctx.lineWidth = 2;
                for (let b of this.beads) ctx.lineTo(b.x, b.y);
                ctx.stroke();
                for (let i = 0; i < this.beads.length; i++) {
                    let b = this.beads[i];
                    if (i === 0) {
                        ctx.save();
                        ctx.translate(b.x, b.y);
                        ctx.rotate(Math.PI / 4);
                        ctx.fillStyle = "#d500f9";
                        ctx.fillRect(-5, -5, 10, 10);
                        ctx.restore();
                        continue;
                    }
                    ctx.beginPath();
                    ctx.arc(b.x, b.y, CFG.radius, 0, Math.PI * 2);
                    ctx.fillStyle = "#80dfff";
                    if (i === this.beads.length - 1 && !this.deactivator.isCapping()) {
                        ctx.shadowBlur = 25; ctx.shadowColor = "#ffffff"; 
                        ctx.fillStyle = "#ffffff";
                    } else {
                        ctx.shadowBlur = 15; ctx.shadowColor = "#80dfff";
                    }
                    ctx.fill();
                    ctx.shadowBlur = 0;
                }
            }
        }

// --- HESAPLAMA VE GRAFİK ---
        function updateCalculations() {
            let activeMonomers = 0;
            monomers.forEach(m => { if(m.active) activeMonomers++; });
            let consumed = initialMonomerCount - activeMonomers;
            stats.conversion = initialMonomerCount > 0 ? (consumed / initialMonomerCount) * 100 : 0;
            let totalMass = 0;
            let totalMassSq = 0;
            let totalChains = chains.length;
            
            chains.forEach(c => {
                let mass = c.beads.length * CFG.MW_MMA;
                totalMass += mass;
                totalMassSq += (mass * mass);
            });
            if (totalChains > 0) {
                stats.mn = totalMass / totalChains;
                stats.mw = totalMassSq / totalMass;
                stats.pdi = stats.mn > 0 ? stats.mw / stats.mn : 1.0;
            }
            document.getElementById('val-mn').innerText = Math.round(stats.mn) + " Da";
            document.getElementById('val-mw').innerText = Math.round(stats.mw) + " Da";
            document.getElementById('val-pdi').innerText = stats.pdi.toFixed(2);
            document.getElementById('val-conv').innerText = stats.conversion.toFixed(1) + "%";
            if (graphData.length === 0 || stats.conversion > graphData[graphData.length-1].conv + 0.2) {
                graphData.push({ conv: stats.conversion, mn: stats.mn });
            }
        }

function drawGraph() {
            gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
            const width = gCanvas.width;
            const height = gCanvas.height;
            const pad = 30;

gCtx.strokeStyle = "rgba(255,255,255,0.05)";
            gCtx.lineWidth = 1;
            gCtx.beginPath();
            for(let x=pad; x<width; x+=30) { gCtx.moveTo(x, 0); gCtx.lineTo(x, height-pad); }
            for(let y=0; y<height-pad; y+=30) { gCtx.moveTo(pad, y); gCtx.lineTo(width, y); }
            gCtx.stroke();

gCtx.strokeStyle = "#888";
            gCtx.lineWidth = 2;
            gCtx.beginPath();
            gCtx.moveTo(pad, 0); gCtx.lineTo(pad, height-pad); 
            gCtx.lineTo(width, height-pad); 
            gCtx.stroke();

gCtx.fillStyle = "#aaa";
            gCtx.font = "10px sans-serif";
            gCtx.fillText("0", pad-10, height-pad+12);
            gCtx.fillText("100%", width-30, height-pad+12);
            
            if (graphData.length < 2) return;

let maxMn = 1000;
            graphData.forEach(d => { if(d.mn > maxMn) maxMn = d.mn; });
            maxMn *= 1.2; 
            gCtx.fillText(Math.round(maxMn), 0, 10);

gCtx.beginPath();
            for (let i = 0; i < graphData.length; i++) {
                let d = graphData[i];
                let x = pad + (d.conv / 100) * (width - pad);
                let y = (height - pad) - (d.mn / maxMn) * (height - pad);
                if (i === 0) gCtx.moveTo(x, y);
                else gCtx.lineTo(x, y);
            }
            gCtx.strokeStyle = "#00ffff";
            gCtx.lineWidth = 2;
            gCtx.stroke();

let lastD = graphData[graphData.length - 1];
            let lastX = pad + (lastD.conv / 100) * (width - pad);
            let lastY = (height - pad) - (lastD.mn / maxMn) * (height - pad);

gCtx.beginPath();
            gCtx.arc(lastX, lastY, 3, 0, Math.PI*2);
            gCtx.fillStyle = "#ffffff";
            gCtx.fill();

gCtx.fillStyle = "#00ffff";
            gCtx.font = "bold 11px sans-serif";
            gCtx.fillText(Math.round(stats.mn), lastX - 25, lastY - 8);
        }

// --- SİSTEM ---
        function init() {
            canvas = document.getElementById('sim-canvas');
            ctx = canvas.getContext('2d');
            gCanvas = document.getElementById('graph-canvas');
            gCtx = gCanvas.getContext('2d');
            updatePanelBox();
            resize();
            updateSliderUI(); 
            resetSim();
            
            // --- MOUSE TIKLAMA MANTIĞI ---
            canvas.addEventListener('mousedown', (e) => {
                const rect = canvas.getBoundingClientRect();
                const mx = e.clientX - rect.left;
                const my = e.clientY - rect.top;
                
                const wx = (mx - camera.x) / camera.scale;
                const wy = (my - camera.y) / camera.scale;

if (followedChain) {
                    followedChain = null; 
                } else {
                    let closestChain = null;
                    let minGlobalDist = 50;

for (let c of chains) {
                        for (let b of c.beads) {
                            let d = Vec.dist({x: wx, y: wy}, b);
                            if (d < minGlobalDist) {
                                closestChain = c;
                                minGlobalDist = d;
                                break; 
                            }
                        }
                    }
                    if(closestChain) followedChain = closestChain;
                }
            });

loop();
        }

function updatePanelBox() {
            let p = document.getElementById('ui-panel');
            panelBox.w = p.offsetWidth + 25; 
            panelBox.h = p.offsetHeight + 25;
        }

function resize() {
            W = canvas.width = window.innerWidth;
            H = canvas.height = window.innerHeight;
        }

const toggleInputs = (isDisabled) => {
            document.getElementById('rng-mode').disabled = isDisabled;
            document.getElementById('rng-mono').disabled = isDisabled;
            document.getElementById('rng-init').disabled = isDisabled;
        };

function updateSliderUI() {
            updateSliderStyle(document.getElementById('rng-speed'));
            updateSliderStyle(document.getElementById('rng-mode'));
            updateSliderStyle(document.getElementById('rng-mono'));
            updateSliderStyle(document.getElementById('rng-init'));
            
            let val = parseFloat(document.getElementById('rng-mode').value);
            updateLogicFromSlider(val);
            
            document.getElementById('lbl-speed').innerText = document.getElementById('rng-speed').value + "x";
            document.getElementById('lbl-mono').innerText = document.getElementById('rng-mono').value;
            document.getElementById('lbl-init').innerText = document.getElementById('rng-init').value;
        }

function resetSim() {
            monomers = [];
            chains = [];
            graphData = []; 
            avgLength = 0;
            // UI Update is triggered by listener, not here to avoid loop
            
            let mCount = parseInt(document.getElementById('rng-mono').value);
            let iCount = parseInt(document.getElementById('rng-init').value);
            initialMonomerCount = mCount;
            
            for (let i = 0; i < mCount; i++) monomers.push(new Monomer());
            
            let fastCount = Math.floor(iCount * CFG.fastRatio);
            let slowCount = Math.floor(iCount * CFG.slowRatio);
            if (CFG.fastRatio > 0 && fastCount === 0) fastCount = 1;

let identities = [];
            for(let k=0; k<fastCount; k++) identities.push(0); 
            for(let k=0; k<slowCount; k++) identities.push(2); 
            while(identities.length < iCount) identities.push(1); 
            
            identities.sort(() => Math.random() - 0.5);

for (let i = 0; i < iCount; i++) {
                chains.push(new Chain(identities[i], i+1));
            }

stats = { mn: 0, mw: 0, pdi: 1.0, conversion: 0 };
            document.getElementById('val-mn').innerText = "0 Da";
            document.getElementById('val-conv').innerText = "0%";
            
            followedChain = null; 
        }

ctx.clearRect(0, 0, W, H);
                
                ctx.save();
                ctx.translate(camera.x, camera.y);
                ctx.scale(camera.scale, camera.scale);

monomers.forEach(m => m.draw());
                chains.forEach(c => c.draw());
                chains.forEach(c => c.deactivator.draw());
                
                // TRANSPARENT HUD (NO DOT)
                if (followedChain) {
                    let c = followedChain;
                    let h = c.head;
                    let mass = c.beads.length * CFG.MW_MMA;
                    let isActive = !c.deactivator.isCapping();
                    
                    let statusText = isActive ? "AKTİF" : "DEAKTİF";
                    let statusColor = isActive ? "rgba(0, 255, 0, 0.75)" : "rgba(255, 51, 51, 0.75)";
                    
                    let hudX = h.x + 25;
                    let hudY = h.y - 40;
                    let w = 110;
                    let hH = 45;

ctx.lineWidth = 1;
                    ctx.strokeStyle = "rgba(0, 255, 255, 0.6)"; 
                    ctx.beginPath();
                    ctx.moveTo(h.x, h.y);
                    ctx.lineTo(hudX, hudY + hH/2);
                    ctx.stroke();

ctx.fillStyle = "rgba(0, 20, 40, 0.65)"; 
                    ctx.beginPath();
                    ctx.moveTo(hudX, hudY);
                    ctx.lineTo(hudX + w - 10, hudY); 
                    ctx.lineTo(hudX + w, hudY + 10);
                    ctx.lineTo(hudX + w, hudY + hH);
                    ctx.lineTo(hudX, hudY + hH);
                    ctx.closePath();
                    ctx.fill();

ctx.beginPath();
                    ctx.moveTo(hudX, hudY + 10);
                    ctx.lineTo(hudX, hudY);
                    ctx.lineTo(hudX + 10, hudY);
                    ctx.moveTo(hudX + w - 15, hudY);
                    ctx.lineTo(hudX + w - 10, hudY);
                    ctx.lineTo(hudX + w, hudY + 10);
                    ctx.lineTo(hudX + w, hudY + 15);
                    ctx.moveTo(hudX + w, hudY + hH - 10);
                    ctx.lineTo(hudX + w, hudY + hH);
                    ctx.lineTo(hudX + w - 10, hudY + hH);
                    ctx.moveTo(hudX + 10, hudY + hH);
                    ctx.lineTo(hudX, hudY + hH);
                    ctx.lineTo(hudX, hudY + hH - 10);
                    ctx.stroke();

ctx.font = "bold 11px Consolas, monospace";
                    ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
                    
                    ctx.fillText(`Mn: ${mass} Da`, hudX + 8, hudY + 18);
                    
                    ctx.fillStyle = statusColor;
                    ctx.fillText(`DURUM: ${statusText}`, hudX + 8, hudY + 32);
                }

ctx.restore();

drawGraph();
                
                if (running) {
                    for(let s=0; s<CFG.simSpeedMultiplier; s++) {
                        let totalLen = 0;
                        chains.forEach(c => totalLen += c.length);
                        avgLength = totalLen / chains.length;
                        monomers.forEach(m => m.update());
                        chains.forEach(c => c.update());
                        resolveInteractions(); 
                    }
                    updateCalculations();
                }
            } catch (err) { console.error(err); }
            requestAnimationFrame(loop);
        }

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polimer Lab v17 - Low Glow</title>
    <style>
        :root {
            --bg-color: #0f172a;
            --panel-bg: rgba(10, 15, 30, 0.85);
            --text-color: #f8fafc;
            --accent-color: #0ea5e9; 
            --monomer-a: #06b6d4; /* Cyan */
            --monomer-b: #ec4899; /* Pink */
            --core-color: #f59e0b; 
        }

body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
            font-family: 'Segoe UI', Roboto, sans-serif;
            color: var(--text-color);
            cursor: move;
        }

canvas { display: block; }

/* Buton Paneli */
        .ui-container {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--panel-bg);
            backdrop-filter: blur(12px);
            padding: 20px 30px;
            border-radius: 24px;
            /* GLOW REDUCED: Panel gölgesi kısıldı */
            box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            z-index: 100;
        }

.buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
        
        button { 
            background: rgba(255,255,255,0.03); 
            border: 1px solid rgba(255,255,255,0.08); 
            color: #cbd5e1; 
            padding: 12px 20px; 
            border-radius: 12px; 
            cursor: pointer; 
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
            font-size: 0.9rem; 
            font-weight: 600;
        }
        
        button:hover { background: rgba(255,255,255,0.08); color: white; border-color: var(--accent-color); transform: scale(1.02); }
        
        button.active { 
            background: var(--accent-color); 
            color: #0f172a; 
            /* GLOW REDUCED: Buton parlaması 25px -> 12px */
            box-shadow: 0 0 12px rgba(14, 165, 233, 0.3); 
            border-color: transparent; 
        }
        
        .drag-hint { position: absolute; top: 30px; width: 100%; text-align: center; color: rgba(255,255,255,0.3); font-size: 0.8rem; pointer-events: none; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; }

/* Bilgi Paneli */
        .info-panel {
            position: absolute;
            top: 30px;
            left: 30px;
            background: var(--panel-bg);
            backdrop-filter: blur(12px);
            padding: 25px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.08);
            max-width: 320px;
            z-index: 100;
            /* GLOW REDUCED */
            box-shadow: 0 5px 20px rgba(0,0,0,0.4);
            transition: all 0.3s ease;
        }
        
        .info-panel h3 {
            margin: 0 0 12px 0;
            color: var(--accent-color);
            font-size: 1.2rem;
            font-weight: 700;
            /* Text shadow opsiyonel olarak kaldırıldı/azaltıldı */
            text-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
        }
        
        .info-panel p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.6;
            color: #cbd5e1;
        }

@media (max-width: 600px) {
             .info-panel { top: 70px; left: 10px; right: 10px; max-width: none; padding: 15px; }
             .drag-hint { top: 10px; }
        }
    </style>
</head>
<body>

<div class="drag-hint">Döndürmek İçin Sürükleyin</div>

<div class="info-panel" id="infoPanel">
        <h3 id="infoTitle">Kopolimer Tipi</h3>
        <p id="infoDesc">Yükleniyor...</p>
    </div>

<div class="ui-container">
        <div class="buttons">
            <button onclick="setMode('random')" id="btn-random" class="active">Rastgele</button>
            <button onclick="setMode('block')" id="btn-block">Blok</button>
            <button onclick="setMode('alternating')" id="btn-alternating">Sıralı</button>
            <button onclick="setMode('graft')" id="btn-graft">Aşı</button>
            <button onclick="setMode('crosslinked')" id="btn-crosslinked">Çapraz Bağlı</button>
            <button onclick="setMode('star')" id="btn-star">Yıldız</button>
        </div>
    </div>

let width = window.innerWidth;
        let height = window.innerHeight;
        
        let polymerStructure = []; 
        let crosslinkBridges = []; 
        let allBeadsFlat = []; 
        
        // GÜNCELLEME: Başlangıç değişkeni 'random' yapıldı
        let currentMode = 'random'; 
        
        const FORMATION_SPEED = 4.0; 
        let currentSequence = 0; 
        let spawnTimer = 0;

let angleX = 0, angleY = 0;
        let targetAngleX = 0, targetAngleY = 0;
        const FOCAL_LENGTH = 900;
        let isDragging = false, lastMouseX = 0, lastMouseY = 0;

const BEAD_RADIUS = 15; 
        const SPACING = 42; 
        const COLOR_A = '#22d3ee'; 
        const COLOR_B = '#f472b6'; 
        const COLOR_CORE = '#f59e0b';

// Bilgi Verileri
        const infoData = {
            'random': { title: 'Rastgele (Random) Kopolimer', desc: 'Farklı monomer türleri (A ve B), zincir boyunca rastgele sıralanır.' },
            'block': { title: 'Blok Kopolimer', desc: 'Monomerler uzun bloklar halinde gruplanır (AAAAA-BBBBB).' },
            'alternating': { title: 'Sıralı (Alternating) Kopolimer', desc: 'Monomerler düzenli ve nöbetleşe bir sırayla birbirini takip eder (A-B-A-B).' },
            'graft': { title: 'Aşı (Graft) Kopolimer', desc: 'Ana zincire, farklı tipte monomerlerden oluşan yan dalların aşılanmasıyla oluşur.' },
            'crosslinked': { title: 'Çapraz Bağlı (Crosslinked)', desc: 'Zincirler-arası bağlar yüzünden ağ yapıya sahip polimerlerdir.' },
            'star': { title: 'Yıldız (Star) Kopolimer', desc: 'Merkezi bir çekirdekten dışarıya doğru uzanan kolların oluşturduğu yapıdır.' }
        };

function resize() {
            width = window.innerWidth; 
            height = window.innerHeight;
            canvas.width = width; 
            canvas.height = height;
            if (polymerStructure.length === 0) initSimulation();
        }
        window.addEventListener('resize', resize);

class Bead {
            constructor(tx, ty, tz, type, sequenceIndex, spawnSource) {
                this.tx = tx; this.ty = ty; this.tz = tz;
                this.state = 'WAITING'; 
                this.setupSpawn(spawnSource);
                this.type = type;
                this.sequenceIndex = sequenceIndex;
                this.bondAlpha = 0;
                this.phaseX = Math.random() * Math.PI * 2;
                this.phaseY = Math.random() * Math.PI * 2;
                this.phaseZ = Math.random() * Math.PI * 2;
                this.color = (type === 'CORE') ? COLOR_CORE : (type === 'A' ? COLOR_A : COLOR_B);
                
                if (type === 'CORE') this.baseRadius = BEAD_RADIUS * 2.5;
                else if (type === 'B' && currentMode === 'crosslinked') this.baseRadius = BEAD_RADIUS * 0.6; 
                else this.baseRadius = BEAD_RADIUS;

this.visible = false; this.depth = 0;
            }

setupSpawn(source) {
                const w = width || 1000;
                const h = height || 800;
                const rnd = (Math.random() - 0.5) * 50;

switch(source) {
                    case 'RIGHT':
                        this.x = w * 1.5; this.y = this.ty; this.z = this.tz; break;
                    case 'BOTTOM':
                        this.x = this.tx + rnd; this.y = h * 1.5; this.z = this.tz; break;
                    case 'OMNI':
                        const r = 2500, theta = Math.random()*Math.PI*2, phi = Math.random()*Math.PI;
                        this.x = Math.sin(phi)*Math.cos(theta)*r; this.y = Math.sin(phi)*Math.sin(theta)*r; this.z = Math.cos(phi)*r; break;
                    default:
                        this.x = 0; this.y = 0; this.z = 0;
                }
            }

update(time) {
                if (this.state === 'WAITING') return;
                if (this.state === 'FLYING') {
                    const speed = 0.08 * FORMATION_SPEED; 
                    this.x += (this.tx - this.x) * speed; this.y += (this.ty - this.y) * speed; this.z += (this.tz - this.z) * speed;
                    if (Math.hypot(this.tx - this.x, this.ty - this.y, this.tz - this.z) < 2) this.state = 'FORMED';
                }
                if (this.state === 'FORMED' || this.state === 'FLYING') {
                    if (this.state === 'FORMED' && this.bondAlpha < 1) this.bondAlpha += 0.05 * FORMATION_SPEED;
                    if (this.state === 'FORMED') {
                        const driftAmp = 3, driftSpeed = 0.003; 
                        this.x = this.tx + Math.sin(time * driftSpeed + this.phaseX) * driftAmp;
                        this.y = this.ty + Math.cos(time * driftSpeed + this.phaseY) * driftAmp;
                        this.z = this.tz + Math.sin(time * driftSpeed + this.phaseZ) * driftAmp;
                    }
                }
            }

project(centerX, centerY) {
                if (this.state === 'WAITING') return;
                let x = this.x, y = this.y, z = this.z;
                let x1 = x * Math.cos(angleY) - z * Math.sin(angleY);
                let z1 = z * Math.cos(angleY) + x * Math.sin(angleY);
                let y2 = y * Math.cos(angleX) - z1 * Math.sin(angleX);
                let z2 = z1 * Math.cos(angleX) + y * Math.sin(angleX);
                this.depth = z2;
                if (z2 < -FOCAL_LENGTH + 20) { this.visible = false; return; }
                let scale = FOCAL_LENGTH / (FOCAL_LENGTH - z2);
                this.projX = centerX + x1 * scale; this.projY = centerY + y2 * scale; this.projScale = scale; this.visible = true;
            }

draw(ctx) {
                if (!this.visible || this.projScale < 0.2) return;
                const r = this.baseRadius * this.projScale;
                
                // GLOW REDUCED: 40% Reduction
                // Old: (40 : 20) * scale -> New: (24 : 12) * scale
                if (this.projScale > 0.6) { 
                    ctx.shadowBlur = (this.type === 'CORE' ? 24 : 12) * this.projScale; 
                    ctx.shadowColor = this.color; 
                }

ctx.beginPath(); ctx.arc(this.projX, this.projY, r, 0, Math.PI * 2);
                const grad = ctx.createRadialGradient(this.projX - r*0.3, this.projY - r*0.3, r*0.1, this.projX, this.projY, r);
                grad.addColorStop(0, '#ffffff'); grad.addColorStop(0.3, this.color); grad.addColorStop(1, adjustColorBrightness(this.color, -50)); 
                ctx.fillStyle = grad; ctx.fill(); ctx.shadowBlur = 0;
            }
        }
        function adjustColorBrightness(hex, percent) {
            let num = parseInt(hex.replace("#",""),16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, G = (num >> 8 & 0x00FF) + amt, B = (num & 0x0000FF) + amt;
            return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
        }

function createStructure() {
            polymerStructure = []; crosslinkBridges = []; allBeadsFlat = []; let seq = 0;
            const SPACING_X = SPACING;

if (currentMode === 'crosslinked') {
                const chainConfigs = [ { y: -105, len: 22 }, { y: -35,  len: 28 }, { y: 35,   len: 24 }, { y: 105,  len: 26 } ];
                polymerStructure = [[], [], [], []];
                let maxLen = Math.max(...chainConfigs.map(c => c.len));

// 1. Ana Zincirler
                for (let col = 0; col < maxLen; col++) {
                    for (let c = 0; c < 4; c++) {
                        if (col < chainConfigs[c].len) {
                            let cfg = chainConfigs[c];
                            let startX = -((cfg.len - 1) * SPACING_X) / 2;
                            let tx = startX + col * SPACING_X;
                            let b = new Bead(tx, cfg.y, Math.cos(col * 0.5) * 5, 'A', seq++, 'RIGHT');
                            polymerStructure[c].push(b); allBeadsFlat.push(b);
                        }
                    }
                }

// 2. Homojen Çapraz Bağlar
                const bridgesPerGap = [3, 3, 2];
                for (let gap = 0; gap < 3; gap++) {
                    let topChain = polymerStructure[gap];
                    let bottomChain = polymerStructure[gap+1];
                    let minLen = Math.min(topChain.length, bottomChain.length);
                    let usableStart = 3; let usableEnd = minLen - 3; let usableLen = usableEnd - usableStart;
                    if (usableLen < 1) continue;

let numBridges = bridgesPerGap[gap];
                    let zoneSize = usableLen / numBridges;

for (let b = 0; b < numBridges; b++) {
                        let zoneStartIdx = usableStart + (b * zoneSize);
                        let idx = Math.floor(zoneStartIdx + Math.random() * zoneSize);
                        idx = Math.min(idx, usableEnd - 1);

let topBead = topChain[idx];
                        let bottomBead = bottomChain[idx];
                        let bridgeLen = 3 + Math.floor(Math.random() * 4); 
                        let bridgeChain = [];

for(let k = 1; k <= bridgeLen; k++) {
                            let ratio = k / (bridgeLen + 1);
                            let bx = topBead.tx + (bottomBead.tx - topBead.tx) * ratio;
                            let by = topBead.ty + (bottomBead.ty - topBead.ty) * ratio;
                            let bz = topBead.tz + (bottomBead.tz - topBead.tz) * ratio;
                            bx += (Math.random()-0.5) * 15; bz += (Math.random()-0.5) * 20;
                            let bead = new Bead(bx, by, bz, 'B', seq++, 'BOTTOM');
                            bridgeChain.push(bead); allBeadsFlat.push(bead);
                        }
                        crosslinkBridges.push({ beads: bridgeChain, startParent: topBead, endParent: bottomBead });
                    }
                }
            } 
            else {
                // Diğer Modlar
                const numMonomers = 25; const chainLen = (numMonomers - 1) * SPACING_X; const startX = -chainLen / 2;
                const createLinear = (typeFn) => {
                    let chain = [];
                    for (let i = 0; i < numMonomers; i++) {
                        let tx = startX + i * SPACING_X;
                        let b = new Bead(tx, Math.sin(i*0.3)*30, Math.cos(i*0.3)*30, typeFn(i, numMonomers), seq++, 'RIGHT');
                        chain.push(b); allBeadsFlat.push(b);
                    }
                    polymerStructure.push(chain);
                };

if(currentMode === 'random') createLinear(() => Math.random()>.5?'A':'B');
                else if(currentMode === 'block') createLinear((i,t) => i<t/2?'A':'B');
                else if(currentMode === 'alternating') createLinear(i => i%2==0?'A':'B');
                else if(currentMode === 'graft') {
                    let backbone = [];
                    for(let i=0; i<numMonomers; i++) backbone.push(new Bead(startX+i*SPACING, -20, Math.sin(i*0.5)*15, 'A', seq++, 'RIGHT'));
                    polymerStructure.push(backbone); allBeadsFlat.push(...backbone);
                    for(let i=4; i<numMonomers-3; i+=4) {
                        let root = backbone[i];
                        let branch = [];
                        for(let j=1; j<=5; j++) branch.push(new Bead(root.tx, root.ty+j*SPACING, Math.sin(j)*20+root.tz, 'B', seq++, 'BOTTOM'));
                        polymerStructure.push(branch); allBeadsFlat.push(...branch);
                    }
                }
                else if(currentMode === 'star') {
                    let core = new Bead(0,0,0,'CORE', seq++, 'OMNI');
                    polymerStructure.push([core]); allBeadsFlat.push(core);
                    for(let i=0; i<6; i++) {
                        let angle = (Math.PI*2/6)*i;
                        let arm = [];
                        for(let j=1; j<=6; j++) {
                            let d = (BEAD_RADIUS*3)+j*(SPACING*0.9);
                            arm.push(new Bead(Math.cos(angle)*d, Math.sin(angle*2)*0.5*d, Math.sin(angle)*d, j>3?'B':'A', seq++, 'OMNI'));
                        }
                        polymerStructure.push(arm); allBeadsFlat.push(...arm);
                    }
                }
            }
        }

function initSimulation() {
            currentSequence = -1; spawnTimer = 0;
            angleX = 0; targetAngleX = 0; angleY = 0; targetAngleY = 0;
            createStructure();
        }

function animate(time) {
            ctx.clearRect(0, 0, width, height);
            spawnTimer += 1;
            if (spawnTimer > (6.0 - FORMATION_SPEED)) { 
                currentSequence++;
                spawnTimer = 0;
                allBeadsFlat.forEach(b => {
                    if (b.sequenceIndex === currentSequence) b.state = 'FLYING';
                });
            }

angleX += (targetAngleX - angleX) * 0.05; angleY += (targetAngleY - angleY) * 0.05;
            let cx = width / 2; let cy = height / 2 - 50;

allBeadsFlat.forEach(b => { b.update(time); b.project(cx, cy); });
            allBeadsFlat.sort((a, b) => a.depth - b.depth);

ctx.lineCap = 'round';
            for(let chain of polymerStructure) {
                for(let i=0; i<chain.length; i++) {
                    let curr = chain[i]; let prev = null;
                    if(i > 0) prev = chain[i-1];
                    else if(i===0 && polymerStructure.length>1 && chain!==polymerStructure[0] && currentMode!=='crosslinked') {
                         if(currentMode==='star') prev = polymerStructure[0][0];
                         else if(currentMode==='graft') prev = polymerStructure[0].find(b => Math.abs(b.tx - curr.tx)<1);
                    }
                    if(prev && checkVis(prev, curr)) drawBond(ctx, prev, curr);
                }
            }
            if (currentMode === 'crosslinked') {
                crosslinkBridges.forEach(bridge => {
                    if (bridge.beads.length > 0) {
                        if (checkVis(bridge.startParent, bridge.beads[0])) drawBond(ctx, bridge.startParent, bridge.beads[0], true);
                    }
                    for (let i = 1; i < bridge.beads.length; i++) {
                        let prev = bridge.beads[i-1]; let curr = bridge.beads[i];
                        if (checkVis(prev, curr)) drawBond(ctx, prev, curr, true);
                    }
                    if (bridge.beads.length > 0) {
                        let last = bridge.beads[bridge.beads.length-1];
                        if (checkVis(last, bridge.endParent)) drawBond(ctx, last, bridge.endParent, true);
                    }
                });
            }
            allBeadsFlat.forEach(b => b.draw(ctx));
            requestAnimationFrame(animate);
        }

function setMode(mode) {
            currentMode = mode;
            document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
            document.getElementById(`btn-${mode}`).classList.add('active');
            
            if(infoData[mode]) {
                document.getElementById('infoTitle').innerText = infoData[mode].title;
                document.getElementById('infoDesc').innerText = infoData[mode].desc;
            }

initSimulation();
        }

resize();
        // GÜNCELLEME: Başlangıç fonksiyon çağrısı 'random' yapıldı
        setMode('random');
        
        requestAnimationFrame(animate);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Misel SİMÜLATÖRÜ</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #020202;
            color: #e0e0e0;
            font-family: 'Segoe UI', Roboto, sans-serif;
            overflow: hidden;
            display: flex;
            height: 100vh;
            user-select: none;
        }

canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);
            cursor: grab;
        }
        
        canvas:active { cursor: grabbing; }

/* --- YENİ EKLENEN KAYAN BANT STİLLERİ --- */
        .news-ticker-strip {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px; /* İnce bir şerit yüksekliği */
            background-color: rgba(255, 0, 0, 0.4); /* %50 Transparan Kırmızı Arka Plan */
            color: #ffffff; /* Beyaz Yazı Rengi */
            z-index: 100; /* En üstte görünsün */
            overflow: hidden; /* Taşmayı gizle */
            /* ÖNEMLİ: Bantın altındaki canvas'a tıklamayı engellememesi için */
            pointer-events: none; 
            display: flex;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* Hafif bir derinlik gölgesi */
        }

.news-ticker-content {
            display: inline-block;
            white-space: nowrap; /* Metnin tek satırda kalmasını sağlar */
            
            /* Animasyon başlangıcında metni ekranın sağ dışına iter */
            padding-left: 100%; 
            
            /* Kayma animasyonu: 30 saniye sürer, lineer hızda, sonsuz döngü */
            animation: ticker-scroll 28s linear infinite;
            
            font-weight: 800;
            font-size: 1.1rem;
            letter-spacing: 1.5px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Okunabilirlik için hafif gölge */
        }

/* Kayma Animasyonu Keyframes */
        @keyframes ticker-scroll {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                /* Metni kendi genişliğinin %100'ü kadar sola kaydırır */
                transform: translate3d(-100%, 0, 0); 
            }
        }
        /* ---------------------------------------- */

#controls {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 340px;
            
            /* --- DÜZELTİLDİ: YARI SAYDAM (TRANSPARAN) SARI --- */
            /* Opaklık 0.25'e çekildi (Daha şeffaf) */
            background: rgba(30, 28, 5, 0.25);
            
            /* Buzlu cam efekti */
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            
            padding: 25px;
            border-radius: 16px;
            border: 1px solid rgba(255, 215, 0, 0.15); /* İnce altın çerçeve */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            z-index: 10;
        }

h2 {
            margin: 0 0 15px 0;
            font-size: 1.1rem;
            color: #ffffff; 
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 10px;
            text-align: center;
        }

.control-group { margin-bottom: 18px; }

label {
            display: flex; justify-content: space-between;
            font-size: 0.8rem; color: #eec; /* Biraz daha parlak sarımsı beyaz */
            margin-bottom: 8px; font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,0.9); /* Okunabilirlik için gölge */
        }

.radio-group {
            display: flex; gap: 15px;
            background: rgba(0,0,0,0.4); /* Buton grubu zemini */
            padding: 10px; border-radius: 8px;
            border: 1px solid rgba(255,215,0,0.1);
        }

.radio-container {
            display: flex; align-items: center; cursor: pointer;
            font-size: 0.8rem; color: #ccc; position: relative;
            padding-left: 25px; margin-bottom: 0;
            text-shadow: 0 1px 2px rgba(0,0,0,1);
        }

.radio-container input { position: absolute; opacity: 0; cursor: pointer; }

.checkmark {
            position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            height: 16px; width: 16px; background-color: rgba(0,0,0,0.5);
            border-radius: 50%; transition: 0.2s; border: 1px solid rgba(255,215,0,0.3);
        }

.radio-container:hover input ~ .checkmark { background-color: rgba(255,215,0,0.1); }
        .radio-container input:checked ~ .checkmark { background-color: #00d2ff; border-color: #00d2ff;}
        .radio-container.organic input:checked ~ .checkmark { background-color: #ffaa00; border-color: #ffaa00;}

/* SLIDER GENEL CSS */
        input[type=range] { 
            -webkit-appearance: none; 
            width: 100%; 
            background: transparent; 
        }
        
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 4px; cursor: pointer;
            background: rgba(255, 215, 0, 0.15); border-radius: 2px;
        }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; 
            height: 16px; 
            width: 16px;
            border-radius: 50%; 
            cursor: pointer; 
            margin-top: -6px;
            background: #e6c200; 
            box-shadow: 0 0 10px rgba(0,0,0,0.8);
            border: 1px solid rgba(255,255,255,0.2);
            transform: scale(var(--thumb-scale, 1)); 
            transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        }
        
        input[type=range]::-webkit-slider-thumb:hover { 
            filter: brightness(1.2); 
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        }

/* --- ÖZEL BUTON RENKLERİ --- */
        #inp-philic::-webkit-slider-thumb { background: #00ffff; box-shadow: 0 0 5px #00ffff; border:none;}
        #inp-phobic::-webkit-slider-thumb { background: #ff0055; box-shadow: 0 0 5px #ff0055; border:none;}
        
        /* SICAKLIK SLIDER (Dinamik Renk) */
        #inp-speed::-webkit-slider-thumb { 
            background: var(--thumb-color, #ffffff); 
            box-shadow: 0 0 8px var(--thumb-color, #ffffff); 
            border: none;
            transition: background 0.3s, box-shadow 0.3s, transform 0.1s;
        }
        
        #inp-count::-webkit-slider-thumb { background: #ffffff; box-shadow: 0 0 8px #ffffff; border:none;}
        #inp-attract::-webkit-slider-thumb { background: #ffffff; box-shadow: 0 0 8px #ffffff; border:none;}

/* --- SAYISAL DEĞER KUTUSU --- */
        .value-badge {
            background: rgba(0,0,0,0.6); /* Daha şeffaf badge */
            padding: 2px 8px;
            border-radius: 6px; 
            font-size: 0.75rem; 
            color: #ffffff; 
            min-width: 25px; 
            text-align: center; 
            border: 1px solid rgba(255,215,0,0.2);
        }
        
        .value-badge.warning {
            color: #ff3333; 
            border-color: #ff3333; 
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(255, 50, 50, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0); }
        }

.sub-title {
            font-size: 0.7rem; color: #a89f80; text-transform: uppercase;
            margin-top: 15px; margin-bottom: 10px; letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0,0,0,1);
            font-weight: bold;
        }

.legend {
            margin-top: 20px; display: flex; flex-direction: column; gap: 8px;
            font-size: 0.75rem; color: #aaa; text-shadow: 0 1px 2px rgba(0,0,0,1);
        }
        .legend-item { display: flex; align-items: center; justify-content: space-between; }
        .legend-label { display: flex; align-items: center; }
        .dot { width: 8px; height: 8px; border-radius: 50%; display:inline-block; margin-right:8px;}
    </style>
</head>
<body>

<div id="controls">
        <h2>MİSEL OLUŞUM SİMÜLATÖRÜ</h2>
        
        <div class="control-group">
            <label style="margin-bottom:10px;">Çözücü Ortamı</label>
            <div class="radio-group">
                <label class="radio-container">
                    <input type="radio" name="phase" value="water" checked>
                    <span class="checkmark"></span> Su
                </label>
                <label class="radio-container organic">
                    <input type="radio" name="phase" value="organic">
                    <span class="checkmark"></span> Organik
                </label>
            </div>
        </div>

<div class="sub-title">Moleküler Yapı</div>

<div class="control-group">
            <label>Hidrofilik Segment (Mavi) <span class="value-badge" id="val-philic">10</span></label>
            <input type="range" id="inp-philic" min="1" max="15" value="10">
        </div>

<div class="control-group">
            <label>Hidrofobik Segment (Kırmızı) <span class="value-badge" id="val-phobic">10</span></label>
            <input type="range" id="inp-phobic" min="1" max="15" value="10">
        </div>

<div class="control-group">
            <label>Zincir Sayısı <span class="value-badge" id="val-count">20</span></label>
            <input type="range" id="inp-count" min="10" max="65" value="20">
        </div>

<div class="sub-title">Ortam & Fizik</div>

<div class="control-group">
            <label>Etkileşim Miktarı <span class="value-badge" id="val-attract">10%</span></label>
            <input type="range" id="inp-attract" min="0" max="100" value="10">
        </div>
        
        <div class="control-group">
            <label>Sıcaklık <span class="value-badge" id="val-speed">9%</span></label>
            <input type="range" id="inp-speed" min="0" max="100" value="9">
        </div>

<div class="legend">
            <div class="legend-item">
                <div class="legend-label"><span class="dot" style="background:#00ffff; box-shadow:0 0 3px #00ffff"></span>Hidrofilik Segment</div>
            </div>
            <div class="legend-item">
                <div class="legend-label"><span class="dot" style="background:#ff0055; box-shadow:0 0 3px #ff0055"></span>Hidrofobik Segment</div>
            </div>
            <div class="legend-item">
                <div class="legend-label"><span class="dot" id="legend-solvent" style="background:rgba(200, 240, 255, 0.8)"></span>Çözücü</div>
            </div>
        </div>
    </div>

<div class="news-ticker-strip">
        <div class="news-ticker-content">
             ZİNCİRLERARASI ETKİLEŞİMİ ARTIRIN | SEGMENT MİKTARLARINI DEĞİŞTİRİN | MOLEKÜLLERİ TUTUP SÜRÜKLEYİN | ÇÖZÜCÜ ORTAMINI DEĞİŞTİRİN | SICAKLIK DEĞERLERİNİN ETKİSİNİ GÖRÜN (YÜKSEK SICAKLIKLARDA MİSELLERİN DAĞILDIĞINI GÖZLEMLEYİN)
        </div>
    </div>

function updatePanelBounds() {
            const rect = controlPanel.getBoundingClientRect();
            panelBounds.w = rect.right + 10;
            panelBounds.h = rect.bottom + 10;
        }

const config = {
            phase: 'water',       
            
            chainCount: 20,
            philicLength: 10,      
            phobicLength: 10,      
            
            solventCount: 300, 
            beadRadius: 5,        
            bondDistance: 12,
            
            attractionStrength: 0.03, 
            repulsionStrength: 2.0,   
            springStiffness: 0.15, 
            
            friction: 0.2,       
            baseSpeed: 0.005,
            
            isOverheated: false
        };

let chains = [];
        let allPolymers = []; 
        let solvents = [];     
        let dragNode = null;
        let hoverNode = null;
        let mouseX = 0, mouseY = 0;

const uiPhilic = document.getElementById('inp-philic');
        const uiPhobic = document.getElementById('inp-phobic');
        const uiCount = document.getElementById('inp-count');
        const uiAttract = document.getElementById('inp-attract');
        const uiSpeed = document.getElementById('inp-speed');
        const valSpeed = document.getElementById('val-speed');
        const radios = document.getElementsByName('phase');
        const legendSolvent = document.getElementById('legend-solvent');

function updateThumbSize(element) {
            const min = parseFloat(element.min);
            const max = parseFloat(element.max);
            const val = parseFloat(element.value);
            const percentage = (val - min) / (max - min);
            const scale = 0.8 + (percentage * 0.8);
            element.style.setProperty('--thumb-scale', scale);
        }

radios.forEach(radio => {
            radio.addEventListener('change', (e) => {
                config.phase = e.target.value;
                if(config.phase === 'water') {
                    legendSolvent.style.background = 'rgba(200, 240, 255, 0.5)';
                } else {
                    legendSolvent.style.background = 'rgba(255, 200, 100, 0.5)';
                }
            });
        });

uiPhilic.addEventListener('input', (e) => {
            config.philicLength = parseInt(e.target.value);
            document.getElementById('val-philic').innerText = config.philicLength;
            updateThumbSize(e.target);
            init();
        });

uiPhobic.addEventListener('input', (e) => {
            config.phobicLength = parseInt(e.target.value);
            document.getElementById('val-phobic').innerText = config.phobicLength;
            updateThumbSize(e.target);
            init();
        });

uiCount.addEventListener('input', (e) => {
            config.chainCount = parseInt(e.target.value);
            document.getElementById('val-count').innerText = config.chainCount;
            updateThumbSize(e.target);
            init();
        });

uiAttract.addEventListener('input', (e) => {
            const val = parseInt(e.target.value);
            document.getElementById('val-attract').innerText = val + "%";
            config.attractionStrength = (val / 100) * 0.3;
            updateThumbSize(e.target);
        });
        
        uiSpeed.addEventListener('input', (e) => {
            const val = parseInt(e.target.value);
            updateThumbSize(e.target);
            
            // --- RENK MANTIĞI ---
            let color = '#ffffff'; 
            if (val >= 30 && val < 60) color = '#ffdd00'; 
            else if (val >= 60 && val < 90) color = '#ff8800'; 
            else if (val >= 90) color = '#ff0000';

uiSpeed.style.setProperty('--thumb-color', color);

if (val > 90) {
                config.isOverheated = true;
                valSpeed.innerText = "⚠️ " + val + "%";
                valSpeed.classList.add('warning');
            } else {
                config.isOverheated = false;
                valSpeed.innerText = val + "%";
                valSpeed.classList.remove('warning');
            }
            
            if (val < 4) {
                config.baseSpeed = 0;   
                config.friction = 0.2;   
            } else {
                const normalized = (val - 4) / 96;
                config.baseSpeed = (normalized * normalized) * 3.0; 
                config.friction = 0.50 + (normalized * 0.40);
            }
        });

class Node {
            constructor(x, y, type) {
                this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.type = type; 
            }
        }

class Chain {
            constructor(startX, startY) {
                this.nodes = [];
                for(let i=0; i<config.philicLength; i++) {
                    this.nodes.push(new Node(startX + i*8, startY, 0));
                }
                for(let i=0; i<config.phobicLength; i++) {
                    let offsetX = (config.philicLength + i) * 8;
                    this.nodes.push(new Node(startX + offsetX, startY, 1));
                }
            }
        }
        
        class Solvent {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.size = Math.random() * 2 + 1;
                this.alpha = Math.random() * 0.6 + 0.3; 
            }
            update() {
                this.x += this.vx; this.y += this.vy;
                if(this.x < 0) this.x = width; if(this.x > width) this.x = 0;
                if(this.y < 0) this.y = height; if(this.y > height) this.y = 0;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
                if (config.phase === 'water') ctx.fillStyle = `rgba(200, 240, 255, ${this.alpha})`;
                else ctx.fillStyle = `rgba(255, 200, 150, ${this.alpha})`;
                ctx.fill();
            }
        }

function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
            updatePanelBounds();
        }
        window.addEventListener('resize', resize);
        resize();
        setTimeout(updatePanelBounds, 500);

function initSolvents() {
            solvents = [];
            for(let i=0; i<config.solventCount; i++) {
                solvents.push(new Solvent());
            }
        }

chains.push(new Chain(x, y));
            }
            allPolymers = [];
            chains.forEach(c => allPolymers.push(...c.nodes));
            if(solvents.length === 0) initSolvents();
            
            [uiPhilic, uiPhobic, uiCount, uiAttract, uiSpeed].forEach(el => updateThumbSize(el));
            uiSpeed.dispatchEvent(new Event('input'));
        }

function getMousePos(e) {
            const r = canvas.getBoundingClientRect();
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            const clientY = e.touches ? e.touches[0].clientY : e.clientY;
            return { x: clientX - r.left, y: clientY - r.top };
        }
        function handleStart(e) {
            const pos = getMousePos(e); mouseX = pos.x; mouseY = pos.y;
            // UI üzerine tıklamayı engelle
            if (mouseX < panelBounds.w && mouseY < panelBounds.h) return;

canvas.addEventListener('mousedown', handleStart);
        canvas.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);
        canvas.addEventListener('touchstart', handleStart, {passive: false});
        canvas.addEventListener('touchmove', (e) => { e.preventDefault(); handleMove(e); }, {passive: false});
        window.addEventListener('touchend', handleEnd);

function updatePhysics() {
            if(dragNode) { dragNode.x = mouseX; dragNode.y = mouseY; dragNode.vx=0; dragNode.vy=0; }
            const isWater = config.phase === 'water';

for(let i=0; i<allPolymers.length; i++) {
                let n1 = allPolymers[i];
                for(let j=i+1; j<allPolymers.length; j++) {
                    let n2 = allPolymers[j];
                    const dx = n2.x - n1.x; const dy = n2.y - n1.y;
                    const distSq = dx*dx + dy*dy;
                    if (distSq > 10000) continue; 
                    const dist = Math.sqrt(distSq);
                    if (dist < 0.1) continue;

if(n1 !== dragNode) { n1.vx += fx; n1.vy += fy; }
                    if(n2 !== dragNode) { n2.vx -= fx; n2.vy -= fy; }
                }
            }

for(let c of chains) {
                for(let i=0; i<c.nodes.length - 1; i++) {
                    let n1 = c.nodes[i]; let n2 = c.nodes[i+1];
                    const dx = n2.x - n1.x; const dy = n2.y - n1.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    const force = (dist - config.bondDistance) * config.springStiffness;
                    const fx = (dx/dist) * force; const fy = (dy/dist) * force;
                    if(n1 !== dragNode) { n1.vx += fx; n1.vy += fy; }
                    if(n2 !== dragNode) { n2.vx -= fx; n2.vy -= fy; }
                }
            }

for(let node of allPolymers) {
                if(node === dragNode) continue;
                
                node.vx *= config.friction; node.vy *= config.friction;
                if (config.baseSpeed > 0) {
                    const kick = config.baseSpeed * 0.2; 
                    node.vx += (Math.random() - 0.5) * kick;
                    node.vy += (Math.random() - 0.5) * kick;
                } 
                if (Math.abs(node.vx) < 0.005) node.vx = 0;
                if (Math.abs(node.vy) < 0.005) node.vy = 0;

node.x += node.vx; node.y += node.vy;
                
                // --- HARD WALL (KESİN SINIR) ---
                // Panelin sınırları + radius kadar pay
                const pad = config.beadRadius + 2; 
                
                // Sadece panelin kapladığı alana girmeyi yasakla
                if (node.x < panelBounds.w + pad && node.y < panelBounds.h + pad) {
                    
                    const distToRight = (panelBounds.w + pad) - node.x;
                    const distToBottom = (panelBounds.h + pad) - node.y;
                    
                    // Hangisi daha yakınsa o tarafa at
                    if (distToRight < distToBottom) {
                        node.x = panelBounds.w + pad;
                        if(node.vx < 0) node.vx *= -1; // Yansıma
                    } else {
                        node.y = panelBounds.h + pad;
                        if(node.vy < 0) node.vy *= -1; // Yansıma
                    }
                }

if(node.x < config.beadRadius) { node.x = config.beadRadius; node.vx *= -1; }
                if(node.x > width - config.beadRadius) { node.x = width - config.beadRadius; node.vx *= -1; }
                if(node.y < config.beadRadius) { node.y = config.beadRadius; node.vy *= -1; }
                if(node.y > height - config.beadRadius) { node.y = height - config.beadRadius; node.vy *= -1; }
            }
            for(let s of solvents) s.update();
        }

function draw() {
            ctx.clearRect(0, 0, width, height);
            for(let s of solvents) s.draw();

ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
            ctx.beginPath();
            for(let c of chains) {
                if(c.nodes.length > 0) {
                    ctx.moveTo(c.nodes[0].x, c.nodes[0].y);
                    for(let i=1; i<c.nodes.length; i++) { ctx.lineTo(c.nodes[i].x, c.nodes[i].y); }
                }
            }
            ctx.stroke();

ctx.shadowBlur = 5; ctx.shadowColor = "#00ffff"; ctx.fillStyle = "#00ffff";
            ctx.beginPath();
            for(let n of allPolymers) {
                if(n.type === 0) { 
                    let r = config.beadRadius;
                    if(n === dragNode || n === hoverNode) r *= 1.4;
                    ctx.moveTo(n.x + r, n.y); ctx.arc(n.x, n.y, r, 0, Math.PI*2);
                }
            }
            ctx.fill();

ctx.shadowBlur = 5; ctx.shadowColor = "#ff0055"; ctx.fillStyle = "#ff0055";
            ctx.beginPath();
            for(let n of allPolymers) {
                if(n.type === 1) { 
                    let r = config.beadRadius;
                    if(n === dragNode || n === hoverNode) r *= 1.4;
                    ctx.moveTo(n.x + r, n.y); ctx.arc(n.x, n.y, r, 0, Math.PI*2);
                }
            }
            ctx.fill();
            ctx.shadowBlur = 0;
            
            if(dragNode) {
                ctx.strokeStyle = "rgba(255,255,255,0.5)"; ctx.setLineDash([5, 5]);
                ctx.beginPath(); ctx.moveTo(dragNode.x, dragNode.y); ctx.lineTo(mouseX, mouseY);
                ctx.stroke(); ctx.setLineDash([]);
            }
        }

function loop() {
            updatePhysics();
            draw();
            requestAnimationFrame(loop);
        }

init();
        loop();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tek Zincir Nanoparçacık Dinamiği</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #020202;
            color: #e0e0e0;
            font-family: 'Segoe UI', sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            user-select: none;
        }

#canvas-container {
            position: relative;
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
            cursor: grab;
        }
        
        #canvas-container:active { cursor: grabbing; }

canvas {
            box-shadow: 0 0 50px rgba(100, 200, 255, 0.1);
            border-radius: 12px;
            display: block; /* Canvas'ın göründüğünden emin olmak için */
        }

#controls {
            height: 20%;
            width: 90%;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            z-index: 10;
            background: rgba(20, 20, 30, 0.95);
            padding: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px 20px 0 0;
            backdrop-filter: blur(12px);
        }

.slider-wrapper { width: 100%; position: relative; padding: 10px 0; }

input[type=range] {
            -webkit-appearance: none; width: 100%; height: 8px;
            background: linear-gradient(90deg, #00d2ff 20%, #00ff73 50%, #ff006a 80%);
            border-radius: 10px; outline: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }

input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 30px; height: 30px; border-radius: 50%;
            background: #fff; cursor: pointer;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
            border: 3px solid #333; transition: transform 0.2s;
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.labels {
            display: flex; justify-content: space-between; width: 100%; margin-top: 10px;
            font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #666;
        }

.label-box { flex: 1; text-align: center; padding: 8px; border-radius: 8px; transition: all 0.5s ease; }
        .sub-label { display: block; font-size: 0.8em; opacity: 0.7; font-weight: 400; margin-top: 3px; text-transform: none; color: #aaa; }

.active-blue { color: #00d2ff; background: rgba(0, 210, 255, 0.1); border: 1px solid rgba(0, 210, 255, 0.2); }
        .active-green { color: #00ff73; background: rgba(0, 255, 115, 0.1); border: 1px solid rgba(0, 255, 115, 0.2); }
        .active-red { color: #ff006a; background: rgba(255, 0, 106, 0.1); border: 1px solid rgba(255, 0, 106, 0.2); }

#status {
            font-size: 1.15rem; color: #ddd; min-height: 1.5em; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>

<div id="controls">
        <div id="status">Simülasyon Hazır</div>
        <div class="slider-wrapper">
            <input type="range" id="concentrationSlider" min="0" max="100" value="50" step="0.1">
            <div class="labels">
                <div id="lbl-dilute" class="label-box">Seyreltik<span class="sub-label">(C>1 mg/mL)</span></div>
                <div id="lbl-equil" class="label-box">Denge<span class="sub-label">(C=1 mg/mL)</span></div>
                <div id="lbl-conc" class="label-box">Derişik<span class="sub-label">(C<<1)</span></div>
            </div>
        </div>
    </div>

let width, height;
        const chains = [];
        const solvents = []; 
        const numChains = 5;
        const nodesPerChain = 60; 
        const nodeRadius = 3; 
        const colors = ['#00d2ff', '#00ff73', '#ff006a', '#ffea00', '#a600ff'];

let targetSliderValue = 50; 
        let currentSimulationValue = 50; 
        const friction = 0.96; 
        const maxSpeed = 1.0; 
        const k_spring = 0.09; 
        const repulsionRadius = 11; 
        let draggedNode = null;

// --- SOLVENT CLASS ---
        class Solvent {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 2.0; 
                this.vy = (Math.random() - 0.5) * 2.0;
                this.size = Math.random() * 2.0 + 1.5; 
                this.opacity = Math.random() * 0.4 + 0.4; 
                this.mass = 0.5;
            }
            update() {
                this.x += this.vx; this.y += this.vy;
                if (this.x < 0) this.x = width; if (this.x > width) this.x = 0;
                if (this.y < 0) this.y = height; if (this.y > height) this.y = 0;
            }
            draw() {
                ctx.fillStyle = `rgba(220, 240, 255, ${this.opacity})`;
                ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
            }
        }

// --- NODE CLASS ---
        class Node {
            constructor(x, y, chainId, color, isFunctional) {
                this.x = x; this.y = y;
                this.oldX = x; this.oldY = y;
                this.chainId = chainId;
                this.color = color;
                this.isFunctional = isFunctional; 
                this.mass = 2.0; 
            }

update() {
                if (this === draggedNode) return;

// --- CHAIN CLASS ---
        class Chain {
            constructor(id, anchorX, anchorY, color) {
                this.id = id; this.anchorX = anchorX; this.anchorY = anchorY;
                this.nodes = []; this.color = color;
                
                const functionalIndices = new Set();
                while(functionalIndices.size < 6) {
                    const idx = Math.floor(Math.random() * nodesPerChain);
                    let tooClose = false;
                    for (let existing of functionalIndices) if (Math.abs(existing - idx) < 4) tooClose = true;
                    if (!tooClose) functionalIndices.add(idx);
                }

const primaryAngle = Math.random() * Math.PI * 2;
                let currentX = anchorX; let currentY = anchorY;

for (let i = 0; i < nodesPerChain; i++) {
                    const isFunc = functionalIndices.has(i); 
                    if (i === 0) { this.nodes.push(new Node(currentX, currentY, id, color, isFunc)); continue; }
                    
                    const wiggle = (Math.random() - 0.5) * 1.5; 
                    currentX += Math.cos(primaryAngle + wiggle) * 7;
                    currentY += Math.sin(primaryAngle + wiggle) * 7;
                    
                    if (currentX < 20 || currentX > width - 20 || currentY < 20 || currentY > height - 20) {
                       currentX -= Math.cos(primaryAngle + wiggle) * 14; 
                       currentY -= Math.sin(primaryAngle + wiggle) * 14;
                    }
                    this.nodes.push(new Node(currentX, currentY, id, color, isFunc));
                }
            }

draw() {
                ctx.beginPath(); ctx.strokeStyle = this.color; ctx.lineWidth = 3; 
                ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.shadowBlur = 15;
                ctx.shadowColor = this.color; ctx.globalAlpha = 0.9;

if (this.nodes.length > 0) {
                    ctx.moveTo(this.nodes[0].x, this.nodes[0].y);
                    for (let i = 1; i < this.nodes.length; i++) {
                         let xc = (this.nodes[i].x + this.nodes[i-1].x) / 2;
                         let yc = (this.nodes[i].y + this.nodes[i-1].y) / 2;
                         ctx.quadraticCurveTo(this.nodes[i-1].x, this.nodes[i-1].y, xc, yc);
                    }
                    ctx.lineTo(this.nodes[this.nodes.length-1].x, this.nodes[this.nodes.length-1].y);
                }
                ctx.stroke(); ctx.shadowBlur = 0; ctx.globalAlpha = 1.0;

for (let node of this.nodes) {
                    ctx.beginPath();
                    if (node === draggedNode) {
                        ctx.fillStyle = "#ffffff"; ctx.arc(node.x, node.y, nodeRadius + 4, 0, Math.PI * 2);
                        ctx.shadowColor = "#ffffff"; ctx.shadowBlur = 15;
                    } else if (node.isFunctional) {
                        ctx.fillStyle = "#ff0000"; ctx.arc(node.x, node.y, nodeRadius + 1.5, 0, Math.PI * 2);
                        ctx.shadowColor = "#ff0000"; ctx.shadowBlur = 10;
                    } else {
                        ctx.fillStyle = "#fff"; ctx.arc(node.x, node.y, nodeRadius, 0, Math.PI * 2);
                        ctx.shadowBlur = 0;
                    }
                    ctx.fill(); ctx.shadowBlur = 0; 
                }
            }
        }

// --- FİZİK MOTORU ---
        function manageSolvents(val) {
            const targetSolventCount = Math.floor(400 - (val * 3.8)); 
            if (solvents.length < targetSolventCount) {
                for(let i=0; i<8; i++) if(solvents.length < targetSolventCount) solvents.push(new Solvent());
            } else if (solvents.length > targetSolventCount) {
                for(let i=0; i<8; i++) if(solvents.length > targetSolventCount) solvents.pop();
            }
        }

function applyForces() {
            currentSimulationValue += (targetSliderValue - currentSimulationValue) * 0.02;
            const val = currentSimulationValue;
            const centerX = width / 2;
            const centerY = height / 2;
            const allNodes = chains.flatMap(c => c.nodes);

manageSolvents(val);
            solveCollisions(allNodes);

// ZİNCİR BAĞLARI
            for (let chain of chains) {
                for (let i = 0; i < chain.nodes.length - 1; i++) {
                    const n1 = chain.nodes[i]; const n2 = chain.nodes[i+1];
                    const dx = n2.x - n1.x; const dy = n2.y - n1.y;
                    const dist = Math.sqrt(dx*dx + dy*dy) || 1;
                    const force = (dist - 7) * k_spring; 
                    const fx = (dx/dist) * force; const fy = (dy/dist) * force;
                    if (n1 !== draggedNode) { n1.x += fx; n1.y += fy; }
                    if (n2 !== draggedNode) { n2.x -= fx; n2.y -= fy; }
                }
            }

// FAZ 1: SEYRELTİK
            if (val < 35) {
                const intensity = (35 - val) / 35; 
                for (let chain of chains) {
                    let cx = 0, cy = 0;
                    for(let n of chain.nodes) { cx += n.x; cy += n.y; }
                    cx /= chain.nodes.length; cy /= chain.nodes.length;
                    for (let node of chain.nodes) {
                        if (node === draggedNode) continue;
                        node.x += (cx - node.x) * 0.015 * intensity;
                        node.y += (cy - node.y) * 0.015 * intensity;
                        node.x += (chain.anchorX - node.x) * 0.005;
                        node.y += (chain.anchorY - node.y) * 0.005;
                    }
                }
            }
            // FAZ 2: DENGE
            else if (val >= 35 && val <= 65) {
                let transitionFactor = 1;
                if(val < 40) transitionFactor = (val-35)/5;
                if(val > 60) transitionFactor = (65-val)/5;
                for (let chain of chains) {
                    for (let i = 0; i < chain.nodes.length; i++) {
                        let node = chain.nodes[i];
                        if (node === draggedNode) continue;
                        node.x += (chain.anchorX - node.x) * 0.0003 * transitionFactor;
                        node.y += (chain.anchorY - node.y) * 0.0003 * transitionFactor;
                        for (let j = i + 4; j < chain.nodes.length; j+=2) { 
                            let other = chain.nodes[j];
                            let dx = other.x - node.x; let dy = other.y - node.y;
                            let d2 = dx*dx + dy*dy;
                            if (d2 < 4900 && d2 > 1) { 
                                let d = Math.sqrt(d2);
                                let f = (70 - d) * 0.0008 * transitionFactor; 
                                let nx = dx/d; let ny = dy/d;
                                node.x -= nx*f; node.y -= ny*f;
                                if (other !== draggedNode) { other.x += nx*f; other.y += ny*f; }
                            }
                        }
                    }
                    for(let i=0; i<chain.nodes.length-2; i++){
                        let n1 = chain.nodes[i]; let n3 = chain.nodes[i+2];
                        let dx = n3.x - n1.x; let dy = n3.y - n1.y;
                        let d = Math.sqrt(dx*dx+dy*dy) || 1;
                        if(d < 12) { 
                            let f = (12 - d) * 0.005 * transitionFactor; 
                            if(n1 !== draggedNode) { n1.x -= (dx/d)*f; n1.y -= (dy/d)*f; }
                            if(n3 !== draggedNode) { n3.x += (dx/d)*f; n3.y += (dy/d)*f; }
                        }
                    }
                }
            }
            // FAZ 3: DERİŞİK
            else {
                const intensity = (val - 65) / 35;
                for (let i = 0; i < allNodes.length; i++) {
                    let n1 = allNodes[i];
                    if (n1 === draggedNode) continue;
                    n1.x += (centerX - n1.x) * 0.0015 * intensity;
                    n1.y += (centerY - n1.y) * 0.0015 * intensity;
                    for (let j = i + 1; j < allNodes.length; j++) {
                        let n2 = allNodes[j];
                        if (n1.chainId !== n2.chainId) {
                            let dx = n2.x - n1.x; let dy = n2.y - n1.y;
                            let dist = Math.sqrt(dx*dx + dy*dy) || 1;
                            if (dist < 150) { 
                                let f = 0.0015 * intensity * (1 - dist/150); 
                                n1.x += (dx/dist)*f; n1.y += (dy/dist)*f;
                                if(n2 !== draggedNode) { n2.x -= (dx/dist)*f; n2.y -= (dy/dist)*f; }
                            }
                        }
                    }
                }
            }

// EVRENSEL İTME
            for (let i = 0; i < allNodes.length; i++) {
                for (let j = i + 1; j < allNodes.length; j++) {
                    let n1 = allNodes[i]; let n2 = allNodes[j];
                    let dx = n2.x - n1.x; let dy = n2.y - n1.y;
                    let dist = Math.sqrt(dx*dx + dy*dy) || 1;
                    if (dist < repulsionRadius) {
                        let force = (repulsionRadius - dist) * 0.1;
                        let nx = dx/dist; let ny = dy/dist;
                        if(n1 !== draggedNode) { n1.x -= nx * force; n1.y -= ny * force; }
                        if(n2 !== draggedNode) { n2.x += nx * force; n2.y += ny * force; }
                    }
                }
            }
        }

// MOUSE
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            let closestDist = 30; 
            let closestNode = null;
            for (let chain of chains) {
                for (let node of chain.nodes) {
                    const dx = node.x - mouseX; const dy = node.y - mouseY;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < closestDist) { closestDist = dist; closestNode = node; }
                }
            }
            draggedNode = closestNode;
        });

canvas.addEventListener('mousemove', (e) => {
            if (draggedNode) {
                const rect = canvas.getBoundingClientRect();
                draggedNode.x = e.clientX - rect.left;
                draggedNode.y = e.clientY - rect.top;
                draggedNode.oldX = draggedNode.x; draggedNode.oldY = draggedNode.y;
            }
        });

window.addEventListener('mouseup', () => { draggedNode = null; });

// SETUP
        function init() {
            resize(); 
            chains.length = 0;
            const anchors = [
                {x: width * 0.2, y: height * 0.25}, {x: width * 0.8, y: height * 0.25},
                {x: width * 0.5, y: height * 0.55},
                {x: width * 0.25, y: height * 0.8}, {x: width * 0.75, y: height * 0.8}
            ];
            for (let i = 0; i < numChains; i++) chains.push(new Chain(i, anchors[i].x, anchors[i].y, colors[i]));
            updateUI();
        }

function resize() {
            width = canvasContainer.clientWidth;
            height = canvasContainer.clientHeight;
            canvas.width = width; 
            canvas.height = height;
        }

window.addEventListener('resize', () => { resize(); init(); });
        slider.addEventListener('input', updateUI);

init();
        loop();

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultra-Stable Giant Polymer Simulation v11 (Long Chain Scale)</title>
    <style>
        /* --- GENEL TASARIM --- */
        body {
            margin: 0;
            overflow: hidden;
            background-color: #020617; 
            color: #e2e8f0;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            user-select: none;
        }
        #canvas-container {
            position: relative;
            width: 100%;
            height: 100%;
            cursor: grab;
            /* Arka plan dokusu */
            background-image: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
        }
        #canvas-container:active { cursor: grabbing; }
        canvas { display: block; }
        
        /* --- BUZLU CAM (GLASSMORPHISM) PANEL - DAHA ŞEFFAF --- */
        #controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            /* Şeffaflık artırıldı: 0.40 -> 0.25 */
            background: rgba(15, 23, 42, 0.25); 
            backdrop-filter: blur(12px); 
            -webkit-backdrop-filter: blur(12px);
            padding: 20px 40px;
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70%;
            max-width: 600px;
            transition: background 0.3s;
        }
 
        #controls:hover {
            background: rgba(15, 23, 42, 0.40);
        }
 
        h2 {
            margin: 0;
            font-size: 1rem;
            color: #38bdf8;
            letter-spacing: 1.5px;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
        }
 
        .slider-wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-top: 20px;
            position: relative;
        }
 
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #ef4444 0%, #94a3b8 50%, #22c55e 100%);
            border-radius: 3px;
            outline: none;
            cursor: ew-resize;
            opacity: 0.9;
        }
 
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 15px rgba(255,255,255,0.8);
            cursor: ew-resize;
            transition: transform 0.1s;
            border: 2px solid #0f172a;
            margin-top: -1px;
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        
        .label {
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
            opacity: 1;
            flex-basis: 20%;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        .poor { color: #fca5a5; text-align: left; }
        .good { color: #86efac; text-align: right; }
        .theta { 
            color: #f1f5f9; 
            position: absolute; 
            left: 50%;
            transform: translateX(-50%); 
            top: -25px;
            font-size: 0.75rem;
            opacity: 0.8;
        }
 
        #status {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #cbd5e1;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
 
    <div id="canvas-container">
        <canvas id="simCanvas"></canvas>
        
        <div id="controls">
            <h2>DYNAMIC SOLVENT SIMULATION</h2>
            <div class="slider-wrapper">
                <span class="label poor">POOR (Collapse)</span>
                <span class="label theta">THETA (Θ)</span>
                <input type="range" id="solventSlider" min="0" max="100" value="50">
                <span class="label good">GOOD (Swelling)</span>
            </div>
            <div id="status">Status: Theta (Θ) Condition - Balanced</div>
        </div>
    </div>
 
<script>
    const canvas = document.getElementById('simCanvas');
    const ctx = canvas.getContext('2d');
    const slider = document.getElementById('solventSlider');
    const statusText = document.getElementById('status');
 
    let width, height;
    
    // --- KONFİGÜRASYON ---
    const config = {
        chainCount: 6,
        // MODİFİKASYON: Zincir uzunlukları 2x artırıldı (32 -> 64)
        polymerLengths: [20, 30, 30, 64, 64, 20], 
        solventCount: 400, // Büyük zincirler için biraz daha çözücü
        particleRadius: 5.5,
        bondLength: 14,
        interactionRange: 60
    };
 
    let particles = [];
    let chains = [];
    let solventQuality = 0.5;
 
    let draggedParticle = null;
 
    class Particle {
        constructor(x, y, type, chainId = -1, mass = 1) {
            this.x = x; this.y = y;
            this.vx = (Math.random() - 0.5) * 2;
            this.vy = (Math.random() - 0.5) * 2;
            this.type = type;
            this.chainId = chainId;
            this.radius = config.particleRadius;
            this.mass = mass;
        }
 
        update() {
            if (this === draggedParticle) return;
 
            if (this.type === 'solvent') {
                // Çözücüler: Yüksek hareketlilik
                this.vx += (Math.random() - 0.5) * 1.5;
                this.vy += (Math.random() - 0.5) * 1.5;
                this.vx *= 0.96; 
                this.vy *= 0.96;
            } else {
                // --- POLİMER FİZİĞİ (MODİFİYE EDİLDİ) ---
                
                let thermalNoise = 0.0;
                let friction = 0.92; 
 
                if (solventQuality < 0.45) {
                    // Zayıf Çözücü Modu:
                    // MODİFİKASYON: Titreşim (noise) ciddi oranda azaltıldı.
                    thermalNoise = 0.05; 
                    
                    // MODİFİKASYON: Stabilite için sürtünme artırıldı (hız daha çabuk sönümlenir).
                    // Bu, v8'deki "donma" hissine daha yakın ama çok hafif bir hareket var.
                    friction = 0.85; 
                } else {
                    // İyi Çözücü Modu:
                    thermalNoise = 0.05; 
                }
 
                // Rastgele Termal Kuvvet Ekle
                this.vx += (Math.random() - 0.5) * thermalNoise;
                this.vy += (Math.random() - 0.5) * thermalNoise;
 
                // Sürtünme
                this.vx *= friction; 
                this.vy *= friction;
            }
 
            this.x += this.vx; this.y += this.vy;
 
            // Duvarlardan Yumuşak Sekme
            if (this.x < 10) { this.x = 10; this.vx *= -0.8; }
            if (this.x > width - 10) { this.x = width - 10; this.vx *= -0.8; }
            if (this.y < 10) { this.y = 10; this.vy *= -0.8; }
            if (this.y > height - 10) { this.y = height - 10; this.vy *= -0.8; }
        }
 
        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            
            if (this.type === 'polymer') {
                const hue = 180 + (this.chainId * 35); 
                if (this === draggedParticle) {
                    ctx.fillStyle = '#ffffff';
                    ctx.shadowColor = '#ffffff';
                    ctx.shadowBlur = 20;
                } else {
                    ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
                    ctx.shadowColor = `hsl(${hue}, 100%, 60%)`;
                    ctx.shadowBlur = 12; // Neon efekt
                }
            } else {
                // Çözücü Renkleri
                let r, g, b;
                if (solventQuality < 0.5) {
                    r = 255;
                    g = Math.floor(255 * (solventQuality * 2));
                    b = Math.floor(100 + 100 * solventQuality); 
                } else {
                    r = Math.floor(255 * (1 - (solventQuality - 0.5) * 2));
                    g = 255;
                    b = Math.floor(200 - 100 * (solventQuality - 0.5)); 
                }
                ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.6)`; // Biraz daha şeffaf
                ctx.shadowBlur = 0;
            }
            ctx.fill();
            ctx.shadowBlur = 0; 
            ctx.closePath();
        }
    }
 
    function lerp(start, end, t) { return start * (1 - t) + end * t; }
 
    // --- YENİ EKLENEN FONKSİYON: EN UZUN ZİNCİRİ ÖLÇEKLEME ---
    function scaleLongestChainInitial() {
        if (chains.length === 0) return;
 
        // 1. En uzun zincirin indeksini bul
        let longestIdx = -1;
        let maxLength = -1;
 
        chains.forEach((indices, i) => {
            if (indices.length > maxLength) {
                maxLength = indices.length;
                longestIdx = i;
            }
        });
 
        if (longestIdx === -1) return;
 
        console.log(`En uzun zincir tespit edildi: Zincir ${longestIdx} (Uzunluk: ${maxLength})`);
        
        // Bu zincirdeki parçacık indeksleri
        const chainIndices = chains[longestIdx];
        
        // 2. Kütle Merkezini (COM) Hesapla
        let comX = 0;
        let comY = 0;
        
        chainIndices.forEach(idx => {
            comX += particles[idx].x;
            comY += particles[idx].y;
        });
        
        comX /= chainIndices.length;
        comY /= chainIndices.length;
 
        // 3. Ölçekleme Faktörü (User Prompt: 2 katına çıkart)
        const scaleFactor = 2.0;
 
        // 4. Parçacıkları merkezden dışarı doğru ötele
        chainIndices.forEach(idx => {
            const p = particles[idx];
            
            // Merkezden vektör
            let dx = p.x - comX;
            let dy = p.y - comY;
            
            // Ölçekle
            p.x = comX + dx * scaleFactor;
            p.y = comY + dy * scaleFactor;
 
            // Patlamayı önlemek için hızı sıfırla
            p.vx = 0;
            p.vy = 0;
        });
 
        console.log("En uzun zincir 2 katına genişletildi.");
    }
 
    function init() {
        resize();
        particles = [];
        chains = [];
 
        // IZGARA (GRID) BAŞLANGIÇ SİSTEMİ
        const cols = 3;
        const rows = 2;
        const cellWidth = width / cols;
        const cellHeight = height / rows;
 
        for (let c = 0; c < config.chainCount; c++) {
            let chainIndices = [];
            
            let colIndex = c % cols;
            let rowIndex = Math.floor(c / cols);
            
            let centerX = (colIndex * cellWidth) + (cellWidth / 2);
            let centerY = (rowIndex * cellHeight) + (cellHeight / 2);
 
            const length = config.polymerLengths[c % config.polymerLengths.length];
            // Büyük zincirler daha ağır
            const mass = 4 + (length / 15); 
 
            for (let i = 0; i < length; i++) {
                let p = new Particle(
                    centerX + (Math.random()-0.5)*20, 
                    centerY + (Math.random()-0.5)*20, 
                    'polymer', c, mass
                );
                particles.push(p);
                chainIndices.push(particles.length - 1);
            }
            chains.push(chainIndices);
        }
 
        // Çözücüler
        for (let i = 0; i < config.solventCount; i++) {
            particles.push(new Particle(Math.random()*width, Math.random()*height, 'solvent'));
        }
 
        // --- EN SON: En uzun zinciri bul ve genişlet ---
        scaleLongestChainInitial();
    }
 
    function solveLinks() {
        const k = 0.2;
        chains.forEach(indices => {
            ctx.beginPath();
            ctx.strokeStyle = `hsla(${180 + particles[indices[0]].chainId*35}, 100%, 70%, 0.5)`;
            ctx.lineWidth = 4;
            if (indices.length > 0) ctx.moveTo(particles[indices[0]].x, particles[indices[0]].y);
            for (let i = 0; i < indices.length - 1; i++) {
                let p1 = particles[indices[i]]; let p2 = particles[indices[i+1]];
                ctx.lineTo(p2.x, p2.y);
                let dx = p2.x - p1.x; let dy = p2.y - p1.y;
                let dist = Math.sqrt(dx*dx + dy*dy); if (dist === 0) dist = 0.1;
                let force = (dist - config.bondLength) * k;
                let fx = (dx/dist) * force; let fy = (dy/dist) * force;
                if (p1 !== draggedParticle) { p1.vx += fx; p1.vy += fy; }
                if (p2 !== draggedParticle) { p2.vx -= fx; p2.vy -= fy; }
            }
            ctx.stroke();
        });
    }
 
    function solveInteractions() {
        let ppForce, psForce;
 
        if (solventQuality <= 0.5) {
            let t = solventQuality * 2; 
            ppForce = lerp(-0.7, 0.0, t);
            psForce = lerp(0.9, 0.0, t);
        } else {
            let t = (solventQuality - 0.5) * 2; 
            // Büyük zincirlerin açılması için itme kuvveti biraz artırıldı
            ppForce = lerp(0.0, 1.5, t);
            psForce = lerp(0.0, -0.4, t);
        }
 
        const rangeSq = config.interactionRange * config.interactionRange;
 
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                let p1 = particles[i]; let p2 = particles[j];
                let dx = p2.x - p1.x; let dy = p2.y - p1.y;
                let distSq = dx*dx + dy*dy;
                if (distSq > rangeSq) continue;
 
                let dist = Math.sqrt(distSq); if (dist < 1) dist = 1;
                let nx = dx / dist; let ny = dy / dist;
 
                let minDist = p1.radius + p2.radius;
                if (dist < minDist) {
                    let push = (minDist - dist) * 0.4; 
                    if (p1 !== draggedParticle) { p1.vx -= nx * push; p1.vy -= ny * push; }
                    if (p2 !== draggedParticle) { p2.vx += nx * push; p2.vy += ny * push; }
                } 
                else {
                    let f = 0;
                    if (p1.type === 'polymer' && p2.type === 'polymer' && p1.chainId === p2.chainId) {
                         if (Math.abs(i - j) < 3) continue;
                    }
 
                    if (p1.type === 'polymer' && p2.type === 'polymer') {
                        f = ppForce; 
                    } else if (p1.type === 'solvent' && p2.type === 'solvent') {
                        f = 0.01; 
                    } else {
                        f = psForce;
                    }
 
                    let factor = 1 - (dist / config.interactionRange);
                    if (p1.type === 'polymer' && p2.type === 'polymer' && solventQuality > 0.6) {
                        f *= 1.8; 
                    }
 
                    let fx = nx * f * factor; let fy = ny * f * factor;
                    if (p1 !== draggedParticle) { p1.vx -= fx; p1.vy -= fy; }
                    if (p2 !== draggedParticle) { p2.vx += fx; p2.vy += fy; }
                }
            }
        }
    }
 
    canvas.addEventListener('mousedown', e => {
        const rect = canvas.getBoundingClientRect();
        const mx = e.clientX - rect.left; const my = e.clientY - rect.top;
        let closest = null; let minD = 50;
        particles.forEach(p => {
            if (p.type !== 'polymer') return;
            let d = Math.sqrt((p.x - mx)**2 + (p.y - my)**2);
            if (d < minD) { minD = d; closest = p; }
        });
        if (closest) draggedParticle = closest;
    });
    window.addEventListener('mouseup', () => draggedParticle = null);
    canvas.addEventListener('mousemove', e => {
        if (draggedParticle) {
            const rect = canvas.getBoundingClientRect();
            draggedParticle.x = e.clientX - rect.left;
            draggedParticle.y = e.clientY - rect.top;
            draggedParticle.vx = 0; draggedParticle.vy = 0;
        }
    });
 
    slider.addEventListener('input', (e) => {
        const val = parseInt(e.target.value);
        solventQuality = val / 100;
        let status = "";
        
        if (val > 45 && val < 55) {
             status = `Status: Theta (Θ) Condition - Ideal Chain Behavior`;
             statusText.style.color = "#f1f5f9"; 
        }
        else if (solventQuality <= 0.45) {
            status = `Status: Poor Solvent (%${val}) - Coiling & Collapse`;
            statusText.style.color = "#fca5a5"; 
        }
        else {
            status = `Status: Good Solvent (%${val}) - Swelling & Expansion`;
            statusText.style.color = "#86efac"; 
        }
        statusText.innerText = status;
    });
 
    window.addEventListener('resize', resize);
    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
    }
 
    function animate() {
        ctx.clearRect(0,0,width,height);
        solveLinks();
        solveInteractions();
        particles.forEach(p => { p.update(); p.draw(); });
        requestAnimationFrame(animate);
    }
 
    init();
    animate();
 
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Polymer Analysis - Gold Edition</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #050505; font-family: 'Segoe UI', sans-serif; color: white; display: flex; flex-direction: column; height: 100vh; }
        #canvas-container { flex-grow: 1; position: relative; background: radial-gradient(circle at center, #0a0a12 0%, #000000 100%); overflow: hidden; }
        canvas { display: block; }
        
        #ui-layer { 
            position: absolute; top: 20px; left: 20px; pointer-events: none; z-index: 5; 
            display: flex; justify-content: space-between; width: 95%; 
            align-items: flex-start; 
        }
        
        .info-box, .stats-box { background: rgba(8, 8, 10, 0.9); padding: 15px; backdrop-filter: blur(12px); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .info-box { border-left: 3px solid #00d2ff; max-width: 320px; height: auto; }
        .stats-box { border-right: 3px solid #00ff88; width: 280px; max-height: 400px; overflow-y: auto; }
        
        .info-title { font-weight: 800; color: #00d2ff; text-transform: uppercase; margin-bottom: 8px; font-size: 1.1em; letter-spacing: 1px; }
        .info-desc { font-size: 0.9em; color: #b0b0b0; line-height: 1.5; }
        
        #stats-list { list-style: none; padding: 0; margin-top: 10px; font-family: 'Courier New', monospace; font-size: 12px; }
        .stat-item { display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.05); margin-bottom: 6px; border-radius: 4px; border-left: 3px solid #555; }
        
        #controls { background: #050505; border-top: 1px solid rgba(255,255,255,0.1); padding: 25px 0; display: flex; justify-content: center; box-shadow: 0 -20px 60px rgba(0,0,0,1); }
        .interface-wrapper { width: 750px; display: flex; flex-direction: column; gap: 15px; }
        
        .analysis-bar { display: flex; align-items: center; background: rgba(30,30,35,0.6); border-radius: 20px; padding: 12px 25px; gap: 20px; border: 1px solid rgba(255,255,255,0.1); }
        .metric-val { font-family: 'Courier New', monospace; font-weight: bold; min-width: 80px; font-size: 15px; }
        
        .progress-track { flex-grow: 1; height: 6px; background: #111; border-radius: 10px; overflow: hidden; }
        #dissolution-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff3333, #ffcc00, #00ff88); transition: width 0.3s ease-out; }
        
        .type-buttons { display: flex; justify-content: space-between; gap: 10px; }
        .btn { flex: 1; padding: 14px 0; border-radius: 30px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255, 255, 255, 0.03); color: #999; cursor: pointer; font-weight: 700; transition: all 0.3s ease; text-transform: uppercase; font-size: 11px; }
        .btn.active { color: black; border-color: transparent; transform: translateY(-2px); }
        .reset-btn { background: rgba(255, 68, 68, 0.1); border: 1px solid #ff4444; color: #ff4444; padding: 4px 10px; border-radius: 12px; cursor: pointer; font-size: 10px; font-weight: bold; }
    </style>
</head>
<body>

<div id="canvas-container">
    <div id="ui-layer">
        <div class="info-box">
            <div id="info-title" class="info-title">Linear Chain</div>
            <div id="info-desc" class="info-desc">Initializing system...</div>
        </div>
        <div class="stats-box">
            <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;">
                <span style="color:#00ff88; font-weight:800; font-size:1.1em;">STATISTICS</span> 
                <button class="reset-btn" onclick="resetAllStats()">RESET</button>
            </div>
            <ul id="stats-list"></ul>
        </div>
    </div>
    <canvas id="simCanvas"></canvas>
</div>

<div id="controls">
    <div class="interface-wrapper">
        <div class="analysis-bar">
            <span id="time-display" class="metric-val" style="color: #00d2ff;">t = 0.00</span>
            <div class="progress-track"><div id="dissolution-fill"></div></div>
            <span id="dissolution-display" class="metric-val" style="color: #00ff88; min-width: 160px;">Solubility: 0%</span>
        </div>
        <div class="type-buttons">
            <button class="btn" data-type="linear" onclick="setPolymerMode('linear')">Linear Chain</button>
            <button class="btn" data-type="short" onclick="setPolymerMode('short')">Short Branched</button>
            <button class="btn" data-type="long" onclick="setPolymerMode('long')">Long Branched</button>
            <button class="btn" data-type="verylong" onclick="setPolymerMode('verylong')">Highly Branched</button>
        </div>
    </div>
</div>

const conf = CONFIG[currentMode];
        if (autoSolventValue < 100) autoSolventValue += conf.speedMult * dt;

for (let s of springs) s.update();
        let contactCount = 0;
        const solventFactor = (autoSolventValue - 40) / 40;

let ratio = Math.min(100, Math.floor(((particles.length - contactCount) / particles.length) * 100));
        document.getElementById('dissolution-fill').style.width = ratio + "%";
        document.getElementById('dissolution-display').innerText = "Solubility: " + ratio + "%";
        document.getElementById('time-display').innerText = "t = " + simulationSeconds.toFixed(2);

if (ratio >= 97 && !isLogged) {
            isComplete = true; isLogged = true;
            const li = document.createElement('li');
            li.className = 'stat-item'; li.style.borderLeftColor = conf.color;
            li.innerHTML = `<span>${conf.btnText}</span> <span>${simulationSeconds.toFixed(2)}s / ${ratio}%</span>`;
            document.getElementById('stats-list').appendChild(li);
        }
        draw();
        requestAnimationFrame(loop);
    }

function resetAllStats() {
        document.getElementById('stats-list').innerHTML = '';
        setPolymerMode(currentMode);
    }

init();
    setPolymerMode('linear');
    requestAnimationFrame(loop);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polymer Classification - Golden Final + Stereochemistry</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <style>
        /* --- GOLDEN VERSION CSS (TAMAMEN KORUNDU) --- */
        :root {
            --bg-color: #050505;
            --accent-cyan: #00ffaa;
            --accent-blue: #00a2ff;
            --text-main: #ffffff;
            --text-muted: rgba(255, 255, 255, 0.7);
        }

.card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.7), 
                0 -15px 50px rgba(0, 255, 179, 0.35);
            z-index: 10;
        }

.card-content-wrapper { position: relative; z-index: 2; flex-grow: 1; pointer-events: none; }

<div class="container">
    <header>
        <h1>CLASSIFICATION OF POLYMERS</h1>
        <p class="subtitle">Fundamental criteria used in the classification of polymers</p>
    </header>

<div class="tabs-wrapper">
        <div class="tabs-container">
            <button class="tab-btn active" onclick="filterCategory('chemical')">Chemical Structure</button>
            <button class="tab-btn" onclick="filterCategory('architecture')">Chain Architecture</button>
            <button class="tab-btn" onclick="filterCategory('mechanism')">Mechanism</button>
            <button class="tab-btn" onclick="filterCategory('composition')">Monomer Composition</button>
            <button class="tab-btn" onclick="filterCategory('stereochemistry')">Stereochemistry</button>
            <button class="tab-btn" onclick="filterCategory('morphology')">Morphology</button>
            <button class="tab-btn" onclick="filterCategory('application')">Application</button>
            <button class="tab-btn" onclick="filterCategory('origin')">Origin</button>
            <button class="tab-btn" onclick="filterCategory('functional')">Functional</button>
        </div>
    </div>

<footer>SMALL THINGZ - <span id="currentYear"></span></footer>
</div>

<div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <button class="close-btn" onclick="closeModalDirect()">✕</button>
        <div class="modal-header">
            <div class="modal-icon" id="mIcon">-</div>
            <div class="modal-title"><span id="mCategory">-</span><h2 id="mTitle">-</h2></div>
        </div>
        <div class="modal-grid">
            <div class="detail-box">
                <h4>Detailed Description</h4>
                <p id="mFullDesc">-</p>
                <h4>Common Examples</h4>
                <div id="mExamples"></div>
            </div>
            <div class="detail-box">
                <h4>Technical Details (Structure-Property)</h4>
                <ul class="tech-list" id="mTechDetails"></ul>
            </div>
        </div>
    </div>
</div>

// 2. ARCHITECTURE
        {
            category: 'architecture', title: 'Linear', 
            cardText: 'Structures where monomers are arranged in a single line without side branching. Chains can pack tightly together, providing high density and strength.',
            fullDesc: 'Long chains without branching. Chains can approach each other very closely, increasing crystallinity, density, and mechanical strength. Solvent and gas permeability is low.',
            techDetails: [
                'Contains no side branching',
                'Chains can pack regularly',
                'Crystallinity and density are usually high',
                'Good mechanical strength and chemical resistance',
                'High diffusion and solvent resistance'
            ],
            examples: ['HDPE', 'PVC', 'Polyester', 'PP', 'PS'], visual: '📏'
        },
        {
            category: 'architecture', title: 'Branched', 
            cardText: 'Contains short or long side arms attached to the main chain. These arms prevent regular stacking of chains, resulting in lower density, greater flexibility, and a lower melting point.',
            fullDesc: 'Side arms extending from the main chain prevent regular crystallization of molecules. This lowers density and provides flexibility. Gas and liquid permeability is higher compared to linear structures.',
            techDetails: [
                'Contains short or long side chains attached to the main chain',
                'Branching limits crystallization',
                'Has low density and low melting temperature',
                'Flexible and ductile',
                'High gas and liquid permeability'
            ],
            examples: ['LDPE', 'Glycogen', 'Starch'], visual: '🌵'
        },
        {
            category: 'architecture', title: 'Network (Cross-linked)', 
            cardText: 'Polymer chains are linked to each other by covalent bonds (bridges), forming a giant network. They do not melt when heated; they only decompose at very high temperatures. They are insoluble in solvents.',
            fullDesc: 'Chains are connected by covalent bonds (curing). Since molecular motion is restricted, they do not flow when heated; they only burn. They demonstrate high mechanical and thermal stability.',
            techDetails: [
                'Chains are connected by covalent cross-links',
                'Does not melt when heated, decomposes',
                'Insoluble, only shows swelling',
                'Can exhibit elastomer or rigid thermoset behavior',
                'High mechanical and thermal stability'
            ],
            examples: ['Bakelite', 'Epoxy', 'PU Foam', 'Hydrogels'], visual: '🕸️'
        },

// 3. MECHANISM
        {
            category: 'mechanism', title: 'Chain Polymerization', 
            cardText: 'Proceeds via the rapid addition of monomers to the chain through an active center (radical, ion). High molecular weight is reached right at the beginning of the reaction, and no by-products are formed.',
            fullDesc: 'Proceeds through radical or ionic centers. Monomers are added one by one and very rapidly to the growing chain. Very common in industrial plastic production (PE, PP, PVC).',
            techDetails: [
                'Proceeds via active center (radical, anion, cation)',
                'High molecular weight forms at early stage',
                'No by-products are formed',
                'Molecular weight control is limited',
                'Common in industrial production'
            ],
            examples: ['Polyethylene', 'Polystyrene'], visual: '🔗'
        },
        {
            category: 'mechanism', title: 'Step-Growth Polymerization', 
            cardText: 'It is a reaction occurring step-by-step between functional groups. High molecular weight is reached only towards the end of the reaction. Small by-product molecules like water are usually released.',
            fullDesc: 'Proceeds by the random combination of monomers, dimers, and oligomers. Usually, small molecules like water or alcohol are released. Structural control is higher.',
            techDetails: [
                'Reaction occurs between functional groups',
                'High molecular weight is obtained only at high conversion',
                'Usually small molecules (H₂O, MeOH) are released',
                'Chain length depends on reaction time',
                'Structural control is higher'
            ],
            examples: ['PET', 'Nylon', 'PC', 'Polyester'], visual: '🪜'
        },

// 4. MONOMER COMPOSITION
        {
            category: 'composition', title: 'Homopolymer', 
            cardText: 'Structures where only a single type of monomer repeats along the chain. High structural regularity ensures constant and predictable thermal and mechanical properties.',
            fullDesc: 'Contains only one type of monomer. Production is generally more economical and offers standard properties. Crystallization tendencies are higher compared to copolymers.',
            techDetails: [
                'Consists of a single type of monomer',
                'High structural regularity',
                'Thermal and mechanical properties are constant',
                'Higher tendency to crystallize',
                'Modification possibilities are limited'
            ],
            examples: ['Polypropylene', 'Polystyrene', 'PVC'], visual: 'A'
        },
        {
            category: 'composition', title: 'Copolymer', 
            cardText: 'Formed by the combination of two or more different monomers in the same chain. Arranged as random, block, or graft, modifying the material\'s properties (impact resistance, flexibility, etc.).',
            fullDesc: 'Different monomers are used to reduce brittleness or increase adhesion. Mechanical and thermal properties can be adjusted as needed. Crystallinity is generally lower than homopolymers.',
            techDetails: [
                'Contains two or more monomers',
                'Can show random, block, graft, or alternating arrangement',
                'Mechanical and thermal properties are adjustable',
                'Crystallinity usually decreases',
                'Impact resistance can be increased'
            ],
            examples: ['ABS', 'SAN', 'PEVA'], visual: 'AB'
        },

// --- NEW CATEGORY: STEREOCHEMISTRY ---
        {
            category: 'stereochemistry', title: 'Isotactic', 
            cardText: 'All side groups (R) in the polymer chain are on the same side of the plane. This high regularity allows the chains to crystallize perfectly.',
            fullDesc: 'All substituents (side groups) are located on the same side of the polymer chain. This steric regularity allows chains to pack tightly, resulting in high density and mechanical strength.',
            techDetails: [
                'Side groups are arranged on the same side',
                'Shows high crystallinity',
                'High mechanical strength and melting point',
                'Can be opaque or semi-transparent',
                'Produced with Ziegler-Natta catalysts'
            ],
            examples: ['Isotactic PP (i-PP)'], visual: '📐'
        },
        {
            category: 'stereochemistry', title: 'Syndiotactic', 
            cardText: 'Side groups are arranged in a perfect alternating order along the chain, one right, one left. This regularity allows them to crystallize.',
            fullDesc: 'Substituents are placed regularly and alternately (one right, one left) along the main chain. Although not as much as isotactic, this regular structure allows for crystallization.',
            techDetails: [
                'Side groups are arranged alternatingly (opposite sides)',
                'Has the ability to crystallize',
                'Can be more transparent',
                'Processing may differ from isotactic',
                'Can be produced with Metallocene catalysts'
            ],
            examples: ['Syndiotactic PS (s-PS)'], visual: '🧬'
        },
        {
            category: 'stereochemistry', title: 'Atactic', 
            cardText: 'The arrangement of side groups is completely random and irregular. This irregularity prevents chain packing, so they are usually amorphous, sticky, or waxy.',
            fullDesc: 'The arrangement of substituents is completely random and irregular. It follows no pattern. This irregularity makes crystallization impossible, so they are completely amorphous.',
            techDetails: [
                'Side groups are arranged randomly',
                'Cannot crystallize, completely amorphous',
                'Shows low melting point or softening',
                'Generally sticky, waxy, or rubbery in nature',
                'Generally low commercial value (except for special applications)'
            ],
            examples: ['Atactic PP (a-PP)', 'PVC (Commercial)'], visual: '🎲'
        },

// 5. MORPHOLOGY
        {
            category: 'morphology', title: 'Amorphous', 
            cardText: 'A structure where polymer chains are found randomly and irregularly like spaghetti. Since it does not contain a regular crystal structure, it is transparent and shows a softening range (Tg) instead of a specific melting point.',
            fullDesc: 'Chains are distributed randomly and irregularly. Contains no or negligible crystalline regions. Thus, they transmit light without refraction (transparent). Mechanically, they can be hard and brittle but can be modified.',
            techDetails: [
                'Chains are distributed randomly and irregularly',
                'Generally transparent and clear',
                'No specific melting point (Tm), shows glass transition (Tg)',
                'Chemical resistance is lower than crystallines',
                'Suitable for thermoforming'
            ],
            examples: ['PMMA', 'PC', 'Polystyrene'], visual: '🌫️'
        },
        {
            category: 'morphology', title: 'Semi-Crystalline', 
            cardText: 'Contains both regularly packed crystalline regions and disordered amorphous regions. Crystalline regions provide strength and chemical resistance, while amorphous regions add flexibility.',
            fullDesc: 'Contains both crystalline and amorphous regions. Since crystalline regions refract light, they are generally opaque or translucent. They have a distinct melting temperature (Tm).',
            techDetails: [
                'Contains both crystalline and amorphous regions',
                'Has a distinct melting temperature (Tm)',
                'High mechanical strength',
                'Good chemical and abrasion resistance',
                'Opaque or translucent structure'
            ],
            examples: ['Polyethylene', 'Polyamide (PA)'], visual: '💎'
        },

// 6. APPLICATION
        {
            category: 'application', title: 'Thermoplastic', 
            cardText: 'Polymers that soften and can be shaped when heated, and harden when cooled. This cycle can be repeated many times, allowing them to be recycled.',
            fullDesc: 'Chains are held together by physical interactions. Heat weakens these bonds, and the material flows. Processability is high, but they may show creep behavior under load over time.',
            techDetails: [
                'Chain structure held by physical interactions',
                'Softens when heated, hardens when cooled',
                'Recyclable',
                'High processability',
                'Can show creep behavior'
            ],
            examples: ['PET', 'PE', 'PVC', 'PS', 'PC'], visual: '🔄'
        },
        {
            category: 'application', title: 'Thermoset', 
            cardText: 'Polymers that harden and take a permanent shape via chemical reaction during production (curing). They do not soften again when heated and cannot be melted; they are resistant to high heat.',
            fullDesc: 'A permanent, cross-linked network structure forms after curing. They do not melt and cannot be reshaped. This provides high heat, chemical, and mechanical resistance, but recycling is difficult.',
            techDetails: [
                'Permanent network structure forms after curing',
                'Does not melt, cannot be reshaped',
                'High heat and chemical resistance',
                'Mechanically hard and brittle',
                'Difficult to recycle'
            ],
            examples: ['Bakelite', 'Epoxy', 'Hydrogels', 'PU Foam'], visual: '🔥'
        },
        {
            category: 'application', title: 'Elastomer', 
            cardText: 'Materials that behave like rubber at room temperature, elongating when pulled and returning to their original shape when released. They contain sparse cross-links between molecules.',
            fullDesc: 'Usage temperature is well above the glass transition temperature (Tg). Molecules behave like springs. They show very high elastic elongation and have high ability to dampen mechanical energy.',
            techDetails: [
                'Tg value is below usage temperature',
                'Contains sparse cross-links',
                'Shows very high elastic elongation',
                'Low elastic modulus',
                'High mechanical energy damping ability'
            ],
            examples: ['Rubber', 'Silicone'], visual: '👟'
        },
        {
            category: 'application', title: 'Fiber', 
            cardText: 'Polymers whose length is much greater than their diameter, capable of being spun into yarn. Chains are oriented along the fiber axis, giving them very high tensile strength.',
            fullDesc: 'Has highly oriented chain structure. Generally have high crystallinity. Used as reinforcement in the textile industry and composite materials.',
            techDetails: [
                'Highly oriented chain structure',
                'Very high tensile strength',
                'Crystallinity is usually high',
                'Shows anisotropic mechanical behavior',
                'Used in textiles and composites'
            ],
            examples: ['Nylon', 'PET', 'Acrylic', 'Kevlar'], visual: '🧵'
        },

// 7. ORIGIN
        {
            category: 'origin', title: 'Natural', 
            cardText: 'Produced by biological processes by living organisms (plants, animals, bacteria) in nature. They are generally biodegradable and biocompatible.',
            fullDesc: 'Synthesized by biological systems. Structural order is usually very high. Thermally more sensitive than synthetics. Widely used in medical and food sectors.',
            techDetails: [
                'Synthesized by biological systems',
                'Structural order is usually high',
                'Prone to thermal degradation',
                'Biodegradable and biocompatible',
                'Processability can be limited'
            ],
            examples: ['Natural Rubber', 'Starch', 'Cellulose', 'Chitin', 'Collagen'], visual: '🌿'
        },
        {
            category: 'origin', title: 'Synthetic', 
            cardText: 'Artificial polymers produced via chemical reactions from petrochemical sources in a lab or factory environment. Properties can be fully adjusted as needed.',
            fullDesc: 'Produced industrially under controlled conditions. Molecular weight, structure, and properties can be precisely adjusted. Generally more durable and cheaper than natural polymers.',
            techDetails: [
                'Produced industrially under control',
                'Molecular weight and structure adjustable',
                'Wide range of applications',
                'Can show persistence in natural environment',
                'Provides cost advantage'
            ],
            examples: ['PE', 'PP'], visual: '🛢️'
        },

// 8. FUNCTIONAL
        {
            category: 'functional', title: 'Conductive Polymer', 
            cardText: 'Polymers that can conduct electricity thanks to their special chemical structure (conjugated double bonds), unlike plastics which are normally insulators. Used in electronics and sensor technologies.',
            fullDesc: 'Contains a conjugated π-electron system in its backbone. Conductivity level can be increased from semiconductor to metal through "doping". Mechanically, they are usually brittle.',
            techDetails: [
                'Contains conjugated π-electron system',
                'Gains electrical conductivity with doping',
                'Mechanically brittle',
                'Used in electronic and sensor applications',
                'Limited environmental stability'
            ],
            examples: ['Polyacetylene', 'Polyaniline', 'Polythiophene', 'Polypyrrole'], visual: '⚡'
        },
        {
            category: 'functional', title: 'Biodegradable', 
            cardText: 'Eco-friendly polymers that can be broken down into water and carbon dioxide by microorganisms found in nature. Prominent in packaging and medical applications.',
            fullDesc: 'Degrade via hydrolysis or enzymatic pathways. Developed to reduce environmental pollution. Generally possess low to medium heat resistance.',
            techDetails: [
                'Shows hydrolysis or enzymatic degradation',
                'Low–medium heat resistance',
                'Generally semi-crystalline structure',
                'Aimed at reducing environmental impact',
                'Mechanical strength may be limited'
            ],
            examples: ['PCL', 'PVOH', 'PLA'], visual: '♻️'
        },
        {
            category: 'functional', title: 'High Performance Polymers', 
            cardText: 'Special engineering plastics capable of withstanding very high temperatures, heavy chemicals, and severe mechanical conditions. Used in aerospace and space industries replacing metals.',
            fullDesc: 'Possess aromatic and rigid chain structures. Show very high melting and glass transition temperatures. They are difficult to process and have high costs.',
            techDetails: [
                'Aromatic and rigid chain structure',
                'Very high Tg and/or Tm values',
                'High-level chemical and thermal stability',
                'Difficult to process',
                'Used in aerospace and defense applications'
            ],
            examples: ['Polysulfone', 'PEEK', 'Kapton'], visual: '🚀'
        }
    ];

const contentArea = document.getElementById('contentArea');
    const buttons = document.getElementsByClassName('tab-btn');
    const modal = document.getElementById('modalOverlay');

document.getElementById('currentYear').innerText = new Date().getFullYear();

filterCategory('chemical');
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Molecular Weight Simulation v14 (Center Align)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
 
    <style>
        /* --- RENK PALETİ VE TEMEL AYARLAR --- */
        :root {
            --bg-body: #0f172a;
            --bg-panel: rgba(30, 41, 59, 0.7);
            --primary-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            --accent-cyan: #06b6d4;
            --accent-green: #10b981;
            --accent-yellow: #fbbf24;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: rgba(148, 163, 184, 0.1);
        }
 
        body {
            background-color: var(--bg-body);
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.15), transparent 40%);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
        }
 
        h1 {
            background: var(--primary-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin: 5px 0 5px 0;
            font-size: 1.8rem;
        }
 
        .subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 20px;
            font-weight: 300;
        }
 
        .container {
            display: grid;
            grid-template-columns: 1.4fr 1.2fr;
            gap: 24px;
            width: 98%;
            max-width: 1600px;
            height: 85vh;
            min-height: 0; 
        }
 
        @media (max-width: 1100px) {
            .container { grid-template-columns: 1fr; height: auto; overflow-y: auto;}
        }
 
        /* --- PANELLER --- */
        .panel {
            background: var(--bg-panel);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(12px);
        }
 
        .panel-header {
            padding: 15px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255,255,255,0.01);
            min-height: 50px;
            flex-shrink: 0;
        }
 
        h2 { margin: 0; font-size: 0.95rem; color: var(--text-main); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
 
        /* --- BUTON --- */
        .btn-primary {
            background: var(--primary-grad);
            color: white; border: none; padding: 10px 30px; border-radius: 99px;
            font-weight: 600; cursor: pointer; font-size: 0.9em; font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); transition: all 0.3s ease;
            display: block;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6); }
 
        /* --- SOL PANEL İÇERİK --- */
        #solution-tank {
            background: rgba(15, 23, 42, 0.4);
            flex-grow: 1;
            padding: 24px;
            overflow-y: auto;
            position: relative;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 24px 24px;
        }
 
        .polymer-row {
            display: flex; align-items: center; margin-bottom: 24px; padding: 4px;
        }
 
        .row-info {
            min-width: 110px; text-align: right; margin-right: 20px;
            font-family: 'JetBrains Mono', monospace; line-height: 1.4;
            border-right: 2px solid var(--accent-cyan); padding-right: 12px;
            z-index: 2; 
        }
        .count-badge { color: var(--accent-green); font-size: 1.1em; font-weight: 700; }
        .mw-label { color: var(--text-muted); font-size: 0.8em; }
 
        .chain-visual { flex-grow: 1; display: flex; align-items: center; height: 40px; }
 
        .bead {
            width: 12px; height: 12px; border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #a5b4fc, #4338ca);
            box-shadow: 0 2px 4px rgba(0,0,0,0.4);
            margin-right: 3px; flex-shrink: 0;
            animation: slowWave 3s ease-in-out infinite alternate;
        }
        .bead.end { 
            width: 14px; height: 14px; 
            background: radial-gradient(circle at 35% 35%, #ffffff, #94a3b8);
            box-shadow: 0 0 10px rgba(255,255,255,0.3); z-index: 1;
        }
 
        @keyframes slowWave {
            0% { transform: translateY(-3px); }
            100% { transform: translateY(3px); }
        }
 
        /* --- DENKLEMLER (FOOTER) --- */
        .equations-footer {
            background: rgba(15, 23, 42, 0.6);
            border-top: 1px solid var(--border-color);
            padding: 15px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-shrink: 0;
        }
 
        .equation-box {
            display: flex; align-items: center;
            font-family: 'Georgia', serif; font-size: 1.1em; color: var(--text-muted);
        }
        .eq-var { font-style: italic; font-weight: bold; margin-right: 10px; color: var(--text-main); }
        .fraction { display: flex; flex-direction: column; align-items: center; margin-left: 5px; }
        .num { border-bottom: 1px solid var(--text-muted); padding-bottom: 3px; text-align: center; font-size: 0.9em; }
        .den { padding-top: 3px; text-align: center; font-size: 0.9em;}
        .sym-sum { font-size: 1.1em; margin-right: 2px; }
        .sym-n { color: var(--accent-green); }
        .sym-m { color: var(--accent-cyan); }
 
        /* --- SAĞ PANEL İÇERİK --- */
        .right-content { 
            padding: 20px; 
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            box-sizing: border-box; 
            overflow: hidden; 
        }
 
        .data-wrapper {
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
        }
        table { width: 100%; border-collapse: collapse; font-size: 0.8em; }
        th { padding: 10px; text-align: center; background: rgba(255, 255, 255, 0.03); color: var(--text-main); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
        td { padding: 10px; text-align: center; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
        tr:last-child td { border-bottom: none; }
 
        .calc-dashboard {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
            margin-bottom: 15px; flex-shrink: 0;
        }
        .calc-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            padding: 12px;
            border-radius: 12px;
            text-align: center;
        }
        .card-label { font-size: 0.7em; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
        .card-value { font-size: 1.2em; font-weight: 700; color: var(--text-main); font-family: 'JetBrains Mono', monospace; }
 
        /* --- FORMÜL ALANI (CENTER ALIGN UPDATE) --- */
        .formula-details {
            background: #0f172a;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: auto;
            color: var(--text-muted);
            scrollbar-width: thin;
            scrollbar-color: #334155 #0f172a;
        }
 
        .formula-row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 30px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8em;
            width: 100%;
        }
 
        .formula-label {
            width: 100%;
            color: var(--accent-cyan);
            font-weight: 700;
            font-size: 1.2em;
            font-family: 'Inter', sans-serif;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 5px;
        }
 
        /* ORTALAMA GÜNCELLEMESİ */
        .big-fraction {
            display: flex;
            flex-direction: column;
            align-items: center; /* DEĞİŞİKLİK: Center */
            justify-content: center; /* DEĞİŞİKLİK: Center */
            overflow-x: auto;
            padding-bottom: 10px;
            width: 100%;
            scrollbar-width: none; 
        }
 
        .big-num {
            border-bottom: 1px solid #cbd5e1;
            padding-bottom: 4px;
            margin-bottom: 4px;
            text-align: center; /* DEĞİŞİKLİK: Center */
            color: var(--text-main);
            white-space: nowrap; 
            padding-left: 10px;
            padding-right: 10px;
        }
 
        .big-den {
            padding-top: 2px;
            text-align: center; /* DEĞİŞİKLİK: Center */
            color: var(--text-main);
            white-space: nowrap;
            padding-left: 10px;
            padding-right: 10px;
        }
 
        .highlight-num { color: var(--accent-green); }
        .highlight-op { 
            color: var(--accent-yellow); 
            font-weight: 900; 
            margin: 0 6px; 
            font-size: 1.1em;
            text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
        }
 
        .empty-state {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: var(--text-muted); text-align: center; font-weight: 300;
        }
 
    </style>
</head>
<body>
 
    <h1>Molecular Weight Simulation</h1>
    <div class="subtitle">Molecular Weight Distribution (M<sub>n</sub>, M<sub>w</sub>) and PDI Analysis</div>
 
    <div class="container">
        
        <div class="panel">
            <div class="panel-header">
                <button class="btn-primary" onclick="generateScenario()">Generate Scenario</button>
            </div>
            
            <div id="solution-tank">
                <div class="empty-state">Click "Generate Scenario" to start.</div>
            </div>
 
            <div class="equations-footer">
                <div class="equation-box">
                    <span class="eq-var">M<sub>n</sub></span> = 
                    <div class="fraction">
                        <span class="num"><span class="sym-sum">∑</span><span class="sym-n">N<sub>i</sub></span><span class="sym-m">M<sub>i</sub></span></span>
                        <span class="den"><span class="sym-sum">∑</span><span class="sym-n">N<sub>i</sub></span></span>
                    </div>
                </div>
                <div class="equation-box">
                    <span class="eq-var">M<sub>w</sub></span> = 
                    <div class="fraction">
                        <span class="num"><span class="sym-sum">∑</span><span class="sym-n">N<sub>i</sub></span><span class="sym-m">M<sub>i</sub></span><sup>2</sup></span>
                        <span class="den"><span class="sym-sum">∑</span><span class="sym-n">N<sub>i</sub></span><span class="sym-m">M<sub>i</sub></span></span>
                    </div>
                </div>
                <div class="equation-box">
                    <span class="eq-var" style="color:var(--accent-green)">PDI</span> = 
                    <div class="fraction">
                        <span class="num"><span class="eq-var" style="margin:0; font-size:0.9em">M<sub>w</sub></span></span>
                        <span class="den"><span class="eq-var" style="margin:0; font-size:0.9em">M<sub>n</sub></span></span>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="panel">
            <div class="panel-header">
                <h2>Analysis Data</h2>
            </div>
 
            <div class="right-content">
                <div class="data-wrapper">
                    <table id="dataTable">
                        <thead>
                            <tr>
                                <th>Chains (N<sub>i</sub>)</th>
                                <th>Mol. Wt. (M<sub>i</sub>)</th>
                                <th>(N<sub>i</sub> x M<sub>i</sub>)</th>
                                <th>(N<sub>i</sub> x M<sub>i</sub>²)</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
 
                <div class="calc-dashboard">
                    <div class="calc-card">
                        <div class="card-label">M<sub>n</sub> (Number Avg.)</div>
                        <div class="card-value" id="val-mn">---</div>
                    </div>
                    <div class="calc-card">
                        <div class="card-label">M<sub>w</sub> (Weight Avg.)</div>
                        <div class="card-value" id="val-mw">---</div>
                    </div>
                    <div class="calc-card">
                        <div class="card-label" style="color:var(--accent-green)">PDI Value</div>
                        <div class="card-value" id="val-pdi" style="color:var(--accent-green)">---</div>
                    </div>
                </div>
 
                <div class="formula-details" id="formula-area">
                    <div style="text-align:center; padding-top:40px; color:var(--text-muted); opacity:0.6;">
                        Calculation steps will appear here when a scenario is generated.
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        let groups = []; 
        const MAX_VISUAL_BEADS = 40; 
        const MIN_VISUAL_BEADS = 6; 
 
        function generateScenario() {
            clearSystem(false);
 
            const numGroups = Math.floor(Math.random() * 3) + 3; 
 
            for (let i = 0; i < numGroups; i++) {
                let rawMw = Math.floor(Math.random() * 45000) + 5000; 
                const mw = Math.round(rawMw / 500) * 500; 
                const count = Math.floor(Math.random() * 8) + 2; 
 
                groups.push({ mw: mw, count: count });
            }
 
            groups.sort((a, b) => a.mw - b.mw); 
 
            drawSimulation();
            calculateResults();
        }
 
        function drawSimulation() {
            const tank = document.getElementById('solution-tank');
            tank.innerHTML = '';
 
            const maxMw = Math.max(...groups.map(g => g.mw));
 
            groups.forEach(group => {
                let visualCount = Math.floor((group.mw / maxMw) * MAX_VISUAL_BEADS);
                if (visualCount < MIN_VISUAL_BEADS) visualCount = MIN_VISUAL_BEADS;
 
                const row = document.createElement('div');
                row.className = 'polymer-row';
 
                const info = document.createElement('div');
                info.className = 'row-info';
                info.innerHTML = `
                    <div class="count-badge">${group.count}x</div>
                    <div class="mw-label">${group.mw.toLocaleString()}</div>
                `;
 
                const visual = document.createElement('div');
                visual.className = 'chain-visual';
 
                const start = document.createElement('div');
                start.className = 'bead end';
                start.style.animationDelay = `-${Math.random() * 2}s`;
                visual.appendChild(start);
 
                for(let k=0; k < visualCount; k++) {
                    const bead = document.createElement('div');
                    bead.className = 'bead';
                    bead.style.animationDelay = `-${Math.random() * 3}s`;
                    visual.appendChild(bead);
                }
 
                const end = document.createElement('div');
                end.className = 'bead end';
                end.style.animationDelay = `-${Math.random() * 2}s`;
                visual.appendChild(end);
 
                row.appendChild(info);
                row.appendChild(visual);
                tank.appendChild(row);
            });
        }
 
        function calculateResults() {
            let sumNi = 0;
            let sumNiMi = 0;
            let sumNiMi2 = 0;
 
            const tbody = document.querySelector('#dataTable tbody');
            tbody.innerHTML = '';
 
            let mnNumeratorParts = [];
            let mnDenominatorParts = [];
            let mwNumeratorParts = [];
            let mwDenominatorParts = [];
 
            groups.forEach(group => {
                const Ni = group.count;
                const Mi = group.mw;
                
                const NiMi = Ni * Mi;
                const NiMi2 = Ni * Math.pow(Mi, 2);
 
                sumNi += Ni;
                sumNiMi += NiMi;
                sumNiMi2 += NiMi2;
 
                const partNiMi = `(<span class="highlight-num">${Ni}</span> x ${Mi.toLocaleString()})`;
                const partNi = `<span class="highlight-num">${Ni}</span>`;
                const partNiMi2 = `(<span class="highlight-num">${Ni}</span> x ${Mi.toLocaleString()}²)`;
 
                mnNumeratorParts.push(partNiMi);
                mnDenominatorParts.push(partNi);
                
                mwNumeratorParts.push(partNiMi2);
                mwDenominatorParts.push(partNiMi); 
 
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td style="color:var(--accent-green); font-weight:700;">${Ni}</td>
                    <td>${Mi.toLocaleString()}</td>
                    <td>${NiMi.toLocaleString()}</td>
                    <td>${NiMi2.toLocaleString()}</td>
                `;
                tbody.appendChild(tr);
            });
 
            const Mn = sumNiMi / sumNi;
            const Mw = sumNiMi2 / sumNiMi;
            const PDI = Mw / Mn;
 
            document.getElementById('val-mn').innerText = Math.round(Mn).toLocaleString();
            document.getElementById('val-mw').innerText = Math.round(Mw).toLocaleString();
            document.getElementById('val-pdi').innerText = PDI.toFixed(3);
 
            const formulaDiv = document.getElementById('formula-area');
            
            formulaDiv.innerHTML = `
                <div class="formula-row">
                    <div class="formula-label">M<sub>n</sub> Calculation:</div>
                    <div class="big-fraction">
                        <div class="big-num">
                            ${mnNumeratorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                        <div class="big-den">
                            ${mnDenominatorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                    </div>
                </div>
 
                <div class="formula-row" style="margin-bottom:0;">
                    <div class="formula-label">M<sub>w</sub> Calculation:</div>
                    <div class="big-fraction">
                        <div class="big-num">
                            ${mwNumeratorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                        <div class="big-den">
                            ${mwDenominatorParts.join('<span class="highlight-op">+</span>')}
                        </div>
                    </div>
                </div>
            `;
        }
 
        function clearSystem(showEmptyMsg = true) {
            groups = [];
            const tank = document.getElementById('solution-tank');
            const formulaDiv = document.getElementById('formula-area');
            
            if(showEmptyMsg) {
                tank.innerHTML = `<div class="empty-state">Click "Generate Scenario" to start.</div>`;
                document.querySelector('#dataTable tbody').innerHTML = '';
                document.getElementById('val-mn').innerText = '---';
                document.getElementById('val-mw').innerText = '---';
                document.getElementById('val-pdi').innerText = '---';
                formulaDiv.innerHTML = '<div style="text-align:center; padding-top:40px; color:var(--text-muted); opacity:0.6;">Calculation steps will appear here when a scenario is generated.</div>';
            } else {
                tank.innerHTML = '';
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPC/SEC Master Simulation V3</title>
    <style>
        :root {
            /* Arka plan */
            --bg-color: #020202; 
            --panel-bg: #121214;
            --text-color: #e0e0e0;
            
            /* Renk Paleti */
            --pink-modern: #ff2a6d;
            --green-modern: #05d5fa; 
            --green-real: #00e676;
            --blue-modern: #2d70fd;
            
            --neon-accent: #00f3ff;
        }
 
        body {
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }
 
        /* --- 5) ANA BAŞLIK MODERNİZASYONU --- */
        h1 {
            margin: 10px 0 5px 0;
            font-weight: 700; /* Daha kalın */
            font-size: 1.6rem;
            color: #ffffff;
            letter-spacing: 2px;
            text-transform: uppercase;
            /* Hafif modern gölge */
            text-shadow: 0 4px 10px rgba(0, 243, 255, 0.15); 
            font-family: 'Montserrat', 'Segoe UI', sans-serif;
        }
 
        /* --- ÜST KONTROLLER --- */
        #top-controls {
            width: 95%;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 8px;
            z-index: 10;
        }
 
        .controls button {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--neon-accent);
            padding: 10px 25px;
            margin-left: 15px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 30px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
 
        .controls button:hover {
            background: var(--neon-accent);
            color: #000;
            border-color: var(--neon-accent);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
            transform: translateY(-2px);
        }
 
        /* --- SİMÜLASYON ALANI --- */
        #simulation-container {
            position: relative;
            width: 95%;
            height: 45vh;
            border: 1px solid #333;
            background: radial-gradient(circle at 50% 50%, #0a0a0c 0%, #000000 100%);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }
 
        .zone-marker {
            position: absolute;
            top: 0;
            height: 100%;
            border-right: 1px dashed rgba(255,255,255,0.1);
            pointer-events: none;
        }
        
        /* --- 3) KOLON YAZILARI BEYAZ --- */
        .zone-text {
            position: absolute;
            top: 15px;
            width: 100%;
            text-align: center;
            font-size: 0.85rem;
            color: #ffffff; /* Tam Beyaz */
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Okunabilirlik için gölge */
            opacity: 0.9;
        }
 
        /* --- GRAFİK ALANI --- */
        #chromatogram {
            width: 95%;
            height: 30vh;
            margin-top: 15px;
            background: var(--panel-bg);
            border: 1px solid #333;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        }
 
        /* --- ALT BİLGİ (LEJANT) --- */
        #bottom-container {
            width: 95%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.05);
            backdrop-filter: blur(5px);
        }
 
        .legend-large { display: flex; gap: 35px; align-items: center; }
 
        .legend-item {
            display: flex; align-items: center;
            font-size: 0.9rem; font-weight: 500;
            color: #ccc;
            letter-spacing: 0.5px;
        }
        
        .dot-large { 
            width: 14px; height: 14px; display: inline-block; 
            border-radius: 50%; margin-right: 10px; 
            box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(255,255,255,0.1);
        }
        
        /* Küçük molekül dotu için özel stil (Flat) */
        .dot-flat {
            width: 14px; height: 14px; display: inline-block; 
            border-radius: 50%; margin-right: 10px;
            box-shadow: none; /* Gölge yok */
        }
    </style>
</head>
<body>
 
    <h1>GEL PERMEATION CHROMATOGRAPHY (GPC)</h1>
 
    <div id="top-controls">
        <div class="controls">
            <button onclick="injectSample()">Inject Sample</button>
            <button onclick="resetSimulation()">Reset</button>
        </div>
    </div>
 
    <div id="simulation-container">
        <div class="zone-marker" style="left: 0; width: 33%;">
            <div class="zone-text">COLUMN 1</div>
        </div>
        <div class="zone-marker" style="left: 33%; width: 33%;">
            <div class="zone-text">COLUMN 2</div>
        </div>
        <div class="zone-marker" style="left: 66%; width: 34%; border:none;">
            <div class="zone-text">COLUMN 3</div>
        </div>
        <canvas id="simCanvas"></canvas>
    </div>
 
    <div id="chromatogram">
        <canvas id="graphCanvas"></canvas>
    </div>
 
    <div id="bottom-container">
        <div class="legend-large">
            <div class="legend-item" style="color:var(--pink-modern);">
                <span class="dot-large" style="background:var(--pink-modern);"></span>High Molecular Weight
            </div>
            <div class="legend-item" style="color:var(--green-real);">
                <span class="dot-large" style="background:var(--green-real);"></span>Medium Molecular Weight
            </div>
            <div class="legend-item" style="color:var(--blue-modern);">
                <span class="dot-flat" style="background:var(--blue-modern);"></span>Low Molecular Weight
            </div>
            <div class="legend-item" style="color:rgba(100, 180, 240, 0.9);">
                <span style="font-size:1.4rem; margin-right:8px; line-height:0;">≋</span> Solvent
            </div>
        </div>
    </div>
 
    <script>
        /**
         * MASTER CODE V3
         * Visual Updates: Flat Small Molecules, White Labels, Normalized Graph, New Title
         */
 
        const simContainer = document.getElementById('simulation-container');
        const canvas = document.getElementById('simCanvas');
        const ctx = canvas.getContext('2d');
        const gCanvas = document.getElementById('graphCanvas');
        const gCtx = gCanvas.getContext('2d');
 
        // --- FİZİK SABİTLERİ (DOKUNULMADI) ---
        const SIMULATION_SPEED = 2; 
        const CONSTANT_VELOCITY = 1.0; 
        const TOTAL_TIME_BINS = 8000; 
        const LARGE_RADIUS = 7.5;
        const GAP = 5;
        const SAFE_DIST = (LARGE_RADIUS * 2) + GAP;
 
        let width, height, gWidth, gHeight;
        let polymers = [];
        let solventParticles = [];
        let obstacles = [];
        let signalData = [];
        let physicsTime = 0; 
        let isRunning = true;
 
        for(let i=0; i<TOTAL_TIME_BINS; i++) signalData[i] = 0;
 
        function resize() {
            width = simContainer.clientWidth;
            height = simContainer.clientHeight;
            canvas.width = width;
            canvas.height = height;
            gWidth = gCanvas.parentElement.clientWidth;
            gHeight = gCanvas.parentElement.clientHeight;
            gCanvas.width = gWidth;
            gCanvas.height = gHeight;
            generateObstacles();
            initSolvent();
        }
 
        /* --- 1. ÇÖZÜCÜ --- */
        class Solvent {
            constructor() { this.reset(); this.x = Math.random() * width; }
            reset() {
                this.x = -10;
                this.y = Math.random() * height;
                this.size = Math.random() * 2 + 1;
                this.speed = CONSTANT_VELOCITY + (Math.random() * 0.1); 
            }
            update() { this.x += this.speed; if(this.x > width) this.reset(); }
            draw() {
                ctx.fillStyle = 'rgba(100, 180, 255, 0.12)'; 
                ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fill();
            }
        }
        function initSolvent() {
            solventParticles = [];
            for(let i=0; i<450; i++) solventParticles.push(new Solvent());
        }
 
        /* --- 2. ENGEL (Açık Renk) --- */
        class Obstacle {
            constructor(x, y, r) {
                this.x = x; this.y = y; this.r = r;
                this.points = [];
                let sides = 5 + Math.floor(Math.random() * 5); 
                for(let i=0; i<sides; i++) {
                    let angle = (i/sides) * Math.PI*2;
                    let variation = 0.7 + Math.random() * 0.6; 
                    this.points.push({x: Math.cos(angle)*r*variation, y: Math.sin(angle)*r*variation});
                }
                
                // Açık Kil/Kiremit Rengi
                let hue = 15 + Math.random() * 15; 
                let sat = 25;
                let lit = 45 + Math.random() * 10; 
                this.color = `hsl(${hue}, ${sat}%, ${lit}%)`;
            }
            draw() {
                ctx.save(); ctx.translate(this.x, this.y);
                ctx.beginPath(); ctx.moveTo(this.points[0].x, this.points[0].y);
                for(let i=1; i<this.points.length; i++) ctx.lineTo(this.points[i].x, this.points[i].y);
                ctx.closePath();
                ctx.fillStyle = this.color; ctx.fill();
                ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1; ctx.stroke();
                ctx.restore();
            }
        }
 
        function generateObstacles() {
            obstacles = [];
            createZone(0, width*0.33, 45, 16, 22);
            createZone(width*0.33, width*0.66, 75, 10, 16);
            createZone(width*0.66, width, 130, 7, 12);
        }
 
        function createZone(startX, endX, targetCount, minR, maxR) {
            let placed = 0, attempts = 0;
            while(placed < targetCount && attempts < 3000) {
                attempts++;
                let r = minR + Math.random()*(maxR-minR);
                let x = startX + Math.random()*(endX - startX);
                let y = Math.random()*height;
                if(y < r+15 || y > height-r-15) continue;
                let safe = true;
                for(let o of obstacles) {
                    if(Math.hypot(x - o.x, y - o.y) < o.r + r + SAFE_DIST) { safe = false; break; }
                }
                if(safe) { obstacles.push(new Obstacle(x, y, r)); placed++; attempts = 0; }
            }
        }
 
        /* --- 3. POLİMER --- */
        class Polymer {
            constructor() {
                this.x = 20;
                this.y = height/2 + (Math.random()-0.5)*120;
                this.vx = CONSTANT_VELOCITY; 
                this.vy = 0;
                this.finished = false;
                
                this.stuckTimer = 0; 
                this.lastX = this.x;
                this.poreHoldTimer = 0; 
                this.immunityTimer = 0; 
 
                let rand = Math.random();
                
                if(rand < 0.33) {
                    this.type = 'large';
                    this.r = LARGE_RADIUS * (0.9 + Math.random()*0.2);
                    this.color = '#ff2a6d'; 
                    this.poreWaitMax = 0; 
                } else if (rand < 0.66) {
                    this.type = 'medium';
                    this.r = 4.5 * (0.9 + Math.random()*0.2);
                    this.color = '#00e676'; 
                    this.poreWaitMax = 70; 
                } else {
                    this.type = 'small';
                    this.r = 2.5 * (0.9 + Math.random()*0.2);
                    this.color = '#2d70fd'; 
                    this.poreWaitMax = 280; 
                }
            }
 
            update() {
                if(this.finished) return;
 
                if(this.immunityTimer > 0) this.immunityTimer--;
 
                if(this.poreHoldTimer > 0) {
                    this.poreHoldTimer--;
                    this.vx = 0; this.vy = 0; 
                    if(this.poreHoldTimer <= 0) {
                         this.immunityTimer = 30; 
                         this.vx = CONSTANT_VELOCITY * 0.5; 
                    }
                    return; 
                }
 
                if (this.vx < CONSTANT_VELOCITY) {
                    this.vx = this.vx * 0.9 + CONSTANT_VELOCITY * 0.1; 
                }
                if (this.vx > CONSTANT_VELOCITY) this.vx = CONSTANT_VELOCITY;
 
                this.vy += (Math.random()-0.5) * 0.05;
                this.vy *= 0.95; 
 
                let nextX = this.x + this.vx;
                let nextY = this.y + this.vy;
                let collided = false;
 
                if(this.immunityTimer <= 0) {
                    for(let obs of obstacles) {
                        let dx = nextX - obs.x;
                        let dy = nextY - obs.y;
                        let dist = Math.hypot(dx, dy);
                        let minDist = this.r + obs.r * 0.85;
 
                        if(dist < minDist) {
                            collided = true;
                            let nx = dx / dist;
                            let ny = dy / dist;
                            this.x = obs.x + nx * minDist;
                            this.y = obs.y + ny * minDist;
 
                            if(this.type === 'large') {
                                let dot = this.vx * nx + this.vy * ny;
                                this.vx = (this.vx - 2 * dot * nx);
                                this.vy = (this.vy - 2 * dot * ny);
                            } else {
                                this.poreHoldTimer = Math.floor(Math.random() * this.poreWaitMax) + 15;
                                this.vx = 0; this.vy = 0;
                            }
                            break;
                        }
                    }
                }
 
                if(!collided) { this.x = nextX; this.y = nextY; }
 
                // Anti-Stuck
                if(Math.abs(this.x - this.lastX) < 0.1 && this.poreHoldTimer <= 0) {
                    this.stuckTimer++;
                } else {
                    this.stuckTimer = 0;
                }
                this.lastX = this.x;
                
                if(this.stuckTimer > 90) { 
                    let dir = Math.random() < 0.5 ? -1 : 1;
                    this.vy = dir * 3.0; 
                    this.vx = CONSTANT_VELOCITY * 0.2; 
                    this.immunityTimer = 45; 
                    this.stuckTimer = 0;
                }
 
                if(this.y < 10) { this.y = 10; this.vy *= -0.5; }
                if(this.y > height-10) { this.y = height-10; this.vy *= -0.5; }
                
                if(this.x > width - 20) {
                    this.finished = true;
                    addToGraph(this.type, physicsTime);
                }
            }
 
            draw() {
                if(this.finished) return;
                
                // --- 4) GÖRSEL AYRIM: KÜÇÜKLER DÜZ, DİĞERLERİ 3D ---
                if (this.type === 'small') {
                    // DÜZ (FLAT) GÖRÜNÜM
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
                    ctx.fillStyle = this.color;
                    ctx.shadowBlur = 0; // Neon yok
                    if(this.poreHoldTimer > 0) ctx.globalAlpha = 0.6;
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                } else {
                    // 3D KÜRE + NEON
                    ctx.shadowBlur = 6;
                    ctx.shadowColor = this.color;
 
                    let grad = ctx.createRadialGradient(
                        this.x - this.r/3, this.y - this.r/3, this.r/4,
                        this.x, this.y, this.r
                    );
                    grad.addColorStop(0, '#ffffff');
                    grad.addColorStop(0.4, this.color);
                    grad.addColorStop(1, this.color + '10');
 
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
                    ctx.fillStyle = grad;
                    
                    if(this.poreHoldTimer > 0) ctx.globalAlpha = 0.6;
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                    ctx.shadowBlur = 0; // Reset
                }
            }
        }
 
        /* --- 4. GRAFİK --- */
        function addToGraph(type, time) {
            let bin = Math.floor(time / 2.0); 
            if(bin >= TOTAL_TIME_BINS) return;
            
            let spread = 150; 
            let intensity = (type==='large')?16 : (type==='medium')?14 : 12; 
 
            for(let i = bin - spread; i <= bin + spread; i++) {
                if(i>=0 && i < TOTAL_TIME_BINS) {
                    let diff = i - bin;
                    let val = intensity * Math.exp(-(diff*diff)/(2*(spread/2.5)*(spread/2.5)));
                    signalData[i] += val;
                }
            }
        }
 
        function drawGraph() {
            gCtx.clearRect(0, 0, gWidth, gHeight);
            
            let maxVal = 0;
            for(let i=0; i<TOTAL_TIME_BINS; i++) {
                if(signalData[i] > maxVal) maxVal = signalData[i];
            }
            if(maxVal < 10) maxVal = 10; 
            
            // --- 2) NORMALİZASYON (TAVAN PAYI) ---
            // Grafiğin %85'ini dolduracak şekilde ayarlandı. Asla kesilmez.
            let scaleFactor = (gHeight * 0.85) / maxVal;
 
            gCtx.strokeStyle = '#555'; gCtx.lineWidth = 1;
            gCtx.beginPath();
            gCtx.moveTo(40, gHeight-30); gCtx.lineTo(gWidth, gHeight-30); 
            gCtx.moveTo(40, gHeight-30); gCtx.lineTo(40, 10);
            gCtx.stroke();
 
            gCtx.fillStyle = '#aaa'; gCtx.font = '12px Arial'; // Font biraz büyüdü
            gCtx.fillText("Signal (mV)", 10, 20);
            
            // --- 1) ALIKONMA SÜRESİ YAZISI ---
            gCtx.font = 'bold 13px Arial';
            gCtx.fillText("RETENTION TIME ->", gWidth - 200, gHeight - 10);
 
            gCtx.beginPath();
            gCtx.moveTo(40, gHeight-30);
            
            // Modern Gradyan
            let grad = gCtx.createLinearGradient(40, 0, gWidth, 0);
            grad.addColorStop(0.15, '#ff2a6d'); 
            grad.addColorStop(0.45, '#00e676'); 
            grad.addColorStop(0.85, '#2d70fd'); 
            
            gCtx.strokeStyle = grad; gCtx.lineWidth = 2.5;
 
            for(let i=0; i<TOTAL_TIME_BINS; i++) {
                let x = 40 + i * ((gWidth-40) / TOTAL_TIME_BINS); 
                let y = (gHeight - 31) - (signalData[i] * scaleFactor);
                gCtx.lineTo(x, y);
            }
            gCtx.stroke();
            
            gCtx.fillStyle = 'rgba(255,255,255,0.03)';
            gCtx.lineTo(gWidth, gHeight-30);
            gCtx.fill();
        }
 
        function injectSample() {
            let interval = 8; 
            for(let i=0; i<150; i++) {
                setTimeout(() => polymers.push(new Polymer()), i * interval);
            }
        }
 
        function resetSimulation() {
            polymers = [];
            physicsTime = 0; 
            for(let i=0; i<TOTAL_TIME_BINS; i++) signalData[i] = 0;
            gCtx.clearRect(0,0,gWidth, gHeight);
        }
 
        function loop() {
            if(!isRunning) return;
            ctx.clearRect(0, 0, width, height);
 
            // 2x Hız
            for(let k=0; k < SIMULATION_SPEED; k++) {
                physicsTime++;
                solventParticles.forEach(s => s.update());
                polymers.forEach(p => p.update());
            }
 
            solventParticles.forEach(s => s.draw());
            obstacles.forEach(o => o.draw());
            polymers.forEach(p => p.draw());
 
            if(physicsTime % 5 === 0) drawGraph();
 
            requestAnimationFrame(loop);
        }
 
        window.addEventListener('resize', resize);
        setTimeout(() => { resize(); loop(); }, 100);
 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tacticity in Polymers</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #1c202b 0%, #0b0d12 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #ffffff;
        }

#tacticity-description strong {
            color: #2ecc71;
            font-weight: 600;
        }

button:hover {
            color: #fff;
            border-color: #fff;
        }

<div id="main-title">Tacticity in Polymers</div>
    <div id="tacticity-description"></div>

<div id="ui-container">
        <button id="btn-iso" class="active" onclick="setMode('isotactic')">Isotactic</button>
        <button id="btn-syn" onclick="setMode('syndiotactic')">Syndiotactic</button>
        <button id="btn-ata" onclick="setMode('atactic')">Atactic</button>
    </div>

const descriptions = {
            'isotactic': "<strong>Isotactic:</strong> All functional side groups (green spheres) are located on the same side of the main chain. This regular stereo-chemical structure allows the polymer to be <strong>highly crystalline</strong> and more durable.",
            'syndiotactic': "<strong>Syndiotactic:</strong> Functional side groups alternate regularly along the main chain in a front-to-back sequence. This is also a regular structure that allows <strong>crystallinity</strong>.",
            'atactic': "<strong>Atactic:</strong> The arrangement of functional side groups is completely random. There is no specific order. Due to this irregularity, chains cannot pack regularly, resulting in polymers that are usually amorphous, transparent, and softer."
        };

const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 35);

const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

// --- PARTICLE SYSTEM (Floating Stars) ---
        let particles;
        const particleCount = 2000;

function createSnowflakeTexture() {
            const canvas = document.createElement('canvas');
            canvas.width = 32; canvas.height = 32;
            const ctx = canvas.getContext('2d');
            const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
            gradient.addColorStop(0, 'rgba(255,255,255,1)');
            gradient.addColorStop(0.4, 'rgba(230,255,230,0.5)'); 
            gradient.addColorStop(1, 'rgba(0,0,0,0)');
            ctx.fillStyle = gradient; ctx.fillRect(0, 0, 32, 32);
            return new THREE.CanvasTexture(canvas);
        }

// --- LIGHTING ---
        scene.add(new THREE.AmbientLight(0xffffff, 0.7)); 
        const mainLight = new THREE.DirectionalLight(0xffffff, 2.5);
        mainLight.position.set(10, 20, 15);
        scene.add(mainLight);

// Geometries and Materials
        const atomGeom = new THREE.SphereGeometry(0.5, 20, 20); 
        const sideAtomGeom = new THREE.SphereGeometry(0.65, 20, 20);
        const bondGeom = new THREE.CylinderGeometry(0.12, 0.12, 1, 10);

let polymerGroup = new THREE.Group();
        scene.add(polymerGroup);

// --- SATELLITE MODEL ---
        let satelliteGroup = new THREE.Group();
        const bodyMat = new THREE.MeshStandardMaterial({ color: 0x4a5568, metalness: 0.8, roughness: 0.2 });
        const solarMat = new THREE.MeshStandardMaterial({ color: 0x2ecc71, emissive: 0x145a32, emissiveIntensity: 0.8, side: THREE.DoubleSide });

function createSatellite() {
            const mainBody = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1, 1), bodyMat);
            satelliteGroup.add(mainBody);
            const antennaRod = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 1.2, 8), bodyMat);
            antennaRod.position.set(0, 0.8, 0);
            satelliteGroup.add(antennaRod);
            const antennaDish = new THREE.Mesh(new THREE.SphereGeometry(0.3, 16, 16), bodyMat);
            antennaDish.position.set(0, 1.4, 0);
            satelliteGroup.add(antennaDish);
            const panel1 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 2, 1.5), solarMat);
            panel1.position.set(1, 0, 0);
            panel1.rotation.y = Math.PI / 2;
            satelliteGroup.add(panel1);
            const panel2 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 2, 1.5), solarMat);
            panel2.position.set(-1, 0, 0);
            panel2.rotation.y = Math.PI / 2;
            satelliteGroup.add(panel2);
            satelliteGroup.position.set(30, 15, -20); 
            satelliteGroup.scale.set(1.5, 1.5, 1.5); 
            scene.add(satelliteGroup);
        }
        createSatellite();

function createPolymer(type) {
            polymerGroup.clear();
            const chainLength = 22;
            const bondLength = 1.8;

for (let i = 0; i < chainLength; i++) {
                const x = (i - chainLength / 2) * bondLength;
                const y = (i % 2 === 0) ? 0.4 : -0.4;
                const atom = new THREE.Mesh(atomGeom, backboneMat);
                atom.position.set(x, y, 0);
                polymerGroup.add(atom);

setMode('isotactic');

function animate() {
            requestAnimationFrame(animate);
            controls.update();

const time = performance.now() * 0.001;

// POLYMER FLOATING
            polymerGroup.position.y = Math.sin(time * 0.6) * 0.4;
            polymerGroup.rotation.x = Math.cos(time * 0.4) * 0.05;

// STARS FLOWING
            if (particles) {
                const positions = particles.geometry.attributes.position.array;
                for (let i = 0; i < particleCount; i++) {
                    positions[i * 3 + 1] += 0.05;
                    if (positions[i * 3 + 1] > 100) positions[i * 3 + 1] = -100;
                }
                particles.geometry.attributes.position.needsUpdate = true;
                particles.rotation.y += 0.0005;
            }

// SATELLITE ORBIT
            if (satelliteGroup) {
                satelliteGroup.rotation.y += 0.002;
                satelliteGroup.rotation.z = Math.sin(time * 0.2) * 0.2;
                satelliteGroup.position.x = Math.sin(time * 0.1) * 35;
                satelliteGroup.position.y = Math.cos(time * 0.1) * 20 + Math.sin(time * 0.3) * 5;
                satelliteGroup.position.z = Math.cos(time * 0.08) * -25;
            }

renderer.render(scene, camera);
        }

animate();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step-growth Polymerization</title>
    <style>
        :root {
            --bg-color: #020205;
            --panel-bg: rgba(12, 12, 16, 0.45); 
            --text-main: #e0e0e0;
            --neon-blue: #00f3ff;
            --neon-pink: #ff00ff;
            --neon-green: #00ff41;
            --neon-yellow: #ffee00;
            --danger-red: #ff3838;
            --card-bg: rgba(16, 20, 30, 0.85);
            --graph-bg: rgba(0, 0, 0, 0.3);
        }

body { margin: 0; overflow: hidden; background-color: var(--bg-color); color: var(--text-main); font-family: 'Segoe UI', Roboto, sans-serif; display: flex; height: 100vh; }

#sim-area { flex-grow: 1; position: relative; background: #080808; overflow: hidden; }
        canvas#main-canvas { display: block; width: 100%; height: 100%; }

/* CARDS */
        #intro-overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            display: flex; justify-content: center; align-items: center; 
            gap: 25px; 
            background: radial-gradient(circle at center, rgba(0,243,255,0.1) 0%, rgba(0,0,0,0.9) 80%); 
            backdrop-filter: blur(8px); z-index: 10; transition: opacity 0.3s, transform 0.3s; 
        }
        .monomer-card { 
            width: 240px; min-height: 420px; 
            background: var(--card-bg); border: 2px solid; border-radius: 20px; 
            display: flex; flex-direction: column; padding: 30px 25px; 
            position: relative; backdrop-filter: blur(20px); 
            animation: float 2.5s ease-in-out infinite; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.6); overflow: hidden;
            justify-content: space-between; 
        }
        .monomer-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
        .monomer-card:nth-child(2) { animation-delay: 1.25s; }
        .card-blue { border-color: var(--neon-blue); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 30px rgba(0, 243, 255, 0.05); }
        .card-pink { border-color: var(--neon-pink); box-shadow: 0 0 30px rgba(255, 0, 255, 0.2), inset 0 0 30px rgba(255, 0, 255, 0.05); }
        
        .card-header { text-align: center; position: relative; z-index: 2; flex-shrink: 0;}
        .card-type { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; margin-bottom: 5px;}
        .card-title { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; text-shadow: 0 0 10px currentColor; }
        .card-subtitle { font-size: 0.85rem; color: #aaa; font-style: italic; }
        
        .visual-container { 
            display: flex; justify-content: center; align-items: center; 
            position: relative; z-index: 2; 
            flex-grow: 1; 
            margin: 0; 
        }
        .monomer-visual { width: 70px; height: 70px; border-radius: 50%; animation: pulse 1.5s infinite alternate; }
        .visual-blue { background: var(--neon-blue); box-shadow: 0 0 40px var(--neon-blue); }
        .visual-pink { background: var(--neon-pink); box-shadow: 0 0 40px var(--neon-pink); }
        
        .card-data-grid { 
            display: grid; grid-template-columns: auto 1fr; gap: 12px 15px; 
            font-size: 0.8rem; position: relative; z-index: 2; 
            background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; 
            border: 1px solid rgba(255,255,255,0.1); margin-top: 0; flex-shrink: 0;
        }
        .data-label { color: #888; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 1px;}
        .data-value { text-align: right; font-family: 'Courier New', monospace; font-weight: bold; color: #fff; font-size: 0.85rem;}
        
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
        @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
        .hidden-overlay { opacity: 0; transform: scale(1.1); pointer-events: none; }
    </style>
</head>
<body>

<div id="panel">
    <h2>STEP-GROWTH POLYMERIZATION</h2>

<div class="monitor-box">
        <div style="display:flex; justify-content:space-between; font-size:0.8rem; color:#888;">
            <span>Free Monomers</span>
            <span id="monomer-pct" style="color:#fff">100%</span>
        </div>
        <div class="progress-container"><div class="threshold-line"></div><div id="monomer-bar" class="progress-bar"></div></div>
        <div id="phase-badge" class="phase-badge phase-wait">SYSTEM WAITING</div>
    </div>

<div class="control-group" style="margin-top:10px;">
        <label>Mechanism Type</label>
        <div style="display:flex; flex-direction:column; gap:3px;">
            <label style="justify-content: flex-start; gap:10px; cursor:pointer;"><input type="radio" name="rtype" value="step" checked> Step-Growth (Polyurethane)</label>
            <label style="justify-content: flex-start; gap:10px; cursor:pointer;"><input type="radio" name="rtype" value="cond"> Condensation (Polyamide)</label>
        </div>
    </div>

<div class="control-group"><label><span id="lbl-a" style="color:var(--neon-blue)">Monomer A</span><span id="val-a">100</span></label><input type="range" id="input-a" min="20" max="500" step="5" value="100" class="reactive-slider"></div>
    <div class="control-group"><label><span id="lbl-b" style="color:var(--neon-pink)">Monomer B</span><span id="val-b">100</span></label><input type="range" id="input-b" min="20" max="500" step="5" value="100" class="reactive-slider"></div>
    <div class="control-group" style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 5px; margin-top: 5px;">
        <label><span>Solvent</span><span id="val-solvent" style="color:#aaa">0</span></label>
        <input type="range" id="input-solvent" min="0" max="500" step="5" value="0" class="reactive-slider" style="--thumb-color:#aaa">
    </div>
    <div class="control-group">
        <label><span>Temperature (T) / Speed</span><span id="val-speed" style="color:orange">2.0x</span></label>
        <input type="range" id="input-speed" min="1" max="5" step="0.5" value="2.0" class="reactive-slider">
    </div>

<div class="graph-wrapper">
        <div class="graph-title">Graph: Conversion (p) vs Mw</div>
        <div class="graph-container">
            <canvas id="graphCanvas" class="graph-canvas"></canvas>
        </div>
        <div class="stats-container">
            <div class="stat-box"><div class="stat-label">Mn</div><div id="stat-mn" class="stat-value">0</div></div>
            <div class="stat-box"><div class="stat-label">Mw</div><div id="stat-mw" class="stat-value">0</div></div>
            <div class="stat-box"><div class="stat-label">PDI</div><div id="stat-pdi" class="stat-value">1.00</div></div>
        </div>
    </div>

<div class="btn-row">
        <button id="btn-main" class="state-start">START</button>
    </div>
</div>

// STRICT CONSTANTS
    const CONF = { rad: 5, bond: 12, cA: '#00f3ff', cB: '#ff00ff', maxOligomer: 3, threshold: 5.0, type: 'step' };

if(graphData.length===0 || conversionPct > graphData[graphData.length-1].p + 0.5) {
            graphData.push({p:conversionPct, mw:Mw});
        }

class Solvent {
        constructor(x, y) { this.x=x; this.y=y; this.radius=3; this.vx=(Math.random()-0.5)*3; this.vy=(Math.random()-0.5)*3; }
        update(spd) { 
            const margin = 50; const force = 0.1 * spd;
            if(this.x < margin) this.vx += force; if(this.x > width - margin) this.vx -= force;
            if(this.y < margin) this.vy += force; if(this.y > height - margin) this.vy -= force;
            this.x+=this.vx*spd*0.5; this.y+=this.vy*spd*0.5; 
            if(this.x<0||this.x>width)this.vx*=-1; if(this.y<0||this.y>height)this.vy*=-1; 
        }
        draw() { ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,6.28); ctx.fillStyle="rgba(150,150,150,0.5)"; ctx.fill(); }
    }
    function updateSolventCount(target) {
        if(target>solvents.length)for(let i=0;i<target-solvents.length;i++)solvents.push(new Solvent(Math.random()*width, Math.random()*height));
        else if(target<solvents.length)solvents.splice(0,solvents.length-target);
    }
    
    // --- PHYSICS (GOLDEN MASTER + ANTI-OVERLAP) ---
    class Chain {
        constructor(x, y, type) { 
            this.monomers=[{x,y,type,color:type===0?CONF.cA:CONF.cB}]; 
            this.angle=Math.random()*6.28; 
            this.vx=0; this.vy=0; 
        }
        get len() { return this.monomers.length; } get head() { return this.monomers[0]; } get tail() { return this.monomers[this.len-1]; }
        
        update(spd) {
            let m = Math.max(0.3, 1 / (this.len ** 0.35));
            let v = spd * m; 
            
            // Random Wander
            this.angle += (Math.random()-0.5)*0.2;

displayPct.innerText=pct.toFixed(1)+"%"; bar.style.width=pct+"%";
        if (currentPhase === 1) { badge.innerText="PHASE 1: OLIGOMERIZATION"; badge.className="phase-badge phase-wait"; } 
        else { badge.innerText="PHASE 2: POLYMERIZATION"; badge.className="phase-badge phase-go"; }

c1.monomers = m; 
                    particles.splice(j,1); break;
                }
            }
        }
        animId = requestAnimationFrame(loop);
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polymerization V83: Correct MW Logic</title>
    <style>
        :root {
            --bg-color: #080808;
            --panel-bg: rgba(20, 25, 35, 0.85); 
            --panel-bg-ghost: rgba(20, 25, 35, 0.15); 
            --text-color: #e0e0e0;
            --accent-cyan: #00f3ff;
            --accent-pink: #ff0055;
            --accent-green: #00ff66;
            --accent-yellow: #ffcc00;
            --accent-purple: #aa00ff;
            --accent-orange: #ffaa00;
        }
 
        body {
            margin: 0;
            overflow: hidden;
            background-color: var(--bg-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            display: flex;
            height: 100vh;
        }
 
        canvas#simCanvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0; left: 0;
            z-index: 1;
            cursor: crosshair; 
        }

#soundBtn.active {
            opacity: 1;
            filter: drop-shadow(0 0 5px var(--accent-cyan));
        }

<div class="fading-content">
            <h2>FREE RADICAL & LIVING POLYMERIZATION SIMULATION</h2>
            
            <div class="info-row">
                <div class="chem-tag">MONOMER: STYRENE</div>
                <div class="chem-tag">CONVERSION: <span class="conv-value" id="rtConv">0.0</span>%</div>
            </div>
    
            <div class="radio-top-container">
                <label class="radio-label">
                    <input type="radio" name="polyMode" value="free" checked> Free Radical Polymerization
                </label>
                <label class="radio-label">
                    <input type="radio" name="polyMode" value="living"> Living Polymerization
                </label>
            </div>
    
            <div class="control-wrapper">
                <div class="control-group">
                    <label class="slider-label">MONOMER: <span id="monomerVal">300</span></label>
                    <input type="range" id="monomerRange" min="50" max="3000" value="300">
                </div>
                <div class="control-group">
                    <label class="slider-label">INITIATOR: <span id="initiatorVal">20</span></label>
                    <input type="range" id="initiatorRange" min="10" max="100" value="20">
                </div>
                <div class="control-group">
                    <label class="slider-label">SOLVENT: <span id="solventVal">40</span></label>
                    <input type="range" id="solventRange" min="0" max="100" value="40">
                </div>
                <div class="control-group">
                    <label class="slider-label">TEMPERATURE: <span id="tempVal">90°C</span></label>
                    <input type="range" id="tempRange" min="65" max="125" value="90">
                </div>
                <button id="initBtn" class="action-btn">START</button>
            </div>
        </div>

<div class="info-container">
            <span id="statusInd">ANALYSIS MODE</span>
            <span id="mainInfoText" class="info"></span>
        </div>
    </div>
 
    <div id="graphModal">
        <div class="modal-header">
            <h3>MOLECULAR WEIGHT DISTRIBUTION (MWD)</h3>
            <button class="close-btn" onclick="closeGraph()">×</button>
        </div>
        
        <div id="graphScrollContainer">
            <canvas id="mwdCanvas"></canvas>
        </div>
 
        <div id="statsFooter">
            <div class="stat-box">Mn: <span class="stat-mn" id="valMn">-</span></div>
            <div class="stat-box">Mw: <span class="stat-mw" id="valMw">-</span></div>
            <div class="stat-box">PDI: <span class="stat-pdi" id="valPdi">-</span></div>
            <div class="stat-box">% Conversion: <span class="stat-conv" id="valConv">-</span></div>
        </div>
    </div>
 
    <canvas id="simCanvas"></canvas>
 
<script>
window.onload = function() {
    // --- SES MOTORU ---
    const sfx = {
        ctx: null,
        enabled: true, 
        muted: false,
        
        init: function() {
            if (!this.ctx) {
                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
            } else if (this.ctx.state === 'suspended') {
                this.ctx.resume();
            }
        },

trigger: function(type) {
            if (this.muted || !this.ctx) return;
            const t = this.ctx.currentTime;

const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);

toggleMute: function() {
            this.muted = !this.muted;
            if(!this.muted) this.trigger('ui');
            return this.muted;
        }
    };

canvas.addEventListener('mousedown', (e) => {
        const rect = canvas.getBoundingClientRect();
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;

const worldX = (mx - width/2) / camera.zoom + camera.x;
        const worldY = (my - height/2) / camera.zoom + camera.y;

let clickedParticle = null;
        let minDist = 1000;

for (let p of particles) {
            if (p.type === 'solvent') continue;

if (clickedParticle) {
            const activeEnd = clickedParticle.getActiveEnd();
            
            if (camera.target === activeEnd) {
                camera.target = null;
                camera.targetZoom = 1.0;
                showTempInfo("OVERVIEW", "normal", 1000);
            } else {
                camera.target = activeEnd;
                camera.targetZoom = 2.5; 
                showTempInfo("CHAIN ANALYSIS ACTIVE", "info", 2000);
            }
        } else {
            camera.target = null;
            camera.targetZoom = 1.0;
        }
    });
 
    function updateSpeedFactor() {
        const temp = parseInt(ui.tRange.value);
        temperatureSpeedFactor = 0.3 + ((temp - 65) / (120 - 65)) * 2.7;
    }
 
    function updateDisplays() {
        ui.displays.m.innerText = ui.mRange.value;
        ui.displays.i.innerText = ui.iRange.value;
        ui.displays.s.innerText = ui.sRange.value;
        ui.displays.t.innerText = ui.tRange.value + "°C";
        updateSliderVisual(ui.mRange);
        updateSliderVisual(ui.iRange);
        updateSliderVisual(ui.sRange);
        updateSliderVisual(ui.tRange);
    }
 
    function updateSliderVisual(input) {
        const min = parseFloat(input.min);
        const max = parseFloat(input.max);
        const val = parseFloat(input.value);
        const ratio = (val - min) / (max - min); 
        const size = 12 + (ratio * 12);
        input.style.setProperty('--thumb-size', `${size}px`);
        let r, g, b;
        if (ratio < 0.33) {
            const localRatio = ratio / 0.33; r = 255; g = 255; b = Math.floor(255 * (1 - localRatio));
        } else if (ratio < 0.66) {
            const localRatio = (ratio - 0.33) / 0.33; r = 255; g = Math.floor(255 - (90 * localRatio)); b = 0;
        } else {
            const localRatio = (ratio - 0.66) / 0.34; r = 255; g = Math.floor(165 * (1 - localRatio)); b = 0;
        }
        input.style.setProperty('--thumb-color', `rgb(${r}, ${g}, ${b})`);
    }
 
    function toggleInputLocks(lock) {
        ui.mRange.disabled = lock;
        ui.iRange.disabled = lock;
        ui.sRange.disabled = false;
        updateSliderVisual(ui.mRange);
        updateSliderVisual(ui.iRange);
        updateSliderVisual(ui.sRange);
    }

function triggerGelSequence() {
        if (isGelSequenceActive) return; 
        isGelSequenceActive = true;

if (notificationTimer) clearTimeout(notificationTimer);

infoText.innerText = "VISCOSITY INCREASING (NORRISH-TROMMSDORFF EFFECT). TERMINATIONS WILL NOT OCCUR";
        infoText.className = "info msg-warning blink-3-anim";

gelSequenceTimer = setTimeout(() => {
            infoText.className = "info msg-hint"; 
            infoText.innerText = "You can INCREASE SOLVENT AMOUNT ABOVE 50% to reduce viscosity.";

setTimeout(() => {
                infoText.innerText = "";
                infoText.className = "info";
                isGelSequenceActive = false; 
            }, 3000);

}, 4500); 
    }
 
    function showTempInfo(msg, type = "normal", duration = 4000) {
        if (isGelSequenceActive) return;

if (isGelEffectActive && currentMode === 'free' && type !== "warning" && type !== "success") return;
 
        infoText.innerText = msg;
        infoText.className = "info"; 
        
        if (msg.includes("LIVING MODE")) {
            infoText.classList.add("living-glow", "blink-3-anim"); 
            setTimeout(() => {
                infoText.classList.remove("blink-3-anim");
            }, 1500);
            if(notificationTimer) clearTimeout(notificationTimer);
            return;
        }
 
        if (type === "warning") infoText.classList.add("msg-warning");
        if (type === "success") infoText.classList.add("msg-success");
        if (type === "info") infoText.classList.add("msg-info");
 
        if (notificationTimer) clearTimeout(notificationTimer);
 
        if (!isGelEffectActive || type === "success") {
            notificationTimer = setTimeout(() => {
                infoText.className = "info";
                if(currentMode === 'living' && reactionStarted && !analysisMode) {
                    infoText.innerText = "LIVING MODE: NO TERMINATION, ALL CHAINS ACTIVE";
                    infoText.classList.add("living-glow");
                } else {
                    infoText.innerText = "";
                }
            }, duration);
        }
    }
 
    class Particle {
        constructor(type, x, y) {
            this.type = type; 
            this.x = x || Math.random() * (width || 800);
            this.y = y || Math.random() * (height || 600);
            const angle = Math.random() * Math.PI * 2;
            this.vx = Math.cos(angle);
            this.vy = Math.sin(angle);
 
            if (type === 'monomer') this.radius = CONFIG.monomerRadius;
            else if (type === 'initiator') this.radius = CONFIG.initiatorRadius;
            else this.radius = CONFIG.solventRadius;
 
            this.parent = null; 
            this.isRadical = false; 
            this.isChainPart = (type === 'initiator'); 
            this.hasActivated = false; 
            
            this.chainLength = 0; 
 
            this.isDead = false;
            this.deathTime = 0;
            this.targetX = null;
            this.targetY = null;
        }
 
        getHead() {
            let curr = this;
            let count = 0;
            while(curr.parent && count < 5000) { curr = curr.parent; count++; }
            return curr;
        }

getActiveEnd() {
            let curr = this;
            let count = 0;
            while (curr.parent && count < 5000) {
                curr = curr.parent;
                count++;
            }
            return curr;
        }
 
        findNearestMonomer() {
            let minDist = 100000;
            let target = null;
            for(let p of particles) {
                if (p.type === 'monomer' && !p.isChainPart) {
                    const dx = p.x - this.x;
                    const dy = p.y - this.y;
                    const d2 = dx*dx + dy*dy;
                    if (d2 < minDist) { minDist = d2; target = p; }
                }
            }
            return target;
        }
 
        kill() {
            if (currentMode === 'living' && !isStopping) return;
            if (!this.isDead) {
                this.isRadical = false;
                this.isDead = true;
                this.deathTime = Date.now();
                this.vx *= 0.1; this.vy *= 0.1;
            }
        }
 
        update() {
            if (analysisMode) {
                if (this.type === 'solvent' || (!this.isChainPart && this.type === 'monomer')) {
                    this.y += 3; return;
                }
                if (this.targetX !== null && this.targetY !== null) {
                    const dx = this.targetX - this.x;
                    const dy = this.targetY - this.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    const speed = 15; 
                    if (dist > 1) {
                        this.x += (dx / dist) * Math.min(dist, speed);
                        this.y += (dy / dist) * Math.min(dist, speed);
                    }
                }
                if (this.parent) {
                    const idealX = this.parent.x;
                    const idealY = this.parent.y + CONFIG.bondLength;
                    this.x += (idealX - this.x) * 0.2; 
                    this.y += (idealY - this.y) * 0.2;
                    const time = Date.now() * 0.002;
                    this.x += Math.sin(time + this.y * 0.05) * 0.5;
                }
                return; 
            }
 
            const head = this.getHead();
            let isChainDead = false;
            if (this.type !== 'solvent') {
                if (this.parent) isChainDead = !head.isRadical;
                else if (!this.isRadical && (this.isChainPart || this.isDead)) {
                    if (this.type === 'initiator' && !this.hasActivated) isChainDead = false; 
                    else isChainDead = true;
                }
            }
            if (isChainDead && !this.isDead) {
                this.isDead = true;
                this.deathTime = Date.now();
            }
 
            if (this.parent) {
                const dx = this.parent.x - this.x;
                const dy = this.parent.y - this.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist > CONFIG.bondLength) {
                    const angle = Math.atan2(dy, dx);
                    const factor = 0.4;
                    const moveX = Math.cos(angle) * (dist - CONFIG.bondLength) * factor;
                    const moveY = Math.sin(angle) * (dist - CONFIG.bondLength) * factor;
                    this.x += moveX; this.y += moveY;
                }
            } else {
                let currentSpeed = CONFIG.baseSpeed * temperatureSpeedFactor;
                if (this.isDead) {
                      // V82: %98 HAREKETSİZLİK
                      currentSpeed *= 0.02; 
                } 
                else if (this.type === 'solvent') currentSpeed *= 1.2;
                else if (this.isRadical) {
                    const freeCount = particles.filter(p => p.type === 'monomer' && !p.isChainPart).length;
                    if (freeCount < initialMonomerCount * 0.2) {
                         const prey = this.findNearestMonomer();
                         if (prey) {
                            const dx = prey.x - this.x;
                            const dy = prey.y - this.y;
                            const dist = Math.sqrt(dx*dx + dy*dy);
                            this.vx += (dx/dist) * 0.25;
                            this.vy += (dy/dist) * 0.25;
                            const mag = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
                            if (mag > 0) { this.vx = (this.vx/mag); this.vy = (this.vy/mag); }
                         }
                    }
                }
                this.x += this.vx * currentSpeed;
                this.y += this.vy * currentSpeed;
                if (this.x < this.radius) { this.x = this.radius; this.vx *= -1; }
                if (this.x > width - this.radius) { this.x = width - this.radius; this.vx *= -1; }
                if (this.y < this.radius) { this.y = this.radius; this.vy *= -1; }
                if (this.y > height - this.radius) { this.y = height - this.radius; this.vy *= -1; }
            }
        }
 
        draw() {
            if (analysisMode && this.type === 'initiator' && this.chainLength < 1) return;

const mCount = parseInt(ui.mRange.value);
        const iCount = parseInt(ui.iRange.value);
        const sCount = parseInt(ui.sRange.value);
        initialMonomerCount = mCount;
        updateSpeedFactor();
 
        for (let i = 0; i < mCount; i++) particles.push(new Particle('monomer'));
        for (let i = 0; i < iCount; i++) particles.push(new Particle('initiator')); 
        for (let i = 0; i < sCount; i++) particles.push(new Particle('solvent'));
    }
 
    function forceStopAndAnalyze() {
        if (isStopping || analysisMode) return;
        isStopping = true;
        sfx.trigger('ui');
        ui.btn.innerText = "STOPPING...";
        ui.btn.disabled = true;
        
        camera.target = null;
        camera.targetZoom = 1.0;

if (activationTimer) clearInterval(activationTimer);
        showTempInfo("SWITCHING TO ANALYSIS...", "normal", 2000);
        
        controlsDiv.classList.add('force-visible');

if (freeMonomers.length < 1 && radicals.length > 0) {
             forceStopAndAnalyze();
             return;
        }

if (!isGelEffectActive) {
                for (let s of solvents) {
                    const dx = r1.x - s.x;
                    const dy = r1.y - s.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < (r1.radius + s.radius + 4)) {
                        if (Math.random() < CONFIG.chainTransferRate) {
                            r1.kill(); 
                            if (freeMonomers.length > 0) {
                                const luckyMonomer = freeMonomers[Math.floor(Math.random() * freeMonomers.length)];
                                luckyMonomer.isRadical = true;
                                luckyMonomer.isChainPart = true;
                                luckyMonomer.chainLength = 1;
                            }
                            const now = Date.now();
                            if (now - lastTransferMsgTime > 1000) { 
                                showTempInfo("CHAIN TRANSFER TO SOLVENT OBSERVED", "warning", 1500);
                                lastTransferMsgTime = now;
                            }
                            return; 
                        }
                    }
                }
            }
 
            if (!isGelEffectActive) {
                for (let j = i + 1; j < radicals.length; j++) {
                    const r2 = radicals[j];
                    const dx = r1.x - r2.x;
                    const dy = r1.y - r2.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < (r1.radius + r2.radius + 6)) {
                        const chance = Math.random();
                        if (chance < CONFIG.disproportionationRate) {
                            r1.kill();
                            r2.kill();
                            const now = Date.now();
                            if (now - lastTerminationMsgTime > 1500) {
                                showTempInfo("DISPROPORTIONATION TERMINATIONS OBSERVED", "info", 1500);
                                lastTerminationMsgTime = now;
                            }
                        } else {
                            r1.isRadical = false;
                            r2.isRadical = false;
                            r1.parent = r2; 
                            r2.chainLength += r1.chainLength;
                            r2.kill(); 
                            const now = Date.now();
                            if (now - lastTerminationMsgTime > 1500) {
                                showTempInfo("COMBINATION TERMINATIONS OBSERVED", "info", 1500);
                                lastTerminationMsgTime = now;
                            }
                        }
                        return;
                    }
                }
            }
        }
    }
 
    function startAnalysisMode() {
        if (analysisMode) return;
        analysisMode = true;
        if (activationTimer) clearInterval(activationTimer);
        
        if (notificationTimer) clearTimeout(notificationTimer);
        infoText.className = "info"; 
        infoText.innerText = ""; 
 
        ui.status.style.display = 'inline-block';
        ui.status.innerText = "CHAINS ARE BEING POSITIONED";
        
        ui.btn.classList.remove('stop-mode');
        ui.btn.classList.add('active');
        ui.btn.innerText = "RESTART";
 
        toggleInputLocks(false);
 
        const heads = particles.filter(p => p.parent === null && p.isChainPart && p.type !== 'solvent');
        const chainLengths = new Map(); 
        
        heads.forEach(h => chainLengths.set(h, 0));
 
        particles.forEach(p => {
            if (p.isChainPart && p.type === 'monomer') {
                const head = p.getHead();
                if (chainLengths.has(head)) {
                    chainLengths.set(head, chainLengths.get(head) + 1);
                }
            }
        });

ctx.restore();
    }

// 2. Nokta (Bağlantı noktası)
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI*2);
        ctx.fillStyle = mainColor;
        ctx.fill();

// 3. Metin
        ctx.font = 'bold 16px Consolas';
        ctx.fillStyle = mainColor; 
        ctx.textBaseline = 'bottom';
        ctx.shadowColor = mainColor;
        ctx.shadowBlur = 4;
        
        const labelText = isDead ? "TERMINATED" : "ACTIVE";
        
        // --- V83 FIX: SMART LABELING ---
        let finalLabel = labelText;
        let finalValue = "MW: " + mwValue;

if (camera.target.type === 'monomer' && !camera.target.isChainPart) {
            finalLabel = "FREE MONOMER";
            finalValue = "MW: 104"; // Hardcoded for pure monomer
        } else if (camera.target.type === 'initiator' && !camera.target.hasActivated) {
            finalLabel = "INITIATOR";
            finalValue = "MW: 68"; // Hardcoded for pure initiator
        } else {
            // Normal chain logic (calculated above)
            finalLabel = isDead ? "TERMINATED" : "ACTIVE";
        }

ctx.restore();
    }
 
    function animate() {
        // --- KAMERA LOGIC ---
        camera.zoom += (camera.targetZoom - camera.zoom) * 0.1;

camera.x += (targetX - camera.x) * 0.1;
        camera.y += (targetY - camera.y) * 0.1;

// --- RENDER WORLD ---
        ctx.clearRect(0, 0, width, height);

ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.scale(camera.zoom, camera.zoom);
        ctx.translate(-camera.x, -camera.y);

ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
        ctx.lineWidth = 2;
        ctx.strokeRect(0, 0, width, height);

ctx.restore();

drawDynamicTag(ctx, screenX, screenY, mwFormatted, isDead);
        }

requestAnimationFrame(animate);
    }
 
    resize();
    updateDisplays();
    initSimulation();
    animate();
};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent HUD Polymerization</title>
    <style>
        :root {
            --bg: #050505;
            --panel: rgba(20, 20, 20, 0.95);
            --neon-red: #ff3333;
            --neon-pale-blue: #80dfff; 
            --neon-purple: #d500f9;
            --text: #ffffff;
            --font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --graph-bg: rgba(10, 15, 20, 0.8);
        }

canvas { display: block; }

input[type="range"]:active::-webkit-slider-thumb {
            box-shadow: 0 0 20px var(--thumb-color);
        }

</style>
</head>
<body>

<div id="ui-panel">
        <h2>MMA POLYMERIZATION</h2>
        
        <div class="legend">
            <div><span class="icon diamond" style="background:var(--neon-purple)"></span>INITIATOR</div>
            <div><span class="icon circle" style="background:#fff; box-shadow:0 0 5px var(--neon-pale-blue)"></span>ACTIVE END GROUP</div>
            <div><span class="icon circle" style="background:var(--neon-red)"></span>DEACTIVATOR</div>
            <div><span class="icon circle" style="background:var(--neon-pale-blue)"></span>MONOMER</div>
        </div>

<div class="row">
            <label>Simulation Speed: <span id="lbl-speed">1x</span></label>
            <input type="range" id="rng-speed" min="1" max="5" value="1" step="0.5">
        </div>

<div class="row">
            <label>
                <span>Deactivation: <span id="lbl-mode" style="color:var(--neon-red)">LOW (Chaotic)</span></span>
            </label>
            <input type="range" id="rng-mode" min="1" max="2" value="1" step="1">
        </div>

<div class="row">
            <label>Monomer (MMA): <span id="lbl-mono">200</span></label>
            <input type="range" id="rng-mono" min="50" max="500" value="200">
        </div>

<div class="row">
            <label>Initiator: <span id="lbl-init">10</span></label>
            <input type="range" id="rng-init" min="2" max="50" value="10">
        </div>

<button id="btn-start">START</button>
        
        <div id="graph-container">
            <label>Graph: Mn vs. %Conversion</label>
            <canvas id="graph-canvas" width="300" height="150"></canvas>
            <div id="chem-stats">
                <div class="stat-item">Mn: <span id="val-mn" class="stat-val">0</span></div>
                <div class="stat-item">Mw: <span id="val-mw" class="stat-val">0</span></div>
                <div class="stat-item">PDI: <span id="val-pdi" class="stat-val">1.00</span></div>
                <div class="stat-item">%Conversion: <span id="val-conv" class="stat-val">0%</span></div>
            </div>
        </div>
    </div>

<div id="zoom-hint">ANALYSIS MODE: CLICK A CHAIN</div>
    <canvas id="sim-canvas"></canvas>