Light theme inside CSS monitor frame: bezel + stand, white screen, dark text

static/index.html

@@ -9,32 +9,102 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet" />
 <style>
   :root {
-    --trek-red: #E2231A;
-    --trek-red-glow: rgba(226, 35, 26, 0.55);
-    --bg-0: #050608;
-    --bg-1: #0b0d12;
-    --bg-2: #11141b;
-    --line: rgba(255,255,255,0.08);
-    --line-strong: rgba(255,255,255,0.18);
-    --tech-cyan: #6fb6ff;
+    --trek-red: #CD1F2A;
+    --trek-red-glow: rgba(205, 31, 42, 0.35);
+    --bg-page: #e8e9ec;
+    --bg-screen: #f6f7f9;
+    --bg-screen-2: #ffffff;
+    --ink: #1a1d23;
+    --ink-soft: #4a5260;
+    --ink-mute: #8b929c;
+    --line: rgba(0,0,0,0.08);
+    --line-strong: rgba(0,0,0,0.16);
+    --bezel-1: #2a2d33;
+    --bezel-2: #15171b;
   }
   * { box-sizing: border-box; }
   html, body { margin: 0; height: 100%; }
   body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background:
-      radial-gradient(1200px 600px at 50% -10%, rgba(226,35,26,0.10), transparent 60%),
-      radial-gradient(800px 500px at 90% 110%, rgba(111,182,255,0.08), transparent 60%),
-      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
-    color: #fff;
+      radial-gradient(1000px 600px at 50% 10%, #ffffff, transparent 70%),
+      linear-gradient(180deg, #eef0f3 0%, #d8dce2 100%);
+    color: var(--ink);
     min-height: 100vh;
-    padding: 0;
+    padding: 28px 16px 40px;
     letter-spacing: 0.01em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
+
+  /* Monitor cercevesi — saf CSS, gorsel yok */
+  .monitor {
+    width: 100%;
+    max-width: 1280px;
+    margin: 12px auto 0;
+    position: relative;
+  }
+  .monitor .bezel {
+    background: linear-gradient(180deg, var(--bezel-1) 0%, var(--bezel-2) 100%);
+    border-radius: 18px;
+    padding: 18px;
+    box-shadow:
+      0 30px 80px rgba(0,0,0,0.25),
+      0 8px 20px rgba(0,0,0,0.15),
+      inset 0 1px 0 rgba(255,255,255,0.08),
+      inset 0 -1px 0 rgba(0,0,0,0.4);
+    position: relative;
+  }
+  .monitor .bezel::before {
+    /* Kamera deligi */
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 6px;
+    background: #0a0b0d;
+    border-radius: 50%;
+    box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
+  }
+  .monitor .screen {
+    background: linear-gradient(180deg, var(--bg-screen-2) 0%, var(--bg-screen) 100%);
+    border-radius: 6px;
+    overflow: hidden;
+    position: relative;
+    min-height: 720px;
+  }
+  /* Stand boynu */
+  .monitor .neck {
+    width: 80px;
+    height: 36px;
+    margin: -2px auto 0;
+    background: linear-gradient(180deg, #b9bdc4 0%, #8c9098 100%);
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+  }
+  /* Stand tabani */
+  .monitor .base {
+    width: 280px;
+    height: 14px;
+    margin: 0 auto;
+    background: linear-gradient(180deg, #c9ccd2 0%, #9aa0a8 100%);
+    border-radius: 50%;
+    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
+  }
+  @media (max-width: 700px) {
+    .monitor .bezel { padding: 10px; border-radius: 12px; }
+    .monitor .neck { width: 50px; height: 22px; }
+    .monitor .base { width: 180px; height: 10px; }
+    .monitor .screen { min-height: 0; }
+  }
+
   .app {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    min-height: 100vh;
+    min-height: 720px;
     position: relative;
     z-index: 1;
   }
@@ -48,17 +118,18 @@
   .col.left { border-right: 1px solid var(--line); }
   .col.right { justify-content: center; }
   @media (max-width: 900px) {
-    .app { grid-template-columns: 1fr; }
+    .app { grid-template-columns: 1fr; min-height: 0; }
     .col.left { border-right: none; border-bottom: 1px solid var(--line); }
   }
   .product-card {
     width: min(90%, 520px);
-    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
+    background: #ffffff;
     border: 1px solid var(--line);
     border-radius: 4px;
     padding: 28px;
     text-align: center;
     position: relative;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
   }
   .product-card::before {
     content: '';
@@ -72,20 +143,14 @@
     font-size: 1rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
-    color: rgba(255,255,255,0.35);
+    color: var(--ink-mute);
     padding: 80px 0;
   }
-  .product-card .empty .ico {
-    display: block;
-    font-size: 3rem;
-    margin-bottom: 18px;
-    color: rgba(226,35,26,0.5);
-  }
   .product-card .pimg {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: contain;
-    background: #fff;
+    background: #f8f9fb;
     border-radius: 2px;
     margin-bottom: 20px;
     border: 1px solid var(--line);
@@ -98,6 +163,7 @@
     text-transform: uppercase;
     margin-bottom: 14px;
     line-height: 1.2;
+    color: var(--ink);
   }
   .product-card .plink {
     display: inline-block;
@@ -122,22 +188,13 @@
     font-size: 0.8rem;
     letter-spacing: 0.32em;
     text-transform: uppercase;
-    color: rgba(255,255,255,0.45);
+    color: var(--ink-mute);
     margin-bottom: 18px;
     text-align: center;
   }
   .product-section-title .accent { color: var(--trek-red); }
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
-    background-size: 48px 48px;
-    pointer-events: none;
-    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
-    z-index: 0;
+  .product-card .plink {
+    /* tam ust style asagida zaten var, light-mode override gerekmiyor */
   }
 
   .brand {
@@ -162,7 +219,7 @@
     font-size: 0.95rem;
     letter-spacing: 0.32em;
     text-transform: uppercase;
-    color: rgba(255,255,255,0.7);
+    color: var(--ink-soft);
   }
   h1 {
     margin: 8px 0 4px;
@@ -171,11 +228,12 @@
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
+    color: var(--ink);
     z-index: 1;
   }
   h1 .accent { color: var(--trek-red); }
   .subtitle {
-    opacity: 0.55;
+    color: var(--ink-mute);
     margin-bottom: 22px;
     font-size: 0.8rem;
     letter-spacing: 0.18em;
@@ -195,18 +253,18 @@
     height: 100%;
     object-fit: contain;
     border-radius: 4px;
-    background: linear-gradient(160deg, #0d1118, #05070a);
+    background: linear-gradient(160deg, #f0f1f4, #e3e6eb);
     display: block;
     transition: transform 0.18s ease-out, filter 0.25s;
     box-shadow:
-      0 20px 70px rgba(0,0,0,0.6),
+      0 12px 32px rgba(0,0,0,0.10),
       inset 0 0 0 1px var(--line);
   }
   .ring {
     position: absolute;
     inset: -8px;
     border-radius: 8px;
-    border: 1px solid var(--line-strong);
+    border: 1px solid var(--line);
     pointer-events: none;
     transition: border-color 0.3s, box-shadow 0.3s, transform 0.12s ease-out;
   }
@@ -230,14 +288,14 @@
   .panel {
     width: 100%;
     max-width: 620px;
-    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
-    backdrop-filter: blur(14px);
+    background: #ffffff;
     border: 1px solid var(--line);
     border-radius: 4px;
     padding: 22px 24px;
     text-align: center;
     position: relative;
     z-index: 1;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
   }
   .panel::before {
     content: '';
@@ -249,7 +307,7 @@
   .status {
     padding: 7px 16px;
     border-radius: 2px;
-    background: rgba(0,0,0,0.4);
+    background: #f6f7f9;
     border: 1px solid var(--line);
     font-family: 'Rajdhani', sans-serif;
     font-size: 0.85rem;
@@ -258,9 +316,9 @@
     margin-bottom: 18px;
     display: inline-block;
   }
-  .status.connected { color: #34d399; border-color: rgba(52,211,153,0.4); }
-  .status.connecting { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
-  .status.disconnected { color: #f87171; border-color: rgba(248,113,113,0.4); }
+  .status.connected { color: #0a8f4f; border-color: rgba(10,143,79,0.35); background: #ecfaf2; }
+  .status.connecting { color: #b67900; border-color: rgba(182,121,0,0.35); background: #fff7e6; }
+  .status.disconnected { color: #b91c1c; border-color: rgba(185,28,28,0.3); background: #fef2f2; }
   .controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
   button {
     padding: 13px 28px;
@@ -285,20 +343,23 @@
     box-shadow: 0 10px 30px rgba(226,35,26,0.5);
   }
   button:disabled { background: #1f2329; cursor: not-allowed; opacity: 0.5; box-shadow: none; }
-  button.danger { background: transparent; color: #fff; border: 1px solid var(--line-strong); box-shadow: none; }
-  button.danger:hover:not(:disabled) { background: rgba(255,255,255,0.06); border-color: #fff; transform: translateY(-2px); }
+  button.danger { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
+  button.danger:hover:not(:disabled) { background: #f3f4f6; border-color: var(--ink-soft); transform: translateY(-2px); }
 
   .footer {
     margin-top: 22px;
     font-size: 0.7rem;
     letter-spacing: 0.25em;
     text-transform: uppercase;
-    color: rgba(255,255,255,0.3);
+    color: var(--ink-mute);
     z-index: 1;
   }
 </style>
 </head>
 <body>
+<div class="monitor">
+  <div class="bezel">
+    <div class="screen">
 <div class="app">
   <div class="col left">
     <div class="brand">
@@ -345,6 +406,11 @@
     </div>
   </div>
 </div>
+    </div><!-- /screen -->
+  </div><!-- /bezel -->
+  <div class="neck"></div>
+  <div class="base"></div>
+</div><!-- /monitor -->
 
 <script>
 const SAMPLE_RATE = 24000;