/* ═══════════════════════════════════════════════════════════
   YESA WORKS — Kurumsal yazılım şirketi
   Bej / krem açık tema · tek sayfa
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
/* İki tasarım dili tek stil dosyasında yaşıyor; <html data-theme> ile seçilir.
   Bileşen kuralları renk/şekil/tipografi için yalnızca bu değişkenleri okur. */
:root, [data-theme="mercury"]{
  /* MERCURY — "mavi saatte alp bankacılığı": onyx zemin, tek kobalt eylem */
  --bg:        #171721;   /* onyx: sayfa zemini, bölümler, footer */
  --bg-alt:    #1E1E2A;   /* grafit: tam genişlik bantlar */
  --surface:   #1E1E2A;   /* grafit kart */
  --surface-2: #272735;   /* obsidiyen: form alanı, ikincil dolgu */

  --line:      color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2:    color-mix(in srgb, var(--ink) 24%, transparent);

  --ink:       #EDEDF3;   /* ivory: ana metin (saf beyaz kullanılmaz) */
  --ink-2:     #C3C3CC;   /* ash: ikincil metin */
  --ink-3:     color-mix(in srgb, var(--ink) 52%, transparent);

  --accent:    #5266EB;   /* kobalt — yalnızca birincil eylem */
  --accent-2:  #6172EE;
  --on-accent: #FFFFFF;
  --bad:       #E06A5E;
  --grad:      linear-gradient(90deg, var(--ink), var(--ink-2));
  /* Logo renkleri (turkuaz → mor) — logonun kendi tonları */
  --brand-grad: linear-gradient(100deg, #2EE6C6 0%, #A06BFA 100%);

  /* Sahne ve nesneler (laptop, telefon) */
  --stage-1:   #222230;  --stage-2: #171721;  --stage-3: #12121A;
  --shell-1:   #2C2C3A;  --shell-2: #23232F;  --shell-3: #30303F;  --shell-4: #1C1C26;
  --shell-lite: rgba(255,255,255,.12);
  --shell-edge: rgba(255,255,255,.09);
  --key-bg:    #0E0E14;  --key-line: #343444;
  --screen-bg: #0B0B10;  --screen-glare: rgba(255,255,255,.16);
  --bezel-col: #09090D;
  --floor:     rgba(0,0,0,.62);
  --logo-filter: grayscale(1) brightness(2.6);
  --logo-l:    #2EE6C6;   /* logonun kolları: turkuaz ve mor */
  --logo-r:    #A06BFA;
  --glow-1:    rgba(82,102,235,.10);
  --glow-2:    rgba(82,102,235,.07);
  --net-line:  237,237,243;
  --net-dot:   82,102,235;

  --sh-sm:     none;
  --sh:        none;
  --sh-lg:     0 40px 90px -45px rgba(0, 0, 0, .85);

  --maxw:      1200px;
  --gut:       clamp(20px, 5vw, 48px);
  --secpad:    clamp(72px, 8vw, 112px);
  --card-pad:  32px;
  --grid-gap:  12px;

  /* Şekil: kontroller hap, kartlar 12px */
  --r:         12px;
  --r-lg:      12px;
  --r-pill:    999px;
  --r-img:     12px;

  /* Tipografi: geniş oturan grotesk, ara ağırlık 480, pozitif harf aralığı */
  --ff-disp:   'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-body:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono:   var(--ff-body);
  --w-head:    480;
  --w-btn:     400;
  --w-lead:    480;
  --track-head:    .012em;
  --track-display: .005em;
  --track-label:   .1em;
  --lh-head:    1.15;
  --lh-display: 1.1;
}

[data-theme="cosmos"]{
  /* COSMOS — "keten galeri duvarı": krem zemin, beyaz kart, tek serif gövde.
     Arayüzde renk yok; renk yalnızca içerik görsellerinden gelir. */
  --bg:        #F7F5F3;   /* keten: kök zemin, asla saf beyaz değil */
  --bg-alt:    #FFFFFF;   /* kâğıt beyazı bant */
  --surface:   #FFFFFF;   /* kart ve giriş alanı — tek yükseltilmiş yüzey */
  --surface-2: #FFFFFF;

  --line:      color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2:    color-mix(in srgb, var(--ink) 22%, transparent);

  --ink:       #0D0D0D;   /* saf siyah değil: krem zeminde ısınsın */
  --ink-2:     #6E6A69;   /* stone */
  --ink-3:     #9A9796;   /* pebble */

  --accent:    #0D0D0D;   /* ayrı bir eylem rengi yok: dolgulu buton mürekkep siyahı */
  --accent-2:  #262626;
  --on-accent: #FFFFFF;
  --bad:       #A3302A;
  --grad:      linear-gradient(90deg, var(--ink), var(--ink-2));
  /* Logo renkleri (turkuaz → mor), krem zeminde okunur derinlikte */
  --brand-grad: linear-gradient(100deg, #0FA88F 0%, #7C4DEB 100%);

  --stage-1:   #FFFFFF;  --stage-2: #F7F5F3;  --stage-3: #EDEAE7;
  --shell-1:   #E6E3E0;  --shell-2: #DCD8D5;  --shell-3: #F2F0EE;  --shell-4: #CBC7C3;
  --shell-lite: rgba(255,255,255,.72);
  --shell-edge: rgba(13,13,13,.10);
  --key-bg:    #1A1A1A;  --key-line: #D8D4D1;
  --screen-bg: #0D0D0D;  --screen-glare: rgba(255,255,255,.28);
  --bezel-col: #0D0D0D;
  --floor:     rgba(13,13,13,.20);
  --logo-filter: grayscale(1) brightness(.35);
  --logo-l:    #0FA88F;   /* açık zeminde okunur derinlikte aynı renkler */
  --logo-r:    #7C4DEB;
  --glow-1:    transparent;   /* düz sistem: degrade yok */
  --glow-2:    transparent;
  --net-line:  13,13,13;
  --net-dot:   13,13,13;

  --sh-sm:     none;
  --sh:        none;
  --sh-lg:     0 30px 70px -40px rgba(13,13,13,.28);

  --maxw:      1280px;
  --gut:       clamp(20px, 5vw, 48px);
  --secpad:    clamp(64px, 7vw, 96px);
  --card-pad:  24px;
  --grid-gap:  24px;

  /* Tek imza yarıçap: her kap, buton ve giriş 16px; görsel karoları 12px */
  --r:         16px;
  --r-lg:      16px;
  --r-pill:    16px;
  --r-img:     12px;

  /* Tek serif gövde. İmza: başlıklarda fısıltı ağırlığı 350 ve sıkı negatif aralık */
  --ff-disp:   'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:   'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-mono:   var(--ff-body);
  --w-head:    350;
  --w-btn:     500;
  --w-lead:    400;
  --track-head:    -.04em;
  --track-display: -.05em;
  --track-label:   0;
  --lh-head:    1.1;
  --lh-display: 1.06;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* Başlık ağırlığı 480: kalından hafif, normalden ağır — sistemin imzası.
   Harf aralığı pozitif: geniş oturan, mimari bir başlık dili. */
h1,h2,h3,h4,h5,h6{ font-family:var(--ff-disp); font-weight:var(--w-head); line-height:var(--lh-head); letter-spacing:var(--track-head); margin:0; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:color-mix(in srgb, var(--accent) 34%, transparent); color:var(--ink); }

/* Etiket stili: ayrı bir daktilo gövdesi yok; küçük punto + geniş harf aralığı */
.mono{ font-family:var(--ff-body); font-weight:var(--w-btn); letter-spacing:var(--track-label); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.dim{ color:var(--ink-3); }
.grad, .grad-txt{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* Bölüm başlıklarının soluk ikinci satırları logonun renklerini taşır */
.sec__title .dim,
.sec__title .grad{
  background-image:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-bottom:.08em;
}
/* Hero başlığındaki vurgu kelimesi logonun renklerini taşır */
.hero__title .grad{ background-image:var(--brand-grad); padding-bottom:.08em; margin-bottom:-.08em; }

.skip{
  position:fixed; top:-100px; left:16px; z-index:1000;
  background:var(--accent); color:var(--on-accent); padding:10px 22px;
  border-radius:var(--r-pill); font-weight:var(--w-btn);
  transition:top .2s;
}
.skip:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r); }

/* ── PRELOADER ────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .5s var(--ease), visibility .5s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__box{ display:grid; justify-items:center; gap:22px; }
.loader__mark{ width:58px; }
.loader__mark path{
  stroke-dasharray:200; stroke-dashoffset:200;
  animation:draw .75s var(--ease) forwards;
}
.loader__mark .lm-arm--2{ animation-delay:.08s; }
.loader__mark .lm-stem{ animation-delay:.16s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.loader__bar{
  width:150px; height:2px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0%;
  background:var(--grad);
  transition:width .18s linear;
}
.loader__txt{ font-size:10px; color:var(--ink-3); }

/* ── ARKA PLAN ────────────────────────────────────────────── */
.bg-canvas{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  opacity:.30; pointer-events:none;
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 75%);
}
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* Koyu düzlemde ışık değil, hafif bir sis: yüzey asla parlak bir banda dönüşmez */
  background:
    radial-gradient(900px 560px at 12% -12%, var(--glow-1), transparent 66%),
    radial-gradient(820px 520px at 92% -6%,  color-mix(in srgb, var(--ink) 5%, transparent), transparent 64%),
    radial-gradient(1000px 680px at 50% 106%, var(--glow-2), transparent 72%);
}
main, .nav, .foot{ position:relative; z-index:2; }

/* ── İMLEÇ ────────────────────────────────────────────────── */
.cur, .cur-ring{
  position:fixed; top:0; left:0; z-index:800;
  pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .3s;
}
.cur{ width:5px; height:5px; background:var(--ink); }
.cur-ring{
  width:32px; height:32px;
  border:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  transition:opacity .3s, width .28s var(--ease), height .28s var(--ease), border-color .28s, background .28s;
}
body.cur-on .cur, body.cur-on .cur-ring{ opacity:1; }
body.cur-hot .cur-ring{
  width:56px; height:56px;
  border-color:color-mix(in srgb, var(--ink) 60%, transparent);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
@media (hover:none),(pointer:coarse){ .cur,.cur-ring{ display:none; } }

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  border-bottom:1px solid transparent;
}
/* Kaydırınca buzlu cam: hero'nun üstünde şeffaf, sonra koyu dolgu */
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:16px var(--gut);
  display:flex; align-items:center; gap:28px;
  transition:padding .35s var(--ease);
}
.nav.is-stuck .nav__inner{ padding-block:11px; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand__mark{ width:22px; transition:transform .5s var(--ease); }
/* Logonun renkleri: sol kol turkuaz, sağ kol mor, gövde metin rengi */
.bm-l{ stroke:var(--logo-l); }
.bm-r{ stroke:var(--logo-r); }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.08); }
.brand__txt{
  font-family:var(--ff-disp); font-weight:var(--w-btn);
  font-size:15px; letter-spacing:.16em;
}
.brand__txt em{ font-style:normal; color:var(--ink-3); font-weight:500; }

