/* nousworks.co — statik kurulum. Kaynak: style_0 (font+token), style_1 (Caveat), style_2 (taban). */


@font-face {
  font-family: 'Brother';
  src: url("/assets/fonts/brother-400.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url("/assets/fonts/quicksand-400.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url("/assets/fonts/quicksand-500.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url("/assets/fonts/quicksand-600.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url("/assets/fonts/quicksand-700.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Primus';
  src: url("/assets/fonts/primus-400.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Primus';
  src: url("/assets/fonts/primus-400-italic.woff2") format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Primus';
  src: url("/assets/fonts/primus-600-italic.woff2") format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}

/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/caveat-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/caveat-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===== BRAND COLORS — the five, named per brand book ===== */
  --nus-paper:      #fffaef;   /* Kâğıt — canvas. Carries the frame. */
  --nus-ink:        #222222;   /* Karbon — text. Carries the frame. */
  --nus-sun:        #ff751f;   /* Güneş — THE punch. Logo sun never recolors. */
  --nus-coral:      #f45e5e;   /* Mercan — accent. */
  --nus-sky:        #0eb1d2;   /* Gök — accent. Never shouts with Mercan in one frame. */

  /* ===== SUPPORT (from brand book) ===== */
  --nus-card:       #fffdf7;   /* card surfaces on paper */
  --nus-muted:      rgba(34, 34, 34, 0.52);  /* secondary text */
  --nus-line:       rgba(34, 34, 34, 0.14);  /* 1.5px hairlines */

  /* Derived utilities */
  --nus-ink-70:     #4a4a4a;
  --nus-sun-press:  #d95c08;   /* rare — only when ink hover is impossible */

  /* Legacy aliases (v2/v3.0 names — do not use in new work) */
  --nus-cream:      var(--nus-paper);
  --nus-orange:     var(--nus-sun);
  --nus-cyan:       var(--nus-sky);
  --nus-ember:      var(--nus-sun);
  --nus-bone:       var(--nus-paper);
  --nus-cocoa:      var(--nus-sun-press);
  --nus-orange-press: var(--nus-sun-press);
  --nus-amber:      var(--nus-coral);
  --nus-sand:       #f5ead4;
  --nus-stone:      #8c8378;

  /* ===== SEMANTIC TOKENS — LIGHT (default) ===== */
  --bg-canvas:      var(--nus-paper);
  --bg-surface:     var(--nus-card);    /* cards, tiles */
  --bg-raised:      var(--nus-card);
  --bg-inverse:     var(--nus-ink);     /* quote blocks, dark sections */

  --fg-1:           var(--nus-ink);
  --fg-2:           var(--nus-muted);
  --fg-3:           var(--nus-muted);
  --fg-on-sun:      var(--nus-paper);
  --fg-on-ink:      var(--nus-paper);

  --accent:         var(--nus-sun);
  --accent-hover:   var(--nus-ink);     /* buttons hover to ink, not darker orange */
  --accent-fg:      var(--nus-paper);
  --link:           var(--nus-sky);
  --link-hover:     var(--nus-coral);
  --signal:         var(--nus-coral);

  --border-soft:    rgba(34, 34, 34, 0.08);
  --border:         var(--nus-line);
  --border-strong:  var(--nus-ink);
  --border-w:       1.5px; /* @kind other */

  --shadow-sm:      0 1px 2px rgba(34, 34, 34, 0.05);
  --shadow-card:    0 10px 26px rgba(34, 34, 34, 0.08);   /* card hover lift */
  --shadow-md:      0 10px 26px rgba(34, 34, 34, 0.08);
  --shadow-lg:      0 24px 60px rgba(34, 34, 34, 0.16);
  --shadow-glow:    0 0 0 3px rgba(255, 117, 31, 0.22);   /* highlight ring */

  /* ===== TYPE FAMILIES ===== */
  /* Brother — logo & stamp moments ONLY. Single words. Never sentences, never body. */
  --font-logo:      'Brother', 'Arial Black', sans-serif;
  /* Quicksand — the main voice. Headings, body, UI. */
  --font-display:   'Quicksand', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-body:      'Quicksand', 'Avenir Next', 'Helvetica Neue', sans-serif;
  /* Primus — editorial accent: quotes, notes, meta. Occasional. */
  --font-accent:    'Primus', 'Quicksand', sans-serif;
  /* Meta/data role also set in Primus (no monospace in this brand). */
  --font-mono:      'Primus', 'Quicksand', sans-serif;
  --fw-ui:          600; /* @kind font */

  /* ===== TYPE SCALE ===== */
  --fs-display:     clamp(56px, 8vw, 128px); /* @kind font */
  --fs-h1:          clamp(40px, 5vw, 72px); /* @kind font */
  --fs-h2:          clamp(30px, 4.2vw, 50px); /* @kind font */
  --fs-h3:          28px; /* @kind font */
  --fs-h4:          22px; /* @kind font */
  --fs-body-lg:     20px; /* @kind font */
  --fs-body:        17px; /* @kind font */
  --fs-body-sm:     15px; /* @kind font */
  --fs-caption:     13.5px; /* @kind font */
  --fs-eyebrow:     12px; /* @kind font */

  /* line-height */
  --lh-tight:       1.0; /* @kind other */
  --lh-snug:        1.15; /* @kind other */
  --lh-normal:      1.65; /* @kind other */
  --lh-loose:       1.65; /* @kind other */

  /* tracking */
  --tr-tight:       -0.01em; /* @kind other */
  --tr-normal:      0; /* @kind other */
  --tr-stamp:       0.03em; /* @kind other */
  --tr-eyebrow:     0.22em; /* @kind other */

  /* ===== SPACING (8pt grid + 4 base) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ===== RADII — soft, hand-made, friendly ===== */
  --r-0: 0px;
  --r-sm: 8px;      /* small chips, tags */
  --r-md: 14px;     /* fields, small cards */
  --r-lg: 16px;     /* cards, tiles, quote blocks */
  --r-pill: 999px;  /* BUTTONS are pills */

  /* ===== MOTION ===== */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:       200ms; /* @kind other */
  --dur-base:       250ms; /* @kind other */
  --dur-slow:       450ms; /* @kind other */
  --dur-hero:       700ms; /* @kind other */
}

/* --- dc-runtime taban kuralı (canlı orijinalden doğrulandı: bu kural olmadan
   body kaydırma konteyneri olmaz ve sticky header çalışmaz) --- */
html, body { height: 100%; margin: 0; }

/* --- taban + keyframes (style_2, aynen) --- */
html { scroll-behavior: smooth; scroll-padding-top: 108px; overflow-x: clip; }
    html, body { margin: 0; padding: 0; background: #fffaef; }
    body { font-family: 'Quicksand', 'Avenir Next', sans-serif; color: #222222; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
    ::selection { background: #ff751f; color: #fffaef; }
    a { color: #0eb1d2; }
    a:hover { color: #f45e5e; }
    [id] { scroll-margin-top: 108px; }
    header nav a.is-current-section { color: var(--nus-sun) !important; border-bottom-color: var(--nus-sun) !important; }
    input::placeholder { font-family: 'Primus', 'Quicksand', sans-serif; font-style: italic; color: rgba(34,34,34,.38); }
    @keyframes nw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .78; } }
    @keyframes nw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
    @keyframes ps-appear { 0%, 4% { opacity: 0; } 11% { opacity: 1; } 87% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes draw-s1 { 0%, 16% { background-size: 0% 2px; } 25% { background-size: 100% 2px; } 87% { background-size: 100% 2px; } 94%, 100% { background-size: 0% 2px; } }
    @keyframes show-n1 { 0%, 24% { opacity: 0; transform: translateY(-2px) rotate(-2deg); } 33% { opacity: 1; transform: translateY(0) rotate(-2deg); } 87% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes draw-s2 { 0%, 35% { background-size: 0% 2px; } 44% { background-size: 100% 2px; } 87% { background-size: 100% 2px; } 94%, 100% { background-size: 0% 2px; } }
    @keyframes show-n2 { 0%, 43% { opacity: 0; transform: translateY(-2px) rotate(-3.5deg); } 52% { opacity: 1; transform: translateY(0) rotate(-3.5deg); } 87% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes draw-s3 { 0%, 53% { background-size: 0% 2px; } 62% { background-size: 100% 2px; } 87% { background-size: 100% 2px; } 94%, 100% { background-size: 0% 2px; } }
    @keyframes show-n3 { 0%, 61% { opacity: 0; transform: translateY(-2px) rotate(-1.5deg); } 70% { opacity: 1; transform: translateY(0) rotate(-1.5deg); } 87% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes draw-s4 { 0%, 70% { background-size: 0% 2px; } 79% { background-size: 100% 2px; } 87% { background-size: 100% 2px; } 94%, 100% { background-size: 0% 2px; } }
    @keyframes show-n4 { 0%, 78% { opacity: 0; transform: translateY(-2px) rotate(-2.5deg); } 86%, 87% { opacity: 1; transform: translateY(0) rotate(-2.5deg); } 94%, 100% { opacity: 0; } }
    @media (max-width: 1320px) {
      header > nav { order: 3; width: 100%; justify-content: center; }
    }
    @media (max-width: 760px) {
      html { scroll-padding-top: 164px; }
      [id] { scroll-margin-top: 164px; }
      header { padding: 14px 20px !important; gap: 12px 16px !important; }
      header > nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; gap: 12px 18px !important; }
      header [data-nav-clock] { display: none !important; }
      header > div { gap: 16px !important; }
    }
    @media (max-width: 400px) {
      header > div { gap: 12px !important; }
      header [data-nav-cta] { padding: 10px 16px !important; }
    }

/* --- style-hover/style-focus dönüşümleri --- */
.hv-1:hover { color: #f45e5e; }
.hv-2:hover { background: #222222; transform: translateY(-1px); }
.hv-3:hover { color: #ff751f; border-bottom-color: #ff751f; }
.hv-4:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 10px 26px rgba(34,34,34,.08); }
.hv-5:hover { color: #f45e5e; border-bottom-color: #f45e5e; }
.hv-6:hover { color: #222222; border-bottom-color: #222222; }
.fc-1:focus-within { border-color: #0eb1d2; box-shadow: 0 0 0 3px rgba(14,177,210,.14); }