Replace bg image with pure-CSS dual monitors (Apple Studio Display style)

static/index.html

@@ -88,38 +88,60 @@
     text-transform: uppercase;
   }
 
-  /* Cift monitor sahnesi — gercek gorsel + 2 ekran inseti */
+  /* Cift monitor sahnesi — saf CSS cizim */
   .stage {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 1920 / 1080;
-    background: url('/static/monitors.jpg') no-repeat center / 100% 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 56px;
+    align-items: start;
+    justify-items: center;
   }
+  .monitor { width: 100%; max-width: 640px; }
+
   .screen {
+    position: relative;
+    aspect-ratio: 16 / 10;
+    background: #0a0b0d;
+    border-radius: 10px;
+    padding: 14px;
+    box-shadow:
+      0 24px 50px rgba(0,0,0,0.18),
+      0 6px 14px rgba(0,0,0,0.10),
+      inset 0 0 0 1px rgba(255,255,255,0.04);
+    transition: box-shadow 0.3s;
+  }
+  .screen::before {
+    /* Kamera deligi */
+    content: '';
     position: absolute;
+    top: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
+    background: #1c1e22;
+    border-radius: 50%;
+  }
+  .screen-inner {
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+    border-radius: 2px;
     background: #000;
+    position: relative;
   }
-  /* Olculer (1920x1080 referansli):
-     Sol ekran : x=109..914   y=222..841 -> %5.677 / %20.556 / w%41.927 / h%57.315
-     Sag ekran : x=1005..1810 y=222..841 -> %52.344 / %20.556 / w%41.927 / h%57.315 */
-  .screen.left  { left: 5.677%;  top: 20.556%; width: 41.927%; height: 57.315%; }
-  .screen.right { left: 52.344%; top: 20.556%; width: 41.927%; height: 57.315%; }
-
-  .screen img {
+  .screen-inner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
-    transition: transform 0.18s ease-out, filter 0.25s, opacity 0.3s;
+    transition: transform 0.18s ease-out, filter 0.25s;
   }
-  .screen.right img { object-fit: contain; background: #ffffff; }
+  .screen.right .screen-inner { background: #ffffff; }
+  .screen.right .screen-inner img { object-fit: contain; }
   .screen.right .empty {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
     background: #ffffff;
     color: var(--ink-mute);
     font-family: 'Rajdhani', sans-serif;
@@ -129,8 +151,39 @@
     text-align: center;
     padding: 0 24px;
   }
-  /* Ekran etrafinda hafif glow (asistan konusurken) */
-  .screen.left.active { box-shadow: 0 0 0 3px var(--trek-red), 0 0 30px rgba(205,31,42,0.45); }
+  .screen.left.active {
+    box-shadow:
+      0 0 0 2px var(--trek-red),
+      0 0 30px rgba(205,31,42,0.45),
+      0 24px 50px rgba(0,0,0,0.18);
+  }
+  /* Stand (boyun + taban) */
+  .stand {
+    width: 38%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .stand .neck {
+    width: 35%;
+    height: 32px;
+    background: linear-gradient(180deg, #cfd2d7 0%, #a4a8af 100%);
+    border-radius: 0 0 6px 6px;
+    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12);
+  }
+  .stand .base {
+    width: 100%;
+    height: 14px;
+    margin-top: -2px;
+    background: linear-gradient(180deg, #d4d7dc 0%, #9aa0a8 100%);
+    border-radius: 50%;
+    box-shadow: 0 14px 22px rgba(0,0,0,0.16);
+  }
+
+  @media (max-width: 900px) {
+    .stage { grid-template-columns: 1fr; gap: 28px; }
+  }
 
   /* Alt bant icerikleri */
   .status {
@@ -254,12 +307,22 @@
 
   <!-- IKILI MONITOR SAHNESI -->
   <div class="stage">
-    <div class="screen left" id="leftScreen">
-      <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
+    <div class="monitor">
+      <div class="screen left" id="leftScreen">
+        <div class="screen-inner">
+          <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
+        </div>
+      </div>
+      <div class="stand"><div class="neck"></div><div class="base"></div></div>
     </div>
-    <div class="screen right" id="rightScreen">
-      <div class="empty" id="productEmpty">Henüz Ürün Yok</div>
-      <img id="productImg" alt="" style="display:none;" />
+    <div class="monitor">
+      <div class="screen right" id="rightScreen">
+        <div class="screen-inner">
+          <div class="empty" id="productEmpty">Henüz Ürün Yok</div>
+          <img id="productImg" alt="" style="display:none;" />
+        </div>
+      </div>
+      <div class="stand"><div class="neck"></div><div class="base"></div></div>
     </div>
   </div>