.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{
  position:relative;
  padding:8px 18px; border-radius:var(--r-pill);
  font-size:15px; font-weight:400; color:var(--ink-2);
  transition:color .25s, background .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:18px; right:18px; bottom:3px;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }
.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__right{ display:flex; align-items:center; gap:12px; }

.nav__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:transparent;
}
.nav__progress i{
  display:block; height:100%; width:0%;
  background:var(--grad);
}

/* ── DİL DEĞİŞTİRİCİ ──────────────────────────────────────── */
.lang{
  display:inline-flex; align-items:center; gap:1px;
  padding:3px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
}
.lang__opt{
  padding:5px 12px; border-radius:var(--r-pill);
  font-size:11px; font-weight:var(--w-btn); letter-spacing:.08em;
  color:var(--ink-3);
  transition:color .25s, background .25s;
}
.lang__opt:hover{ color:var(--ink); }
.lang__opt.is-on{ color:var(--bg); background:var(--ink); }
.lang--mob{ align-self:flex-start; margin-bottom:10px; }

.burger{ display:none; position:relative; width:40px; height:40px; }
.burger span{
  position:absolute; left:50%; top:50%;
  width:19px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease);
}
.burger span:first-child{ transform:translate(-50%,-50%) translateY(-3.5px); }
.burger span:last-child{  transform:translate(-50%,-50%) translateY(3.5px); }
.burger.is-open span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.burger.is-open span:last-child{  transform:translate(-50%,-50%) rotate(-45deg); }

