clockwork/clockwork.js

/* ============================================================
   NUMEX CLOCKWORK — Zamanın İçini Gör
   Tamamen kodla üretilmiş 3D mekanik saat.
   Hazır model / video / dış görsel YOK — her parça matematikle çizilir.
   ============================================================ */

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

/* ============================================================
   0. YARDIMCILAR
   ============================================================ */
const TAU = Math.PI * 2;
const DEG = Math.PI / 180;
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const lerp = (a, b, t) => a + (b - a) * t;
const easeInOut = t => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);

/* ============================================================
   1. MALZEMELER — altın, bronz, çelik, cam
   ============================================================ */
const MAT = {};

/* ------------------------------------------------------------
   Yüzey pürüz dokusu — kodla üretilir (harici dosya YOK).
   Değer gürültüsü + ince tarama: metali "kesilmiş sac" görünümünden
   çıkarıp torna/freze izli gerçek yüzeye yaklaştırır.
   ------------------------------------------------------------ */
function makeMetalRoughnessTexture(size = 256, base = 150, variance = 46) {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext('2d');
  const img = ctx.createImageData(size, size);

  for (let y = 0; y < size; y++) {
    for (let x = 0; x < size; x++) {
      // eşmerkezli tarama izleri + ince gürültü
      const cx = x / size - 0.5;
      const cy = y / size - 0.5;
      const r = Math.sqrt(cx * cx + cy * cy) * 60;
      const rings = Math.sin(r * Math.PI) * 0.5 + 0.5;
      const noise = Math.random();
      const v = clamp(base + (rings - 0.5) * variance * 1.4 + (noise - 0.5) * variance, 0, 255);
      const i = (y * size + x) * 4;
      img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
      img.data[i + 3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);

  const tex = new THREE.CanvasTexture(canvas);
  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
  tex.repeat.set(2, 2);
  tex.colorSpace = THREE.NoColorSpace;
  tex.anisotropy = 4;
  return tex;
}

function buildMaterials() {
  const roughTex = makeMetalRoughnessTexture();

  /* Altın: yüzeyde mikro pürüz (roughnessMap yerine yüksek roughness +
     düşük emissive) — düz "sarı boya" görünümünü kırar. */
  MAT.gold = new THREE.MeshPhysicalMaterial({
    color: 0xc08c33, metalness: 1.0, roughness: 0.42,
    roughnessMap: roughTex,
    clearcoat: 0.35, clearcoatRoughness: 0.45,
    emissive: 0x140c02, emissiveIntensity: 0.25,
  });
  MAT.goldPolished = new THREE.MeshPhysicalMaterial({
    color: 0xe8bd6d, metalness: 1.0, roughness: 0.2,
    roughnessMap: roughTex,
    clearcoat: 0.85, clearcoatRoughness: 0.08,
  });
  MAT.bronze = new THREE.MeshPhysicalMaterial({
    color: 0x6f4520, metalness: 1.0, roughness: 0.56,
    roughnessMap: roughTex,
    clearcoat: 0.2, clearcoatRoughness: 0.6,
    emissive: 0x0e0702, emissiveIntensity: 0.22,
  });
  MAT.copper = new THREE.MeshPhysicalMaterial({
    color: 0xb06a33, metalness: 1.0, roughness: 0.28,
  });
  MAT.steel = new THREE.MeshPhysicalMaterial({
    color: 0x9aa1aa, metalness: 1.0, roughness: 0.24,
    roughnessMap: roughTex,
    clearcoat: 0.6,
  });
  MAT.dark = new THREE.MeshPhysicalMaterial({
    color: 0x2a2118, metalness: 0.85, roughness: 0.5,
  });
  MAT.dialFace = new THREE.MeshPhysicalMaterial({
    color: 0x0e0b08, metalness: 0.35, roughness: 0.62,
    clearcoat: 0.4, clearcoatRoughness: 0.4,
  });
  MAT.enamel = new THREE.MeshPhysicalMaterial({
    color: 0x14100c, metalness: 0.2, roughness: 0.55,
    clearcoat: 0.9, clearcoatRoughness: 0.15,
  });
  /* Cam: yalnızca kenarlarda ince bir yansıma.
     transmission + bloom beyaz leke üretiyordu; additive blending ise
     tüm sahneyi sise boğuyordu. Normal saydamlık + çok düşük opaklık
     sahneyi örtmeden cam hissi verir. */
  MAT.glass = new THREE.MeshPhysicalMaterial({
    color: 0xaec6d6, metalness: 0.0, roughness: 0.06,
    transparent: true, opacity: 0.055,
    clearcoat: 1.0, clearcoatRoughness: 0.02,
    side: THREE.FrontSide, depthWrite: false,
    envMapIntensity: 1.6,
  });
  MAT.glow = new THREE.MeshBasicMaterial({ color: 0xffd699 });
  MAT.ruby = new THREE.MeshPhysicalMaterial({
    color: 0x8e1020, metalness: 0.1, roughness: 0.15,
    clearcoat: 1.0, emissive: 0x3a0510, emissiveIntensity: 0.6,
  });
}

/* ============================================================
   2. EVOLVENT DİŞLİ ÜRETECİ
   Gerçek evolvent profil yerine yüksek kaliteli yaklaşım:
   her diş bir trapez + yuvarlatılmış tepe; silindirik gövde.
   ============================================================ */
function gearShape(teeth, pitchRadius, { module_ = 0.083, hubRatio = 0.34, spokeCount = 0, holeRadius = 0 } = {}) {
  const shape = new THREE.Shape();

  /* DİŞ ÖLÇÜSÜ HATVEYE BAĞLIDIR, YARIÇAPA DEĞİL.
     Eski sürüm toothDepth'ı pitchRadius'un yüzdesi olarak alıyordu; bu yüzden
     44 dişli çarkta dişler iğne gibi ince, 9 dişlide kütük gibi kalıyor ve
     komşu çarka hiç girmiyordu (ekranda "fırça" görünümü). Gerçek çarkta:
       addendum  = 1.00 × m  (hatve dairesinden tepeye)
       dedendum  = 1.25 × m  (hatve dairesinden köke)
     Kök açıklığı bilerek tepe yüksekliğinden büyük: böylece dişler boşluğa
     girer, dipte çakışma olmaz. */
  const m = module_;                       // hatve (modül)
  const rPitch = pitchRadius;
  const rOuter = rPitch + m * 1.00;        // diş üstü dairesi
  const rRoot = rPitch - m * 1.25;         // diş dibi dairesi
  const step = TAU / teeth;                // açısal hatve
  const halfTop = step * 0.21;             // tepe genişliği (hatvenin %42'si)
  const halfRoot = step * 0.29;            // kök genişliği (hatvenin %58'i)

  /* EVOLVENT YAKLAŞIMI: diş yanağı iki nokta arasında düz çizgi değil,
     kökten tepeye doğru DIŞA doğru kıvrılan bir eğri. Gerçek evolventin
     ilk iki terimi (r·(1+t²/2)) yeterli: fark gözle görülür, maliyeti yok. */
  const flank = (side, a, r, k) => {
    // side: -1 sol yanak, +1 sağ yanak; k: 0→kök, 1→tepe
    const t = k;                              // yanak boyunca 0..1
    const ang = a + side * lerp(halfRoot, halfTop, t);
    // evolvent düzeltmesi: yanağın ortası hafifçe dışa taşar
    const bulge = 1 + m * 0.10 * Math.sin(Math.PI * t) / r;
    return [Math.cos(ang) * r * bulge, Math.sin(ang) * r * bulge];
  };

  for (let i = 0; i < teeth; i++) {
    const a = i * step;
    const rootL = a - halfRoot;
    const rootR = a + halfRoot;
    const topL = a - halfTop;
    const topR = a + halfTop;

    // 1) kök yayının sonundan bu dişin sol köküne
    if (i === 0) {
      shape.moveTo(Math.cos(rootL) * rRoot, Math.sin(rootL) * rRoot);
    } else {
      shape.lineTo(Math.cos(rootL) * rRoot, Math.sin(rootL) * rRoot);
    }

    // 2) sol yanak — kökten tepeye eğri (3 ara nokta)
    for (let s = 1; s <= 3; s++) {
      const p = flank(-1, a, lerp(rRoot, rOuter, s / 4), s / 4);
      shape.lineTo(p[0], p[1]);
    }
    shape.lineTo(Math.cos(topL) * rOuter, Math.sin(topL) * rOuter);

    // 3) tepe yayı — bir miktar yuvarlatılmış (gerçek çarkta tepe düzdür,
    //    köşeler faso edilmiştir; burada 2 ara nokta ile taklit edilir)
    shape.absarc(0, 0, rOuter, topL, topR, false);

    // 4) sağ yanak — tepeden köke eğri
    for (let s = 3; s >= 1; s--) {
      const p = flank(1, a, lerp(rRoot, rOuter, s / 4), s / 4);
      shape.lineTo(p[0], p[1]);
    }

    // 5) kök yayı — bir sonraki dişin sol köküne kadar
    const nextRootL = a + step - halfRoot;
    shape.absarc(0, 0, rRoot, rootR, nextRootL, false);
  }
  shape.closePath();

  // merkez deliği
  const hubR = pitchRadius * hubRatio;
  const hole = new THREE.Path();
  hole.absarc(0, 0, hubR, 0, TAU, true);
  shape.holes.push(hole);

  // hafifletme delikleri (büyük dişlilerde "spoke" görünümü)
  if (spokeCount > 0) {
    const holeR = pitchRadius * holeRadius;
    const ringR = (hubR + rRoot) * 0.5;
    for (let s = 0; s < spokeCount; s++) {
      const ang = (s / spokeCount) * TAU + Math.PI / spokeCount;
      const cx = Math.cos(ang) * ringR;
      const cy = Math.sin(ang) * ringR;
      const h = new THREE.Path();
      h.absarc(cx, cy, holeR, 0, TAU, true);
      shape.holes.push(h);
    }
  }
  return shape;
}

function makeGear(teeth, module_, opts = {}) {
  const pitchRadius = (module_ * teeth) / 2;
  const thickness = opts.thickness ?? pitchRadius * 0.22;
  const shape = gearShape(teeth, pitchRadius, { ...opts, module_ });
  const geo = new THREE.ExtrudeGeometry(shape, {
    depth: thickness,
    bevelEnabled: true,
    bevelThickness: thickness * 0.08,
    bevelSize: pitchRadius * 0.012,
    bevelSegments: 2,
    curveSegments: Math.max(8, Math.min(30, Math.round(teeth / 2))),
  });
  geo.center();
  geo.rotateX(0);
  const mesh = new THREE.Mesh(geo, opts.material || MAT.gold);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  mesh.userData.pitchRadius = pitchRadius;
  mesh.userData.teeth = teeth;
  mesh.userData.thickness = thickness;
  return mesh;
}

/* ------------------------------------------------------------
   MİL, SOMUN, RONDELA
   DÜZELTME (kök neden): Silindir geometrisinin ekseni ZATEN +Y'dir.
   Eski kod `rotation.x = Math.PI/2` uyguluyordu → mil ve somun çark
   düzlemine YATIYOR, çark ekseninde durmuyordu. Ayrıca geo.center()
   sonrası çarkın ön yüzü +thickness/2'de kalırken somun thickness*0.72'ye
   konuyordu → gövdenin İÇİNE gömülüyor, dışarıdan görünmüyordu.
   Doğrusu: çark düzlemi XY, kalınlık Z boyunca. Mil ve somun Z ekseninde
   olmalı → silindiri `rotateX(90°)` ile Y'den Z'ye çevirmek gerekir;
   ama bunu mesh'e DEĞİL geometriye uygulayıp somun konumunu ön yüze taşırız.
   ------------------------------------------------------------ */
function addAxleAndNut(group, radius, thickness, mat = MAT.steel) {
  /* Mil: çark kalınlığından taşar, iki yanda görünür */
  const axleLen = thickness + radius * 0.34;
  const axleGeo = new THREE.CylinderGeometry(radius * 0.085, radius * 0.085, axleLen, 18);
  axleGeo.rotateX(Math.PI / 2);            // Y ekseni → Z ekseni (çark ekseni)
  const axle = new THREE.Mesh(axleGeo, mat);
  axle.castShadow = true;
  group.add(axle);

  /* Rondela: somunun çarka oturduğu pul */
  const washerGeo = new THREE.CylinderGeometry(radius * 0.19, radius * 0.19, thickness * 0.10, 24);
  washerGeo.rotateX(Math.PI / 2);

  /* Altıgen somun: çark ekseninde, çarkın ÖN yüzünün hemen dışında */
  const nutGeo = new THREE.CylinderGeometry(radius * 0.145, radius * 0.145, thickness * 0.30, 6);
  nutGeo.rotateX(Math.PI / 2);

  const faceF = thickness / 2;             // çarkın ön yüzü

  const washerF = new THREE.Mesh(washerGeo, MAT.bronze);
  washerF.position.z = faceF + thickness * 0.05;
  group.add(washerF);

  const nutF = new THREE.Mesh(nutGeo, MAT.goldPolished);
  nutF.position.z = faceF + thickness * 0.10 + thickness * 0.15;
  nutF.castShadow = true;
  group.add(nutF);

  /* Arka yüzde sadece rondela + küçük somun (kasaya bakan taraf) */
  const washerB = new THREE.Mesh(washerGeo, MAT.bronze);
  washerB.position.z = -faceF - thickness * 0.05;
  group.add(washerB);

  const nutB = new THREE.Mesh(nutGeo, MAT.goldPolished);
  nutB.position.z = -faceF - thickness * 0.10 - thickness * 0.15;
  group.add(nutB);

  return group;
}

/* ============================================================
   3. SAHNE KURULUMU
   ============================================================ */
const canvas = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({
  canvas, antialias: true, alpha: false, powerPreference: 'high-performance',
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
renderer.outputColorSpace = THREE.SRGBColorSpace;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x060403);
scene.fog = new THREE.FogExp2(0x060403, 0.028);

const camera = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 200);
const CAM_TARGET = new THREE.Vector3(0, 0.2, 0);

/* Ev kamerası EKRAN ORANINA göre hesaplanır: dar/dikey ekranda yatay
   görüş açısı küçüldüğü için sabit mesafe kasayı kesiyordu. Kasa yarıçapı
   CASE_R, hem dikey hem yatay eksende sığacak şekilde ölçeklenir. */
const CAM_HOME = new THREE.Vector3();

/* ★28.10 Market hazırlığı: alttaki kontrol paneli kasanın alt üçte birini (sarkaç
   topuzu dahil) örtüyordu — kadraj tüm pencereye göre hesaplanıyordu. Artık SERBEST
   alan (panelin üstü) ölçülür: kamera görüntüsü o alanın ortasına kaydırılır
   (setViewOffset) ve sığdırma mesafesi o alanın yüksekliğine göre bulunur. */
function serbestAlan() {
  const h = window.innerHeight;
  const panel = document.getElementById('panel');
  const alt = panel ? Math.max(0, h - panel.getBoundingClientRect().top + 6) : 0;
  const ust = Math.min(56, h * 0.06);
  return { h, alt, ust, oran: Math.max(0.35, (h - alt - ust) / h) };
}
function kadrajiKaydir() {
  const w = window.innerWidth, { h, alt, ust } = serbestAlan();
  camera.setViewOffset(w, h, 0, Math.round((alt - ust) / 2), w, h);
}
/* yarıçapı R olan daireyi serbest alana sığdıran kamera mesafesi */
function sigmaMesafesi(R, pay) {
  const vFov = Math.atan(Math.tan((camera.fov * DEG) / 2) * serbestAlan().oran);
  const hFov = Math.atan(Math.tan((camera.fov * DEG) / 2) * camera.aspect);
  return (R / Math.tan(Math.min(vFov, hFov))) * pay;   // dar olan eksen belirleyici
}
function computeHomeDistance() {
  const CASE_R_HOME = 5.4;   // kasa yarıçapı (CASE_R sabitinin ev değeri)
  /* %26 nefes payı: %16'da en dıştaki çarklar kadraj kenarına dayanıyordu. */
  return sigmaMesafesi(CASE_R_HOME, 1.26);
}

function resetCameraHome(immediate = false) {
  kadrajiKaydir();
  const d = computeHomeDistance();
  CAM_HOME.set(0, 0.75 * (d / 15.2), d);
  if (immediate) {
    camera.position.copy(CAM_HOME);
    camera.lookAt(CAM_TARGET);
  }
  return CAM_HOME;
}
resetCameraHome(true);

buildMaterials();

/* --- Çevre (metal yansımaları) --- */
const pmrem = new THREE.PMREMGenerator(renderer);
pmrem.compileEquirectangularShader();
const envRT = pmrem.fromScene(new RoomEnvironment(), 0.04);
scene.environment = envRT.texture;

/* ============================================================
   4. IŞIK — sinematik
   ============================================================ */
const lights = new THREE.Group();
scene.add(lights);

const keyLight = new THREE.SpotLight(0xffe3b0, 190, 34, 0.62, 0.45, 1.6);
keyLight.position.set(5.2, 8.6, 7.0);
keyLight.castShadow = true;
keyLight.shadow.mapSize.set(2048, 2048);
keyLight.shadow.camera.near = 1;
keyLight.shadow.camera.far = 40;
keyLight.shadow.bias = -0.0009;
keyLight.target.position.set(0, 0, 0);
lights.add(keyLight, keyLight.target);

const rimLight = new THREE.SpotLight(0x7fb4ff, 120, 34, 0.8, 0.6, 1.5);
rimLight.position.set(-7.2, 4.0, -6.4);
rimLight.target.position.set(0, 0, 0);
lights.add(rimLight, rimLight.target);

const fillLight = new THREE.PointLight(0xff9b4d, 26, 16, 2);
fillLight.position.set(-3.4, -3.2, 5.4);
lights.add(fillLight);

/* Alt dolgu ışığı: sarkaç topuzuna değil, kasanın alt iç yüzüne vurur. */
const underGlow = new THREE.PointLight(0xb8762a, 5.5, 7, 2.4);
underGlow.position.set(0, -3.2, -0.4);
lights.add(underGlow);

const ambient = new THREE.AmbientLight(0x2a1f14, 0.9);
scene.add(ambient);

/* ============================================================
   5. KASA — cam arkasında mekanizma
   ============================================================ */
const clockRoot = new THREE.Group();
scene.add(clockRoot);

const CASE_R = 5.4;
const caseGroup = new THREE.Group();
clockRoot.add(caseGroup);

/* arka plaka */
const backPlate = new THREE.Mesh(
  new THREE.CylinderGeometry(CASE_R, CASE_R, 0.34, 96),
  new THREE.MeshPhysicalMaterial({
    color: 0x12100d, metalness: 0.9, roughness: 0.42,
    clearcoat: 0.3,
  })
);
backPlate.rotation.x = Math.PI / 2;
backPlate.position.z = -1.55;
backPlate.receiveShadow = true;
caseGroup.add(backPlate);

/* arka plakada dekoratif halka */
const plateRing = new THREE.Mesh(
  new THREE.TorusGeometry(CASE_R * 0.82, 0.055, 12, 128),
  MAT.bronze
);
plateRing.position.z = -1.36;
caseGroup.add(plateRing);

/* dış çember / kasa halkası */
const bezel = new THREE.Mesh(
  new THREE.TorusGeometry(CASE_R, 0.36, 22, 128),
  MAT.gold
);
bezel.castShadow = true;
caseGroup.add(bezel);

const bezelInner = new THREE.Mesh(
  new THREE.TorusGeometry(CASE_R - 0.32, 0.09, 12, 128),
  MAT.goldPolished
);
caseGroup.add(bezelInner);

/* cam kapak */
const glassDome = new THREE.Mesh(
  new THREE.SphereGeometry(CASE_R * 0.995, 64, 32, 0, TAU, 0, Math.PI * 0.42),
  MAT.glass
);
glassDome.rotation.x = -Math.PI / 2;
glassDome.position.z = 0.98;
glassDome.renderOrder = 3;
clockRoot.add(glassDome);

/* kasayı tutan ayaklar */
for (let i = 0; i < 4; i++) {
  const a = (i / 4) * TAU + Math.PI / 4;
  const leg = new THREE.Mesh(
    new THREE.CylinderGeometry(0.09, 0.13, 1.5, 12),
    MAT.bronze
  );
  leg.position.set(Math.cos(a) * CASE_R * 0.92, Math.sin(a) * CASE_R * 0.92, -1.2);
  leg.rotation.x = Math.PI / 2;
  caseGroup.add(leg);
  const ball = new THREE.Mesh(new THREE.SphereGeometry(0.17, 20, 16), MAT.gold);
  ball.position.set(Math.cos(a) * CASE_R * 0.92, Math.sin(a) * CASE_R * 0.92, -1.95);
  caseGroup.add(ball);
}

/* ============================================================
   6. DİŞLİ TRENİ — birbirine bağlı, hız oranları fiziksel
   ============================================================ */
/* Modül, kasa çapına göre TÜRETİLİR — sabit vermiyoruz ki dişli treni
   her zaman kasanın içinde kalsın. En büyük çark 44 diş, hatve yarıçapı
   MODULE*44/2 olur; bunun kasa yarıçapının %42'sini aşmaması istenir. */
const MAX_TEETH = 44;
const MODULE = (CASE_R * 0.34 * 2) / MAX_TEETH;   // ≈ 0.083 — tren kasaya rahat sığar

const gearField = new THREE.Group();
gearField.position.z = -0.15;
caseGroup.add(gearField);

const gears = [];   // her dişli: { group, mesh, teeth, pitchRadius, base, omega, explodeDir }

/* ------------------------------------------------------------
   placeGear — bir dişliyi, kendisinden ÖNCE eklenmiş (ebeveyn)
   bir dişliye kavrayacak biçimde yerleştirir.
   Merkez uzaklığı = r1 + r2 (aynı modülde kavrama koşulu).
   ------------------------------------------------------------ */
let gearSeq = 0;
function placeGear(teeth, parentIndex, angleDeg, opts = {}) {
  const pitchRadius = (MODULE * teeth) / 2;
  const mesh = makeGear(teeth, MODULE, opts);
  mesh.name = opts.name || `disli_${gearSeq++}`;

  const group = new THREE.Group();
  group.name = `mil_${mesh.name}`;
  group.add(mesh);
  addAxleAndNut(group, pitchRadius, mesh.userData.thickness, opts.axleMat || MAT.steel);
  gearField.add(group);

  const g = {
    group, mesh, teeth, pitchRadius,
    omega: 0,                 // rad/sn (işaretli)
    base: new THREE.Vector3(),
    explodeDir: new THREE.Vector3(),
    parentIndex: parentIndex ?? null,
    phase: 0,
  };

  if (parentIndex === null || parentIndex === undefined) {
    g.base.set(0, 0, opts.z ?? 0);
  } else {
    const prev = gears[parentIndex];
    /* Kavrama mesafesi: hatve yarıçapları toplamı. Aynı modülde zaten
       r1+r2 = (z1+z2)/2 × m'dir — iki yazım eşdeğer; burada niyeti
       açık etmek için hatve biçiminde yazıldı. Dişler artık gerçekten
       birbirine GİRER (addendum = m, kök boşluğu 1.25m). */
    const dist = (prev.teeth + teeth) / 2 * MODULE;
    const a = angleDeg * DEG;
    g.base.set(
      prev.base.x + Math.cos(a) * dist,
      prev.base.y + Math.sin(a) * dist,
      opts.z ?? prev.base.z
    );
  }
  group.position.copy(g.base);

  gears.push(g);
  return gears.length - 1;
}

/* ------------------------------------------------------------
   DİŞLİ TRENİ
   Merkez çark → 5 ara dişli → 3 ikinci kademe → 2 üçüncü kademe
   Hepsi GERÇEK kavrama geometrisiyle (r1+r2 uzaklık) yerleşir.
   ------------------------------------------------------------ */
const g0 = placeGear(MAX_TEETH, null, 0, {
  name: 'ana_cark',
  thickness: 0.16, spokeCount: 5, hubRatio: 0.30, holeRadius: 0.105,
  material: MAT.gold, z: 0,
});

const sats = [
  { teeth: 22, ang: 168, name: 'ara_a', opts: { material: MAT.bronze, z: 0.05, spokeCount: 4, holeRadius: 0.13, hubRatio: 0.32 } },
  { teeth: 30, ang: 74, name: 'ara_b', opts: { material: MAT.copper, z: 0.10, spokeCount: 5, holeRadius: 0.115, hubRatio: 0.30 } },
  { teeth: 16, ang: 123, name: 'ara_c', opts: { material: MAT.gold, z: 0.02, hubRatio: 0.34 } },
  { teeth: 26, ang: 330, name: 'ara_d', opts: { material: MAT.bronze, z: 0.08, spokeCount: 4, holeRadius: 0.13, hubRatio: 0.32 } },
  { teeth: 18, ang: 215, name: 'ara_e', opts: { material: MAT.steel, z: 0.04, hubRatio: 0.34 } },
];
const satIdx = sats.map(s => placeGear(s.teeth, g0, s.ang, { ...s.opts, name: s.name }));

const secondStage = [
  { parent: satIdx[0], teeth: 12, ang: 221, name: 'kademe2_a', opts: { material: MAT.goldPolished, z: 0.30, hubRatio: 0.32 } },
  { parent: satIdx[2], teeth: 13, ang: 132, name: 'kademe2_b', opts: { material: MAT.copper, z: 0.26, hubRatio: 0.32 } },
  { parent: satIdx[3], teeth: 17, ang: 50,  name: 'kademe2_c', opts: { material: MAT.bronze, z: 0.32, spokeCount: 0, hubRatio: 0.32 } },
];
const secondIdx = secondStage.map(s => placeGear(s.teeth, s.parent, s.ang, { ...s.opts, name: s.name }));

/* üçüncü kademe — ebeveyni doğrudan ikinci kademedir */
const thirdStage = [
  { parent: secondIdx[0], teeth: 9,  ang: 270, name: 'kademe3_a', opts: { material: MAT.steel, z: 0.46, hubRatio: 0.36 } },
  { parent: secondIdx[2], teeth: 11, ang: 85,  name: 'kademe3_b', opts: { material: MAT.gold,  z: 0.54, hubRatio: 0.36 } },
];
const thirdIdx = thirdStage.map(s => placeGear(s.teeth, s.parent, s.ang, { ...s.opts, name: s.name }));

/* ============================================================
   6b. KAÇIŞ ÇARKI — ana çarka kavrar
   ★28.10 Market hazırlığı: eskiden 270°'de ara_d ile üst üste duruyor ve hızı elle
   (-BASE_OMEGA × 7.5) veriliyordu → dişleri ana çarkın içinden geçiyordu. Artık
   boş bir açıda ve hızı/fazı diğer çarklar gibi kavrama oranından gelir.
   Açılar ölçülerek seçildi: bağlı olmayan iki çark arası en az ~0.27 birim,
   hepsi kasanın 0.88R'si içinde, sarkaç koridoru boş.
   ============================================================ */
const escapeWheel = placeGear(15, g0, 25, {
  name: 'escape_wheel', material: MAT.goldPolished, z: 0.44, hubRatio: 0.30,
});

/* ------------------------------------------------------------
   Dönüş hızları — fiziksel kavrama oranı
   w_çocuk = -w_ebeveyn * (z_ebeveyn / z_çocuk)
   ------------------------------------------------------------ */
const BASE_OMEGA = TAU / 72;   // ana çark 72 saniyede bir tur

gears.forEach((g, i) => {
  if (g.parentIndex === null) {
    g.omega = BASE_OMEGA;
    g.phase = 0;
    return;
  }
  const parent = gears[g.parentIndex];
  g.omega = -parent.omega * (parent.teeth / g.teeth);

  /* Dişlerin birbirine geçmesi: çocuk çark, ebeveyne bakan yönde
     yarım diş kaydırılır. Ebeveynin o kavrama açısındaki fazı hesaplanır. */
  /* KAVRAMA FAZI — diş dişe geçsin diye.
     Çocuk çarkın, ebeveyne bakan yönünde (contact açısı) bir DİŞ değil
     bir BOŞLUK gelmelidir. Ebeveynin o açıdaki fazı ölçülüp çocuğun
     fazı yarım hatve kaydırılır. Bu satır olmadan dişler üst üste biner
     (ekranda "birbirine girmemiş" görüntünün ikinci nedeni). */
  const dx = g.base.x - parent.base.x;
  const dy = g.base.y - parent.base.y;
  const contact = Math.atan2(dy, dx);

  // ebeveynin kavrama noktasındaki diş fazı (0 = diş ortası, 1 = boşluk ortası)
  const parentPhaseAtContact =
    (parent.phase * parent.teeth / TAU) + (contact / (TAU / parent.teeth)) + 0.5;

  // çocuk, ebeveynin dişinin karşısına BOŞLUK getirecek şekilde döner
  // NUMEX-DÜZELTME (2026-10-27): teeth bu kapsamda tanımlı değil; çocuk çarkın diş sayısı g.teeth. ReferenceError tüm sahneyi düşürüyordu.
  const childOffset = -(parentPhaseAtContact % 1) * (TAU / g.teeth);
  g.phase = contact + Math.PI + childOffset;
});

/* ============================================================
   7. KADRAN — akrep, yelkovan, saniye
   ============================================================ */
const dialGroup = new THREE.Group();
dialGroup.position.z = 0.92;
dialGroup.visible = false;   // başlangıçta mekanizma modu
clockRoot.add(dialGroup);

const dialR = CASE_R * 0.86;

/* kadran yüzü */
const dialFace = new THREE.Mesh(
  new THREE.CircleGeometry(dialR, 96),
  new THREE.MeshPhysicalMaterial({
    color: 0x0b0906, metalness: 0.25, roughness: 0.68,
    clearcoat: 0.55, clearcoatRoughness: 0.3,
  })
);
dialFace.position.z = 0.30;
dialGroup.add(dialFace);

/* dış ince halka */
const dialRing = new THREE.Mesh(new THREE.TorusGeometry(dialR * 0.985, 0.035, 10, 128), MAT.goldPolished);
dialRing.position.z = 0.34;
dialGroup.add(dialRing);

/* saat çizgileri (12 büyük, 60 ince) */
const tickMat = MAT.goldPolished;
for (let i = 0; i < 60; i++) {
  const major = i % 5 === 0;
  const len = major ? 0.34 : 0.15;
  const w = major ? 0.055 : 0.022;
  const tick = new THREE.Mesh(new THREE.BoxGeometry(w, len, 0.03), tickMat);
  const a = (i / 60) * TAU;
  const r = dialR * 0.9;
  tick.position.set(Math.cos(a) * r, Math.sin(a) * r, 0.36);
  tick.rotation.z = a - Math.PI / 2;
  dialGroup.add(tick);
}

/* Saat rakamları — 12/3/6/9 için gerçek rakam geometrisi.
   Her rakam, kalınlığı sabit parçalardan (segment) kurulur; böylece
   yazı tipi yüklemeden, tamamen kodla okunur rakam elde ederiz. */
const numeralGroup = new THREE.Group();
numeralGroup.position.z = 0.375;
dialGroup.add(numeralGroup);



/* ------------------------------------------------------------
   Saat rakamları — Canvas 2D ile yazı tipinden çizilip dokuya kaplanır.
   Segment yaklaşımı (çubuklardan rakam) bırakıldı: "12" okunmuyor,
   rakamlar perspektifte esniyordu. Burada rakam gerçek bir yazı
   tipiyle, kendi tuvaline çizilir; harici dosya/doku YOK.
   ------------------------------------------------------------ */
function makeNumeralSprite(label, sizeUnits, opacity = 0.95) {
  const S = 256;                        // tuval çözünürlüğü
  const cv = document.createElement('canvas');
  cv.width = cv.height = S;
  const ctx = cv.getContext('2d');

  ctx.clearRect(0, 0, S, S);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  /* altın gradyan dolgu + ince koyu kontur: metal kabartma hissi */
  const grad = ctx.createLinearGradient(0, S * 0.2, 0, S * 0.85);
  grad.addColorStop(0, '#f7e0ab');
  grad.addColorStop(0.45, '#d9ae62');
  grad.addColorStop(1, '#8a5f27');
  ctx.fillStyle = grad;
  ctx.strokeStyle = 'rgba(40,24,8,0.55)';
  ctx.lineWidth = S * 0.018;

  const twoDigits = String(label).length > 1;
  ctx.font = `600 ${S * (twoDigits ? 0.62 : 0.72)}px Georgia, "Times New Roman", serif`;
  ctx.strokeText(String(label), S / 2, S / 2);
  ctx.fillText(String(label), S / 2, S / 2);

  const tex = new THREE.CanvasTexture(cv);
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.anisotropy = 8;

  const mat = new THREE.MeshBasicMaterial({
    map: tex, transparent: true, depthWrite: false,
    opacity,
  });
  const mesh = new THREE.Mesh(
    new THREE.PlaneGeometry(sizeUnits, sizeUnits),
    mat
  );
  return mesh;
}

/* Tüm 12 saat işaretli — 12/3/6/9 büyük ve altın, aradakiler küçük ve sönük.
   Saat yönü (ekran düzlemi, +y yukarı):
     12 → tepe = +π/2 · 3 → sağ = 0 · 6 → alt = -π/2 · 9 → sol = π */
const DIAL_HOURS = [
  [12, 0, true], [1, 1, false], [2, 2, false], [3, 3, true],
  [4, 4, false], [5, 5, false], [6, 6, true], [7, 7, false],
  [8, 8, false], [9, 9, true], [10, 10, false], [11, 11, false],
];

DIAL_HOURS.forEach(([label, hour, major]) => {
  const a = Math.PI / 2 - (hour / 12) * TAU;
  const r = dialR * (major ? 0.745 : 0.775);
  const size = major ? (label > 9 ? 0.64 : 0.46) : (label > 9 ? 0.34 : 0.26);

  const num = makeNumeralSprite(label, size, major ? 0.95 : 0.55);
  num.position.set(Math.cos(a) * r, Math.sin(a) * r, 0.02);
  numeralGroup.add(num);
});


/* marka yazısı yeri: küçük altın plaka */
const plaque = new THREE.Mesh(
  new THREE.CylinderGeometry(0.24, 0.24, 0.02, 32),
  MAT.goldPolished
);
plaque.position.set(0, -dialR * 0.45, 0.37);
dialGroup.add(plaque);

/* --- Kollar --- */
function makeHand(length, width, tail, mat, thick = 0.055) {
  const shape = new THREE.Shape();
  // iğ biçimli kol: tabanda geniş, uçta sivri
  shape.moveTo(-width, -tail);
  shape.lineTo(width, -tail);
  shape.lineTo(width * 0.55, length * 0.72);
  shape.lineTo(0, length);
  shape.lineTo(-width * 0.55, length * 0.72);
  shape.closePath();
  const geo = new THREE.ExtrudeGeometry(shape, {
    depth: thick, bevelEnabled: true, bevelThickness: 0.008, bevelSize: 0.008, bevelSegments: 2,
  });
  const hand = new THREE.Mesh(geo, mat);
  hand.castShadow = true;
  return hand;
}

const hourHand = makeHand(dialR * 0.50, 0.075, 0.16, MAT.goldPolished, 0.06);
hourHand.position.z = 0.42;
dialGroup.add(hourHand);

const minuteHand = makeHand(dialR * 0.76, 0.055, 0.20, MAT.gold, 0.055);
minuteHand.position.z = 0.50;
dialGroup.add(minuteHand);

const secondHand = makeHand(dialR * 0.84, 0.018, 0.26, MAT.ruby, 0.035);
secondHand.position.z = 0.57;
dialGroup.add(secondHand);

/* merkez göbek */
const centerCap = new THREE.Mesh(new THREE.SphereGeometry(0.14, 24, 16), MAT.goldPolished);
centerCap.position.z = 0.62;
centerCap.scale.z = 0.6;
dialGroup.add(centerCap);

const centerGem = new THREE.Mesh(new THREE.SphereGeometry(0.06, 16, 12), MAT.ruby);
centerGem.position.z = 0.68;
dialGroup.add(centerGem);

/* ============================================================
   8. SARKAÇ — ritmik hareket
   ============================================================ */
/* Sarkaç kasanın İÇİNDE ve camın arkasında durur — dışına taşmaz. */
/* DÜZELTME (kök neden): sarkaç z=-0.95'te, ana çark z=0'daydı → sarkaç
   dişli treninin ARKASINDA kalıyor, kadrajda gölgeye gömülüyordu.
   Gerçek saatte sarkaç mekanizmanın önünde, ayrı bir bölmede durur.
   z=+0.62: tüm çarkların önü, kadranın (z=0.92) arkası. */
const pendulumPivot = new THREE.Group();
/* Sarkaç derinliği TEK kaynaktan: animasyon döngüsü de bu sabiti kullanır.
   (Eskiden döngüde -1.1 sabit yazılıydı ve buradaki değeri eziyordu.) */
/* KONUM — sarkaç, dişli treninin TAMAMEN ALINDA olmalı.
   Dişli treni yarıçapı: en dış çark merkezi 1.83 + yarıçapı 0.66 ≈ 2.5.
   Sarkaç pivotu y=-1.55'te; çubuk 2.2 aşağı iner → topuz y≈-3.65.
   Kasa yarıçapı 5.4 olduğuna göre topuz kasanın içinde, alt boşlukta,
   hiçbir çarkın önünden geçmeden salınır. (Önceki denemede pivot 4.55'teyken
   topuz y=-3.4'e iniyordu ama çubuk çarkların önünden geçiyordu.) */
const PENDULUM_Z = 0.74;
/* ★28.10: pivot ana çarkın hemen altına (-0.38R); altındaki koridorda hiçbir çark yok. */
pendulumPivot.position.set(0, -CASE_R * 0.38, PENDULUM_Z);
caseGroup.add(pendulumPivot);

/* Çubuk: eski hâli yarıçap 0.035 (14px'te ~1 piksel) — koyu zeminde kayboluyordu.
   Gerçek saat sarkaç çubuğu ince ama PARLAK çelik; ölçüyü büyüttük ve
   malzemeyi cilalı çeliğe çektik ki ışığı yakalayıp görünsün. */
/* Çubuk, pivotun üstündeki kısa boyunduruk + aşağı inen kol olarak kurulur.
   2.1 birim: pivot -1.57'de, topuz -3.67'de → kasanın alt iç kenarına (-5.4)
   rahatça sığar. */
const rodLen = CASE_R * 0.40;
const rod = new THREE.Mesh(
  new THREE.CylinderGeometry(0.055, 0.055, rodLen, 16),
  MAT.steel
);
rod.position.y = -rodLen / 2;
rod.castShadow = true;
pendulumPivot.add(rod);

/* Topuz: çap 0.34 → 0.46. Kasanın içinde kalır. */
const bobR = 0.46;
const bob = new THREE.Mesh(
  new THREE.SphereGeometry(bobR, 36, 26),
  MAT.goldPolished
);
bob.scale.set(1, 1, 0.52);
bob.position.y = -rodLen + 0.10;
bob.castShadow = true;
pendulumPivot.add(bob);

const bobRing = new THREE.Mesh(new THREE.TorusGeometry(bobR * 1.02, 0.05, 12, 56), MAT.bronze);
bobRing.position.copy(bob.position);
bobRing.castShadow = true;
pendulumPivot.add(bobRing);

const pivotPivot = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 0.5, 16), MAT.steel);
pivotPivot.rotation.x = Math.PI / 2;
pendulumPivot.add(pivotPivot);

