/*
 * ALUNOR RF — Base CSS
 *
 * This file contains font-face fallbacks, base resets, and a small handful of
 * non-utility rules that complement Tailwind. Tailwind itself loads via the
 * Play CDN configured in layouts/public.php with the design tokens from
 * tailwind.config.js inlined.
 *
 * For production: run a Tailwind CLI build (`npx tailwindcss -i ... -o app.css`)
 * and remove the CDN script from the layout. The same tailwind.config.js
 * applies. See SETUP.md.
 */

:root {
  --carbon-950: #0A0C0F;
  --carbon-900: #11141A;
  --carbon-800: #1A1F27;
  --carbon-700: #252B35;
  --carbon-500: #5A6573;
  --steel-300: #C7CDD6;
  --steel-100: #EEF1F5;
  --signal-amber: #F2A413;   /* legacy accent — used sparingly, mostly retired in favour of trust-blue */
  --signal-cyan:  #2EC4D8;
  --alert-red:    #E5484D;
  --ok-green:     #2EAB6B;
  --paper-50:  #F7F8FA;
  --paper-900: #0F1217;
  --brand-gold: #E8C547;     /* Legacy brand mark — kept for back-compat */
  --brand-red:  #EF4444;     /* Brand identity — logo centre dot */
  /* INDUSTRIAL BLUE PALETTE
     Per brand reference (#1E3A5F tone): primary fills lean dark/navy
     instead of bright SaaS-blue. Highlights stay bright but desaturated
     so they read as engineering-grade signal, not marketing accent. */
  --trust-blue:        #1E3A5F;  /* primary fills (CTAs, key accents) */
  --trust-blue-strong: #2A4F7F;  /* hover lift */
  --trust-blue-deep:   #15294A;  /* pressed / dark variant */
  --trust-blue-soft:   #4A7BCE;  /* highlights, secondary accents */
  --trust-blue-glow:   #60A5FA;  /* used ONLY in the animated glow comet so the rotation reads */

  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'IBM Plex Sans', Inter, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', Consolas, monospace;
}

/* Light-mode override (plumbed but unused in v1 — flip with [data-theme="light"]) */
[data-theme="light"] {
  --carbon-950: #F7F8FA;
  --carbon-900: #FFFFFF;
  --carbon-800: #F0F2F5;
  --carbon-700: #DDE1E7;
  --carbon-500: #5A6573;
  --steel-300: #1A1F27;
  --steel-100: #0A0C0F;
}

* { box-sizing: border-box; }

html, body {
  background-color: var(--carbon-950);
  color: var(--steel-300);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; min-height: 100vh; }