/* ── MOBİL MENÜ ───────────────────────────────────────────── */
.mnav{
  position:fixed; inset:0; z-index:590;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gut);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.mnav.is-open{ opacity:1; visibility:visible; }
.mnav__links{ display:grid; gap:6px; }
.mnav__links a{
  font-family:var(--ff-disp); font-weight:var(--w-head);
  font-size:clamp(22px,6.2vw,30px); letter-spacing:var(--track-head);
  padding:6px 0;
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s;
  transition-delay:calc(var(--i) * 45ms);
}
.mnav.is-open .mnav__links a{ opacity:1; transform:none; }
.mnav__links a:active{ color:var(--ink-2); }
.mnav__foot{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; color:var(--ink-3);
}

/* ── BUTONLAR ─────────────────────────────────────────────── */
/* Hap şeklinde kontroller. İkincil buton: ivory çerçeve, dolgusuz.
   Birincil buton sayfanın tek kromatik notası — kobalt dolgu, beyaz yazı. */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px; border-radius:var(--r-pill);
  font-family:var(--ff-body); font-size:16px; font-weight:var(--w-btn);
  letter-spacing:.005em; white-space:nowrap;
  border:1px solid var(--ink);
  color:var(--ink); background:transparent;
  transition:background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }

.btn--ghost{ border-color:var(--line-2); }
.btn--ghost:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:var(--ink); }

.btn--sm{ padding:9px 20px; font-size:14px; }
.btn--full{ width:100%; justify-content:center; padding-block:15px; }

/* ── SECTION ──────────────────────────────────────────────── */
.sec{ padding-block:var(--secpad); position:relative; }
/* Renkli/açık bant yok: her yüzey ya onyx ya grafit. Bölümler boşlukla ayrılır. */
.sec--alt{ background:transparent; }
.sec__head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.sec__title{ font-size:clamp(30px,4.4vw,49px); }
.sec__lead{
  margin-top:20px; max-width:60ch;
  font-size:18px; line-height:1.35; color:var(--ink-2);
}

/* ── LAPTOP GİRİŞİ ────────────────────────────────────────── */
/* Kapalı laptopla açılır; kaydırdıkça kapak açılır, ekranda site belirir, kamera
   ekrana yaklaşır ve gerçek sayfaya geçilir. Ölçüler JS'ten CSS değişkeni olarak gelir
   (--lw kapak genişliği, --lh kapak yüksekliği, --b çerçeve, --sw/--sh ekran,
   --dw/--dd gövde, --dt gövde kalınlığı, --cw/--ch ekrandaki site, --ss ölçek).
   Hareket yalnızca transform ve opacity ile. */
.intro{ position:relative; z-index:5; height:320vh; }
.intro__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:
    radial-gradient(900px 620px at 50% 42%, var(--stage-1) 0%, transparent 70%),
    linear-gradient(180deg, var(--stage-2) 0%, var(--stage-3) 100%);
  perspective:2400px;
  perspective-origin:50% 32%;
}