/* ============================================================
   9. POST-PROCESS — bloom + vinyet
   ============================================================ */
const composer = new EffectComposer(renderer);
composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
composer.setSize(window.innerWidth, window.innerHeight);

composer.addPass(new RenderPass(scene, camera));

const bloom = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  0.22,  // strength — kasa çerçevesi bloom'la erimesin
  0.42,  // radius
  0.96   // threshold — yalnız en parlak noktalar taşar
);
composer.addPass(bloom);

const VignetteShader = {
  uniforms: {
    tDiffuse: { value: null },
    offset: { value: 0.92 },
    darkness: { value: 1.15 },
    tint: { value: new THREE.Color(0x2a1a0c) },
    tintAmount: { value: 0.12 },
  },
  vertexShader: /* glsl */`
    varying vec2 vUv;
    void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }
  `,
  fragmentShader: /* glsl */`
    uniform sampler2D tDiffuse;
    uniform float offset;
    uniform float darkness;
    uniform vec3 tint;
    uniform float tintAmount;
    varying vec2 vUv;
    void main(){
      vec4 c = texture2D(tDiffuse, vUv);
      vec2 uv = (vUv - 0.5) * vec2(offset);
      float d = dot(uv, uv);
      c.rgb *= 1.0 - d * darkness * 0.85;
      c.rgb = mix(c.rgb, tint, tintAmount * smoothstep(0.0, 0.6, d));
      gl_FragColor = c;
    }
  `,
};
const vignette = new ShaderPass(VignetteShader);
composer.addPass(vignette);

