/* ==========================================================================
   MARKA ÇIPASI v1.0 — SİTE TOKEN KATMANI
   Kaynak: /opt/norax/ortak/marka/norax-brand.css (ALTIN KURAL, Owner 27.09.2026)
   Marka çıpası DEĞİŞTİRİLMEZ; site kendi sözlüğünü bu katmanda marka
   token'larına bağlar. Ham hex yazılmaz — her değer var(--nx-*) üzerinden gelir.

   Rol ayrımı (kritik):
     --s-fill / --s-on-fill   → limon DOLGU + siyah mürekkep (iki modda AYNI)
     --s-accent / --s-accent-text → limon METİN; açık modda otomatik lime-700
     --s-panel*               → tasarım gereği iki modda da KOYU kalan panel
   ========================================================================== */
@import url('norax-brand.css');

:root {
  /* alfa gereken yerler için kanal token'ları (rgba(var(--x),a) biçiminde) */
  --s-lime-rgb:    169, 233, 43;
  --s-on-fill-rgb: 10, 10, 10;
  --s-shadow-rgb: 7, 9, 10;
  --s-ok-rgb:     43, 181, 131;
  --s-warn-rgb:   224, 161, 6;
  --s-err-rgb:    229, 72, 77;
  --s-bg-rgb:     7, 9, 10;

  /* yüzeyler ve metin — moda göre döner */
  --s-bg:        var(--nx-bg);
  --s-surface:   var(--nx-surface);
  --s-surface-2: var(--nx-surface-2);
  --s-line:      var(--nx-line);
  --s-text:      var(--nx-text);
  --s-muted:     var(--nx-text-muted);

  /* marka limonu */
  --s-accent:      var(--nx-accent);        /* koyu: lime-400 · açık: lime-700 */
  --s-accent-text: var(--nx-accent-text);   /* koyu: lime-300 · açık: lime-700 */
  --s-on-accent:   var(--nx-on-accent);     /* --s-accent üstündeki mürekkep */
  --s-fill:        var(--nx-accent-fill);   /* DOLGU — iki modda da lime-400 */
  --s-on-fill:     var(--nx-on-accent);     /* dolgunun üstü — daima #0a0a0a */
  --s-fill-2:      var(--nx-lime-600);      /* gradyan/ikincil dolgu */
  --s-soft:        var(--nx-accent-soft);

  /* tasarım gereği KOYU kalan bölümler (şerit, vitrin paneli, footer, CTA) */
  --s-panel:        var(--nx-ink-950);
  --s-panel-2:      var(--nx-ink-900);
  --s-on-panel:     var(--nx-ink-50);
  --s-panel-muted:  var(--nx-ink-300);
  --s-panel-line:   rgba(255, 255, 255, 0.14);
  --s-panel-accent: var(--nx-lime-300);     /* koyu zeminde limon metin serbest */

  /* durum renkleri — METIN/CIZGI icin moda gore AA'ya cekilmis surum */
  --s-ok:   var(--nx-ok);
  --s-warn: var(--nx-warn);
  --s-err:  var(--nx-err);
  --s-info: var(--nx-info);
  /* durum renkleri — DOLGU icin moddan bagimsiz canli taban (ustune --s-on-status) */
  --s-ok-fill:   var(--nx-ok-base);
  --s-warn-fill: var(--nx-warn-base);
  --s-err-fill:  var(--nx-err-base);
  --s-info-fill: var(--nx-info-base);
  --s-on-status: var(--nx-on-status);
  /* durum rozeti zeminleri */
  --s-ok-soft:   rgba(var(--s-ok-rgb),   0.16);
  --s-warn-soft: rgba(var(--s-warn-rgb), 0.16);
  --s-err-soft:  rgba(var(--s-err-rgb),  0.16);
  --s-info-soft: rgba(var(--s-info-rgb), 0.16);
  --s-info-rgb: 59, 130, 246;
  --s-line-rgb: 255, 255, 255;

  /* metin gradyani (background-clip:text) — ACIK MODDA LIMON METIN OLMAZ,
     bu yuzden gradyan uclari da moda gore koyu limona doner. */
  --s-grad-a: var(--nx-lime-300);
  --s-grad-b: var(--nx-lime-500);

  --s-shadow-color: rgba(var(--s-shadow-rgb), 0.38);
}

:root[data-nx-mode='light'] {
  --s-bg-rgb:   247, 248, 245;
  --s-on-accent: var(--nx-ink-0);   /* lime-700 dolgunun üstünde beyaz (5,2:1) */
  --s-line-rgb: 198, 204, 194;
  --s-grad-a: var(--nx-lime-700);   /* 4,9:1 — açık zeminde okunur */
  --s-grad-b: var(--nx-lime-900);
}
@media (prefers-color-scheme: light) {
  :root:not([data-nx-mode]) {
    --s-bg-rgb:   247, 248, 245;
    --s-on-accent: var(--nx-ink-0);
    --s-line-rgb: 198, 204, 194;
    --s-grad-a: var(--nx-lime-700);
    --s-grad-b: var(--nx-lime-900);
  }
}