a { color: var(--signal-cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: rgba(46, 196, 216, 0.4); text-underline-offset: 3px; }
a.internal-link { color: var(--signal-cyan); border-bottom: 1px dashed rgba(46, 196, 216, 0.3); }

::selection { background: var(--signal-amber); color: var(--carbon-950); }

/* Focus ring — cyan, always visible (a11y) */
:focus-visible {
  outline: 2px solid var(--signal-cyan);
  outline-offset: 2px;
}

/* Spec value — mono font for any element with .mono class or [data-mono] */
.mono, [data-mono] {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.01em;
}

/* Scroll-margin so anchored sections clear the sticky header */
[id] { scroll-margin-top: 84px; }

/* Prose body inside Markdown-rendered content */
.prose-rf {
  color: var(--steel-300);
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
}
.prose-rf h2 { color: var(--steel-100); font-family: var(--font-display); font-size: 22px; line-height: 1.3; margin: 1.6em 0 0.6em; }
.prose-rf h3 { color: var(--steel-100); font-family: var(--font-display); font-size: 18px; line-height: 1.35; margin: 1.4em 0 0.5em; }
.prose-rf h4 { color: var(--steel-100); font-size: 16px; margin: 1.2em 0 0.4em; }
.prose-rf p  { margin: 0 0 1em; }
.prose-rf ul, .prose-rf ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose-rf li { margin: 0.3em 0; }
.prose-rf code { font-family: var(--font-mono); background: var(--carbon-800); padding: 1px 6px; border-radius: 3px; font-size: 0.92em; }
.prose-rf pre  { background: var(--carbon-900); border: 1px solid var(--carbon-700); border-radius: 8px; padding: 16px; overflow-x: auto; }
.prose-rf pre code { background: transparent; padding: 0; }
.prose-rf blockquote { border-left: 2px solid var(--signal-cyan); padding-left: 16px; color: var(--steel-100); margin: 1em 0; }
.prose-rf hr { border: 0; border-top: 1px solid var(--carbon-700); margin: 2em 0; }
.prose-rf img { max-width: 100%; height: auto; border-radius: 8px; }

/* Subtle scrollbar (engineering tool feel) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--carbon-950); }
::-webkit-scrollbar-thumb { background: var(--carbon-700); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--carbon-500); }

/* ============================================================ */
/* Sticky header — two visual states                              */
/*                                                                */
/*   data-scrolled="false"  (page at the top): the header is      */
/*     transparent, no border, no shadow — visually merged with   */
/*     the hero so the hero feels full-bleed.                     */
/*   data-scrolled="true"   (any scroll past ~4 px): the header   */
/*     gains a glass background, hairline border, and soft drop   */
/*     shadow — clearly lifted off the content underneath.        */
/*                                                                */
/* Border-color and shadow transitions are driven by the          */
/* transition-* utility on the <header> element so the toggle is  */
/* visually smooth.                                               */
/* ============================================================ */
.alunor-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.alunor-header[data-scrolled="true"] {
  background-color: rgba(10, 12, 15, 0.78);
  border-bottom-color: rgba(37, 43, 53, 0.7);
  box-shadow: 0 6px 22px -14px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .alunor-header[data-scrolled="true"] {
    background-color: rgba(10, 12, 15, 0.55);
  }
}

/* Horizontal carousel track — keep the native scrollbar out of the
   layout (we provide arrow buttons + scroll-snap instead). The track
   stays scroll-able by wheel, touch, keyboard. */
.carousel-track {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* legacy IE/Edge */
}
.carousel-track::-webkit-scrollbar { display: none; } /* Webkit */

/* Subtle pulsing dot for "live" indicators (used sparingly) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.pulse-dot { animation: pulse-dot 2.4s ease-in-out infinite; }

/* ============================================================ */
/* Animated glow button — used for the header "Get in Touch"     */
/* and any primary outline-style CTA that needs a brand-grade     */
/* "alive" feel.                                                  */
/*                                                                */
/* Important: we animate the conic-gradient ANGLE                 */
/* (via @property --glow-angle), not the pseudo-element's         */
/* transform. Rotating a wide rectangle via transform:rotate      */
/* would swing the long axis vertically every 90°, creating a     */
/* light-beam artefact that extends above/below the button.       */
/* Rotating only the gradient keeps the shape pinned to the       */
/* button's footprint while the colours travel around the edge.   */
/*                                                                */
/* Layers, back to front:                                         */
/*   ::before  blurred conic-gradient sized inset:-2px (sits      */
/*             slightly outside the button, blurs into a halo)    */
/*   ::after   solid inner panel inset:1.5px (masks the centre,   */
/*             leaving only a thin glowing ring at the perimeter) */
/*   children  promoted to z-index:2 so text/SVG paint on top.    */
/* Colours: brand blue palette only.                              */
/* ============================================================ */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

.btn-glow {
  position: relative;
  isolation: isolate;
  background: #0F1115;
  color: #EEF1F5;
  border: none;
  cursor: pointer;
  /* Stronger ambient shadow + tight blue rim makes the resting state read
     unambiguously as a button (per user feedback: "clickable hissi
     güçlendir"). */
  box-shadow:
    0 0 0 1px rgba(74, 123, 206, 0.55),
    0 10px 28px -12px rgba(30, 58, 95, 0.7);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease;
  animation: btn-glow-rotate 3.2s linear infinite;
}

/* Promote real children (spans, SVG icons) above the ::after mask. */
.btn-glow > * {
  position: relative;
  z-index: 2;
}

.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  /* Industrial palette: dark navy "off" phase → bright comet at 240°.
     #60A5FA (trust-blue-glow) used only as the comet peak so the
     rotation reads against the dark base without leaning SaaS-bright. */
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    rgba(10, 12, 15, 0.0) 0deg,
    rgba(30, 58, 95, 0.5) 90deg,
    #2A4F7F 170deg,
    #4A7BCE 210deg,
    #60A5FA 240deg,
    #FFFFFF 255deg,
    #60A5FA 270deg,
    #4A7BCE 300deg,
    rgba(30, 58, 95, 0.5) 340deg,
    rgba(10, 12, 15, 0.0) 360deg
  );
  filter: blur(5px);
  opacity: 0.95;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.btn-glow::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: 1;
  border-radius: inherit;
  background: #0F1115;
  pointer-events: none;
}

.btn-glow:hover {
  transform: translateY(-1px);
  /* Hover: brighter rim + wider halo signals "click me" without
     leaving the industrial palette. */
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.85),
    0 14px 36px -12px rgba(74, 123, 206, 0.85),
    0 0 24px -2px rgba(96, 165, 250, 0.5);
  animation-duration: 1.8s;
}

.btn-glow:hover::before {
  filter: blur(8px);
}

.btn-glow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #0A0C0F,
    0 0 0 4px rgba(96, 165, 250, 0.85);
}

.btn-glow:active {
  transform: scale(0.97);
}

@keyframes btn-glow-rotate {
  to { --glow-angle: 360deg; }
}

/* Reduce motion: hold the nebula static, no rotation */
@media (prefers-reduced-motion: reduce) {
  .btn-glow { animation: none; }
}

/* Print: hide nav/cta */
@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}