composer.addPass(new OutputPass());

/* ============================================================
   10. KAMERA KONTROLÜ
   ============================================================ */
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(CAM_TARGET);
controls.enableDamping = true;
controls.dampingFactor = 0.055;
controls.rotateSpeed = 0.7;
controls.zoomSpeed = 0.75;
controls.minDistance = 4.6;
/* ★28.10: sabit 20, ev mesafesini kesip kasayı panelin altına itiyordu → ev mesafesine göre. */
controls.maxDistance = Math.max(20, CAM_HOME.length() * 1.5);
controls.maxPolarAngle = Math.PI * 0.86;
controls.minPolarAngle = Math.PI * 0.06;
controls.enablePan = false;
controls.autoRotate = false;

/* ============================================================
   11. ZAMAN DURUMU
   ============================================================ */
const timeConfig = {
  speed: 1,          // 1, 0.15, 0, 6
  targetSpeed: 1,
  clockAngle: 0,     // mekanizmanın toplam dönüş fazı (rad)
  simTime: 0,        // simülasyon saati (saniye)
};

/* gerçek saatten başlangıç fazı */
const now = new Date();
const startSeconds =
  now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + now.getMilliseconds() / 1000;

/* ============================================================
   12. PATLAT / BİRLEŞTİR
   ============================================================ */