/* Menteşe noktası: laptop grubu bu 0x0 noktadan döner ve ölçeklenir */
.laptop{
  position:absolute; left:50%; top:0;
  width:0; height:0;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Gövde — menteşeden izleyiciye doğru yatay uzanır */
.base{
  position:absolute;
  left:calc(var(--dw) / -2); top:0;
  width:var(--dw); height:var(--dd);
  transform-origin:50% 0;
  transform:rotateX(90deg);
  transform-style:preserve-3d;
  will-change:opacity;
}
.base__deck{
  position:absolute; inset:0;
  border-radius:0 0 calc(var(--dw) * .022) calc(var(--dw) * .022);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--shell-lite), transparent 60%),
    linear-gradient(180deg, var(--shell-1) 0%, var(--shell-2) 100%);
  box-shadow:inset 0 0 0 1px var(--shell-edge);
}
.base__keys{
  position:absolute; left:9%; right:9%; top:8%; height:50%;
  border-radius:calc(var(--dw) * .008);
  background-color:var(--key-bg);
  background-image:
    linear-gradient(90deg, transparent calc(100% - 2px), var(--key-line) 0),
    linear-gradient(0deg,  transparent calc(100% - 2px), var(--key-line) 0);
  background-size:calc(100% / 14) calc(100% / 6);
  box-shadow:0 0 0 3px var(--key-line);
}
.base__pad{
  position:absolute; left:33%; right:33%; top:64%; bottom:8%;
  border-radius:calc(var(--dw) * .01);
  background:linear-gradient(180deg, var(--shell-3), var(--shell-2));
  box-shadow:inset 0 0 0 1px var(--shell-edge);
}
/* Ön dudak — gövdenin izleyiciye bakan ince kenarı */
.base__lip{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--dt);
  transform-origin:50% 100%;
  transform:rotateX(90deg);
  background:linear-gradient(180deg, var(--shell-2), var(--shell-4));
  border-radius:0 0 calc(var(--dw) * .02) calc(var(--dw) * .02);
}

/* Kapak — alt kenarından (menteşe) döner */
.lid{
  position:absolute;
  left:calc(var(--lw) / -2); top:calc(var(--lh) * -1);
  width:var(--lw); height:var(--lh);
  transform-origin:50% 100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.lid__face{
  position:absolute; inset:0;
  border-radius:calc(var(--lw) * .024) calc(var(--lw) * .024) calc(var(--lw) * .008) calc(var(--lw) * .008);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* --bezel: yakınlaşmanın sonunda çerçeve erir; dar ekranda ekranın altında şerit kalmasın */
.lid__front{
  background:color-mix(in srgb, var(--bezel-col) calc(var(--bezel, 1) * 100%), transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--shell-edge) calc(var(--bezel, 1) * 100%), transparent);
  transform:translateZ(1px);
}
.lid__cam{
  position:absolute; left:50%; top:calc(var(--b) * .4);
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--shell-3);
  opacity:var(--bezel, 1);
}
.screen{
  position:absolute; left:var(--b); top:var(--b);
  width:var(--sw); height:var(--sh);
  overflow:hidden; border-radius:4px;
  background:var(--screen-bg);
}
.screen__site{
  position:absolute; left:0; top:0;
  width:var(--cw); height:var(--ch);
  transform-origin:0 0;
  transform:scale(var(--ss));
  background:var(--bg);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.screen__glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, var(--screen-glare) 0%, transparent 40%);
  opacity:0;
}
/* Kapağın arkası: kapalıyken görünen alüminyum yüzey */
.lid__back{
  transform:rotateX(180deg) translateZ(1px);
  display:grid; place-items:center;
  background:
    radial-gradient(110% 90% at 28% 18%, var(--shell-lite), transparent 55%),
    linear-gradient(160deg, var(--shell-3) 0%, var(--shell-1) 55%, var(--shell-4) 100%);
  box-shadow:inset 0 0 0 1px var(--shell-edge);
}
.lid__logo{
  width:calc(var(--lw) * .065);
  opacity:.95;
}

/* Zemin gölgesi — 2B, laptopun altında */
.intro__floor{
  position:absolute; left:50%; top:0;
  width:var(--dw); height:calc(var(--dd) * .5);
  margin-left:calc(var(--dw) / -2);
  background:radial-gradient(closest-side, var(--floor), transparent);
  filter:blur(8px);
  will-change:transform, opacity;
}

/* Kaydırma işareti — ilk ekranda tek eylem bu, o yüzden belirgin.
   Ortalama transform'suz yapılır ki süzülme animasyonu transform'u serbestçe kullansın. */
.intro__hint{
  position:absolute; left:0; right:0; bottom:clamp(28px, 5vh, 52px);
  width:max-content; margin-inline:auto;
  display:grid; justify-items:center; gap:12px;
  color:var(--ink);
  animation:hintFloat 2.6s var(--ease-io) infinite;
}
.intro__mouse{
  position:relative;
  width:28px; height:44px;
  border:1.75px solid var(--ink);
  border-radius:15px;
}
.intro__mouse i{
  position:absolute; left:50%; top:9px;
  width:4px; height:8px; margin-left:-2px;
  border-radius:2px;
  background:var(--ink);
  animation:wheel 1.8s var(--ease-io) infinite;
}
.intro__label{
  font-size:clamp(13px, 1.05vw, 16px);
  font-weight:var(--w-btn);
  letter-spacing:.3em;
  padding-left:.3em;             /* son harfin izleme boşluğunu dengele, görsel olarak ortalı dursun */
}
@keyframes hintFloat{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(6px); }
}
@keyframes wheel{
  0%  { transform:translateY(0);    opacity:0; }
  20% { opacity:1; }
  70% { transform:translateY(12px); opacity:0; }
  100%{ transform:translateY(12px); opacity:0; }
}

