/* Site typeface: Geist for text, Geist Mono for code and labels.
   Overrides Tailwind's theme variables, so every font-sans/font-mono use follows. */
:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 0;
}

.site-desktop-nav,
.site-desktop-actions {
  display: none;
}

.site-mobile-nav {
  display: block;
}

.site-mobile-nav-toggle {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  list-style: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  width: 2.5rem;
}

.site-mobile-nav-toggle::-webkit-details-marker {
  display: none;
}

.site-mobile-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.site-mobile-nav[open] > .site-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.site-mobile-nav-icon {
  height: 1.25rem;
  width: 1.25rem;
}

.site-mobile-nav-icon-close {
  display: none;
}

.site-mobile-nav[open] .site-mobile-nav-icon-open {
  display: none;
}

.site-mobile-nav[open] .site-mobile-nav-icon-close {
  display: block;
}

@media (min-width: 64rem) {
  .site-desktop-nav {
    display: block;
  }

  .site-desktop-actions {
    display: flex;
  }

  .site-mobile-nav {
    display: none;
  }
}

/* ---------- Navbar wordmark ----------
   QNSET stays solid and readable. Every 5s a chromatic split runs through it
   left to right, 0.06s per letter: red, purple and blue copies pull out
   from behind each glyph (red left, blue right, purple up), overshoot
   back past centre and settle under the white core. The core dims a touch
   at the peak so the colour reads. About 0.9s of motion, then rest. */

.site-header {
  --site-brand-w: calc(1.35rem * 387 / 98);
  --site-brand-in: cubic-bezier(0.16, 1, 0.3, 1);
  --site-brand-out: cubic-bezier(0.7, 0, 0.84, 0);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  width: var(--site-brand-w);
  color: #fff;
  transition:
    opacity 150ms ease,
    width 560ms var(--site-brand-in),
    margin-right 560ms var(--site-brand-in),
    visibility 0s;
}

.site-brand:hover {
  opacity: 0.8;
}