const explodeState = { t: 0, target: 0, active: false };

/* her dişli için merkezden dışa doğru yön */
gears.forEach((g, i) => {
  const dir = new THREE.Vector3(g.base.x, g.base.y, 0);
  if (dir.lengthSq() < 0.01) dir.set(0, 0, 1);
  dir.normalize();
  // katmanına göre z derinliği
  const layerZ = g.base.z * 1.6;
  g.explodeDir.set(dir.x * 1.55, dir.y * 1.55, 0.35 + layerZ);
});

pendulumPivot.userData.explodeDir = new THREE.Vector3(-2.4, -1.0, -1.4);
dialGroup.userData.explodeDir = new THREE.Vector3(0, 0, 7.2);
glassDome.userData.explodeDir = new THREE.Vector3(0, 0, 9.6);

/* ============================================================
   13. ARAYÜZ BAĞLANTISI
   ============================================================ */
const ui = {
  segBtns: [...document.querySelectorAll('.seg-btn[data-speed]')],
  explodeBtn: document.getElementById('explode-btn'),
  explodeTxt: document.getElementById('explode-txt'),
  viewMech: document.getElementById('view-mech'),
  viewDial: document.getElementById('view-dial'),
  resetCam: document.getElementById('reset-cam'),
  tourBtn: document.getElementById('tour-btn'),
  hh: document.getElementById('clock-hh'),
  mm: document.getElementById('clock-mm'),
  ss: document.getElementById('clock-ss'),
  mode: document.getElementById('clock-mode'),
  loader: document.getElementById('loader'),
  fill: document.getElementById('loader-fill'),
  hint: document.getElementById('loader-hint'),
};