/* ---------- TASARIM GEREGI KOYU KALAN BOLUMLER ------------------------
   Serit, vitrin paneli, CTA karti ve footer iki modda da koyu kalir (marka
   ritmi). Burada ayni --s-* token'lari panel degerlerine yeniden baglanir;
   boylece icerideki her `var(--s-text)` / `var(--s-accent)` otomatik olarak
   koyu zemine dogru cozulur, ikinci bir renk tablosuna gerek kalmaz. */
.s-on-dark {
  --s-bg:          var(--s-panel);
  --s-surface:     var(--s-panel-2);
  --s-surface-2:   var(--s-panel-2);
  --s-line:        var(--s-panel-line);
  --s-text:        var(--s-on-panel);
  --s-muted:       var(--s-panel-muted);
  --s-accent:      var(--s-panel-accent);
  --s-accent-text: var(--s-panel-accent);
  --s-on-accent:   var(--nx-on-accent);
  --s-shadow-rgb:  0, 0, 0;
  --s-bg-rgb:      7, 9, 10;
  --s-line-rgb:    255, 255, 255;
  --s-grad-a:      var(--nx-lime-300);
  --s-grad-b:      var(--nx-lime-500);
  /* durum renkleri de koyu zemine gore: acik modun koyulastirilmis surumleri
     (#12795a vb.) kömür zeminde AA'nin altina düşüyordu — ölçüldü. */
  --s-ok:   var(--nx-ok-base);
  --s-warn: var(--nx-warn-base);
  --s-err:  #ff6169;
  --s-info: #6aa4ff;
  --s-on-status: var(--nx-ink-950);
  color: var(--s-text);
}

/* ---------- MARKA İMZALARI (5 çıpa) ---------------------------------- */
/* 1) limon odak halkası — her odaklanabilir öğede */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--nx-focus) !important;
  border-radius: var(--nx-radius-sm);
}
/* 2) hap düğme — birincil eylem limon dolgu + siyah yazı */
.s-pill {
  border-radius: var(--nx-radius-pill) !important;
  background: var(--s-fill) !important;
  color: var(--s-on-fill) !important;
  border: 0 !important;
  font-weight: 700;
}
.s-pill:hover { filter: brightness(1.06); }
.s-pill-ghost {
  border-radius: var(--nx-radius-pill) !important;
  background: transparent !important;
  color: var(--s-accent-text) !important;
  border: 1px solid var(--s-line) !important;
}
/* 3) limon şerit */
.s-bar, .nx-accent-bar {
  height: 3px; border-radius: var(--nx-radius-pill);
  background: linear-gradient(90deg, var(--nx-lime-400), var(--nx-lime-600));
}
/* 4) büyük-harf limon üst etiket */
.s-eyebrow {
  font-weight: 600;
  letter-spacing: var(--nx-tracking-wide);
  text-transform: uppercase;
  color: var(--s-accent-text);
}
.s-panel .s-eyebrow, .s-on-dark .s-eyebrow { color: var(--s-panel-accent); }
/* 5) 16px yarıçap + boşluk ritmi */
.s-card { border-radius: var(--nx-radius); }

/* tipografi ritmi — marka çıpasının ikinci yarısı */
h1, h2, h3, h4, h5 { letter-spacing: var(--nx-tracking-tight); }
h1 { letter-spacing: -0.03em; }
::selection { background: rgba(var(--s-lime-rgb), 0.3); color: var(--nx-ink-950); }

/* mod düğmesi */
.s-mode {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--s-line);
  background: var(--s-surface);
  color: var(--s-accent-text);
  font-size: 19px; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.s-mode:hover { background: var(--s-soft); transform: translateY(-2px); }
.s-mode .s-mode-dark  { display: none; }
.s-mode .s-mode-light { display: inline-flex; }
:root[data-nx-mode='light'] .s-mode .s-mode-dark  { display: inline-flex; }
:root[data-nx-mode='light'] .s-mode .s-mode-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-nx-mode]) .s-mode .s-mode-dark  { display: inline-flex; }
  :root:not([data-nx-mode]) .s-mode .s-mode-light { display: none; }
}

/* Urun logosu PNG'si saydam degil (dolu beyaz zemin). Koyu modda ciplak beyaz
   dikdortgen gorunmemesi icin kasitli beyaz "cip" — iki modda da ayni durur,
   logonun kendisine dokunulmaz. */
.s-logo {
  background: var(--nx-ink-0);
  border-radius: var(--nx-radius-sm);
  padding: 4px 7px;
  box-sizing: content-box;
}