/* Ekrandaki site kopyası: canlı sayfanın hero'su, animasyonları bitmiş hâliyle */
.screen__site .nav{ position:absolute; }
.screen__site .hero{ min-height:var(--ch); }
.screen__site .hero__scroll{ display:none; }
.screen__site [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
.screen__site .hero__title .w{ transform:none !important; transition:none !important; }

/* Gerçek hero girişin son ekranının altına oturur; sahne sönünce aynı yerde belirir */
.intro + .hero{ margin-top:-100vh; margin-top:-100svh; }

/* Giriş sürerken gerçek menü gizli — ekrandaki kopyası görünüyor */
.nav{ transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s, box-shadow .35s, opacity .4s var(--ease); }
body.intro-on > .nav{ opacity:0; pointer-events:none; }   /* yalnızca gerçek menü; ekrandaki kopya görünür kalır */

/* Hareket azaltma tercihinde giriş hiç gösterilmez */
.no-intro .intro{ display:none; }
.no-intro .intro + .hero{ margin-top:0; }

@media (max-width:760px){
  .intro{ height:240vh; }
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(130px,17vh,180px);
  padding-bottom:clamp(70px,9vw,110px);
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
/* Metin ortada, görseller çevresinde: galeri duvarına iğnelenmiş karolar */
.hero__stack{
  position:relative; z-index:2;
  display:grid; justify-items:center; text-align:center;
  gap:26px;
}
.hero__eyebrow{
  font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
}
.hero__copy{ display:grid; justify-items:center; max-width:min(660px, 82vw); }

/* Karolar: köşelere dağılır, hafif eğimli; dar ekranda gizlenir */
.hero__tiles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.tile{
  position:absolute; margin:0;
  border-radius:var(--r-img); overflow:hidden;
  background:var(--surface);
  transform:rotate(var(--rot, 0deg));
  animation:tileIn .9s var(--ease) backwards;
  animation-delay:calc(.25s + var(--i) * .09s);
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile--dia{ display:grid; place-items:center; border:1px solid var(--line); padding:14px; }
.tile--dia svg{
  width:100%; height:auto; fill:none; stroke:var(--ink-2);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.tile--dia .pf, .tile--dia .af{ fill:var(--ink-2); stroke:none; }
@keyframes tileIn{ from{ opacity:0; transform:rotate(var(--rot,0deg)) translateY(18px) scale(.94); } }

/* Yedi karo, yedi yuva — saat yönünde sol üstten başlar */
.tile:nth-child(1){ left:4%;   top:16%;  width:132px; height:132px; --rot:-5deg; }
.tile:nth-child(2){ left:13%;  top:53%;  width:150px; height:96px;  --rot:4deg; }
.tile:nth-child(3){ left:2%;   top:76%;  width:112px; height:112px; --rot:6deg; }
.tile:nth-child(4){ right:12%; top:13%;  width:150px; height:96px;  --rot:5deg; }
.tile:nth-child(5){ right:3%;  top:44%;  width:128px; height:128px; --rot:-6deg; }
.tile:nth-child(6){ right:7%;  top:78%;  width:150px; height:96px;  --rot:-3deg; }
.tile:nth-child(7){ left:46%;  top:4%;   width:140px; height:90px;  --rot:2deg; }

/* Yörünge: konum ve görünürlük her karede JS'ten gelir. Yukarıdaki sabit yuvalar
   JS çalışmazsa ya da hareket azaltma tercihinde kullanılan düzendir. */
.hero__tiles.is-orbit .tile{
  left:0; top:0; right:auto; bottom:auto;
  animation:none; opacity:0;
  will-change:transform, opacity;
}

.status{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:12px; letter-spacing:.01em; color:var(--ink-2); margin-bottom:26px;
}
.status__dot{
  width:6px; height:6px; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--ink) 45%, transparent);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

.hero__title{
  font-size:clamp(38px,6.4vw,74px);
  font-weight:var(--w-head); letter-spacing:var(--track-display); line-height:var(--lh-display);
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .w{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
}
.hero__title .w:nth-child(2){ transition-delay:.07s; }
.hero__title.is-in .w{ transform:none; }

.hero__lead{
  margin-top:22px; max-width:min(520px, 90vw);
  font-size:18px; line-height:1.5; font-weight:var(--w-lead); color:var(--ink-2);
}
.hero__cta{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px;
  font-size:9.5px; color:var(--ink-3);
}
.hero__scroll i{
  width:1px; height:38px;
  background:linear-gradient(180deg,var(--ink),transparent);
  animation:scrollLine 2.2s var(--ease-io) infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  46%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ── ŞERİT ────────────────────────────────────────────────── */
.strip{
  background:var(--bg-alt);
  padding-block:26px; overflow:hidden;
}
.marquee{
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:38px; width:max-content;
  animation:slide 46s linear infinite;
}
.strip:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
/* Kopya set, döngünün dikişsiz kapanması için — düzene katılsın diye contents */
.marquee__dup{ display:contents; }
.chip{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:12px; font-weight:var(--w-btn);
  letter-spacing:.12em; color:var(--ink-3);
  transition:color .3s;
}
/* Logo sprite — ekranda görünmez, yalnızca <use> kaynağı */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.chip svg{
  width:17px; height:17px; flex-shrink:0;
  fill:currentColor; opacity:.7;
  transition:opacity .3s, transform .3s var(--ease);
}
.chip:hover{ color:var(--ink); }
.chip:hover svg{ opacity:1; transform:translateY(-1px); }

/* ── KARTLAR ──────────────────────────────────────────────── */
/* Kartlar çerçevesiz ve gölgesiz: onyx zeminden bir kademe açılan grafit yüzey
   ayrımı tek başına kuruyor. Aralarındaki boşluk 12px'lik öğe ritmiyle aynı. */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap);
}
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--card-pad);
  background:var(--surface);
  border-radius:var(--r);
}
/* Görsel kartın üstünü baştan başa doldurur; yazı altında küçük kalır */
.card__art{
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 20px;
  aspect-ratio:4 / 3;
  display:grid; place-items:center;
  border-radius:var(--r) var(--r) 0 0;
  background:var(--bg);
  overflow:hidden;
}
.card__art svg{
  width:72%; height:auto; overflow:visible;
  fill:none; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.card__art .p{ stroke:var(--ink); }
.card__art .a{ stroke:var(--ink-3); }
.card__art .pf{ fill:var(--ink); stroke:none; }
.card__art .af{ fill:var(--ink-3); stroke:none; }
.card__art .dash{ stroke-dasharray:3 3.5; }
.card:hover .card__art .dash{ animation:dashMove .9s linear infinite; }
.card__art--img img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes dashMove{ to{ stroke-dashoffset:-13; } }
.card__txt{ display:grid; gap:10px; }
.card__txt h3{ font-size:21px; text-align:left; }
.card__txt p{ font-size:16px; color:var(--ink-2); margin:0; }

/* Etiketler ayrı rozetler değil, tek satır künye — arayüz sessiz kalsın */
.card__tags{ font-size:14px; color:var(--ink-3); }

/* ── ÜRÜN KARTLARI ────────────────────────────────────────── */
/* Görsel kartı baştan başa doldurur, yazı altında sessiz kalır. */
.prods{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap); }
.prod{
  display:flex; flex-direction:column;
  padding:var(--card-pad);
  background:var(--surface);
  border-radius:var(--r);
}
.prod__art{
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 22px;
  aspect-ratio:4 / 3; overflow:hidden;
  border-radius:var(--r) var(--r) 0 0;
  background:var(--bg);
  display:grid; place-items:center;
}
.prod__art img, .prod__art video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Uygulama simgesi kırpılmaz: ortada, kendi oranında durur */
.prod__art .prod__icon{
  width:min(58%, 190px); height:auto; aspect-ratio:1;
  border-radius:22px;
}
.prod__txt{ display:grid; gap:10px; }
.prod__pill{ font-size:12px; color:var(--ink-3); }
.prod__name{ font-size:26px; }
.prod__body{ font-size:16px; color:var(--ink-2); }
.prod__chips{ font-size:14px; color:var(--ink-3); }
.prod__kpis{
  display:flex; flex-wrap:wrap; gap:28px; margin-top:6px;
  padding-top:16px; border-top:1px solid var(--line);
}
.prod__kpis b{ display:block; font-family:var(--ff-disp); font-size:26px; font-weight:var(--w-head); color:var(--ink); }
.prod__kpis span{ font-size:14px; color:var(--ink-3); }
.prod__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:18px; }