function setSpeed(v, btn) {
  timeConfig.targetSpeed = v;
  ui.segBtns.forEach(b => {
    const on = b === btn;
    b.classList.toggle('is-active', on);
    b.setAttribute('aria-pressed', String(on));
  });
  ui.mode.textContent =
    v === 0 ? 'zaman durdu' :
    v === 0.15 ? 'ağır çekim' :
    v === 6 ? 'hızlandırılmış' : 'gerçek zaman';
}

ui.segBtns.forEach(btn => {
  btn.addEventListener('click', () => setSpeed(Number(btn.dataset.speed), btn));
});

function toggleExplode() {
  explodeState.active = !explodeState.active;
  explodeState.target = explodeState.active ? 1 : 0;
  ui.explodeBtn.classList.toggle('is-active', explodeState.active);
  ui.explodeBtn.setAttribute('aria-pressed', String(explodeState.active));
  ui.explodeTxt.textContent = explodeState.active ? 'Birleştir' : 'Parçalara Ayır';

  /* Parçalanmış sahne kadraja sığmaz: kamera mekanizma mesafesine çekilir.
     Kadran modundaysak ve kullanıcı parçalıyorsa kadran görünür kalır —
     o durumda da geniş açı gerekir. */
  const fitDist = sigmaMesafesi(CASE_R * 1.25, 1.05);   // parçalar kasanın ~1.2R ötesine açılır
  flyCamera(
    new THREE.Vector3(CAM_HOME.x, CAM_HOME.y + 0.3, explodeState.active ? fitDist : CAM_HOME.z),
    CAM_TARGET.clone(),
    1.1
  );
}
ui.explodeBtn.addEventListener('click', toggleExplode);

