/* ApeX / here — site stili.
   Siyah zemin, avatarin buz mavisi + cekirdek turuncusu tek vurgu; editoryal tipografi,
   urunun kendisinden gorseller (masaustu sahnesi, Settings vitrini, onay karti). */

@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/fonts/manrope-v20-latin_latin-ext-regular.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/fonts/manrope-v20-latin_latin-ext-500.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/fonts/manrope-v20-latin_latin-ext-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-v20-latin_latin-ext-regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-v20-latin_latin-ext-500.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-v24-latin_latin-ext-regular.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-v24-latin_latin-ext-500.ttf") format("truetype"); }

:root {
  --bg: #010309;
  --bg-raise: #060a14;
  --line: rgba(160, 200, 255, 0.09);
  --line-2: rgba(160, 200, 255, 0.18);
  --text: #e9eff7;
  --text-2: #b4c0cf;
  --muted: #74808f;
  --ice: #9fdcff;
  --ice-2: #5fb6ff;
  --blue: #3a8dff;
  --ember: #ff9a3c;
  --ok: #42d79c;
  --bad: #ff6b6b;

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-2);
  font: 400 17px/1.65 var(--body); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* ince film greni */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .footer { position: relative; z-index: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(95, 182, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
em { font-style: normal; color: var(--ice); }

/* arka plan parcacik alani + ilerleme cizgisi */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--ice), var(--ember)); }