/* Bölümde tek ürün varsa ızgaranın yarısında yalnız kalmasın:
   tam genişliğe yayılır, görsel solda, yazı sağda */
.prods > .prod:only-child{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap:calc(var(--card-pad) * 1.5); align-items:center;
}
.prods > .prod:only-child .prod__art{
  margin:calc(var(--card-pad) * -1) 0 calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
  border-radius:var(--r) 0 0 var(--r);
  align-self:stretch; aspect-ratio:auto; min-height:380px;
}
.prods > .prod:only-child .prod__txt{ padding-block:12px; }
.prods > .prod:only-child .prod__links{ margin-top:0; }
@media (max-width:860px){
  .prods > .prod:only-child{ display:flex; }
  .prods > .prod:only-child .prod__art{
    margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 22px;
    border-radius:var(--r) var(--r) 0 0; aspect-ratio:4 / 3; min-height:0;
  }
}

.prodgrp__t{
  font-size:12px; color:var(--ink-3); font-weight:var(--w-btn);
  padding-bottom:14px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.prodgrp + .prodgrp{ margin-top:clamp(30px,3.4vw,46px); }

/* ── KÜÇÜK KARTLAR ────────────────────────────────────────── */
.works{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap);
  margin-top:var(--grid-gap);
}
.work{
  position:relative;
  padding:var(--card-pad);
  background:var(--surface);
  border-radius:var(--r);
}
.work__tag{ font-size:12px; color:var(--ink-3); }
.work h3{ font-size:21px; margin:14px 0 10px; }
.work p{ font-size:16px; color:var(--ink-2); }

/* ── SÜREÇ ────────────────────────────────────────────────── */
.steps{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-top:44px;
}
.steps__line{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--line);
}
.steps__line i{
  display:block; height:100%; width:0%;
  background:var(--grad);
  transition:width .25s linear;
}
.step{ position:relative; padding-right:12px; }
.step::before{
  content:''; position:absolute; top:-49px; left:0;
  width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--line-2);
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.step.is-lit::before{
  border-color:var(--ink); background:var(--ink);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--ink) 10%, transparent);
}
.step__n{ font-size:12px; color:var(--ink-3); }
.step h3{ font-size:21px; margin:12px 0 10px; }
.step p{ font-size:16px; color:var(--ink-2); }
.step__time{
  display:inline-block; margin-top:16px;
  font-size:12px; color:var(--ink-3);
  padding:4px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line);
}

