/* ═══════════════════════════════════════════════════════════════════════════
   QUANTIX X1 // ÇEKİRDEK TASARIM KATMANI — "OBSIDIAN AURORA"
   ─────────────────────────────────────────────────────────────────────────
   Paylaşılan belirteçler (tokens), zemin katmanları (aurora + grain + ızgara),
   gradyan saç-teli kenarlıklar, spotlight kartlar, kaydırma çubuğu, odak
   halkaları ve ortak bileşenler (düşme, hap, rozet, düğme).

   Bu katman üretimdeki quantix-ui.css + quantix-fx.css'in yerini alacak
   düzeyde tasarlanmıştır: hiçbir sayfaya özel kural içermez.

   Renk bilimi değişmedi — yalnızca sunum yükseltildi:
     INK  (metin/kenar/parıltı) : win #00ff9d · be #8b7cff · stop #ff2e63
                                  open #ffb703 · marka #00f3ff
     FILL (dolgu/bar/metre)     : win #00a86e · be #6d5ae0 · stop #d81b4a
                                  open #b8860b · nötr #4a5163
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

/* ═══════════ 1. BELİRTEÇLER ═══════════ */
:root{
  /* Zemin — üç kademe obsidyen */
  --bg0:#05060a;            /* en derin: sayfa zemini */
  --bg1:#0a0c12;            /* kart yüzeyi */
  --bg2:#0e1119;            /* yüzen yüzeyler / sticky çubuklar */

  /* INK katmanı — metin, kenar, parıltı */
  --ink-win:#00ff9d; --ink-be:#8b7cff; --ink-stop:#ff2e63;
  --ink-open:#ffb703; --ink-cy:#00f3ff;

  /* FILL katmanı — dolgular (L bandı doğrulanmış) */
  --fill-win:#00a86e; --fill-be:#6d5ae0; --fill-stop:#d81b4a;
  --fill-open:#b8860b; --fill-neutral:#4a5163;

  /* Metin */
  --txt:#eef1f7; --muted:#99a2b6; --dim:#5d6478;

  /* Çizgiler ve cam */
  --line:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.032);

  /* Marka gradyanları */
  --grad-cta:linear-gradient(135deg,var(--ink-cy),var(--ink-win));
  --grad-word:linear-gradient(92deg,var(--ink-cy) 0%,var(--ink-win) 55%,var(--ink-be) 100%);

  /* Tipografi — 1.25 rampa */
  --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-md:15px;
  --t-lg:18px; --t-xl:24px; --t-2xl:32px; --t-3xl:48px; --t-4xl:clamp(40px,5vw,72px);

  --radius:16px; --radius-sm:11px;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --sans:'Inter',system-ui,'Segoe UI',sans-serif;

  /* Kaldırma (elevation) — üç kademe */
  --e1:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.35);
  --e2:0 1px 0 rgba(255,255,255,.05) inset,0 18px 44px rgba(0,0,0,.5);
  --e3:0 1px 0 rgba(255,255,255,.06) inset,0 34px 80px rgba(0,0,0,.65);

  /* FX sözleşmesi — JS yalnızca bu değişkenleri yazar */
  --mx:50%; --my:50%; --tilt-rx:0deg; --tilt-ry:0deg;
}

/* ═══════════ 2. ZEMİN KATMANLARI ═══════════ */
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg0); color:var(--txt);
  margin:0; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
table,.axis,.tnum{font-feature-settings:'tnum' 1}

/* İnce ızgara — maske ile merkeze hapsolur */
.qx-bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 28%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 28%,#000 0%,transparent 80%);
}

/* Aurora — yavaş nefes alan ışık kütleleri */
.qx-bg-aurora{
  position:fixed; inset:-22%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42rem 42rem at 12% 8%,  rgba(0,243,255,.075), transparent 62%),
    radial-gradient(38rem 38rem at 88% 90%, rgba(255,46,99,.055), transparent 62%),
    radial-gradient(34rem 34rem at 76% 14%, rgba(139,124,255,.06),  transparent 62%),
    radial-gradient(30rem 30rem at 30% 86%, rgba(0,255,157,.04),   transparent 62%);
  animation:qxDrift 36s ease-in-out infinite alternate;
}
@keyframes qxDrift{
  to{transform:translate3d(0,-30px,0) scale(1.06); filter:hue-rotate(14deg)}
}

/* Film grain — bantlanmayı kırar, doku verir. Veri-URI'si harici dosya istemez. */
.qx-bg-grain{
  position:fixed; inset:-100px; z-index:60; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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");
  animation:qxGrain 1.4s steps(4) infinite;
}
@keyframes qxGrain{
  0%{transform:translate(0,0)} 25%{transform:translate(-38px,22px)}
  50%{transform:translate(24px,-30px)} 75%{transform:translate(-16px,-12px)}
  100%{transform:translate(0,0)}
}

/* ═══════════ 3. GRADYAN SAÇ-TELİ KENARLIK + ÜST IŞIK HUZMESİ ═══════════
   border-image yerİne çift arka plan hilesi: kenar, üstte aydınlık, altta
   sönen 1px gradyanla "yukarıdan aydınlatılmış" durur. */