let viewMode = 'mech';
function setView(mode) {
  viewMode = mode;
  const isDial = mode === 'dial';
  ui.viewMech.classList.toggle('is-active', !isDial);
  ui.viewDial.classList.toggle('is-active', isDial);
  ui.viewMech.setAttribute('aria-pressed', String(!isDial));
  ui.viewDial.setAttribute('aria-pressed', String(isDial));

  // kadran modunda sarkaç geriye çekilir, kamera kadrana döner
  if (isDial) {
    /* Kadran: tüm yüzü görecek mesafe — kasa yarıçapından türetilir,
       sabit sayı vermiyoruz ki mercek/kasa değişince kadraj kaymasın.
       mesafe = (yarıçap / tan(fov/2)) * 1.18 pay */
    const dist = sigmaMesafesi(CASE_R, 1.18);
    flyCamera(new THREE.Vector3(0, 0, dist), new THREE.Vector3(0, 0, 0.6));
    bloom.strength = 0.20;
    /* Dolgu ışığı kadranın önüne düşüp sol altta turuncu leke bırakıyordu. */
    fillLight.intensity = 6;
  } else {
    flyCamera(CAM_HOME.clone(), CAM_TARGET.clone());
    bloom.strength = 0.22;
    fillLight.intensity = 26;
  }
}
ui.viewMech.addEventListener('click', () => setView('mech'));
ui.viewDial.addEventListener('click', () => setView('dial'));