/* ── TEKNOLOJİ ────────────────────────────────────────────── */
.tech{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,80px); align-items:start;
}
.tech__copy .btn{ margin-top:30px; }
.tech__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap);
}
.tstack{
  padding:var(--card-pad);
  background:var(--surface);
  border-radius:var(--r);
}
.tstack h3{ font-size:12px; color:var(--ink-3); margin-bottom:22px; font-weight:var(--w-btn); letter-spacing:var(--track-label); }
/* Hücre genişse iki sütun, darsa tek sütun — asla 3 değil (4 öğe 3+1 bölünmesin) */
.tstack ul{
  display:grid; gap:12px 16px;
  grid-template-columns:repeat(auto-fill, minmax(max(160px, calc(50% - 8px)), 1fr));
}
.tstack li{
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:400; line-height:1.25; color:var(--ink);
}
/* Logo kuyusu: logolar tek renk, kavramlar için çizilmiş simge, bilinmeyende baş harf */
.tstack__ico{
  flex-shrink:0; width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  transition:color .25s, background .25s;
}
.tstack__ico svg{ width:17px; height:17px; fill:currentColor; }
.tstack__ico b{ font-size:13px; font-weight:var(--w-btn); text-transform:uppercase; }
.tstack li:hover .tstack__ico{ color:var(--ink); background:color-mix(in srgb, var(--ink) 12%, transparent); }

/* ── MODELLER ─────────────────────────────────────────────── */
.models{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap);
}
.model{
  position:relative;
  padding:var(--card-pad);
  background:var(--surface);
  border-radius:var(--r);
}
/* Öne çıkan model: parlak bir yüzey değil, bir kademe daha açık obsidiyen */
.model--hi{ background:var(--surface-2); }
.model--hi .model__n{ background:color-mix(in srgb, var(--ink) 12%, transparent); color:var(--ink); }
.model__n{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:var(--r-pill);
  color:var(--ink-2); background:color-mix(in srgb, var(--ink) 7%, transparent);
  font-size:14px; margin-bottom:20px;
}
.model__badge{
  position:absolute; top:28px; right:28px;
  font-size:11px; color:var(--ink-2);
  padding:4px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line);
}
.model h3{ font-size:21px; margin-bottom:11px; }
.model p{ font-size:16px; color:var(--ink-2); }
.model__list{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:9px; }
.model__list li{
  position:relative; padding-left:20px;
  font-size:14px; color:var(--ink-2);
}
.model__list li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.55;
}

/* ── İLETİŞİM ─────────────────────────────────────────────── */
.sec--contact{ border-top:1px solid var(--line); }
.contact{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px); align-items:start;
}
.contact__list{ margin-top:38px; display:grid; gap:22px; }
.contact__list li{ display:grid; gap:4px; }
.contact__list span.mono{ font-size:12px; color:var(--ink-3); }
.contact__list a{
  font-size:17px; color:var(--ink); width:fit-content;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.contact__list a:hover{ color:var(--ink); border-bottom-color:var(--line-2); }
.contact__plain{ font-size:16px; color:var(--ink-2); }

.form{
  padding:var(--card-pad);
  border-radius:var(--r-lg);
  background:var(--surface);
  display:grid; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:8px; }
.field__lbl{ font-size:12px; letter-spacing:.09em; color:var(--ink-3); }
.field input, .field select, .field textarea{
  width:100%; padding:14px 20px;
  font-family:var(--ff-body); font-size:16px; color:var(--ink);
  background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  transition:border-color .3s, background .3s, box-shadow .3s;
  resize:vertical;
}
.field textarea{ min-height:120px; border-radius:20px; }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C3CC' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px;
  padding-right:40px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--surface-2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.field input.is-bad, .field textarea.is-bad{ border-color:var(--bad); }
/* Bal küpü alanı: ekran okuyucudan ve gözden uzak, ama DOM'da duruyor */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form button[type=submit]:disabled{ opacity:.6; cursor:progress; }
.form__note{ font-size:12px; letter-spacing:.01em; color:var(--ink-3); text-align:center; }
.form__note.is-ok{ color:var(--ink); }
.form__note.is-bad{ color:var(--bad); }

/* ── WHATSAPP ─────────────────────────────────────────────── */
/* Sabit buton: sayfanın her yerinden tek dokunuşla sohbet. Yüzen tek nesne olduğu
   için gölgesi var; laptop girişi sürerken gizli, sahneyi bozmasın. */
.wa-float{
  position:fixed; right:clamp(16px, 2.2vw, 28px); bottom:clamp(16px, 2.2vw, 28px);
  z-index:550;
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:50%;                    /* WhatsApp'ın kendi marka şekli */
  background:var(--surface-2);
  border:1px solid var(--line-2);
  transition:background .2s, opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.wa-float:hover{ background:color-mix(in srgb, var(--ink) 12%, var(--surface-2)); }
.wa-float__ico{ width:29px; height:29px; fill:var(--ink); }
body.intro-on .wa-float{ opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; }

/* İletişim listesindeki satır */
.contact__wa{ display:inline-flex; align-items:center; gap:9px; }
.contact__wa-ico{ width:18px; height:18px; flex-shrink:0; fill:var(--ink-3); }

@media (max-width:640px){
  .wa-float{ width:54px; height:54px; }
  .wa-float__ico{ width:29px; height:29px; }
}

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); background:var(--bg); }
.foot__inner{
  padding-block:clamp(46px,6vw,72px);
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
}
.foot__brand p{
  margin-top:16px; max-width:34ch;
  font-size:14px; color:var(--ink-3); letter-spacing:.005em;
}
.foot__col{ display:grid; gap:11px; align-content:start; }
.foot__col h3{
  font-size:12px; color:var(--ink-3);
  font-weight:var(--w-btn); letter-spacing:var(--track-label); margin-bottom:6px;
}
.foot__col a{
  font-size:14px; color:var(--ink-2); width:fit-content;
  transition:color .25s, transform .25s var(--ease);
}
.foot__col a:hover{ color:var(--ink); transform:translateX(3px); }
.foot__plain{ font-size:14px; color:var(--ink-3); }
.foot__bar{
  padding-block:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px;
  font-size:12px; letter-spacing:.01em; color:var(--ink-3);
}

