Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LUMEN — Creative Technology Studio</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=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/* =====================================================
   ROOT & RESET
   ===================================================== */
:root{
  --ink:#04070F;
  --lime:#C9FF04;
  --amber:#FF5020;
  --cyan:#00F5FF;
  --cream:#F0EDE6;
  --slate:#0E1A30;
  --glass:rgba(14,26,48,0.55);
  --border:rgba(201,255,4,0.2);
  --shadow-lime:0 0 30px rgba(201,255,4,0.3);
  --shadow-amber:0 0 30px rgba(255,80,32,0.3);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Syne',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
::selection{background:var(--lime);color:var(--ink);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--lime);border-radius:3px;}

/* =====================================================
   CUSTOM CURSOR
   ===================================================== */
.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:9999;transition:transform .15s;
}
.cur-dot{width:5px;height:5px;background:var(--lime);box-shadow:var(--shadow-lime);}
.cur-ring{
  width:28px;height:28px;border:1.5px solid rgba(201,255,4,0.6);
  transition:width .2s,height .2s,border-color .2s,background .2s;
}
body.link-hover .cur-ring{
  width:48px;height:48px;border-color:var(--amber);
  background:rgba(255,80,32,0.08);
  animation:cur-spin 3s linear infinite;
}
@keyframes cur-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* =====================================================
   OVERLAYS
   ===================================================== */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.18) 4px);
  opacity:.5;
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:49;
  background:radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(4,7,15,.9) 100%);
}

/* =====================================================
   HUD CORNERS
   ===================================================== */
.hud-c{position:fixed;width:22px;height:22px;pointer-events:none;z-index:80;}
.hud-c::before,.hud-c::after{content:'';position:absolute;background:var(--lime);}
.hud-c::before{width:100%;height:1.5px;top:0;left:0;}
.hud-c::after{width:1.5px;height:100%;top:0;left:0;}
.hud-tl{top:18px;left:18px;}
.hud-tr{top:18px;right:18px;transform:scaleX(-1);}
.hud-bl{bottom:18px;left:18px;transform:scaleY(-1);}
.hud-br{bottom:18px;right:18px;transform:scale(-1,-1);}

/* =====================================================
   NAVBAR
   ===================================================== */
nav{
  position:fixed;top:0;width:100%;z-index:100;padding:24px 48px;
  display:flex;justify-content:space-between;align-items:center;
  transition:padding .3s,background .3s;
}
nav.scrolled{
  padding:14px 48px;
  background:rgba(4,7,15,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,255,4,.08);
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.12em;
  color:var(--cream);text-decoration:none;
}
.nav-logo span{color:var(--lime);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{
  font-family:'Fira Code',monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,237,230,.5);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--lime);}
.nav-cta{
  font-family:'Fira Code',monospace;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  border:1.5px solid var(--lime);color:var(--lime);padding:10px 22px;
  background:transparent;position:relative;overflow:hidden;transition:color .3s;cursor:none;
}
.nav-cta::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:var(--lime);transition:left .3s;z-index:-1;
}
.nav-cta:hover{color:var(--ink);}
.nav-cta:hover::before{left:0;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:none;background:none;border:none;padding:4px;}
.hamburger span{width:26px;height:1.5px;background:var(--cream);transition:all .3s;}

/* =====================================================
   HERO
   ===================================================== */
#hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;padding:120px 48px 80px;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle 500px at 75% 50%, rgba(201,255,4,.04) 0%, transparent 70%),
    radial-gradient(circle 300px at 20% 80%, rgba(255,80,32,.06) 0%, transparent 70%),
    var(--ink);
}
/* Animated grid */
.hero-bg::before{
  content:'';position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(201,255,4,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,255,4,.04) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(600px) rotateX(55deg) translateY(-20%);
  animation:grid-drift 25s linear infinite;
}
@keyframes grid-drift{
  to{transform:perspective(600px) rotateX(55deg) translateY(0%);}
}
.hero-inner{position:relative;z-index:5;width:100%;max-width:1400px;margin:0 auto;}
.hero-tag{
  font-family:'Fira Code',monospace;font-size:.72rem;letter-spacing:.35em;
  color:var(--lime);text-transform:uppercase;margin-bottom:28px;
  display:flex;align-items:center;gap:10px;
}
.hero-tag::before{content:'';width:32px;height:1px;background:var(--lime);}
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(5rem, 14vw, 15rem);
  line-height:.88;letter-spacing:.02em;color:var(--cream);
  position:relative;z-index:5;
}
.hero-title .line-accent{
  -webkit-text-stroke:2px var(--lime);color:transparent;
  display:block;
}
.hero-title .line-dim{
  color:rgba(240,237,230,.2);display:block;
}
.hero-body{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:40px;gap:40px;flex-wrap:wrap;
}
.hero-desc{
  max-width:400px;font-size:1.05rem;line-height:1.75;
  color:rgba(240,237,230,.55);border-left:2px solid var(--amber);
  padding-left:18px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn-solid{
  font-family:'Fira Code',monospace;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;background:var(--lime);color:var(--ink);
  padding:16px 36px;border:none;font-weight:500;cursor:none;
  transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-3px);box-shadow:var(--shadow-lime);}
.btn-ghost{
  font-family:'Fira Code',monospace;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;background:transparent;color:var(--cream);
  padding:16px 36px;border:1.5px solid rgba(240,237,230,.25);cursor:none;
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--cream);color:var(--cream);}

/* Gauge Canvas (Car Cluster inspired) */
#gauge-canvas{
  position:absolute;right:3%;top:50%;transform:translateY(-50%);
  z-index:3;opacity:.85;
}

