/* Nymera — nymera.io
   Renkler ve tipografi: docs/Marka-Kilavuzu.pdf (v0.2). Elle renk yazma; token kullan.
   Harici font isteği YOK — marka kılavuzu web'de system font stack'e izin veriyor,
   gizlilik ilkemiz gereği üçüncü taraf font sunucusuna istek atmıyoruz. */

/* ---------- tokens: dark-first (Nyx -> Hemera) ---------- */
:root{
  --nyx:#06061A; --indigo:#1E1B4B; --ultra:#4338CA; --aurora:#7C3AED;
  --dawn:#EC4899; --sun:#F59E0B; --hemera:#FEF3C7;

  --bg:#06061A;
  --bg-2:#0A0A20;
  --panel:#16162E;
  --ink:#F5F5F7;
  --muted:#9C9CB0;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --chip:rgba(255,255,255,.05);
  --shadow:0 1px 0 rgba(255,255,255,.04), 0 18px 50px -30px rgba(0,0,0,.9);

  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --page:min(1120px,100% - 3rem);
  --page-narrow:min(680px,100% - 3rem);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FFFFFF; --bg-2:#FBFBFD; --panel:#FFFFFF;
    --ink:#1D1D1F; --muted:#6E6E73;
    --line:#E5E5EA; --line-soft:#EFEFF3; --chip:#F4F4F7;
    --shadow:0 1px 0 rgba(0,0,0,.02), 0 20px 44px -32px rgba(30,27,75,.35);
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#FBFBFD; --panel:#FFFFFF;
  --ink:#1D1D1F; --muted:#6E6E73;
  --line:#E5E5EA; --line-soft:#EFEFF3; --chip:#F4F4F7;
  --shadow:0 1px 0 rgba(0,0,0,.02), 0 20px 44px -32px rgba(30,27,75,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}
p{margin:0}
img,svg{max-width:100%}

/* ---------- kaydırma ufku ---------- */
.progress{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%; z-index:60;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,#1E1B4B,#4338CA,#7C3AED,#EC4899,#F59E0B,#FEF3C7);
}

/* ---------- başlık ---------- */
.bar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.bar-in{
  width:var(--page); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem; height:64px;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto}
.brand svg{display:block}
.nav{display:flex; align-items:center; gap:1.5rem}
.nav a{font-size:.875rem; color:var(--muted); text-decoration:none; transition:color .18s ease}
.nav a:hover{color:var(--ink)}
.lang{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:.32rem .55rem; border-radius:999px; cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.lang:hover{color:var(--ink); border-color:var(--muted)}
.lang b{color:var(--ink); font-weight:600}

/* ---------- hero: her temada gece ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:#06061A; color:#F5F5F7;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero::before,.hero::after{content:""; position:absolute; inset:0; z-index:-1}
.hero::before{
  background:
    radial-gradient(120% 78% at 18% 112%, rgba(124,58,237,.55), transparent 62%),
    radial-gradient(95% 70% at 78% 118%, rgba(236,72,153,.42), transparent 60%),
    radial-gradient(70% 55% at 96% 126%, rgba(245,158,11,.34), transparent 58%);
  animation:drift 26s ease-in-out infinite alternate;
}
.hero::after{
  /* ay: gece tarafında küçük ve keskin bir nokta, çevresinde ince hâle */
  background:radial-gradient(circle at 84% 19%,
    rgba(254,243,199,.92) 0 .32%,
    rgba(254,243,199,.20) .8%,
    transparent 2.4%);
}
@keyframes drift{
  from{transform:translate3d(-2.5%,1.5%,0) scale(1.04)}
  to{transform:translate3d(2.5%,-1%,0) scale(1.1)}
}
.hero-in{
  width:var(--page); margin-inline:auto;
  padding:clamp(4.5rem,13vw,9rem) 0 clamp(4rem,10vw,7rem);
}
.hero .eyebrow{color:rgba(245,245,247,.55)}
.hero-sub{
  margin-top:1.5rem; max-width:33ch; font-size:clamp(1.0625rem,2.2vw,1.375rem);
  line-height:1.45; letter-spacing:-.01em; color:rgba(245,245,247,.72);
}
.horizon-line{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,#06061A,#1E1B4B 18%,#4338CA 38%,#7C3AED 55%,#EC4899 72%,#F59E0B 88%,#FEF3C7);
  box-shadow:0 0 24px 2px rgba(124,58,237,.45);
}
h1{font-size:clamp(3rem,9vw,5.75rem); line-height:1; letter-spacing:-.04em; font-weight:700; margin:1.25rem 0 0}

.eyebrow{
  font-family:var(--mono); font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted);
}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.25rem; border-radius:999px; text-decoration:none;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; transition:transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#EC4899,#F59E0B); color:#1D1D1F}
.btn-ghost{border-color:rgba(255,255,255,.22); color:#F5F5F7}
.btn-ghost:hover{border-color:rgba(255,255,255,.5)}

/* ---------- bölümler ---------- */
section{width:var(--page); margin-inline:auto; padding:clamp(4rem,8vw,6.5rem) 0}
.head{display:flex; flex-direction:column; gap:.9rem; max-width:52ch}
h2{font-size:clamp(1.875rem,4.4vw,3rem); line-height:1.05; letter-spacing:-.03em; font-weight:700}
.lede{color:var(--muted); font-size:1.0625rem; max-width:60ch}
.rule{height:2px; width:var(--page); margin-inline:auto; border-radius:2px}
.rule-1{background:linear-gradient(90deg,#1E1B4B,#4338CA 60%,rgba(67,56,202,0))}
.rule-2{background:linear-gradient(90deg,#4338CA,#7C3AED 40%,#EC4899 80%,rgba(236,72,153,0))}
.rule-3{background:linear-gradient(90deg,#EC4899,#F59E0B 55%,rgba(245,158,11,0))}

/* ---------- uygulama kartları ---------- */
.apps{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:2.75rem}
.card{
  position:relative; display:flex; flex-direction:column; gap:1rem;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:1.75rem 1.5rem 1.5rem; box-shadow:var(--shadow); text-decoration:none;
  transition:transform .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--aurora) 45%, var(--line))}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.glyph{width:48px; height:48px; border-radius:13px; display:block; flex:none}
.pill{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line); background:var(--chip); color:var(--muted);
}
.pill-soon{border-color:color-mix(in srgb,var(--aurora) 55%, transparent); color:color-mix(in srgb,var(--aurora) 82%, var(--ink))}
.pill-dev{border-color:color-mix(in srgb,var(--dawn) 50%, transparent); color:color-mix(in srgb,var(--dawn) 78%, var(--ink))}
.card h3{font-size:1.375rem; letter-spacing:-.02em; font-weight:700}
.card p{color:var(--muted); font-size:.9375rem}
.plats{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.5rem}
.plat{font-family:var(--mono); font-size:.6875rem; color:var(--muted); background:var(--chip); border-radius:6px; padding:.2rem .45rem}
.card-ghost{background:transparent; border-style:dashed; box-shadow:none; justify-content:center; align-items:flex-start; min-height:200px}
.card-ghost:hover{transform:none}

/* ---------- hikaye ---------- */
.story{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center}
.story p{color:var(--muted); margin-top:1.25rem; max-width:56ch}
.pull{
  font-family:var(--display); font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.3;
  letter-spacing:-.02em; color:var(--ink); margin-top:1.75rem;
  padding-left:1.25rem; border-left:2px solid var(--aurora);
}
.orb{width:100%; max-width:340px; margin-inline:auto; display:block}

/* ---------- ilkeler ---------- */
.grid3{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2.75rem}
.tenet{border-top:1px solid var(--line); padding-top:1.25rem; display:flex; flex-direction:column; gap:.6rem}
.tenet h3{font-size:1.0625rem; letter-spacing:-.01em; font-weight:600}
.tenet p{color:var(--muted); font-size:.9375rem}
.tenet .dot{width:8px; height:8px; border-radius:50%}

/* ---------- iletişim ---------- */
.contact{
  background:var(--bg-2); border:1px solid var(--line); border-radius:24px;
  padding:clamp(2rem,5vw,3.25rem); display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.contact h2{font-size:clamp(1.5rem,3.4vw,2.25rem)}
.mail{
  font-family:var(--mono); font-size:1rem; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--dawn) 60%, transparent); padding-bottom:2px;
}

/* ---------- metin sayfaları (gizlilik / şartlar / destek) ---------- */
.doc{width:var(--page-narrow); margin-inline:auto; padding:clamp(3rem,7vw,5rem) 0 4rem}
.doc h1{font-size:clamp(2rem,5vw,3rem); margin:.75rem 0 0}
.doc h2{font-size:1.25rem; letter-spacing:-.02em; margin-top:2.75rem}
.doc h3{font-size:1rem; font-weight:600; margin-top:1.75rem}
.doc p,.doc li{color:var(--muted); font-size:.9375rem; line-height:1.65}
.doc p{margin-top:.9rem}
.doc ul{margin:.9rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.5rem}
.doc a{color:var(--ink)}
.doc .updated{font-family:var(--mono); font-size:.75rem; color:var(--muted); margin-top:1.25rem}
.doc .note{
  border:1px dashed color-mix(in srgb,var(--sun) 50%, var(--line));
  border-radius:14px; padding:1rem 1.15rem; margin-top:1.5rem;
  background:color-mix(in srgb,var(--sun) 7%, transparent);
}
.doc .note p{color:var(--ink)}

/* ---------- alt bilgi ---------- */
footer{border-top:1px solid var(--line-soft); margin-top:2rem}
.foot-in{
  width:var(--page); margin-inline:auto; padding:2rem 0 3rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
  font-size:.8125rem; color:var(--muted);
}
.foot-links{display:flex; flex-wrap:wrap; gap:1.25rem; margin-left:auto}
.foot-links a{text-decoration:none; transition:color .18s ease}
.foot-links a:hover{color:var(--ink)}

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

@media (max-width:820px){
  .story{grid-template-columns:1fr}
  .nav a[data-opt]{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- küçük yardımcılar (satır içi style yok — CSP 'self' ile uyumlu) ---------- */
.mt-s{margin-top:.75rem}
.mt-m{margin-top:.9rem}
.dot-ultra{background:var(--ultra)}
.dot-aurora{background:var(--aurora)}
.dot-dawn{background:var(--dawn)}
.dot-sun{background:var(--sun)}

/* dört kartlık özellik ızgarası: 2x2 (öksüz kart kalmasın) */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}