.qx-card{
  position:relative;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:
    linear-gradient(var(--bg1),var(--bg1)) padding-box,
    linear-gradient(165deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 26%,
      rgba(255,255,255,.02) 55%,
      rgba(0,243,255,.14) 100%) border-box;
  box-shadow:var(--e1);
}
/* Kartın tepesinde 1px ışık huzmesi */
.qx-card::before{
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  border-radius:1px; pointer-events:none;
}
/* Fare takipli spotlight — JS yalnızca --mx/--my yazar */
.qx-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  background:radial-gradient(560px circle at var(--mx) var(--my),
              rgba(0,243,255,.065),transparent 44%);
}
.qx-card:hover::after{opacity:1}
.qx-card--flat{box-shadow:none}

/* HUD köşe kesikleri — imza öğe, büyük kartlarda kullanılır */
.qx-hud .hud-tick{position:absolute; width:14px; height:14px; pointer-events:none; opacity:.55}
.qx-hud .hud-tick::before,.qx-hud .hud-tick::after{content:''; position:absolute; background:var(--ink-cy)}
.qx-hud .hud-tick::before{width:100%; height:1px}
.qx-hud .hud-tick::after{width:1px; height:100%}
.hud-tick.tl{top:-1px; left:-1px}   .hud-tick.tl::before{top:0;left:0}  .hud-tick.tl::after{top:0;left:0}
.hud-tick.tr{top:-1px; right:-1px}  .hud-tick.tr::before{top:0;right:0} .hud-tick.tr::after{top:0;right:0}
.hud-tick.bl{bottom:-1px; left:-1px}.hud-tick.bl::before{bottom:0;left:0}.hud-tick.bl::after{bottom:0;left:0}
.hud-tick.br{bottom:-1px; right:-1px}.hud-tick.br::before{bottom:0;right:0}.hud-tick.br::after{bottom:0;right:0}

/* ═══════════ 4. ORTAK BİLEŞENLER ═══════════ */
/* Düşme (pill) — scanline'lı durum kapsülü */
.qx-pill{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:1.2px;
  color:var(--muted); white-space:nowrap; text-transform:uppercase;
}
.qx-pill b{color:var(--txt); font-weight:600; letter-spacing:.6px}
.qx-pill::after{                       /* üstünden geçen tarama çizgisi */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.014) 7px 8px);
}
.qx-led{width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ink-win); box-shadow:0 0 0 0 rgba(0,255,157,.55);
  animation:qxPulse 2.4s infinite}
.qx-led.cy{background:var(--ink-cy)} .qx-led.am{background:var(--ink-open)}
.qx-led.stop{background:var(--ink-stop)}
.qx-led.off{background:var(--fill-neutral); animation:none; box-shadow:none}
@keyframes qxPulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Düğmeler */
.qx-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; padding:12px 22px; border-radius:11px;
  border:0; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-weight:800; font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:#04070b; background:var(--grad-cta);
  box-shadow:0 8px 26px rgba(0,243,255,.24);
  transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s,box-shadow .18s;
}
.qx-btn:hover{transform:translateY(-1px); filter:brightness(1.09);
  box-shadow:0 12px 34px rgba(0,243,255,.32)}
.qx-btn:active{transform:translateY(0) scale(.985)}
.qx-btn--ghost{color:var(--muted); background:rgba(255,255,255,.03);
  border:1px solid var(--line); box-shadow:none}
.qx-btn--ghost:hover{color:var(--ink-cy); border-color:rgba(0,243,255,.4);
  background:rgba(0,243,255,.06); filter:none}
/* CTA üzerinde geçen ışık huzmesi */
.qx-btn--sheen::after{
  content:''; position:absolute; top:0; left:-160%; width:55%; height:100%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:qxSheen 4.6s ease-in-out infinite;
}
@keyframes qxSheen{0%,68%{left:-160%}100%{left:170%}}

/* Etiket (kicker) */
.qx-k{color:var(--muted); font-size:var(--t-2xs); text-transform:uppercase;
  letter-spacing:1.6px; margin:0 0 10px; font-weight:700}

/* Giriş animasyonu — kademeli kullanım için animation-delay sayfada ayarlanır */
.qx-rise{animation:qxRise .7s cubic-bezier(.22,1,.36,1) both}
@keyframes qxRise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* İskelet shimmer */
.qx-skel{
  position:relative; overflow:hidden; border-radius:8px;
  background:rgba(255,255,255,.045); color:transparent!important;
}
.qx-skel::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:qxShimmer 1.6s infinite;
}
@keyframes qxShimmer{to{transform:translateX(100%)}}

/* ═══════════ 5. KAYDIRMA ÇUBUĞU & SEÇİM & ODAK ═══════════ */
::selection{background:rgba(0,243,255,.28); color:#fff}
*{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,243,255,.22),rgba(139,124,255,.22));
  border-radius:99px; border:2px solid var(--bg0);
}
::-webkit-scrollbar-thumb:hover{background:rgba(0,243,255,.4)}
:focus-visible{outline:2px solid var(--ink-cy); outline-offset:2px; border-radius:4px}

/* ═══════════ 6. HAREKET AZALTMA TERCİHİ ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important; animation-iteration-count:1!important;
    transition-duration:.001s!important; scroll-behavior:auto!important;
  }
}
/* Dokunmatik cihazda spotlight kapalı */
@media (hover:none),(pointer:coarse){.qx-card::after{display:none}}