From 8904e6b048557256ef3020829b11c77c590321ab Mon Sep 17 00:00:00 2001
From: numex-admin <admin@numexai.com.tr>
Date: Wed, 9 Sep 2026 22:40:44 +0000
Subject: [PATCH] =?UTF-8?q?Numex=20yay=C4=B1n:=20public/fluidsim/style.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/fluidsim/style.css | 232 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 public/fluidsim/style.css

diff --git a/public/fluidsim/style.css b/public/fluidsim/style.css
new file mode 100644
index 0000000..b531f3e
--- /dev/null
+++ b/public/fluidsim/style.css
@@ -0,0 +1,232 @@
+/* FluidSim — Navier-Stokes 2D sıvı simülatörü · dark neon tema */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg: #07080f;
+  --panel: #0d101c;
+  --panel2: #111527;
+  --edge: #1d2438;
+  --txt: #dfe6ff;
+  --muted: #7f8aab;
+  --cyan: #00f0ff;
+  --pink: #ff2bd6;
+  --lime: #39ff88;
+  --amber: #ffe14d;
+}
+
+html, body {
+  height: 100%;
+  background: radial-gradient(1200px 700px at 50% -10%, #10162b 0%, var(--bg) 55%);
+  color: var(--txt);
+  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+  overflow-x: hidden;
+}
+
+.stage {
+  max-width: min(1180px, 95vw);
+  margin: 0 auto;
+  padding: 14px 18px 20px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* ── üst bar ─────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) , var(--panel);
+  border: 1px solid var(--edge);
+  border-radius: 14px;
+}
+.brand { display: flex; align-items: center; gap: 10px; }
+.brand-icon {
+  font-size: 22px; color: var(--cyan);
+  text-shadow: 0 0 12px var(--cyan);
+}
+.brand h1 {
+  font-size: 22px; letter-spacing: 3px; font-weight: 800;
+  font-family: "Consolas", "Courier New", monospace;
+}
+.brand h1 .accent { color: var(--pink); text-shadow: 0 0 14px var(--pink); }
+.tagline {
+  font-size: 11px; color: var(--muted);
+  letter-spacing: 1px; border-left: 1px solid var(--edge); padding-left: 10px;
+}
+
+.hud { display: flex; gap: 8px; flex-wrap: wrap; }
+.hud-cell {
+  display: flex; flex-direction: column; align-items: center;
+  min-width: 58px; padding: 6px 10px;
+  background: var(--panel2);
+  border: 1px solid var(--edge); border-radius: 10px;
+}
+.hud-label { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
+.hud-value {
+  font-size: 16px; font-weight: 700; color: var(--cyan);
+  font-family: "Consolas", monospace;
+}
+.hud-cell.accent .hud-value { color: var(--pink); }
+.hud-cell.accent { border-color: rgba(255,43,214,0.4); box-shadow: 0 0 14px rgba(255,43,214,0.12) inset; }
+
+/* ── çalışma alanı ───────────────────── */
+.workspace {
+  display: grid;
+  grid-template-columns: 1fr 250px;
+  gap: 14px;
+  flex: 1;
+}
+
+.sig-panel {
+  position: relative;
+  border: 1px solid var(--edge);
+  border-radius: 14px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #04050a;
+  min-height: 420px;
+  /* sağ panelle eşit yükseklik davranışı; içerik uzarsa panel kendi içinde scroll */
+  max-height: calc(100vh - 140px);
+}
+.sig-panel canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  max-height: calc(100vh - 140px);
+  aspect-ratio: 16 / 10;
+  object-fit: fill;
+  cursor: crosshair;
+  touch-action: none;
+  image-rendering: pixelated;
+}
+.legend {
+  position: absolute; left: 10px; bottom: 8px;
+  display: flex; gap: 6px; flex-wrap: wrap;
+}
+.lg-item {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: rgba(7,8,15,0.75);
+  border: 1px solid var(--edge);
+  padding: 3px 8px; font-size: 11px; color: var(--muted);
+  border-radius: 999px;
+}
+.lg-item kbd {
+  background: var(--panel2); color: var(--cyan);
+  border: 1px solid var(--edge); border-bottom-width: 2px;
+  padding: 0 6px; font-size: 10px; border-radius: 6px;
+  font-family: "Consolas", monospace;
+}
+
+/* ── sağ panel ──────────────────────── */
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--edge);
+  border-radius: 14px;
+  padding: 14px;
+}
+.panel-title {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; letter-spacing: 1.5px; color: var(--txt);
+  margin-bottom: 12px; font-weight: 700;
+}
+.t-bullet {
+  width: 8px; height: 8px; background: var(--cyan);
+  box-shadow: 0 0 10px var(--cyan);
+  border-radius: 2px;
+}
+.panel-title.sub { margin-top: 6px; }
+
+.slider-group { margin-bottom: 16px; }
+.slider-head {
+  display: flex; justify-content: space-between; align-items: baseline;
+  margin-bottom: 6px;
+}
+.slider-head label { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
+.slider-head output {
+  font-family: "Consolas", monospace; font-size: 12px; color: var(--lime);
+}
+input[type="range"] {
+  width: 100%; height: 5px;
+  -webkit-appearance: none; appearance: none;
+  background: var(--panel2);
+  border: 1px solid var(--edge);
+  border-radius: 999px; outline: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--cyan);
+  border: 2px solid #06121a;
+  box-shadow: 0 0 10px rgba(0,240,255,0.6);
+  cursor: pointer;
+}
+input[type="range"]::-moz-range-thumb {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--cyan); border: 2px solid #06121a; cursor: pointer;
+}
+
+.mode-list { display: flex; flex-direction: column; gap: 6px; }
+.ml-item {
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px 10px;
+  border: 1px solid var(--edge);
+  border-radius: 9px; font-size: 12px; color: var(--muted);
+  cursor: pointer; transition: all 0.15s;
+  user-select: none;
+}
+.ml-item:hover { border-color: var(--cyan); color: var(--txt); }
+.ml-item.active {
+  border-color: var(--cyan); color: var(--txt);
+  background: rgba(0,240,255,0.08);
+  box-shadow: 0 0 12px rgba(0,240,255,0.12) inset;
+}
+.ml-ic { filter: grayscale(0.4); }
+
+.stat-box {
+  margin-top: 14px; padding-top: 12px;
+  border-top: 1px dashed var(--edge);
+  display: flex; flex-direction: column; gap: 6px;
+}
+.sb-row {
+  display: flex; justify-content: space-between;
+  font-size: 11px; color: var(--muted);
+}
+.sb-row b { color: var(--amber); font-family: "Consolas", monospace; font-weight: 600; }
+
+/* ── alt bilgi ───────────────────────── */
+.footbar {
+  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
+  padding: 10px; font-size: 11px; color: var(--muted);
+  border-top: 1px solid var(--edge);
+}
+.hint { opacity: 0.85; }
+
+@media (max-width: 760px) {
+  .stage { padding: 10px 12px 16px; }
+  .workspace { grid-template-columns: 1fr; }
+  /* "text-5xl → responsive" karşılığı: ana başlığı küçült, taşmasın */
+  .brand h1 { font-size: 18px; font-weight: 800; }
+  .brand .brand-icon { font-size: 17px; }
+  .tagline { display: none; }
+  /* "sabit w/h → responsive" karşılığı: HUD hücrelerini esnet */
+  .hud { width: 100%; justify-content: space-between; gap: 6px; }
+  .hud-cell { flex: 1; min-width: 0; padding: 5px 4px; }
+  .hud-value { font-size: 14px; }
+  .sig-panel { min-height: 300px; }
+  .sig-panel canvas { min-height: 300px; }
+  .legend { left: 6px; right: 6px; bottom: 6px; justify-content: center; }
+  .lg-item { font-size: 10px; padding: 2px 6px; }
+}
+
+/* orta: 761–980px sıkışmasın */
+@media (min-width: 761px) and (max-width: 980px) {
+  .workspace { grid-template-columns: 1fr 220px; }
+  .brand h1 { font-size: 19px; }
+  .hud-value { font-size: 14px; }
+}