.qn-nav-mark {
  display: block;
  flex: none;
  height: 1.35rem;
  width: var(--site-brand-w);
  overflow: visible;
  /* Negative insets leave room for the chromatic split's colour fringes. */
  clip-path: inset(-40% -12% -40% -12%);
  transition:
    clip-path 480ms var(--site-brand-in) 100ms,
    translate 480ms var(--site-brand-in) 100ms;

  --qn-nav-cycle: 5s;
  --qn-nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.qn-nav-core use {
  fill: currentColor;
  animation: qn-nav-core var(--qn-nav-cycle) linear infinite both;
}

.qn-nav-split {
  mix-blend-mode: screen;
}

.qn-nav-split use {
  opacity: 0;
  animation: var(--qn-nav-split) var(--qn-nav-cycle) linear infinite both;
}

.qn-nav-split--red use { fill: #ff2d4a; --qn-nav-split: qn-nav-split-red; }
.qn-nav-split--purple use { fill: #9d4dff; --qn-nav-split: qn-nav-split-purple; }
.qn-nav-split--blue use { fill: #2f6bff; --qn-nav-split: qn-nav-split-blue; }

.qn-nav-mark use:nth-of-type(2) { animation-delay: 0.06s; }
.qn-nav-mark use:nth-of-type(3) { animation-delay: 0.12s; }
.qn-nav-mark use:nth-of-type(4) { animation-delay: 0.18s; }
.qn-nav-mark use:nth-of-type(5) { animation-delay: 0.24s; }

@keyframes qn-nav-split-red {
  0% { opacity: 0; transform: translate(0, 0); animation-timing-function: var(--qn-nav-ease); }
  1.5% { opacity: 1; }
  5% { transform: translate(-10px, 1px); animation-timing-function: var(--qn-nav-ease); }
  9% { transform: translate(3px, 0); animation-timing-function: var(--qn-nav-ease); }
  12% { opacity: 1; transform: translate(0, 0); }
  14%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes qn-nav-split-blue {
  0% { opacity: 0; transform: translate(0, 0); animation-timing-function: var(--qn-nav-ease); }
  1.5% { opacity: 1; }
  5% { transform: translate(10px, -1px); animation-timing-function: var(--qn-nav-ease); }
  9% { transform: translate(-3px, 0); animation-timing-function: var(--qn-nav-ease); }
  12% { opacity: 1; transform: translate(0, 0); }
  14%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes qn-nav-split-purple {
  0% { opacity: 0; transform: translate(0, 0); animation-timing-function: var(--qn-nav-ease); }
  1.5% { opacity: 1; }
  5% { transform: translate(0, -6px); animation-timing-function: var(--qn-nav-ease); }
  9% { transform: translate(0, 2px); animation-timing-function: var(--qn-nav-ease); }
  12% { opacity: 1; transform: translate(0, 0); }
  14%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes qn-nav-core {
  0%, 2% { opacity: 1; }
  5% { opacity: 0.82; }
  11%, 100% { opacity: 1; }
}

/* Home page handoff: while the hero's huge QNSET is on screen, the navbar's
   mark is tucked away, its slot closed so the links sit flush left. When the
   hero wordmark scrolls under the header (site.js), the slot opens, the
   links glide right, the mark wipes in from the left, and its animations
   restart so the chromatic split fires as it lands. Tucking back is faster
   and wipes the mark out before the slot closes. */

.site-header.is-brand-tucked .site-brand {
  width: 0;
  margin-right: -1rem; /* cancels the row's 1rem gap */
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 150ms ease,
    width 360ms var(--site-brand-out) 80ms,
    margin-right 360ms var(--site-brand-out) 80ms,
    visibility 0s linear 440ms;
}

.site-header.is-brand-tucked .qn-nav-mark {
  clip-path: inset(-40% 112% -40% -12%);
  translate: -0.5rem 0;
  transition:
    clip-path 260ms var(--site-brand-out),
    translate 260ms var(--site-brand-out);
}

.site-header.is-brand-tucked .qn-nav-mark use {
  animation: none;
}

/* Reduced motion: the solid wordmark, still, and the handoff is a plain swap. */
@media (prefers-reduced-motion: reduce) {
  .qn-nav-core use {
    animation: none;
  }

  .qn-nav-split {
    display: none;
  }

  .site-brand,
  .qn-nav-mark,
  .site-header.is-brand-tucked .site-brand,
  .site-header.is-brand-tucked .qn-nav-mark {
    transition: none;
  }
}

/* ---------- Current page in the navigation ----------
   The link for the page you're on gets a soft glow under its label in the
   site spectrum (red, purple, blue) instead of repeating the page name as a
   kicker above each hero. No frame: just light under the text. */

:root {
  --site-spectrum-loop: linear-gradient(90deg, #ff2d4a, #9d4dff, #2f6bff, #9d4dff, #ff2d4a);
}

.site-nav-link[aria-current="page"] {
  position: relative;
  isolation: isolate;
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(157, 77, 255, 0.85);
}

/* Two layers of light under the label: a tight, bright core right beneath
   the text and a wide halo around it. Both fade in on load, then the
   colours drift slowly along them. */
.site-nav-link[aria-current="page"]::before,
.site-nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background: var(--site-spectrum-loop);
  background-size: 200% 100%;
  pointer-events: none;
  animation:
    site-nav-glow-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    site-nav-glow-drift 6s linear infinite;
}

.site-nav-link[aria-current="page"]::before {
  left: 12%;
  right: 12%;
  bottom: 14%;
  height: 4px;
  filter: blur(3px);
}

.site-nav-link[aria-current="page"]::after {
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 70%;
  filter: blur(14px);
  opacity: 0.9;
}

@keyframes site-nav-glow-in {
  from { opacity: 0; transform: scaleX(0.4); }
}

@keyframes site-nav-glow-drift {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-link[aria-current="page"]::before,
  .site-nav-link[aria-current="page"]::after {
    animation: none;
  }
}

/* Mobile dropdown rows are full width, so the glow is pinned under the
   start of the label rather than stretched across the row. */
.site-mobile-nav .site-nav-link[aria-current="page"]::before,
.site-mobile-nav .site-nav-link[aria-current="page"]::after {
  left: 0.5rem;
  right: auto;
  width: 5.5rem;
}

:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Page body backgrounds (previously per-view <style> blocks) ---------- */

body {
  background-color: #000;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(220, 38, 38, 0.05) 0%, transparent 25%),
    radial-gradient(circle at 80% 40%, rgba(37, 99, 235, 0.05) 0%, transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(147, 51, 234, 0.05) 0%, transparent 25%),
    radial-gradient(circle at 50% 0%, #1a1a1a 0%, #000000 70%);
  background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Fixed attachment repaints the whole viewport every scroll frame on mobile,
   which browsers either emulate expensively (iOS) or jank badly (Android).
   Only allow it on devices with fine pointers (desktop). */
@media (hover: hover) and (pointer: fine) {
  body {
    background-attachment: fixed;
  }
}

/* AccessLimited / TemporaryIpBlock / Admin / Announcements / WorkTasks /
   EmployeeDashboard pages override the layout background via a marker class
   on a top-level element. */
body.bg-page-error-red,
body:has(.bg-page-error-red) {
  background-color: #050505;
  background-image: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.1) 0%, transparent 60%);
}

body.bg-page-error-yellow,
body:has(.bg-page-error-yellow) {
  background-color: #050505;
  background-image: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.12) 0%, transparent 60%);
}

body.bg-page-admin-red,
body:has(.bg-page-admin-red) {
  background-color: #050505;
  background-image: radial-gradient(circle at 0% 0%, rgba(220, 38, 38, 0.05) 0%, transparent 50%);
}

body.bg-page-blue,
body:has(.bg-page-blue) {
  background-color: #050505;
  background-image: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 50%);
}

/* ---------- Home page (previously inline <style>) ---------- */

html {
  scroll-behavior: smooth;
}

.spotlight-container {
  opacity: 0;
  animation: spotlight-fade-in 0.8s ease forwards 0.1s;
}
@keyframes spotlight-fade-in { to { opacity: 0.5; } }

.qnset-logo {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 24;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: qnset-draw 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.1s,
             qnset-fill-in 0.3s ease forwards 0.9s;
}
@keyframes qnset-draw { to { stroke-dashoffset: 0; } }
@keyframes qnset-fill-in { to { fill-opacity: 1; stroke-opacity: 0; } }

.hero-text-fade {
  opacity: 0;
  animation: text-fade-in 0.4s ease forwards 0.9s;
}
.hero-btn-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  animation: btn-fade-in 0.4s ease forwards 1.2s;
}
@keyframes text-fade-in { to { opacity: 1; } }
@keyframes btn-fade-in { to { opacity: 1; visibility: visible; transform: translateY(0); } }

.qnset-intro-done .hero-text-fade,
.qnset-intro-done .hero-btn-fade {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: none;
}
.qnset-intro-done .qnset-logo {
  animation: none;
  stroke-dashoffset: 0;
  fill-opacity: 1;
  stroke-opacity: 0;
}
.qnset-intro-done .spotlight-container {
  animation: none;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-container { animation: none; opacity: 0.5; }
  .qnset-logo {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
  }
  .hero-text-fade, .hero-btn-fade { animation: none; opacity: 1; visibility: visible; transform: translateY(0); }
  html { scroll-behavior: auto; }
}

.btn-scale {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-scale:hover {
  transform: scale(1.05);
}

/* Helion page styles live in helion.css, loaded only by that view. */

/* ---------- Inline style attributes converted to classes ---------- */

.founder-photo {
  object-fit: cover;
  transform: scale(1.1);
}
.founder-photo-kuzey {
  object-fit: cover;
  object-position: 50% 15%;
  transform: scale(1.05);
}
.hero-grid-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}
.qnset-intro-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.qnset-intro-width {
  width: min(720px, 100%);
}

/* Validation summary placeholder: MVC renders <li style="display:none"> in the
   empty state; keep it hidden without inline styles (CSP style-src-attr 'none'). */
.validation-summary-valid ul {
  display: none;
}
.validation-summary-errors ul {
  display: block;
}

/* About page hero decoration (replaced a 474 KB animated SVG at 7% opacity
   with a static CSS glow - identical visual, zero bytes). */
.about-hero-glow {
  background:
    radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 62% 62%, rgba(59, 130, 246, 0.09) 0%, transparent 55%),
    radial-gradient(circle at 50% 78%, rgba(147, 51, 234, 0.07) 0%, transparent 50%);
}