/* ── ust not (Yapzek.ai) ─────────────────────────────────────────────── */
.topnote {
  position: fixed; inset: 0 0 auto 0; z-index: 55;
  padding: 8px var(--pad); padding-top: max(8px, env(safe-area-inset-top));
  background: linear-gradient(90deg, rgba(58, 141, 255, .16), rgba(255, 154, 60, .12));
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topnote p { margin: 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.topnote a, .footer a { color: var(--ice); text-decoration: none; border-bottom: 1px solid rgba(159, 220, 255, .35); transition: color .2s, border-color .2s; }
.topnote a:hover, .footer a:hover { color: #fff; border-color: #fff; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: var(--note-h, 0px) 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--pad); padding-top: max(18px, env(safe-area-inset-top));
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(1, 3, 9, .72); border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-block: 12px;
}
.wordmark { font: 500 19px/1 var(--display); color: var(--text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark span, .wordmark-sm span { color: var(--muted); font-weight: 400; margin: 0 .12em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font: 400 14px/1 var(--body); color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-end { display: flex; align-items: center; gap: 14px; margin-left: 8px; }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; }
.lang button {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--muted);
  font: 500 11.5px/1 var(--mono); letter-spacing: .08em; padding: 7px 10px; border-radius: 999px; min-width: 40px; min-height: 30px;
}
.lang button[aria-pressed="true"] { background: rgba(159, 220, 255, .12); color: var(--text); }

/* ── dugmeler ────────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 15px/1 var(--body); color: #02060e; background: var(--text);
  padding: 0 22px; height: 52px; border-radius: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
}
.btn:hover { background: #fff; box-shadow: 0 0 0 1px #fff inset, 0 10px 40px -10px rgba(159, 220, 255, .55); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn-small { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(2, 6, 14, .25); border-top-color: #02060e; animation: spin .8s linear infinite; }
.is-busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes glow { 50% { filter: brightness(1.25) saturate(1.15); } }
@keyframes pulse { 50% { transform: scale(1.18); } }

/* ── hero ────────────────────────────────────────────────────────────── */
/* Metin ustten baslar (buyuk ekranda dikey ortalama ustte bos alan birakiyordu). */
.hero {
  position: relative; min-height: min(100svh, 920px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start;
  padding: calc(clamp(104px, 12vh, 140px) + var(--note-h, 0px)) 0 80px var(--pad);
}
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); animation: breathe 2.6s ease-in-out infinite; }
.hero-title { margin: 0; color: var(--text); font: 500 clamp(46px, 6.6vw, 104px)/0.96 var(--display); letter-spacing: -0.045em; }
.hero-title em { background: linear-gradient(100deg, #cfeeff 0%, var(--ice-2) 45%, var(--ember) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 26px 0 0; max-width: 520px; font-size: clamp(17px, 1.3vw, 19px); }
.hero-stats { display: flex; gap: clamp(20px, 3vw, 44px); margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-stats div { min-width: 0; }
.hero-stats dt { color: var(--text); font: 500 clamp(26px, 2.6vw, 36px)/1 var(--display); letter-spacing: -0.03em; }
.hero-stats dd { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 170px; }

/* Animasyon: figur tuvalde asagida durdugu icin alan yukari kaydirilir. */
.hero-visual { position: absolute; top: -8%; right: 0; bottom: 0; width: 58%; z-index: 1; }
.apex-stage { position: absolute; inset: 0; overflow: hidden; }
.apex-stage canvas { display: block; position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--ease); }
.apex-stage.is-live canvas { opacity: 1; }
.apex-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; transition: opacity 1.2s var(--ease); }
.apex-stage.is-live .apex-poster { opacity: 0; }
.hero-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(1, 3, 9, .55) 16%, transparent 40%), linear-gradient(0deg, var(--bg) 0%, transparent 20%);
}
/* HUD halkalari ve yorungedeki arac adlari: bas cevresinde (--head-y) */
.hero-visual { --head-y: 40%; }
.hud { position: absolute; z-index: 1; left: 50%; top: var(--head-y); width: min(86%, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.hud circle { fill: none; stroke: rgba(159, 220, 255, .22); stroke-width: 1; transform-origin: 300px 300px; }
.hud-r1 { stroke-dasharray: 2 10; animation: spin 80s linear infinite; }
.hud-r2 { stroke-dasharray: 60 18 4 18; stroke: rgba(255, 154, 60, .22) !important; animation: spin 46s linear infinite reverse; }
.hud-r3 { stroke-dasharray: 1 4; stroke: rgba(159, 220, 255, .12) !important; animation: spin 140s linear infinite; }
.hud-ticks line { stroke: rgba(159, 220, 255, .4); stroke-width: 1.2; }
.orbit { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 3; left: 50%; top: var(--head-y); width: 0; height: 0; pointer-events: none; }
.orbit li {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--ice);
  padding: 7px 10px; border: 1px solid rgba(159, 220, 255, .22); border-radius: 999px; background: rgba(4, 10, 22, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  --r: clamp(150px, 15vw, 235px);
  transform: rotate(calc(var(--a) * 60deg)) translateX(var(--r)) rotate(calc(var(--a) * -60deg)) translate(-50%, -50%);
  animation: float 6s ease-in-out infinite; animation-delay: calc(var(--a) * -1s); opacity: .9;
}
.orbit li:nth-child(2n) { color: #ffd2a8; border-color: rgba(255, 154, 60, .3); }
@keyframes float { 50% { margin-top: -10px; } }

.mic-chip {
  position: absolute; z-index: 4; left: 50%; bottom: 48px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--text-2);
  background: rgba(6, 12, 24, .55); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 12px 18px 12px 14px; min-height: 44px; white-space: nowrap; max-width: calc(100vw - 32px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .25s, color .25s;
}
.mic-chip:hover { border-color: rgba(159, 220, 255, .5); color: var(--text); }
.mic-ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ice); }
.mic-chip[aria-pressed="true"] { border-color: rgba(255, 154, 60, .6); color: #ffd9b5; }
.mic-chip[aria-pressed="true"] .mic-ring { border-color: var(--ember); background: var(--ember); box-shadow: 0 0 14px var(--ember); }
.mic-chip .mic-on, .mic-chip[aria-pressed="true"] .mic-off { display: none; }
.mic-chip[aria-pressed="true"] .mic-on { display: inline; }

/* ── form ────────────────────────────────────────────────────────────── */
.access-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; max-width: 560px; }
.access-form input {
  flex: 1 1 260px; min-width: 0; height: 52px; padding: 0 18px; font: 400 16px/1 var(--body); color: var(--text);
  background: rgba(10, 16, 30, .6); border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .2s, background .2s;
}
.access-form input::placeholder { color: #566171; }
.access-form input:hover { border-color: rgba(159, 220, 255, .3); }
.access-form input:focus { outline: none; border-color: var(--ice); background: rgba(10, 16, 30, .9); }
.form-note { flex-basis: 100%; margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.form-status { flex-basis: 100%; margin: 0; font-size: 14.5px; }
.form-status.ok { color: var(--ok); }
.form-status.error { color: #ff8b8b; }
.access-form.is-done input, .access-form.is-done .btn, .access-form.is-done .form-note { display: none; }
/* E-posta formunun altinda dogrudan indirme */
.direct-download { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 18px; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--line-2) inset; height: 46px; }
.btn-ghost:hover { background: rgba(159, 220, 255, .08); box-shadow: 0 0 0 1px var(--ice) inset; }
.dl-note { font-size: 13px; color: var(--muted); }

/* ── komut seridi ────────────────────────────────────────────────────── */
.marquee { position: relative; z-index: 1; overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); display: grid; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-row { display: flex; gap: 12px; width: max-content; animation: marquee 70s linear infinite; }
.marquee-row.reverse { animation-direction: reverse; animation-duration: 85s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row span { white-space: nowrap; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); font: 400 15px/1 var(--display); color: var(--text-2); background: rgba(10, 16, 30, .5); }
.marquee-row span i { font: 500 10.5px/1 var(--mono); font-style: normal; color: var(--ember); letter-spacing: .1em; margin-right: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── tanitim videosu ─────────────────────────────────────────────────── */
.film { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--pad) 0; }
.film-video {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000;
  border: 1px solid var(--line-2); box-shadow: 0 60px 160px -40px rgba(40, 120, 255, .45), 0 0 0 8px rgba(255, 255, 255, .02);
}

/* ── bolumler ────────────────────────────────────────────────────────── */
.section { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(88px, 11vw, 160px) var(--pad); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 920px; }
.index { display: flex; gap: 14px; margin: 0 0 28px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.index span { color: var(--ice); }
h2 { margin: 0; color: var(--text); font: 500 clamp(34px, 4.6vw, 68px)/1.02 var(--display); letter-spacing: -0.04em; }
h2.big { font-size: clamp(42px, 6.6vw, 104px); line-height: .96; }
.section-lede { margin: 26px 0 0; max-width: 620px; font-size: clamp(17px, 1.3vw, 19px); }
h3 { margin: 0; color: var(--text); font: 500 21px/1.2 var(--display); letter-spacing: -0.02em; }
.console-dots { display: inline-flex; gap: 6px; }
.console-dots i { width: 9px; height: 9px; border-radius: 50%; background: #1b2436; }

/* ── 01 masaustu sahnesi ─────────────────────────────────────────────── */
.desk-wrap { margin-top: 60px; perspective: 1800px; }
.desk {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line-2); background: #050a16;
  box-shadow: 0 60px 160px -40px rgba(40, 120, 255, .45), 0 0 0 8px rgba(255, 255, 255, .02);
  transform: rotateX(6deg) scale(.97); transform-origin: 50% 100%; transition: transform 1.4s var(--ease);
  container-type: inline-size; font-family: "Segoe UI", system-ui, sans-serif;
}
.desk-wrap.in .desk { transform: none; }
.desk-wall { position: absolute; inset: 0; background:
  radial-gradient(60% 80% at 30% 35%, rgba(58, 141, 255, .35), transparent 60%),
  radial-gradient(40% 50% at 55% 70%, rgba(110, 70, 255, .18), transparent 70%),
  linear-gradient(160deg, #0b1a3a, #050a16 60%); }
.taskbar {
  position: absolute; left: 0; right: 30%; bottom: 0; height: 4.6cqw; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 1.2cqw;
  background: rgba(14, 20, 34, .82); border-top: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(10px);
}
.tb { width: 2.6cqw; height: 2.6cqw; border-radius: .5cqw; background: rgba(255, 255, 255, .08); position: relative; }
.tb-start { background: linear-gradient(135deg, #3aa0ff, #2563eb); }
.tb-files { background: linear-gradient(135deg, #ffcf5c, #f2a71b); }
.tb-chrome { background: conic-gradient(#ea4335 0 33%, #fbbc05 0 66%, #34a853 0); border-radius: 50%; }
.tb-chrome::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #4285f4; box-shadow: 0 0 0 .2cqw #fff; }
.tb-word { background: linear-gradient(135deg, #2b7cd3, #185abd); }
.tb-word::after { content: "W"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 1.4cqw/1 "Segoe UI"; }
.tb.active::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: -.7cqw; height: .25cqw; border-radius: 2px; background: var(--ice); }
.tb-clock { position: absolute; right: 1.4cqw; color: #cfd8e6; font-size: 1.1cqw; }

.win {
  position: absolute; border-radius: .8cqw; overflow: hidden; background: #f3f5f8; color: #1d2433;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: scale(.94) translateY(1.5cqw); transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.win.open { opacity: 1; transform: none; }
.win-browser { left: 3%; top: 5%; width: 52%; height: 76%; }
.win-word { left: 22%; top: 12%; width: 45%; height: 74%; z-index: 1; }
.win-bar { height: 3cqw; display: flex; align-items: flex-end; justify-content: space-between; background: #dfe3ea; padding-left: 1cqw; }
.win-tab { background: #f3f5f8; border-radius: .6cqw .6cqw 0 0; padding: .7cqw 1.4cqw; font-size: 1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.win-ctl { display: flex; gap: 1.5cqw; align-self: center; padding-right: 1.4cqw; }
.win-ctl i { width: .9cqw; height: .9cqw; border-radius: 2px; border: 1px solid #7d8696; }
.win-url { margin: .7cqw 1cqw; height: 2.3cqw; border-radius: 99px; background: #e4e8ee; display: flex; align-items: center; gap: .8cqw; padding: 0 1.2cqw; font-size: 1cqw; color: #3a4252; white-space: nowrap; overflow: hidden; }
.win-url .lock { width: .8cqw; height: .9cqw; border-radius: 2px; background: #8a93a3; flex: none; }
.win-body { position: relative; padding: 1.6cqw 2cqw; height: calc(100% - 6cqw); overflow: hidden; }
.weather { display: flex; gap: 2cqw; align-items: center; padding: 1.6cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(.6cqw); transition: opacity .5s, transform .5s; }
.weather.show { opacity: 1; transform: none; }
.weather-icon { position: relative; width: 6cqw; height: 5cqw; flex: none; }
.weather-icon .sun { position: absolute; left: 0; top: 0; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #fbbc05; }
.weather-icon .cloud { position: absolute; left: 1.4cqw; top: 1.3cqw; width: 4.4cqw; height: 2.4cqw; border-radius: 2cqw; background: #c7d0dd; }
.weather-icon .drops { position: absolute; left: 2.4cqw; top: 4cqw; width: 2.6cqw; height: 1cqw; background: repeating-linear-gradient(100deg, #4b8cf5 0 .25cqw, transparent .25cqw .8cqw); }
.weather-t { margin: 0; font-size: 3.6cqw; line-height: 1; font-weight: 300; }
.weather-c { margin: .5cqw 0 0; font-size: 1.2cqw; color: #4a5263; }
.weather-d { margin: .2cqw 0 0; font-size: 1.1cqw; color: #6b7385; }
.skel { display: grid; gap: 1cqw; margin-top: 2cqw; }
.skel i { height: 1.1cqw; border-radius: 3px; background: linear-gradient(90deg, #e3e7ee, #eef1f5, #e3e7ee); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.skel i:nth-child(2) { width: 82%; } .skel i:nth-child(3) { width: 90%; } .skel i:nth-child(4) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.scanline { position: absolute; left: 0; right: 0; top: -20%; height: 20%; background: linear-gradient(180deg, transparent, rgba(95, 182, 255, .3), transparent); opacity: 0; }
.scanline.run { animation: scan 1.1s var(--ease) 2; }
@keyframes scan { 0% { top: -20%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.word-bar { background: #185abd; }
.word-bar .win-tab { background: #1e63c6; color: #fff; }
.word-bar .win-ctl i { border-color: #cfe0fb; }
.word-ribbon { height: 3cqw; background: #f7f8fa; border-bottom: 1px solid #e1e4ea; display: flex; gap: 1cqw; align-items: center; padding: 0 1.4cqw; }
.word-ribbon i { width: 4cqw; height: 1.2cqw; border-radius: 3px; background: #e2e6ed; }
.word-body { background: #e9ecf1; display: flex; justify-content: center; padding-top: 1.4cqw; height: calc(100% - 6cqw); }
.page { width: 78%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); padding: 2.4cqw 2.6cqw; }
.page-h { margin: 0 0 1cqw; font: 600 1.7cqw/1.2 "Segoe UI"; color: #1d2433; min-height: 1.2em; }
.page-p { margin: 0; font-size: 1.15cqw; line-height: 1.6; color: #39414f; white-space: pre-wrap; }

/* sahnedeki Apex paneli (gercek panelin kucuk kopyasi) */
.dpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 30%; display: flex; flex-direction: column; background: #04070f; border-left: 1px solid rgba(110, 170, 255, .16); color: #dbe9ff; z-index: 3; }
.dpanel-head { display: flex; align-items: center; gap: .6cqw; padding: 1cqw 1.2cqw; font-size: .95cqw; letter-spacing: .25em; color: #63c5ff; font-weight: 700; }
.dpanel-head span { color: #8193b2; font-weight: 400; }
.chip-ok { margin-left: auto; font-style: normal; font-weight: 400; letter-spacing: 0; font-size: .8cqw; color: #3ddc97; border: 1px solid rgba(61, 220, 151, .35); border-radius: 99px; padding: .25cqw .7cqw; }
.dpanel-avatar { position: relative; height: 40%; overflow: hidden; flex: none; }
.dpanel-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.35); transform-origin: 50% 55%; animation: glow 3s ease-in-out infinite; }
.dpanel.talking .dpanel-avatar img { animation-duration: .6s; }
.dpanel-state { position: absolute; left: 0; right: 0; bottom: .6cqw; text-align: center; font-size: .78cqw; letter-spacing: .2em; color: #bfe4ff; }
.dpanel-cap { padding: 1cqw 1.4cqw; min-height: 22%; display: flex; flex-direction: column; justify-content: flex-end; gap: .8cqw; text-align: center; }
.cap-a { margin: 0; font: 300 1.2cqw/1.35 "Segoe UI Light", "Segoe UI"; color: #fff; text-shadow: 0 0 1.2cqw rgba(99, 197, 255, .4); }
.cap-a.typing::after { content: "\258D"; color: #63c5ff; animation: breathe 1s steps(1) infinite; }
.cap-u { margin: 0; font: 200 1.3cqw/1.25 "Segoe UI Semilight", "Segoe UI"; color: #cfe8ff; }
.cap-u:not(:empty)::before { content: "\201C"; opacity: .45; } .cap-u:not(:empty)::after { content: "\201D"; opacity: .45; }
.dpanel-label { margin: 0; padding: .6cqw 1.2cqw .4cqw; border-top: 1px solid rgba(110, 170, 255, .16); font-size: .72cqw; letter-spacing: .18em; color: #8193b2; }
.dpanel-actions { list-style: none; margin: 0; padding: .2cqw 1cqw; display: flex; flex-direction: column; gap: .5cqw; overflow: hidden; }
.dpanel-actions li { display: flex; gap: .7cqw; align-items: baseline; font-size: .88cqw; color: #8193b2; padding: .35cqw .7cqw; border-left: 2px solid rgba(110, 170, 255, .35); animation: rise .4s var(--ease) both; white-space: nowrap; overflow: hidden; }
.dpanel-actions li.ok { border-left-color: #3ddc97; }
.dpanel-actions .st { width: 1cqw; color: #3ddc97; flex: none; }
.dpanel-actions li.run .st::before { content: ""; display: inline-block; width: .8cqw; height: .8cqw; border-radius: 50%; border: 1.5px solid rgba(110, 170, 255, .35); border-top-color: #63c5ff; animation: spin .8s linear infinite; }
.dpanel-actions .tool { font-family: var(--mono); color: #dbe9ff; }
.dpanel-actions .sum { overflow: hidden; text-overflow: ellipsis; }

.cursor { position: absolute; z-index: 5; left: 40%; top: 40%; width: 2.1cqw; height: 2.1cqw; fill: #fff; stroke: #111; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transition: left .9s var(--ease), top .9s var(--ease); pointer-events: none; }
.click-ring { position: absolute; z-index: 4; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; border: 2px solid var(--ice); opacity: 0; pointer-events: none; }
.click-ring.go { animation: ring .6s var(--ease); }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ── 02 yetenekler ───────────────────────────────────────────────────── */
.caps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cap { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(10, 16, 32, .75), rgba(4, 7, 15, .6)); transition: border-color .4s var(--ease), transform .4s var(--ease); }
.cap:hover { border-color: rgba(159, 220, 255, .3); transform: translateY(-4px); }
.cap-no { font: 400 11.5px/1 var(--mono); color: var(--muted); margin-top: 8px; }
.cap p { margin: 0; font-size: 15px; line-height: 1.55; }
.viz { position: relative; height: 128px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, rgba(58, 141, 255, .14), transparent 60%), #050a15; border: 1px solid var(--line); }
.viz-voice { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 14px; }
.viz-voice span { width: 4px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, var(--ice), var(--blue)); animation: wave 1.2s ease-in-out infinite; }
.viz-voice span:nth-child(3n) { animation-duration: .9s; } .viz-voice span:nth-child(4n+1) { animation-duration: 1.5s; }
.viz-voice span:nth-child(5n) { background: linear-gradient(180deg, #ffd2a8, var(--ember)); }
.viz-voice span:nth-child(odd) { animation-delay: -.4s; } .viz-voice span:nth-child(3n+2) { animation-delay: -.8s; }
@keyframes wave { 50% { height: 74px; } }
.ocr-lines { position: absolute; inset: 20px 22px; display: grid; gap: 12px; align-content: start; }
.ocr-lines i { height: 9px; width: var(--w); border-radius: 3px; background: rgba(180, 200, 230, .18); }
.ocr-box { position: absolute; left: 22px; top: 16px; width: 90px; height: 17px; border: 1.5px solid var(--ember); border-radius: 3px; box-shadow: 0 0 14px rgba(255, 154, 60, .45); animation: ocr 5s var(--ease) infinite; }
@keyframes ocr { 0%, 18% { left: 18px; top: 16px; width: 90px; } 25%, 43% { left: 60px; top: 37px; width: 56px; } 50%, 68% { left: 26px; top: 58px; width: 120px; } 75%, 93% { left: 18px; top: 79px; width: 48px; } 100% { left: 18px; top: 16px; width: 90px; } }
.ocr-scan { position: absolute; left: 0; right: 0; height: 30px; background: linear-gradient(180deg, transparent, rgba(95, 182, 255, .25), transparent); animation: vscan 3s linear infinite; }
@keyframes vscan { from { top: -30px; } to { top: 128px; } }
.mini-win { position: absolute; border-radius: 6px; border: 1px solid rgba(159, 220, 255, .25); background: rgba(20, 34, 60, .6); }
.mini-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: rgba(159, 220, 255, .15); }
.mini-win.w1 { left: 16px; top: 18px; width: 38%; height: 52%; animation: focus 6s infinite; }
.mini-win.w2 { left: 34%; top: 40px; width: 40%; height: 54%; animation: focus 6s infinite 2s; }
.mini-win.w3 { right: 14px; top: 14px; width: 30%; height: 44%; animation: focus 6s infinite 4s; }
@keyframes focus { 0%, 30% { border-color: var(--ice); box-shadow: 0 0 18px rgba(95, 182, 255, .35); } 34%, 100% { border-color: rgba(159, 220, 255, .25); box-shadow: none; } }
.mini-cursor { position: absolute; width: 18px; height: 18px; fill: #fff; stroke: #0b1220; stroke-width: 1.5; animation: hand 6s var(--ease) infinite; }
@keyframes hand { 0%, 28% { left: 30%; top: 46%; } 33%, 61% { left: 58%; top: 72%; } 66%, 95% { left: 84%; top: 34%; } 100% { left: 30%; top: 46%; } }
.mb { position: absolute; inset: 14px 16px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(159, 220, 255, .2); background: #0b1324; }
.mb-bar { height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: rgba(159, 220, 255, .08); }
.mb-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.mb-bar b { flex: 1; height: 7px; border-radius: 4px; background: rgba(159, 220, 255, .14); }
.mb-load { height: 2px; background: linear-gradient(90deg, var(--blue), var(--ice)); transform-origin: 0 50%; animation: load 2.8s var(--ease) infinite; }
@keyframes load { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); opacity: 0; } }
.mb-body { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-body i { height: 28px; border-radius: 4px; background: linear-gradient(90deg, rgba(159, 220, 255, .08), rgba(159, 220, 255, .18), rgba(159, 220, 255, .08)); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; }
.fsearch { position: absolute; left: 16px; right: 16px; top: 14px; height: 22px; border-radius: 6px; border: 1px solid rgba(159, 220, 255, .25); padding: 0 10px; display: flex; align-items: center; }
.fs-q { font: 400 11px/1 var(--mono); color: var(--ice); overflow: hidden; white-space: nowrap; border-right: 1px solid var(--ice); width: 0; animation: typing 4s steps(5) infinite; }
@keyframes typing { 0% { width: 0; } 40%, 90% { width: 5.2ch; } 100% { width: 0; } }
.fgrid { position: absolute; left: 16px; right: 16px; top: 48px; bottom: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fgrid i { border-radius: 4px; background: rgba(255, 207, 92, .16); border: 1px solid rgba(255, 207, 92, .2); }
.fgrid i:nth-child(3), .fgrid i:nth-child(6), .fgrid i:nth-child(8) { animation: pick 4s infinite; }
.fgrid i:nth-child(6) { animation-delay: .25s; } .fgrid i:nth-child(8) { animation-delay: .5s; }
@keyframes pick { 0%, 38% { } 45%, 90% { background: rgba(95, 182, 255, .3); border-color: var(--ice); } }
.doc { position: absolute; left: 50%; top: 12px; bottom: 0; width: 46%; transform: translateX(-50%); background: #eef2f8; border-radius: 4px 4px 0 0; padding: 14px 12px; display: grid; gap: 7px; align-content: start; }
.doc i { height: 5px; border-radius: 2px; background: #9aa6b8; transform-origin: 0 50%; animation: draw 5s var(--ease) infinite; }
.doc i.dh { height: 8px; width: 60%; background: #2b5bb8; }
.doc i.dt { height: 22px; background: repeating-linear-gradient(90deg, #c9d3e2 0 30%, #eef2f8 30% 34%); }
.doc i:nth-child(2) { animation-delay: .3s; } .doc i:nth-child(3) { animation-delay: .6s; width: 86%; } .doc i:nth-child(4) { animation-delay: .9s; } .doc i:nth-child(5) { animation-delay: 1.2s; } .doc i:nth-child(6) { animation-delay: 1.5s; width: 70%; }
@keyframes draw { 0% { transform: scaleX(0); } 20%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.doc-tags { position: absolute; left: 10px; top: 12px; display: grid; gap: 6px; }
.doc-tags span { font: 500 9.5px/1 var(--mono); padding: 5px 6px; border-radius: 4px; color: #fff; background: #2b5bb8; }
.doc-tags span:nth-child(2) { background: #c23b2e; } .doc-tags span:nth-child(3) { background: #1d7a45; }
.viz-memory svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.viz-memory line { stroke: rgba(159, 220, 255, .35); stroke-width: 1; stroke-dasharray: 4 4; animation: dash 2.4s linear infinite; }
.viz-memory circle { fill: var(--ice); animation: breathe 3s ease-in-out infinite; }
.viz-memory circle:nth-child(1) { fill: var(--ember); }
.viz-memory circle:nth-child(3) { animation-delay: -1s; } .viz-memory circle:nth-child(4) { animation-delay: -2s; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.viz-term { padding: 22px 18px; font: 400 11.5px/1.7 var(--mono); color: var(--text-2); }
.viz-term p { margin: 0; white-space: nowrap; overflow: hidden; }
.viz-term b { color: var(--ice); font-weight: 500; }
.viz-term .tw { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; border-right: 1px solid var(--ice); width: 0; animation: tw 6s steps(36) infinite; }
@keyframes tw { 0% { width: 0; } 45%, 92% { width: 36ch; } 100% { width: 0; } }
.viz-term .out { color: var(--ok); opacity: 0; animation: out 6s infinite; }
@keyframes out { 0%, 50% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ── 03 akis ─────────────────────────────────────────────────────────── */
.pipe { position: relative; height: 170px; margin-top: 64px; }
.pipe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pipe path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 7; }
.pipe-dot { fill: var(--ice); }
.pipe-dot.d2 { fill: var(--ember); }
.pipe-node { position: absolute; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(159, 220, 255, .3); background: radial-gradient(circle, rgba(58, 141, 255, .18), rgba(4, 7, 15, .95) 70%); box-shadow: 0 0 60px -10px rgba(58, 141, 255, .5); }
.pipe-node.n1 { left: 16.7%; } .pipe-node.n2 { left: 50%; } .pipe-node.n3 { left: 83.3%; }
.pipe-node::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(159, 220, 255, .25); animation: spin 18s linear infinite; }
.node-wave { display: flex; gap: 4px; align-items: center; height: 40px; }
.node-wave i { width: 4px; height: 10px; border-radius: 3px; background: var(--ice); animation: wave2 1s ease-in-out infinite; }
.node-wave i:nth-child(2) { animation-delay: -.3s; } .node-wave i:nth-child(3) { animation-delay: -.6s; } .node-wave i:nth-child(4) { animation-delay: -.15s; } .node-wave i:nth-child(5) { animation-delay: -.45s; }
@keyframes wave2 { 50% { height: 38px; } }
.node-core { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd2a8 25%, var(--ember) 55%, transparent 72%); box-shadow: 0 0 40px 8px rgba(255, 154, 60, .45); animation: pulse 2.2s ease-in-out infinite; }
.pipe-node svg { width: 34px; height: 34px; fill: #fff; stroke: #0b1220; stroke-width: 1.2; animation: tap 2.6s ease-in-out infinite; }
@keyframes tap { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.85); } }
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; text-align: center; }
.step-k { margin: 0; color: var(--text); font: 500 26px/1 var(--display); letter-spacing: -0.03em; }
.step-model { margin: 14px 0 16px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--ice); }
.step p:last-child { margin: 0 auto; font-size: 16px; max-width: 340px; }

/* ── 04 ayarlar vitrini ──────────────────────────────────────────────── */
.sw { margin-top: 60px; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #04070f; box-shadow: 0 60px 140px -50px rgba(40, 120, 255, .45); font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; color: #dbe9ff; }
.sw-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(110, 170, 255, .16); color: #8193b2; font-size: 12.5px; }
.sw-main { display: flex; min-height: 470px; }
.sw-side { width: 220px; flex: none; border-right: 1px solid rgba(110, 170, 255, .16); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; background: #0a1020; }
.sw-brand { margin: 0; font-weight: 700; color: #63c5ff; letter-spacing: .08em; padding: 4px 10px 16px; }
.sw-brand span { color: #8193b2; font-weight: 400; letter-spacing: 0; }
.sw-side button { appearance: none; text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; background: none; color: #8193b2; cursor: pointer; font: inherit; position: relative; overflow: hidden; }
.sw-side button:hover { color: #dbe9ff; background: rgba(99, 197, 255, .06); }
.sw-side button[aria-selected="true"] { color: #dbe9ff; background: rgba(47, 125, 255, .18); }
.sw-side button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ice); animation: tabtime 4.5s linear forwards; }
.sw.paused .sw-side button::after { animation: none; width: 0; }
@keyframes tabtime { to { width: 100%; } }
.sw-content { flex: 1; min-width: 0; padding: 22px; min-height: 430px; }
.sw-pane { display: none; flex-direction: column; gap: 14px; animation: rise .45s var(--ease); }
.sw-pane.on { display: flex; }
.sw-card { background: #0a1020; border: 1px solid rgba(110, 170, 255, .16); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sw-card h4 { margin: 0; font-size: 15px; font-weight: 600; color: #dbe9ff; }
.sw-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-field label { flex: 0 0 210px; color: #8193b2; font-size: 13px; }
.sw-select { padding: 7px 28px 7px 12px; border-radius: 8px; border: 1px solid rgba(110, 170, 255, .2); background: #111a30; min-width: 180px; position: relative; }
.sw-select::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid #8193b2; border-bottom: 1.5px solid #8193b2; transform: translateY(-70%) rotate(45deg); }
.sw-slider { position: relative; flex: 1; max-width: 260px; height: 4px; border-radius: 4px; background: rgba(110, 170, 255, .2); }
.sw-slider i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 4px; background: #63c5ff; }
.sw-slider i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #dbe9ff; }
.sw-pane.on .sw-slider i { animation: slide 1.2s var(--ease); }
@keyframes slide { from { width: 0; } }
.sw-val { font-family: var(--mono); font-size: 12.5px; }
.sw-toggle { position: relative; display: flex; align-items: center; gap: 12px; }
.sw-toggle::before { content: ""; width: 34px; height: 19px; border-radius: 99px; background: rgba(110, 170, 255, .2); flex: none; transition: background .3s; }
.sw-toggle::after { content: ""; position: absolute; left: 3px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: #dbe9ff; transition: left .3s var(--ease); }
.sw-toggle.on::before { background: #2f7dff; }
.sw-toggle.on::after { left: 18px; }
.sw-chips { display: flex; gap: 6px; }
.sw-chips b, .sw-chips i { font-style: normal; font-weight: 400; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(110, 170, 255, .2); color: #8193b2; }
.sw-chips b { color: #04070f; background: #63c5ff; border-color: #63c5ff; }
.sw-keys { display: flex; gap: 5px; }
kbd { font: 500 12px/1 var(--mono); padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(110, 170, 255, .25); border-bottom-width: 2px; background: #111a30; color: #dbe9ff; }
.sw-model { display: grid; grid-template-columns: 1fr 70px 120px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(110, 170, 255, .1); }
.sw-model em { font-style: normal; color: #8193b2; font-size: 12.5px; }
.sw-model b.ok { font-weight: 400; font-size: 12.5px; color: #3ddc97; }
.sw-prog { height: 6px; border-radius: 6px; background: rgba(110, 170, 255, .15); overflow: hidden; }
.sw-prog i { display: block; height: 100%; background: linear-gradient(90deg, #2f7dff, #63c5ff); animation: dl 4s var(--ease) infinite; }
@keyframes dl { from { width: 8%; } 90%, to { width: 100%; } }
.sw-prov { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(110, 170, 255, .14); }
.sw-prov span { color: #8193b2; font-size: 12.5px; }
.sw-prov b { font-weight: 500; }
.sw-prov.active { border-color: #63c5ff; background: rgba(47, 125, 255, .12); box-shadow: 0 0 24px -6px rgba(99, 197, 255, .5); }
.sw-pre { margin: 0; font: 400 12.5px/1.7 var(--mono); color: #cfe0f5; background: #060a14; border: 1px solid rgba(110, 170, 255, .14); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; }
.sw-skill { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(110, 170, 255, .1); }
.sw-skill b { font: 500 13px/1.3 var(--mono); color: #dbe9ff; }
.sw-skill span { color: #8193b2; font-size: 12.5px; }
.sw-risk { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(110, 170, 255, .1); }
.sw-risk b { font: 500 12px/1 var(--mono); padding: 5px 10px; border-radius: 6px; }
.sw-risk b.auto { color: #3ddc97; background: rgba(61, 220, 151, .1); }
.sw-risk b.ask { color: #ffc455; background: rgba(255, 196, 85, .1); }
.sw-path { font: 400 12.5px/1 var(--mono); padding: 9px 12px; border-radius: 8px; background: #060a14; border: 1px solid rgba(110, 170, 255, .14); }
.sw-code { font: 400 12.5px/1 var(--mono); color: #63c5ff; }

/* ── 05 yerel ────────────────────────────────────────────────────────── */
.local-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.vault svg { width: 100%; max-width: 420px; margin-left: auto; display: block; overflow: visible; }
.vault-r { fill: none; stroke: rgba(159, 220, 255, .35); stroke-width: 1.2; stroke-dasharray: 6 8; transform-origin: 200px 200px; animation: spin 40s linear infinite; }
.vault-r2 { fill: rgba(58, 141, 255, .05); stroke: rgba(159, 220, 255, .15); }
.vault-pc { fill: none; stroke: var(--ice); stroke-width: 1.6; }
.vault-core { fill: var(--ember); transform-origin: 200px 190px; animation: pulse 2.4s ease-in-out infinite; }
.vault-orbit { transform-origin: 200px 200px; animation: spin 14s linear infinite; }
.vault-orbit circle { fill: var(--ice); }
.vault-cloud path { fill: none; stroke: rgba(180, 192, 207, .35); stroke-width: 1.4; }
.vault-cloud line { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .7; }
.local::after { content: ""; position: absolute; z-index: -1; right: -10%; top: 10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; pointer-events: none; background: radial-gradient(circle, rgba(255, 140, 50, .10), rgba(40, 120, 255, .07) 40%, transparent 68%); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 72px 0 0; border-top: 1px solid var(--line); }
.figure { padding: 34px 28px 0 0; }
.figure + .figure { padding-left: 28px; border-left: 1px solid var(--line); }
.figure dt { font: 400 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.figure dd { margin: 18px 0 12px; color: var(--text); font: 500 clamp(44px, 5vw, 72px)/1 var(--display); letter-spacing: -0.04em; }
.figure dd small { font-size: .42em; color: var(--muted); letter-spacing: 0; }
.figure p { margin: 0; font-size: 15.5px; max-width: 320px; }

/* ── 06 kontrol ──────────────────────────────────────────────────────── */
.control-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rules { list-style: none; margin: 52px 0 0; padding: 0; }
.rules li { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rule-k { color: var(--text); font: 500 18px/1.3 var(--display); letter-spacing: -0.015em; }
.rules p { margin: 0; font-size: 16px; }
.approval {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; color: #dbe9ff;
  border: 1px solid rgba(255, 154, 60, .55); background: linear-gradient(180deg, rgba(255, 154, 60, .08), rgba(4, 7, 15, .95) 60%);
  border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 40px 100px -30px rgba(255, 140, 50, .4); animation: attn 3s ease-in-out infinite;
}
@keyframes attn { 50% { box-shadow: 0 0 0 4px rgba(255, 154, 60, .12), 0 40px 100px -30px rgba(255, 140, 50, .55); } }
.ap-title { display: flex; align-items: center; gap: 10px; }
.ap-title b { font: 500 15px/1 var(--mono); }
.risk { font: 600 11px/1 var(--body); padding: 5px 9px; border-radius: 6px; color: #ffd2d2; background: rgba(255, 107, 107, .18); border: 1px solid rgba(255, 107, 107, .4); letter-spacing: .04em; }
.ap-desc { margin: 0; color: #b4c4dc; }
.ap-args { margin: 0; font: 400 12.5px/1.6 var(--mono); background: #060a14; border: 1px solid rgba(110, 170, 255, .14); border-radius: 8px; padding: 12px 14px; color: #cfe0f5; white-space: pre-wrap; word-break: break-all; }
.ap-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-btn { padding: 9px 16px; border-radius: 8px; border: 1px solid rgba(110, 170, 255, .3); color: #dbe9ff; }
.ap-btn.yes { background: #dbe9ff; color: #04070f; border-color: #dbe9ff; animation: press 6s infinite; }
@keyframes press { 0%, 70% { transform: none; box-shadow: none; } 74% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(219, 233, 255, .2); } 80%, 100% { transform: none; } }
.ap-hint { color: #8193b2; font-size: 12.5px; }
.ap-voice { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(110, 170, 255, .14); color: #cfe8ff; font: 300 17px/1.3 var(--display); }
.ap-wave { display: flex; gap: 3px; align-items: center; height: 22px; }
.ap-wave i { width: 3px; height: 6px; border-radius: 2px; background: var(--ember); animation: wave3 .9s ease-in-out infinite; }
.ap-wave i:nth-child(2) { animation-delay: -.2s; } .ap-wave i:nth-child(3) { animation-delay: -.4s; } .ap-wave i:nth-child(4) { animation-delay: -.6s; } .ap-wave i:nth-child(5) { animation-delay: -.8s; }
@keyframes wave3 { 50% { height: 20px; } }

/* ── 07 mcp ──────────────────────────────────────────────────────────── */
.mcp-map { position: relative; margin-top: 60px; height: clamp(260px, 30vw, 340px); }
.mcp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mcp-lines path { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.mcp-dots circle { fill: var(--ice); }
.mcp-dots circle.out { fill: var(--ember); }
.mnode { position: absolute; transform: translate(-50%, -50%); padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(8, 14, 28, .92); color: var(--text); font: 500 14px/1 var(--display); white-space: nowrap; }
.mnode.l { left: 13%; } .mnode.r { left: 87%; }
.mnode.c { left: 50%; top: 50%; display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; }
.mnode.c img { width: clamp(90px, 11vw, 130px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 52%; border: 1px solid rgba(159, 220, 255, .45); box-shadow: 0 0 60px -6px rgba(58, 141, 255, .7); animation: glow 3s ease-in-out infinite; }
.mcp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.mcp-card { padding: 30px 32px 34px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 120% at 0% 0%, rgba(95, 182, 255, .07), transparent 60%), var(--bg-raise); transition: border-color .3s; }
.mcp-card:hover { border-color: var(--line-2); }
.mcp-dir { margin: 0 0 28px; font: 400 12px/1 var(--mono); color: var(--ice); letter-spacing: .1em; }
.mcp-card p:last-child { margin: 14px 0 0; }

/* ── 08 teknik ───────────────────────────────────────────────────────── */
.spec-table { margin: 0; border-top: 1px solid var(--line); }
.spec-table > div { display: grid; grid-template-columns: minmax(140px, 300px) 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { font: 400 12px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.spec-table dd { margin: 0; color: var(--text); font-size: 16px; }

/* ── erisim ──────────────────────────────────────────────────────────── */
.access { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.access-copy { position: relative; z-index: 1; }
.access-glow { order: 2; }
.access-glow img { width: 100%; max-width: 520px; margin-left: auto; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 75%); animation: glow 4s ease-in-out infinite; }
.access-form-large { margin-top: 44px; max-width: 640px; }

/* ── sss ─────────────────────────────────────────────────────────────── */
.faq-list { max-width: 900px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; color: var(--text); font: 500 clamp(18px, 1.6vw, 21px)/1.3 var(--display); letter-spacing: -0.015em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 300 26px/1 var(--display); color: var(--muted); transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--ice); }
.faq-list details p { margin: 0 0 26px; max-width: 720px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer { max-width: var(--max); margin: 0 auto; padding: 48px var(--pad) max(48px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { mix-blend-mode: screen; opacity: .9; }
.footer-brand p, .footer-meta { margin: 0; font-size: 14px; color: var(--muted); }
.wordmark-sm { color: var(--text); font-family: var(--display); }

/* ── kaydirinca belirme ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ── duyarli ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-end { margin-left: auto; }
  .sw-side { width: 180px; }
  .sw-field label { flex-basis: 100%; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: var(--note-h, 0px) var(--pad) 64px; min-height: auto; }
  .hero-visual { position: relative; top: auto; right: auto; bottom: auto; width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); height: 62svh; min-height: 400px; order: -1; --head-y: 44%; }
  .hero-visual::before { background: linear-gradient(0deg, var(--bg) 0%, transparent 38%), linear-gradient(180deg, rgba(1, 3, 9, .8) 0%, transparent 18%); }
  .hud { width: 120%; }
  .orbit li { --r: 145px; font-size: 10px; }
  .orbit li:nth-child(n+5) { display: none; }
  .mic-chip { bottom: 22px; }
  .hero-copy { margin-top: 12px; }
  .desk { aspect-ratio: 4 / 3.4; }
  .dpanel { width: 38%; } .taskbar { right: 38%; }
  .win-browser { width: 58%; } .win-word { left: 12%; width: 48%; }
  .local-grid, .control-grid, .access { grid-template-columns: 1fr; }
  .vault svg { margin: 0 auto; max-width: 300px; }
  .figures { grid-template-columns: 1fr; }
  .figure, .figure + .figure { padding: 30px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .mcp-grid { grid-template-columns: 1fr; }
  .mnode { font-size: 12px; padding: 8px 10px; }
  .mnode.l { left: 15%; } .mnode.r { left: 85%; }
  .rules li, .spec-table > div { grid-template-columns: 1fr; gap: 8px; }
  .sw-main { flex-direction: column; }
  .sw-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(110, 170, 255, .16); padding: 10px; gap: 4px; scrollbar-width: none; }
  .sw-side::-webkit-scrollbar { display: none; }
  .sw-brand { display: none; }
  .sw-side button { white-space: nowrap; flex: none; }
  .pipe { height: 130px; }
  .pipe-node { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .flow-steps { grid-template-columns: 1fr; gap: 36px; }
  .access-glow { order: -1; }
  .access-glow img { margin: 0 auto; max-width: 320px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .nav { gap: 12px; }
  .wordmark { font-size: 17px; }
  .btn-small { display: none; }
  .access-form .btn { width: 100%; }
  .caps { grid-template-columns: 1fr; }
  .hero-stats { gap: 16px; }
  .hero-stats dd { font-size: 12px; }
  .desk { aspect-ratio: 3 / 3.6; }
  .dpanel { width: 46%; } .taskbar { right: 46%; }
  .win-browser { width: 52%; } .win-word { left: 6%; width: 46%; }
  .sw-model { grid-template-columns: 1fr 60px; }
  .sw-model > :last-child { grid-column: 1 / -1; }
  .footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .field { display: none; }
}

/* ── alt sayfalar: about / how to ─────────────────────────────────── */
.subpage main { padding-top: 72px; }
.page-hero { padding-bottom: clamp(48px, 6vw, 88px); }
.about-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-p { margin: 18px 0 0; max-width: 620px; }
.about-facts { margin: 0; display: grid; gap: 18px; border: 1px solid var(--line-2); border-radius: 18px; padding: 26px; background: var(--bg-raise); }
.about-facts dt { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.about-facts dd { margin: 6px 0 0; color: var(--text); }
.about-facts a { color: var(--ice); text-decoration: none; border-bottom: 1px solid rgba(159, 220, 255, .35); }
.about-sub { margin-top: clamp(56px, 7vw, 96px); }
.about-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.about-values li { background: var(--bg-raise); padding: 26px; }
.about-values b, .about-timeline b { display: block; color: var(--text); font: 500 19px/1.25 var(--display); letter-spacing: -0.01em; margin-bottom: 8px; }
.about-values p, .about-timeline p { margin: 0; font-size: 15px; }
.about-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.about-timeline li { border-top: 1px solid var(--line-2); padding-top: 18px; }
.about-timeline .y { display: block; font: 400 13px/1 var(--mono); color: var(--ember); margin-bottom: 10px; }
.about-leader { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(22px, 3vw, 36px); background: var(--bg-raise); max-width: 980px; }
.about-leader img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.about-leader h3 { margin: 0; color: var(--text); font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; }
.about-leader .role { margin: 6px 0 14px; color: var(--ember); font-size: 15px; }
.about-leader p { margin: 0; }
.about-cta { margin-top: 32px; height: 46px; padding: 0 20px; display: inline-flex; align-items: center; text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); }

@media (max-width: 960px) {
  .about-cols { grid-template-columns: 1fr; }
  .about-values, .about-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .about-values, .about-timeline { grid-template-columns: 1fr; }
  .about-leader { grid-template-columns: 1fr; text-align: left; }
  .about-leader img { width: 120px; height: 120px; }
}

/* how to */
.how-note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.how-layout { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(64px, 8vw, 120px); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
.how-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 14px; max-height: calc(100vh - 120px); overflow: auto; }
.how-toc p { margin: 0 0 10px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.how-toc a { color: var(--text-2); text-decoration: none; padding: 7px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: color .2s, background .2s; }
.how-toc a:hover { color: var(--text); }
.how-toc a.on { color: var(--text); background: rgba(159, 220, 255, .06); border-left-color: var(--ice); }
.how-sec { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.how-sec h2 { font-size: clamp(30px, 3.4vw, 46px); }
.how-shot { margin: 28px 0; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #04070f; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.how-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.how-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3346; }
.how-bar span { margin-left: 6px; }
.how-img { position: relative; }
.how-img img { width: 100%; height: auto; }
.how-mark { position: absolute; transform: translate(-100%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--ember); color: #04070f; font: 600 12px/24px var(--body); text-align: center; box-shadow: 0 0 0 4px rgba(255, 154, 60, .25); }
.how-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.how-steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.how-steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--ember); color: #04070f; font: 600 12px/24px var(--body); text-align: center; margin-top: 3px; }
.how-steps b { color: var(--text); font-weight: 500; }
.how-tip { display: flex; gap: 12px; margin: 24px 0 0; max-width: 860px; border-left: 2px solid var(--ice); background: rgba(159, 220, 255, .05); padding: 14px 18px; border-radius: 0 12px 12px 0; font-size: 15px; }
.how-tip .k { font: 400 11px/22px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); flex: none; }
@media (max-width: 960px) {
  .how-layout { grid-template-columns: 1fr; }
  .how-toc { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .how-toc p { width: 100%; }
  .how-toc a { border-left: 0; }
}

.about-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.about-points li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.about-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
@media (max-width: 760px) {
  .about-leader { grid-template-columns: 1fr; }
  .about-leader img { width: 120px; height: 120px; }
}

/* yasal sayfalar (privacy, terms) */
.legal h3 { margin: 2rem 0 .5rem; font-size: 1.15rem; }
.legal h3:first-child { margin-top: 0; }
.legal .about-points { margin: .5rem 0 1rem; }
.legal-contact { display: grid; gap: .75rem; }
.legal-contact a { color: inherit; }
.footer-meta a + a, .footer-meta a { white-space: nowrap; }