/* Annotation dot (Mercedes inspired) */
.anno{
  position:absolute;z-index:10;
}
.anno-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--amber);box-shadow:var(--shadow-amber);
  cursor:none;position:relative;animation:anno-pulse 2.5s ease-in-out infinite;
}
@keyframes anno-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,80,32,.6);}
  50%{box-shadow:0 0 0 12px rgba(255,80,32,0);}
}
.anno-card{
  position:absolute;left:22px;top:-16px;
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid rgba(255,80,32,.3);
  padding:12px 16px;min-width:180px;
  font-family:'Fira Code',monospace;font-size:.68rem;
  opacity:0;transform:translateX(-8px);
  transition:opacity .25s,transform .25s;pointer-events:none;
}
.anno:hover .anno-card{opacity:1;transform:translateX(0);}
.anno-label{color:var(--amber);letter-spacing:.2em;margin-bottom:4px;display:block;}

/* =====================================================
   TICKER / MARQUEE (Brand belt)
   ===================================================== */
.ticker{
  background:var(--lime);padding:14px 0;overflow:hidden;
  position:relative;z-index:10;
}
.ticker-inner{
  display:flex;gap:0;white-space:nowrap;
  animation:marquee 28s linear infinite;
}
.ticker-track{display:flex;gap:0;}
.ticker-item{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;
  letter-spacing:.25em;color:var(--ink);padding:0 40px;
  display:flex;align-items:center;gap:40px;
}
.ticker-item::after{content:'✦';color:rgba(4,7,15,.4);font-size:.8rem;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* =====================================================
   SECTION LABELS
   ===================================================== */
.sec-label{
  font-family:'Fira Code',monospace;font-size:.68rem;letter-spacing:.35em;
  text-transform:uppercase;color:var(--lime);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.sec-label::before{content:attr(data-n);color:rgba(201,255,4,.35);}

/* =====================================================
   ABOUT / METRICS SECTION
   ===================================================== */
#about{padding:120px 48px;position:relative;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1300px;margin:0 auto;align-items:center;}
.about-left{}
.about-heading{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem, 6vw, 6.5rem);
  line-height:.9;color:var(--cream);margin:20px 0 32px;
}
.about-heading em{color:var(--lime);font-style:normal;}
.about-text{
  font-size:1rem;line-height:1.85;color:rgba(240,237,230,.55);
  max-width:440px;margin-bottom:40px;
}
.tech-pills{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  font-family:'Fira Code',monospace;font-size:.68rem;letter-spacing:.12em;
  border:1px solid rgba(201,255,4,.25);color:rgba(240,237,230,.6);
  padding:6px 14px;text-transform:uppercase;
  transition:border-color .2s,color .2s;
}
.pill:hover{border-color:var(--lime);color:var(--lime);}

/* Stat cards grid (Smart Home inspired) */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.stat-card{
  background:var(--glass);
  backdrop-filter:blur(16px);
  border:1px solid rgba(201,255,4,.1);
  padding:28px 24px;
  position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:var(--lime);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s;
}
.stat-card:hover::before{transform:scaleY(1);}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(201,255,4,.3);}
.stat-card.orange::before{background:var(--amber);}
.stat-card.orange:hover{border-color:rgba(255,80,32,.3);}
.stat-num{
  font-family:'Bebas Neue',sans-serif;font-size:3.6rem;line-height:1;
  color:var(--lime);letter-spacing:.03em;
}
.stat-card.orange .stat-num{color:var(--amber);}
.stat-unit{font-family:'Fira Code',monospace;font-size:.7rem;letter-spacing:.2em;color:rgba(240,237,230,.4);margin-top:4px;}
.stat-label{font-size:.85rem;color:rgba(240,237,230,.6);margin-top:12px;}

/* Inline waveform line (like Smart Home) */
.mini-wave{
  margin-top:14px;
  width:100%;height:32px;
}

/* =====================================================
   WORK / PROJECTS
   ===================================================== */
#work{padding:120px 48px;background:var(--slate);}
.work-header{
  max-width:1300px;margin:0 auto 60px;
  display:flex;justify-content:space-between;align-items:flex-end;
}
.work-heading{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem, 6vw, 6rem);color:var(--cream);line-height:.9;
}
.work-count{
  font-family:'Fira Code',monospace;font-size:.7rem;
  color:rgba(240,237,230,.3);letter-spacing:.2em;
  text-align:right;
}
.projects-list{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:2px;}
.project-row{
  display:grid;grid-template-columns:60px 1fr 260px 120px;
  align-items:center;gap:24px;
  padding:28px 0;border-top:1px solid rgba(240,237,230,.08);
  position:relative;transition:padding .3s;cursor:none;
  text-decoration:none;
}
.project-row::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--lime);transition:width .4s;
}
.project-row:hover::after{width:100%;}
.project-row:hover{padding-left:16px;}
.p-num{
  font-family:'Fira Code',monospace;font-size:.7rem;
  color:rgba(240,237,230,.25);letter-spacing:.15em;
}
.project-row:hover .p-num{color:var(--lime);}
.p-title{
  font-family:'Bebas Neue',sans-serif;font-size:2.4rem;
  letter-spacing:.04em;color:var(--cream);
  transition:color .2s;
}
.project-row:hover .p-title{color:var(--lime);}
.p-tags{display:flex;gap:8px;flex-wrap:wrap;}
.p-tag{
  font-family:'Fira Code',monospace;font-size:.62rem;letter-spacing:.12em;
  border:1px solid rgba(240,237,230,.15);color:rgba(240,237,230,.4);
  padding:4px 10px;text-transform:uppercase;
}
.p-arrow{
  font-size:1.4rem;color:rgba(240,237,230,.2);text-align:right;
  transition:color .2s,transform .2s;
}
.project-row:hover .p-arrow{color:var(--lime);transform:translate(6px,-6px);}