/* yumuşak kamera geçişi */
const camAnim = { active: false, t: 0, fromPos: new THREE.Vector3(), toPos: new THREE.Vector3(), fromTgt: new THREE.Vector3(), toTgt: new THREE.Vector3() };
function flyCamera(toPos, toTgt, dur = 1.4) {
  camAnim.active = true;
  camAnim.t = 0;
  camAnim.dur = dur;
  camAnim.fromPos.copy(camera.position);
  camAnim.toPos.copy(toPos);
  camAnim.fromTgt.copy(controls.target);
  camAnim.toTgt.copy(toTgt);
}

ui.resetCam.addEventListener('click', () => {
  tour.active = false;
  flyCamera(CAM_HOME.clone(), CAM_TARGET.clone(), 1.2);
});

/* sinematik tur */
const tour = { active: false, t: 0 };
ui.tourBtn.addEventListener('click', () => {
  tour.active = !tour.active;
  tour.t = 0;
  ui.tourBtn.classList.toggle('is-active', tour.active);
});

/* klavye */
window.addEventListener('keydown', (e) => {
  if (e.code === 'Space') {
    e.preventDefault();
    const stopped = timeConfig.targetSpeed === 0;
    setSpeed(stopped ? 1 : 0, ui.segBtns.find(b => Number(b.dataset.speed) === (stopped ? 1 : 0)));
  } else if (e.key === 'e' || e.key === 'E') {
    toggleExplode();
  } else if (e.key === 'r' || e.key === 'R') {
    ui.resetCam.click();
  } else if (e.key === '1') {
    setSpeed(1, ui.segBtns.find(b => Number(b.dataset.speed) === 1));
  } else if (e.key === '2') {
    setSpeed(0.15, ui.segBtns.find(b => Number(b.dataset.speed) === 0.15));
  } else if (e.key === '3') {
    setSpeed(6, ui.segBtns.find(b => Number(b.dataset.speed) === 6));
  }
});

/* ============================================================
   14. ANİMASYON DÖNGÜSÜ
   ============================================================ */
const clock = new THREE.Clock();


/* patlatma sırasında orijinal konumları koru */
const originalZ = gears.map(g => g.base.z);

function updateGears(dt) {
  // yumuşak hız geçişi
  timeConfig.speed = lerp(timeConfig.speed, timeConfig.targetSpeed, 1 - Math.pow(0.001, dt));

  timeConfig.simTime += dt * timeConfig.speed;
  const secs = startSeconds + timeConfig.simTime;

  /* Dişliler: faz + hız * simülasyon zamanı.
     Grup dönmez (mil/montaj sabit kalır), yalnız çark gövdesi döner. */
  gears.forEach((g) => {
    g.mesh.rotation.z = g.phase + g.omega * timeConfig.simTime;
  });

  // kadran kolları — gerçek zaman
  const hAngle = ((secs / 43200) % 1) * TAU;
  const mAngle = ((secs / 3600) % 1) * TAU;
  const sAngle = ((secs / 60) % 1) * TAU;
  /* Kol şekli +Y yönüne (12) uzanıyor; saat yönü için negatif.
     ★28.10: eskiden "+ Math.PI / 2" ekleniyordu → kollar 90° (3 saat / 15 dk) geride; dijital 00:39 iken
     akrep 9'da, yelkovan 24. dakikadaydı. Rakamlar 12 tepede dizildiği için kaydırma gerekmez. */
  hourHand.rotation.z = -hAngle;
  minuteHand.rotation.z = -mAngle;
  secondHand.rotation.z = -sAngle;

  /* SARKAÇ — KAÇIŞ ÇARKINDAN TÜRETİLİR (bağımsız sinüs değil).
     Gerçek saatte sarkaç kaçış çarkını kilitler; ikisi aynı fazdan beslenir.
     Kaçış çarkı bir tam diş attığında sarkaç bir yarım salınım yapar.
     Böylece mekanizma ile sarkaç gözle de aynı ritimde görünür. */
  const escGear = gears[escapeWheel];
  const escPhase = escGear.mesh.rotation.z;
  /* Kaçış çarkının açısal konumu doğrudan salınım açısına çevrilir:
     diş sayısı kadar adım → tam salınım. Genlik 22° (gerçek sarkaç ~±11°
     ama görsel okunabilirlik için abartıldı).
     ★28.10: çapa (anchor) kaçışında bir tam salınımda bir diş geçer → çarpan
     teeth. Kaçış çarkı artık gerçek oranla döndüğü için periyot ≈ 1,6 sn. */
  const swing = Math.sin(escPhase * escGear.teeth) * 22 * DEG;
  pendulumPivot.rotation.z = swing;

  // dijital okuma
  const hh = Math.floor((secs / 3600) % 24);
  const mm = Math.floor((secs / 60) % 60);
  const ss = Math.floor(secs % 60);
  ui.hh.textContent = String(hh).padStart(2, '0');
  ui.mm.textContent = String(mm).padStart(2, '0');
  ui.ss.textContent = String(ss).padStart(2, '0');
}