/* ── REVEAL ───────────────────────────────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .cards, .works, .models{ grid-template-columns:repeat(2,1fr); }
  /* İki satıra bölününce üstteki yatay çizgi ikinci satırı işaretleyemez:
     her adım kendi dikey çizgisini ve noktasını taşır */
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px 20px; padding-top:0; }
  .steps__line{ display:none; }
  .step{ padding-left:20px; border-left:1px solid var(--line); }
  .step::before{ top:4px; left:-5.5px; }
  .step.is-lit{ border-left-color:var(--line-2); }
  .tech{ grid-template-columns:1fr; }
  .foot__inner{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:1080px){
  .hero__tiles .tile:nth-child(7){ display:none; }
}

@media (max-width:860px){
  .hero__tiles{ display:none; }          /* kolaj yalnızca geniş ekranda */
  .hero__copy{ max-width:none; }
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__right .btn--sm{ display:none; }
  .nav__right .lang{ display:none; }   /* mobil menü içinde gösteriliyor */
  .hero{ min-height:auto; padding-top:120px; }
  .hero__scroll{ display:none; }
  .contact{ grid-template-columns:1fr; }
  .prods{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .cards, .works, .models, .tech__grid, .prods{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .form__row{ grid-template-columns:1fr; }
  .prod__kpis{ gap:22px; }
  .foot__inner{ grid-template-columns:1fr; }
  .foot__bar{ flex-direction:column; gap:6px; }
}

/* ── COSMOS'A ÖZEL ────────────────────────────────────────── */
/* Token'larla anlatılamayan yapısal farklar: yüzen hap menü, kâğıt beyazı
   kartlar üstünde ince mürekkep çizgisi ve dolgulu/çerçeveli buton çifti. */
[data-theme="cosmos"] .nav__inner{
  max-width:calc(var(--maxw) - 40px);
  margin-top:14px;
  padding:10px 14px 10px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
}
[data-theme="cosmos"] .nav.is-stuck{
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
[data-theme="cosmos"] .nav.is-stuck .nav__inner{
  padding-block:10px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
[data-theme="cosmos"] .nav__progress{ display:none; }   /* düz sistem: ilerleme çubuğu yok */

/* Butonlar ikili okunur: dolgulu mürekkep + kâğıt beyazı çerçeveli, aynı ölçüde */
[data-theme="cosmos"] .btn{ padding:14px 24px; border-color:var(--line-2); background:var(--surface); }
[data-theme="cosmos"] .btn:hover{ background:var(--bg); border-color:var(--ink); }
[data-theme="cosmos"] .btn--primary,
[data-theme="cosmos"] .btn--primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
[data-theme="cosmos"] .btn--ghost{ background:var(--surface); }

/* Kartlar: kâğıt beyazı yüzey, ince mürekkep çizgisi (krem zeminde ayrım için) */
[data-theme="cosmos"] .card,
[data-theme="cosmos"] .prod,
[data-theme="cosmos"] .work,
[data-theme="cosmos"] .model,
[data-theme="cosmos"] .tstack,
[data-theme="cosmos"] .form{ border:1px solid var(--line); }
[data-theme="cosmos"] .model--hi{ background:var(--ink); color:var(--bg); }
[data-theme="cosmos"] .model--hi p,
[data-theme="cosmos"] .model--hi .model__list li{ color:color-mix(in srgb, var(--bg) 78%, transparent); }
[data-theme="cosmos"] .model--hi .model__n{ background:color-mix(in srgb, var(--bg) 16%, transparent); color:var(--bg); }
[data-theme="cosmos"] .model--hi .model__badge{ border-color:color-mix(in srgb, var(--bg) 30%, transparent); color:var(--bg); }
[data-theme="cosmos"] .model--hi .model__list{ border-top-color:color-mix(in srgb, var(--bg) 20%, transparent); }
[data-theme="cosmos"] .model--hi .model__list li::before{ background:var(--bg); }

/* Etiket/rozet şeritleri de aynı imza yarıçapı kullanır */
[data-theme="cosmos"] .step__time,
[data-theme="cosmos"] .model__badge,
[data-theme="cosmos"] .status{ border-radius:var(--r-img); }
[data-theme="cosmos"] .tstack__ico,
[data-theme="cosmos"] .model__n{ border-radius:var(--r-img); }

/* Serif gövde küçük puntoda daha az sıkışsın */
[data-theme="cosmos"] body{ letter-spacing:-.011em; }
[data-theme="cosmos"] .mono{ text-transform:uppercase; }
[data-theme="cosmos"] .bg-grid{ opacity:.5; }
[data-theme="cosmos"] .bg-canvas{ opacity:.14; }   /* açık zeminde ağ daha sessiz */
[data-theme="cosmos"] .strip{ border-block:1px solid var(--line); }
[data-theme="cosmos"] .lang__opt.is-on{ background:var(--ink); color:var(--bg); }
[data-theme="cosmos"] .wa-float{ background:var(--surface); border-color:var(--line-2); }
[data-theme="cosmos"] .wa-float__ico{ fill:var(--ink); }

/* ── ERİŞİLEBİLİRLİK ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .w{ transform:none !important; }
  .bg-canvas{ display:none; }
}