/* Project hover image preview */
.p-preview{
  position:fixed;pointer-events:none;z-index:200;
  width:360px;height:220px;opacity:0;
  transition:opacity .3s;border:1px solid rgba(201,255,4,.2);
  overflow:hidden;
}
.p-preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(60%);}
.p-preview.visible{opacity:1;}
.p-preview-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(201,255,4,.15) 0%, transparent 60%);
}

/* =====================================================
   METRICS / STATS BELT (Car Cluster inspired)
   ===================================================== */
#metrics{
  padding:100px 48px;
  background:linear-gradient(180deg, var(--ink) 0%, #0A0F1E 100%);
  position:relative;overflow:hidden;
}
#metrics::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(201,255,4,.03) 60px),
             repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(201,255,4,.03) 60px);
}
.metrics-inner{max-width:1300px;margin:0 auto;position:relative;z-index:5;}
.metrics-heading{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.5rem, 5vw, 5rem);
  color:var(--cream);margin:20px 0 70px;
}
.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(201,255,4,.08);
}
.metric-cell{
  background:var(--ink);padding:40px 30px;
  position:relative;overflow:hidden;
}
.metric-cell::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .5s;
}
.metric-cell:hover::after{transform:scaleX(1);}
.metric-cell.orange-cell::after{background:var(--amber);}
.m-label{
  font-family:'Fira Code',monospace;font-size:.65rem;letter-spacing:.3em;
  color:rgba(240,237,230,.35);text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.m-label .dot{width:5px;height:5px;border-radius:50%;background:var(--lime);}
.orange-cell .m-label .dot{background:var(--amber);}
.m-value{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem, 7vw, 7rem);
  line-height:1;color:var(--cream);letter-spacing:.02em;
}
.m-sub{
  font-family:'Fira Code',monospace;font-size:.65rem;color:var(--lime);
  letter-spacing:.2em;margin-top:8px;
}
.orange-cell .m-sub{color:var(--amber);}

/* Inline gauge (car cluster style) */
.gauge-inline{margin-top:20px;}

/* =====================================================
   PROCESS (Editorial — Camera site inspired)
   ===================================================== */
#process{padding:120px 48px;}
.process-inner{max-width:1300px;margin:0 auto;}
.process-grid{
  display:grid;grid-template-columns:1fr 2fr;gap:80px;
  align-items:start;margin-top:60px;
}
.process-sticky{position:sticky;top:120px;}
.process-big{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem, 9vw, 9rem);line-height:.9;
  color:var(--lime);
}
.process-big-sub{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,4vw,4rem);
  color:rgba(240,237,230,.2);line-height:1;margin-top:10px;
}
.steps{display:flex;flex-direction:column;gap:0;}
.step{
  padding:32px 0;border-top:1px solid rgba(240,237,230,.1);
  display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:start;
  transition:padding .3s;
}
.step:hover{padding-left:12px;}
.step-n{
  font-family:'Fira Code',monospace;font-size:.7rem;
  color:rgba(240,237,230,.25);letter-spacing:.15em;padding-top:4px;
}
.step-title{
  font-family:'Syne',sans-serif;font-size:1.5rem;
  font-weight:700;color:var(--cream);margin-bottom:12px;
  transition:color .2s;
}
.step:hover .step-title{color:var(--lime);}
.step-desc{font-size:.95rem;line-height:1.8;color:rgba(240,237,230,.5);}

/* =====================================================
   CONTACT / TERMINAL
   ===================================================== */
#contact{
  padding:120px 48px;
  background:radial-gradient(circle 600px at 50% 0%, rgba(201,255,4,.04), transparent 70%), var(--slate);
}
.contact-inner{max-width:1100px;margin:0 auto;}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;margin-top:60px;}
.contact-info{}
.contact-heading{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.5rem, 5vw, 5rem);color:var(--cream);line-height:.9;
  margin:20px 0 32px;
}
.contact-desc{
  font-size:.95rem;line-height:1.85;color:rgba(240,237,230,.5);
  margin-bottom:40px;
}
.contact-meta{display:flex;flex-direction:column;gap:16px;}
.contact-line{
  font-family:'Fira Code',monospace;font-size:.75rem;letter-spacing:.15em;
  color:rgba(240,237,230,.4);display:flex;align-items:center;gap:12px;
}
.contact-line .cl-icon{color:var(--lime);}

/* Terminal Card */
.terminal{
  background:rgba(4,7,15,.8);border:1px solid rgba(201,255,4,.15);
  backdrop-filter:blur(20px);overflow:hidden;
}
.t-bar{
  display:flex;align-items:center;gap:8px;padding:14px 20px;
  border-bottom:1px solid rgba(201,255,4,.1);
  background:rgba(14,26,48,.5);
}
.t-dot{width:10px;height:10px;border-radius:50%;}
.t-path{
  font-family:'Fira Code',monospace;font-size:.65rem;
  color:rgba(201,255,4,.5);letter-spacing:.1em;margin-left:8px;
}
.t-body{padding:28px 24px;}
.t-row{margin-bottom:20px;}
.t-label{
  font-family:'Fira Code',monospace;font-size:.68rem;color:var(--lime);
  letter-spacing:.2em;margin-bottom:8px;display:block;
}
.t-input{
  width:100%;background:rgba(14,26,48,.6);
  border:1px solid rgba(201,255,4,.15);
  color:var(--cream);font-family:'Fira Code',monospace;font-size:.82rem;
  padding:12px 16px;transition:border-color .2s,box-shadow .2s;
  outline:none;cursor:none;resize:none;
}
.t-input:focus{border-color:var(--lime);box-shadow:0 0 15px rgba(201,255,4,.15);}
.t-input::placeholder{color:rgba(240,237,230,.2);}
.t-submit{
  width:100%;background:var(--lime);color:var(--ink);border:none;
  font-family:'Fira Code',monospace;font-size:.78rem;letter-spacing:.2em;
  font-weight:500;text-transform:uppercase;padding:16px;cursor:none;
  transition:opacity .2s,transform .2s;
}
.t-submit:hover{opacity:.88;transform:translateY(-2px);}