function updateExplode(dt) {
  if (Math.abs(explodeState.t - explodeState.target) < 0.0005) {
    explodeState.t = explodeState.target;
  } else {
    explodeState.t = lerp(explodeState.t, explodeState.target, 1 - Math.pow(0.0009, dt * 1.6));
  }
  const t = easeInOut(clamp(explodeState.t, 0, 1));

  gears.forEach((g, i) => {
    g.group.position.x = g.base.x + g.explodeDir.x * t;
    g.group.position.y = g.base.y + g.explodeDir.y * t;
    g.group.position.z = originalZ[i] + g.explodeDir.z * t;
  });

  // NUMEX-DÜZELTME (2026-10-27): Her karede sarkaç z'si -1.1'e sabitleniyordu; kurulumda verilen 0.74 değeri eziliyor ve sarkaç görünmüyordu.
  /* DÜZELTME (kök neden): bu satır her karede sarkacın z'sini -1.1'e
     sabitliyordu — kurulumda verilen görünür derinlik (0.74) ilk karede
     eziliyor, sarkaç dişli treninin en arkasına düşüyordu (ekranda yok).
     Artık kurulumdaki z korunuyor, yalnız patlatma ofseti ekleniyor. */
  pendulumPivot.position.z = PENDULUM_Z + pendulumPivot.userData.explodeDir.z * t;
  pendulumPivot.position.x = pendulumPivot.userData.explodeDir.x * t;

  dialGroup.position.z = 0.92 + dialGroup.userData.explodeDir.z * t;
  glassDome.position.z = 0.98 + glassDome.userData.explodeDir.z * t;
  glassDome.scale.setScalar(1 + t * 0.06);

  /* Ayrıkken çarklar hafifçe kendi eksenlerinde yatar (canlı görünür). */
  gears.forEach((g) => {
    g.mesh.rotation.y = t * 0.22;
  });

  /* Kadran yalnızca kadran modunda görünür. Mekanizma modunda
     parçalarken kadran ekranı kapatmasın — yoksa kullanıcı çarkları
     kolların arkasından izlemek zorunda kalır.
     Kadran modunda ise dişli tarlası tamamen gizlenir: çarklar kadran
     yüzünü kirletiyor, rakamların okunurluğunu düşürüyordu. */
  const dialMode = viewMode === 'dial';
  dialGroup.visible = dialMode;
  gearField.visible = !dialMode;
  pendulumPivot.visible = !dialMode;   // sarkaç topuzu kadranın önüne sızıyordu
  gearField.position.z = -0.15;
}

function updateCamera(dt) {
  /* ★28.10: sis yoğunluğu sabit 0.028 iken kamera 20 biriminden uzaklaşınca (dar ekran, parçalanmış görünüm)
     sahne karanlığa gömülüyordu — yoğunluk kamera uzaklığıyla ölçeklenir, 20 birime kadar eskisiyle aynı. */
  scene.fog.density = 0.028 * Math.min(1, 20 / camera.position.distanceTo(controls.target));
  if (camAnim.active) {
    camAnim.t += dt / camAnim.dur;
    const t = easeInOut(clamp(camAnim.t, 0, 1));
    camera.position.lerpVectors(camAnim.fromPos, camAnim.toPos, t);
    controls.target.lerpVectors(camAnim.fromTgt, camAnim.toTgt, t);
    if (camAnim.t >= 1) camAnim.active = false;
  }

  if (tour.active && !camAnim.active) {
    tour.t += dt * 0.18;
    const r = 13.0 + Math.sin(tour.t * 0.7) * 2.2;
    const a = tour.t;
    camera.position.set(
      Math.cos(a) * r,
      1.6 + Math.sin(tour.t * 0.9) * 2.6,
      Math.sin(a) * r
    );
    controls.target.lerp(new THREE.Vector3(0, 0.2, 0), 0.05);
  }

  controls.update();
}

function animate() {
  const dt = Math.min(clock.getDelta(), 0.05);
  updateGears(dt);
  updateExplode(dt);
  updateCamera(dt);
  composer.render();
  requestAnimationFrame(animate);

}

/* ============================================================
   15. BOYUTLANDIRMA
   ============================================================ */
function onResize() {
  const w = window.innerWidth, h = window.innerHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
  composer.setSize(w, h);

  /* Ekran oranı değişti → ev kamerası mesafesi yeniden hesaplanır
     (dikey ekranda kasa kesilmesin). Kullanıcı sahneyi döndürdüyse
     kamerasına dokunulmaz, yalnız referans noktası güncellenir. */
  const near = camera.position.distanceTo(controls.target);
  const oldDist = CAM_HOME.length();
  resetCameraHome(false);
  const newDist = CAM_HOME.length();
  controls.maxDistance = Math.max(20, newDist * 1.5);
  if (Math.abs(near - oldDist) < 0.6 && !camAnim.active) {
    const dir = camera.position.clone().sub(controls.target).normalize();
    camera.position.copy(controls.target).addScaledVector(dir, newDist);
  }
}
window.addEventListener('resize', onResize);

/* ============================================================
   16. YÜKLEYİCİ
   ============================================================ */
function buildLoaderGears() {
  const g1 = document.getElementById('lg1');
  const g2 = document.getElementById('lg2');
  const gearPath = (teeth, r) => {
    let d = '';
    for (let i = 0; i < teeth; i++) {
      const a = (i / teeth) * TAU;
      const step = TAU / teeth;
      const pts = [
        [a - step * 0.3, r * 0.86], [a - step * 0.16, r], [a + step * 0.16, r], [a + step * 0.3, r * 0.86],
      ];
      pts.forEach(([ang, rad], k) => {
        const x = 50 + Math.cos(ang) * rad;
        const y = 50 + Math.sin(ang) * rad;
        d += (i === 0 && k === 0 ? 'M' : 'L') + x.toFixed(2) + ' ' + y.toFixed(2) + ' ';
      });
    }
    return d + 'Z';
  };
  if (g1) g1.innerHTML = `<path d="${gearPath(12, 42)}" fill-rule="evenodd"/><circle cx="50" cy="50" r="12" fill="#0a0805"/>`;
  if (g2) g2.innerHTML = `<path d="${gearPath(9, 40)}" fill-rule="evenodd"/><circle cx="50" cy="50" r="11" fill="#0a0805"/>`;
}

const loaderSteps = [
  [10, 'Mekanizma kuruluyor…'],
  [35, 'Dişliler birbirine geçiriliyor…'],
  [60, 'Kadran ve kollar yerleştiriliyor…'],
  [82, 'Işıklar ayarlanıyor…'],
  [100, 'Hazır'],
];

function runLoader(onDone) {
  let i = 0;
  const tick = () => {
    if (i >= loaderSteps.length) {
      setTimeout(() => {
        ui.loader.classList.add('is-done');
        onDone();
      }, 380);
      return;
    }
    const [pct, txt] = loaderSteps[i++];
    ui.fill.style.width = pct + '%';
    ui.hint.textContent = txt;
    setTimeout(tick, 240);
  };
  tick();
}

/* ============================================================
   17. BAŞLAT
   ============================================================ */
buildLoaderGears();
animate();

runLoader(() => {
  // girişte sinematik yaklaşma: uzaktan sahneye
  camera.position.set(0, 4.0, 24);
  flyCamera(CAM_HOME.clone(), CAM_TARGET.clone(), 2.6);
});

/* vitrin bilgisi (Market meta) */
window.NUMEX_CLOCKWORK = {
  name: 'NUMEX CLOCKWORK',
  slogan: 'Zamanın İçini Gör',
  gears: gears.length,
  version: '1.0.0',
  ready: true,
};