/* =====================================================
   FOOTER
   ===================================================== */
footer{
  border-top:1px solid rgba(240,237,230,.06);
  padding:32px 48px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
}
.f-logo{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;
  letter-spacing:.12em;color:rgba(240,237,230,.3);
}
.f-logo span{color:var(--lime);}
.f-links{display:flex;gap:28px;}
.f-links a{
  font-family:'Fira Code',monospace;font-size:.65rem;letter-spacing:.2em;
  color:rgba(240,237,230,.3);text-decoration:none;
  text-transform:uppercase;transition:color .2s;
}
.f-links a:hover{color:var(--lime);}
.f-copy{
  font-family:'Fira Code',monospace;font-size:.62rem;
  color:rgba(240,237,230,.2);letter-spacing:.1em;
}

/* =====================================================
   ANIMATIONS & SCROLL REVEAL
   ===================================================== */
.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.reveal.up{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.reveal-l.up{opacity:1;transform:translateX(0);}
.delay-1{transition-delay:.1s;}
.delay-2{transition-delay:.2s;}
.delay-3{transition-delay:.3s;}
.delay-4{transition-delay:.4s;}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media(max-width:1024px){
  #gauge-canvas{display:none;}
  .about-grid,.contact-grid,.process-grid{grid-template-columns:1fr;}
  .metrics-grid{grid-template-columns:1fr 1fr;}
  .projects-list .project-row{grid-template-columns:50px 1fr 1fr;gap:12px;}
  .p-tags{display:none;}
}
@media(max-width:768px){
  nav{padding:18px 24px;}
  nav.scrolled{padding:12px 24px;}
  #hero{padding:100px 24px 60px;}
  #about,#work,#metrics,#process,#contact{padding:80px 24px;}
  .work-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .metrics-grid{grid-template-columns:1fr 1fr;}
  .projects-list .project-row{grid-template-columns:1fr;gap:8px;padding:20px 0;}
  .p-num,.p-tags,.p-arrow{display:none;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  footer{flex-direction:column;align-items:flex-start;padding:24px;}
}
</style>
</head>
<body>

<div class="scanlines"></div>
<div class="vignette"></div>
<div class="cur-dot" id="cur-dot"></div>
<div class="cur-ring" id="cur-ring"></div>
<div class="hud-c hud-tl"></div>
<div class="hud-c hud-tr"></div>
<div class="hud-c hud-bl"></div>
<div class="hud-c hud-br"></div>

<nav id="navbar">
  <a href="#" class="nav-logo">LU<span>M</span>EN</a>
  <div class="nav-links">
    <a href="#about" class="hov">Stüdyo</a>
    <a href="#work" class="hov">Çalışmalar</a>
    <a href="#process" class="hov">Süreç</a>
    <a href="#contact" class="hov">İletişim</a>
    <a href="#contact" class="nav-cta hov">Proje Başlat ›</a>
  </div>
  <button class="hamburger" id="ham">
    <span></span><span></span><span></span>
  </button>
</nav>

<section id="hero">
  <div class="hero-bg"></div>

<div class="anno" style="bottom:22%;left:30%;">
    <div class="anno-dot hov"></div>
    <div class="anno-card">
      <span class="anno-label">// STATUS</span>
      Proje Kapasitesi: <strong style="color:#F0EDE6">Q4 2026</strong><br>
      Aktif İş Ortağı: <strong style="color:#C9FF04">8</strong>
    </div>
  </div>
  <div class="anno" style="top:30%;right:38%;">
    <div class="anno-dot hov" style="background:var(--cyan);box-shadow:0 0 20px rgba(0,245,255,.4);"></div>
    <div class="anno-card" style="border-color:rgba(0,245,255,.3);">
      <span class="anno-label" style="color:var(--cyan);">// SYS.PERF</span>
      Uptime: <strong style="color:#F0EDE6">99.98%</strong><br>
      Gecikme: <strong style="color:#00F5FF">8 ms</strong>
    </div>
  </div>

<div class="hero-inner">
    <div class="hero-tag reveal">01 — Yaratıcı Teknoloji Stüdyosu</div>
    <h1 class="hero-title reveal delay-1">
      <span>CRAFT</span>
      <span class="line-accent">FUTURE</span>
      <span class="line-dim">DIGITAL.</span>
    </h1>
    <div class="hero-body reveal delay-2">
      <p class="hero-desc">
        Markalar için olağanüstü dijital deneyimler tasarlıyoruz. Mühendislik hassasiyetiyle sanatsal vizyonu birleştiriyoruz.
      </p>
      <div class="hero-actions">
        <button class="btn-solid hov">Çalışmaları Gör</button>
        <button class="btn-ghost hov">Manifestomuz ↗</button>
      </div>
    </div>
  </div>

<canvas id="gauge-canvas" width="420" height="420"></canvas>
</section>

<div class="ticker">
  <div class="ticker-inner">
    <div class="ticker-track" id="tick1">
      <div class="ticker-item">Arayüz Tasarımı</div>
      <div class="ticker-item">Sistem Mimarisi</div>
      <div class="ticker-item">Motion Design</div>
      <div class="ticker-item">Yapay Zeka</div>
      <div class="ticker-item">3D Deneyimler</div>
      <div class="ticker-item">Marka Kimliği</div>
      <div class="ticker-item">Ürün Geliştirme</div>
      <div class="ticker-item">Arayüz Tasarımı</div>
      <div class="ticker-item">Sistem Mimarisi</div>
      <div class="ticker-item">Motion Design</div>
      <div class="ticker-item">Yapay Zeka</div>
      <div class="ticker-item">3D Deneyimler</div>
    </div>
    <div class="ticker-track" id="tick2" aria-hidden="true">
      <div class="ticker-item">Arayüz Tasarımı</div>
      <div class="ticker-item">Sistem Mimarisi</div>
      <div class="ticker-item">Motion Design</div>
      <div class="ticker-item">Yapay Zeka</div>
      <div class="ticker-item">3D Deneyimler</div>
      <div class="ticker-item">Marka Kimliği</div>
      <div class="ticker-item">Ürün Geliştirme</div>
      <div class="ticker-item">Arayüz Tasarımı</div>
      <div class="ticker-item">Sistem Mimarisi</div>
      <div class="ticker-item">Motion Design</div>
      <div class="ticker-item">Yapay Zeka</div>
      <div class="ticker-item">3D Deneyimler</div>
    </div>
  </div>
</div>

<section id="about">
  <div class="about-grid">
    <div class="about-left reveal-l">
      <div class="sec-label" data-n="02">Stüdyo Hakkında</div>
      <h2 class="about-heading">Sade Değil,<br><em>Keskin.</em></h2>
      <p class="about-text">2018'den bu yana fintech, medya ve sağlık sektöründe küresel markalarla çalışıyoruz. Her proje birer sistem — işlevsel, hızlı ve estetik açıdan uz妥.</p>
      <div class="tech-pills">
        <span class="pill hov">Next.js</span>
        <span class="pill hov">Three.js</span>
        <span class="pill hov">Python</span>
        <span class="pill hov">Figma</span>
        <span class="pill hov">WebGL</span>
        <span class="pill hov">Swift UI</span>
        <span class="pill hov">Framer</span>
        <span class="pill hov">GSAP</span>
      </div>
    </div>
    <div class="stat-grid reveal delay-1">
      <div class="stat-card reveal delay-1">
        <div class="stat-num" id="cnt-1">0</div>
        <div class="stat-unit">// PROJE</div>
        <div class="stat-label">Teslim edilen ürünler</div>
        <svg class="mini-wave" viewBox="0 0 200 32" preserveAspectRatio="none">
          <path d="M0,16 Q20,4 40,16 T80,16 T120,16 T160,16 T200,16" fill="none" stroke="rgba(201,255,4,.4)" stroke-width="1.5"/>
          <circle cx="200" cy="16" r="3" fill="var(--lime)"/>
        </svg>
      </div>
      <div class="stat-card orange reveal delay-2">
        <div class="stat-num" id="cnt-2" style="color:var(--amber)">0</div>
        <div class="stat-unit">// ÜLKE</div>
        <div class="stat-label">Küresel müşteri tabanı</div>
        <svg class="mini-wave" viewBox="0 0 200 32" preserveAspectRatio="none">
          <path d="M0,22 Q30,6 60,20 T120,10 T180,18 T200,14" fill="none" stroke="rgba(255,80,32,.4)" stroke-width="1.5"/>
          <circle cx="200" cy="14" r="3" fill="var(--amber)"/>
        </svg>
      </div>
      <div class="stat-card orange reveal delay-3">
        <div class="stat-num" id="cnt-3" style="color:var(--amber)">0</div>
        <div class="stat-unit">// YIL</div>
        <div class="stat-label">Alanında aktif deneyim</div>
        <svg class="mini-wave" viewBox="0 0 200 32" preserveAspectRatio="none">
          <path d="M0,18 Q50,2 100,18 T200,18" fill="none" stroke="rgba(255,80,32,.4)" stroke-width="1.5"/>
          <circle cx="200" cy="18" r="3" fill="var(--amber)"/>
        </svg>
      </div>
      <div class="stat-card reveal delay-4">
        <div class="stat-num" id="cnt-4">0</div>
        <div class="stat-unit">// ÖDÜL</div>
        <div class="stat-label">Uluslararası endüstri tanınırlığı</div>
        <svg class="mini-wave" viewBox="0 0 200 32" preserveAspectRatio="none">
          <path d="M0,20 Q25,8 50,20 T100,8 T150,20 T200,14" fill="none" stroke="rgba(201,255,4,.4)" stroke-width="1.5"/>
          <circle cx="200" cy="14" r="3" fill="var(--lime)"/>
        </svg>
      </div>
    </div>
  </div>
</section>

<section id="work">
  <div class="work-header reveal">
    <div>
      <div class="sec-label" data-n="03">Seçkin Projeler</div>
      <h2 class="work-heading">Saha<br>Kayıtları.</h2>
    </div>
    <div class="work-count">
      <div style="font-size:2.5rem;font-family:'Bebas Neue',sans-serif;color:rgba(240,237,230,.1);line-height:1;">06</div>
      <div>Proje / Arşiv</div>
    </div>
  </div>

<div class="p-preview" id="p-preview">
    <img id="p-preview-img" src="" alt="">
    <div class="p-preview-overlay"></div>
  </div>

<div class="projects-list reveal delay-1">
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80">
      <span class="p-num">01</span>
      <span class="p-title">Quantum Finans Platformu</span>
      <div class="p-tags">
        <span class="p-tag">FinTech</span>
        <span class="p-tag">WebApp</span>
        <span class="p-tag">AI</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&q=80">
      <span class="p-num">02</span>
      <span class="p-title">NEXUS Fleet Intelligence</span>
      <div class="p-tags">
        <span class="p-tag">Dashboard</span>
        <span class="p-tag">IoT</span>
        <span class="p-tag">Real-Time</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=800&q=80">
      <span class="p-num">03</span>
      <span class="p-title">GrindSync Smart Home OS</span>
      <div class="p-tags">
        <span class="p-tag">Mobile</span>
        <span class="p-tag">Smart Home</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80">
      <span class="p-num">04</span>
      <span class="p-title">Capture Vintage E-Commerce</span>
      <div class="p-tags">
        <span class="p-tag">E-Ticaret</span>
        <span class="p-tag">Branding</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1573804633927-bfcbcd909acd?w=800&q=80">
      <span class="p-num">05</span>
      <span class="p-title">Akıllı Şehir Otomasyonu</span>
      <div class="p-tags">
        <span class="p-tag">Smart City</span>
        <span class="p-tag">Backend</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
    <a href="#" class="project-row hov p-item"
       data-img="https://images.unsplash.com/photo-1558403194-611308249627?w=800&q=80">
      <span class="p-num">06</span>
      <span class="p-title">Landscape Architect Studio</span>
      <div class="p-tags">
        <span class="p-tag">Branding</span>
        <span class="p-tag">Web</span>
      </div>
      <span class="p-arrow">↗</span>
    </a>
  </div>
</section>

<section id="metrics">
  <div class="metrics-inner">
    <div class="sec-label reveal" data-n="04">Sistem Metrikleri</div>
    <h2 class="metrics-heading reveal delay-1">Performans<br>Gerçek Zamanlı.</h2>
    <div class="metrics-grid reveal delay-2">
      <div class="metric-cell">
        <div class="m-label"><span class="dot"></span>Aktif Proje</div>
        <div class="m-value" id="m1">0</div>
        <div class="m-sub">// PIPELINE AKTIF</div>
        
        <div style="margin-top:16px;height:3px;background:rgba(201,255,4,.1);position:relative;">
          <div id="m1-bar" style="height:100%;background:var(--lime);width:0%;transition:width 2s .5s;"></div>
        </div>
      </div>
      <div class="metric-cell orange-cell">
        <div class="m-label"><span class="dot"></span>Ortalama Hız</div>
        <div class="m-value" id="m2">0</div>
        <div class="m-sub" style="color:var(--amber)">// KM/S DEPLOYMENT</div>
        <div style="margin-top:16px;height:3px;background:rgba(255,80,32,.1);position:relative;">
          <div id="m2-bar" style="height:100%;background:var(--amber);width:0%;transition:width 2s .7s;"></div>
        </div>
      </div>
      <div class="metric-cell">
        <div class="m-label"><span class="dot"></span>Uptime Skoru</div>
        <div class="m-value" id="m3">0</div>
        <div class="m-sub">// % SLA GARANTİSİ</div>
        <div style="margin-top:16px;height:3px;background:rgba(201,255,4,.1);">
          <div id="m3-bar" style="height:100%;background:var(--lime);width:0%;transition:width 2s .9s;"></div>
        </div>
      </div>
      <div class="metric-cell orange-cell">
        <div class="m-label"><span class="dot"></span>Mutlu Müşteri</div>
        <div class="m-value" id="m4">0</div>
        <div class="m-sub" style="color:var(--amber)">// NPS SKORU</div>
        <div style="margin-top:16px;height:3px;background:rgba(255,80,32,.1);">
          <div id="m4-bar" style="height:100%;background:var(--amber);width:0%;transition:width 2s 1.1s;"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process">
  <div class="process-inner">
    <div class="sec-label reveal" data-n="05">Çalışma Şeklimiz</div>
    <div class="process-grid">
      <div class="process-sticky reveal-l">
        <div class="process-big">4</div>
        <div class="process-big-sub">Kritik<br>Aşama</div>
      </div>
      <div class="steps reveal delay-1">
        <div class="step">
          <span class="step-n">// 01</span>
          <div>
            <div class="step-title">Keşif & Araştırma</div>
            <p class="step-desc">Problemi anlamadan kod yazmaya başlamıyoruz. Pazar analizi, kullanıcı araştırması ve rekabet haritalamasıyla sağlam bir temel kuruyoruz.</p>
          </div>
        </div>
        <div class="step">
          <span class="step-n">// 02</span>
          <div>
            <div class="step-title">Strateji & Mimari</div>
            <p class="step-desc">Her ürün kararı bir sistem kararıdır. Bilgi mimarisi, kullanıcı akışları ve teknik stack belirleme aşamasında tüm paydaşlar hizalanır.</p>
          </div>
        </div>
        <div class="step">
          <span class="step-n">// 03</span>
          <div>
            <div class="step-title">Tasarım & Prototip</div>
            <p class="step-desc">Wireframe'den high-fidelity prototipe kadar iteratif süreç. Her ekran, kullanıcı memnuniyeti ve iş hedefleri için optimize edilir.</p>
          </div>
        </div>
        <div class="step">
          <span class="step-n">// 04</span>
          <div>
            <div class="step-title">Geliştirme & Lansman</div>
            <p class="step-desc">Temiz kod, kapsamlı testler ve aşamalı dağıtım. Ürünü teslim ettikten sonra performans takibi ile süreci kapatıyoruz.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="contact-inner">
    <div class="sec-label reveal" data-n="06">Bağlantı Kur</div>
    <div class="contact-grid">
      <div class="contact-info reveal-l">
        <h2 class="contact-heading">Projenizi<br>Konuşalım.</h2>
        <p class="contact-desc">Yeni bir ürün mü inşa etmek istiyorsunuz? Mevcut sisteminizi mi yükseltmek istiyorsunuz? Her iki durumda da doğru yerdesiniz.</p>
        <div class="contact-meta">
          <div class="contact-line"><span class="cl-icon">▸</span> istanbul@lumen.studio</div>
          <div class="contact-line"><span class="cl-icon">▸</span> +90 212 000 00 00</div>
          <div class="contact-line"><span class="cl-icon">▸</span> Boğaziçi Teknokent, Beşiktaş / İST</div>
        </div>
        <div style="margin-top:36px;display:flex;gap:16px;">
          <a href="#" class="hov" style="font-family:'Fira Code',monospace;font-size:.7rem;color:rgba(240,237,230,.4);text-decoration:none;letter-spacing:.15em;transition:color .2s;">GITHUB ↗</a>
          <a href="#" class="hov" style="font-family:'Fira Code',monospace;font-size:.7rem;color:rgba(240,237,230,.4);text-decoration:none;letter-spacing:.15em;transition:color .2s;">LINKEDIN ↗</a>
          <a href="#" class="hov" style="font-family:'Fira Code',monospace;font-size:.7rem;color:rgba(240,237,230,.4);text-decoration:none;letter-spacing:.15em;transition:color .2s;">DRIBBBLE ↗</a>
        </div>
      </div>

<div class="terminal reveal delay-1">
        <div class="t-bar">
          <div class="t-dot" style="background:#FF5F57;"></div>
          <div class="t-dot" style="background:#FFBD2E;"></div>
          <div class="t-dot" style="background:#28C840;"></div>
          <span class="t-path">lumen@studio:~$ ./send_message</span>
        </div>
        <div class="t-body">
          <div class="t-row">
            <span class="t-label">> KIMLIK_GIRISI (Adınız)</span>
            <input type="text" class="t-input hov" placeholder="Çağrı Kaya">
          </div>
          <div class="t-row">
            <span class="t-label">> KANAL (Email)</span>
            <input type="email" class="t-input hov" placeholder="hello@sirket.com">
          </div>
          <div class="t-row">
            <span class="t-label">> VERI_PAKETI (Mesajınız)</span>
            <input class="t-input hov" rows="3" placeholder="Projemden bahsedeyim..."/>
          </div>
          <button class="t-submit hov" onclick="this.textContent='✓ Paket İletildi'; setTimeout(()=>this.textContent='Paketi Gönder ›',3000)">Paketi Gönder ›</button>
        </div>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="f-logo">LU<span>M</span>EN</div>
  <div class="f-links">
    <a href="#" class="hov">Stüdyo</a>
    <a href="#" class="hov">Çalışmalar</a>
    <a href="#" class="hov">Kariyer</a>
    <a href="#" class="hov">Blog</a>
  </div>
  <div class="f-copy">© 2026 Lumen Studio. Tüm haklar saklıdır.</div>
</footer>

<script>
/* --- CUSTOM CURSOR --- */
const dot = document.getElementById('cur-dot');
const ring = document.getElementById('cur-ring');
document.addEventListener('mousemove', e => {
  dot.style.left = e.clientX + 'px';
  dot.style.top  = e.clientY + 'px';
  ring.style.left = e.clientX + 'px';
  ring.style.top  = e.clientY + 'px';
});
document.querySelectorAll('.hov,a,button,input,textarea,.project-row').forEach(el => {
  el.addEventListener('mouseenter', () => document.body.classList.add('link-hover'));
  el.addEventListener('mouseleave', () => document.body.classList.remove('link-hover'));
});

/* --- NAVBAR SCROLL --- */
const nb = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  nb.classList.toggle('scrolled', window.scrollY > 60);
});

/* --- SCROLL REVEAL --- */
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if(e.isIntersecting) { e.target.classList.add('up'); observer.unobserve(e.target); }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
document.querySelectorAll('.reveal,.reveal-l').forEach(el => observer.observe(el));

/* --- COUNTER ANIMATION --- */
function animateCount(el, target, suffix='', duration=1800) {
  let start = 0, step = target / (duration / 16);
  const tick = () => {
    start = Math.min(start + step, target);
    el.textContent = Math.round(start) + suffix;
    if(start < target) requestAnimationFrame(tick);
  };
  tick();
}
const counterObs = new IntersectionObserver(entries => {
  if(entries[0].isIntersecting){
    animateCount(document.getElementById('cnt-1'), 140, '+');
    animateCount(document.getElementById('cnt-2'), 23, '');
    animateCount(document.getElementById('cnt-3'), 7, '');
    animateCount(document.getElementById('cnt-4'), 18, '');
    counterObs.disconnect();
  }
}, { threshold: 0.3 });
counterObs.observe(document.getElementById('about'));

/* --- PROJECT HOVER PREVIEW --- */
const preview = document.getElementById('p-preview');
const previewImg = document.getElementById('p-preview-img');
document.querySelectorAll('.p-item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    previewImg.src = item.dataset.img;
    preview.classList.add('visible');
  });
  item.addEventListener('mouseleave', () => preview.classList.remove('visible'));
  item.addEventListener('mousemove', e => {
    preview.style.left = (e.clientX + 24) + 'px';
    preview.style.top  = (e.clientY - 110) + 'px';
  });
});

/* --- GAUGE CANVAS (Car Cluster inspired) --- */
(function drawGauge(){
  const canvas = document.getElementById('gauge-canvas');
  if(!canvas) return;
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const cx = W/2, cy = H/2, R = 160;
  let angle = 0, frame = 0;

function drawArc(start, end, color, width, alpha=1){
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.beginPath();
    ctx.arc(cx, cy, R, start, end);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.restore();
  }

function drawTick(angle, len, color, width, alpha=1){
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.translate(cx, cy);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(R - len, 0);
    ctx.lineTo(R, 0);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.restore();
  }

function render(){
    ctx.clearRect(0, 0, W, H);
    frame++;
    const t = frame * 0.012;
    const speedVal = Math.abs(Math.sin(t)) * 280 + 60;
    const rangeVal = 72 + Math.sin(t * .3) * 15;

// === OUTER DECORATIVE RINGS ===
    drawArc(0, Math.PI*2, 'rgba(201,255,4,0.04)', 40);
    drawArc(0, Math.PI*2, 'rgba(201,255,4,0.1)', 1.5);

// === SPEED ARC TRACK ===
    const arcStart = Math.PI * 0.7;
    const arcEnd   = Math.PI * 2.3;
    drawArc(arcStart, arcEnd, 'rgba(201,255,4,0.08)', 12);

// Speed fill
    const speedFill = arcStart + (arcEnd - arcStart) * ((speedVal - 60) / 280);
    drawArc(arcStart, speedFill, '#C9FF04', 12);

// === INNER RING ===
    drawArc(0, Math.PI*2, 'rgba(201,255,4,0.05)', 30, 1);
    ctx.save();
    ctx.beginPath();
    ctx.arc(cx, cy, R - 45, 0, Math.PI*2);
    ctx.strokeStyle = 'rgba(201,255,4,0.12)';
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.restore();

// === TICK MARKS ===
    for(let i = 0; i <= 24; i++){
      const a = arcStart + (arcEnd - arcStart) * (i / 24);
      const isLong = i % 6 === 0;
      drawTick(a, isLong ? 20 : 10, isLong ? '#C9FF04' : 'rgba(201,255,4,.3)', isLong ? 2 : 1.2);
    }

// === CENTER CONTENT ===
    // Range circle (upper left area)
    ctx.save();
    ctx.beginPath();
    ctx.arc(cx - 58, cy - 8, 44, 0, Math.PI*2);
    ctx.strokeStyle = 'rgba(201,255,4,0.12)';
    ctx.lineWidth = 1;
    ctx.stroke();
    // Range arc
    ctx.beginPath();
    ctx.arc(cx - 58, cy - 8, 44, -Math.PI*.6, -Math.PI*.6 + Math.PI*1.2*(rangeVal/100));
    ctx.strokeStyle = 'rgba(201,255,4,0.5)';
    ctx.lineWidth = 4;
    ctx.lineCap='round';
    ctx.stroke();
    ctx.restore();

// Range text
    ctx.save();
    ctx.fillStyle = 'rgba(201,255,4,0.4)';
    ctx.font = '10px "Fira Code"';
    ctx.textAlign = 'center';
    ctx.fillText('RANGE', cx - 58, cy - 18);
    ctx.fillStyle = '#C9FF04';
    ctx.font = 'bold 22px "Bebas Neue"';
    ctx.fillText(Math.round(rangeVal) + '%', cx - 58, cy + 6);
    ctx.restore();

// === MAIN SPEED VALUE ===
    ctx.save();
    ctx.textAlign = 'center';
    ctx.fillStyle = 'rgba(201,255,4,0.45)';
    ctx.font = '11px "Fira Code"';
    ctx.fillText('VELOCITY', cx + 38, cy - 26);
    ctx.fillStyle = '#F0EDE6';
    ctx.font = 'bold 54px "Bebas Neue"';
    ctx.fillText(Math.round(speedVal), cx + 38, cy + 18);
    ctx.fillStyle = 'rgba(240,237,230,0.4)';
    ctx.font = '10px "Fira Code"';
    ctx.fillText('km/s', cx + 38, cy + 36);
    ctx.restore();

// === NEEDLE ===
    const needleAngle = arcStart + (arcEnd - arcStart) * ((speedVal - 60) / 280);
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(needleAngle);
    const grad = ctx.createLinearGradient(-R + 20, 0, 0, 0);
    grad.addColorStop(0, 'transparent');
    grad.addColorStop(1, '#FF5020');
    ctx.beginPath();
    ctx.moveTo(-R + 20, 0);
    ctx.lineTo(0, 0);
    ctx.strokeStyle = grad;
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, 6, 0, Math.PI*2);
    ctx.fillStyle = '#FF5020';
    ctx.shadowColor = 'rgba(255,80,32,.8)';
    ctx.shadowBlur = 10;
    ctx.fill();
    ctx.restore();

// === OUTER GLOW PARTICLES ===
    for(let i = 0; i < 6; i++){
      const pa = arcStart + (arcEnd - arcStart) * (i / 5);
      const px = cx + Math.cos(pa) * (R + 18);
      const py = cy + Math.sin(pa) * (R + 18);
      ctx.save();
      ctx.beginPath();
      ctx.arc(px, py, 2, 0, Math.PI*2);
      ctx.fillStyle = `rgba(201,255,4,${0.1 + i*0.08})`;
      ctx.shadowColor = '#C9FF04';
      ctx.shadowBlur = 6;
      ctx.fill();
      ctx.restore();
    }

requestAnimationFrame(render);
  }
  render();
})();

/* --- SMOOTH ANCHOR SCROLL --- */
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', e => {
    const target = document.querySelector(a.getAttribute('href'));
    if(target){ e.preventDefault(); target.scrollIntoView({ behavior:'smooth' }); }
  });
});
</script>
</body>
</html>

Preview

Open Advanced Editor Full Screen