/* Nexell — temel katman: değişkenler, sıfırlama, tipografi, hareket sistemi,
   ortak bileşenler. Her sayfa bunun üstüne kendi dosyasını ekler. */

/* Montserrat — kendi bünyemizde barındırılır, dışarıya istek gitmez ve site
   çevrimdışı da aynı görünür. Google değişken (variable) sürüm sunduğu için
   400–700 aralığının tamamı tek dosyada gelir; ayrı ayrı ağırlık dosyası yok.
   Türkçe iki alt küme gerektirir: ğ ş İ latin-ext'te, ı ç ö ü latin'de. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-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;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-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;
}

/* Marka yeşili #00BF63 — logo dosyalarındaki yeşille birebir aynı.
   Parlak bir yeşil olduğu için ÜZERİNE KOYU YAZI gelir (kontrast 7:1;
   beyaz yazı yalnızca 2,4:1 verirdi ve okunmazdı). Markanın kendi
   kullanımı da böyle: yeşil zeminde siyah harfler.
   Bu yüzden iki ayrı yeşil vardır:
     --accent       dolgu içindir (buton, tablo başlığı, rozet)
     --accent-text  zemin üzerindeki yazı içindir (bağlantı, odak halkası)
   Kural: hiçbir yerde saf siyah (#000) veya saf beyaz (#fff) kullanılmaz —
   en açık yüzey #fdfdfb, en koyu zemin #0d0f0d, metin #1c1c1a.

   Excel'in etkin hücre çerçevesi de yeşildir; seçim kutusu, doldurma tutamacı
   ve ızgara çizgileri arayüzün her yerinde bu tanıdık dili konuşur. */
:root {
  --bg:        #fbfbfa;
  --bg-alt:    #f2f4f1;
  --surface:   #fdfdfb;
  --surface-2: #f7f8f5;
  --text:      #1c1c1a;
  --text-2:    #41413e;
  --muted:     #6b6b66;
  --line:      #d3d3ce;
  --line-soft: #e6e7e3;
  --accent:      #00bf63;
  --accent-h:    #00a957;
  --accent-2:    #0d9488;
  --on-accent:   #0b1a11;
  --accent-text: #00713c;
  --head:        #00bf63;
  --on-head:     #0b1a11;
  --tint:        #e4f7ed;
  --grid:        #dcdedb;
  --grid-line:   rgb(28 28 26 / .06);
  --ok:          #00bf63;
  --warn:        #b25000;
  --danger:      #b42318;
  --info:        #1d4ed8;
  --shadow-ink: 18 22 19;
  --shadow-s:  0 1px 2px rgb(var(--shadow-ink) / .05), 0 4px 12px rgb(var(--shadow-ink) / .06);
  --shadow-m:  0 2px 6px rgb(var(--shadow-ink) / .06), 0 18px 44px rgb(var(--shadow-ink) / .09);
  --shadow-l:  0 4px 12px rgb(var(--shadow-ink) / .06), 0 32px 80px rgb(var(--shadow-ink) / .14);
  --glow:      0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
               0 10px 36px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  --grad:      linear-gradient(135deg, #00bf63 0%, #00a957 45%, #0d9488 100%);
  --grad-text: linear-gradient(100deg, #00a957 0%, #00bf63 40%, #0d9488 100%);
  /* Marka görselleri de temayla değişir: harfler ve ok, zemine göre ters renkli */
  --logo-wordmark: url("../img/logo-wordmark-light.png");
  --arrow-btn:     url("../img/arrow-light.png");
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 36px;
  --nav-h: 60px;
  --maxw: 1080px;
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}

/* Koyu tema belirteçleri — hem sistem tercihinde hem de açık seçimde
   aynı değerler geçerli olsun diye iki yerde tanımlanır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d0f0d;
    --bg-alt:    #121512;
    --surface:   #171a17;
    --surface-2: #1c201c;
    --text:      #f2f4f0;
    --text-2:    #d3d6d1;
    --muted:     #949890;
    --line:      #383c37;
    --line-soft: #252925;
    --accent:      #00bf63;
    --accent-h:    #23d47d;
    --accent-2:    #2dd4bf;
    --on-accent:   #06170e;
    --accent-text: #35d98a;
    --head:        #00bf63;
    --on-head:     #06170e;
    --tint:        #10261a;
    --grid:        #2a2e2a;
    --grid-line:   rgb(242 244 240 / .05);
    --ok:          #00bf63;
    --warn:        #ff9f0a;
    --danger:      #ff6b5b;
    --info:        #7aa2ff;
    --shadow-ink: 3 6 4;
    --shadow-s:  0 1px 2px rgb(var(--shadow-ink) / .5);
    --shadow-m:  0 2px 8px rgb(var(--shadow-ink) / .5), 0 20px 48px rgb(var(--shadow-ink) / .55);
    --shadow-l:  0 4px 14px rgb(var(--shadow-ink) / .55), 0 36px 90px rgb(var(--shadow-ink) / .65);
    --logo-wordmark: url("../img/logo-wordmark-dark.png");
    --arrow-btn:     url("../img/arrow-dark.png");
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #0d0f0d;
  --bg-alt:    #121512;
  --surface:   #171a17;
  --surface-2: #1c201c;
  --text:      #f2f4f0;
  --text-2:    #d3d6d1;
  --muted:     #949890;
  --line:      #383c37;
  --line-soft: #252925;
  --accent:      #00bf63;
  --accent-h:    #23d47d;
  --accent-2:    #2dd4bf;
  --on-accent:   #06170e;
  --accent-text: #35d98a;
  --head:        #00bf63;
  --on-head:     #06170e;
  --tint:        #10261a;
  --grid:        #2a2e2a;
  --grid-line:   rgb(242 244 240 / .05);
  --ok:          #00bf63;
  --warn:        #ff9f0a;
  --danger:      #ff6b5b;
  --info:        #7aa2ff;
  --shadow-ink: 3 6 4;
  --shadow-s:  0 1px 2px rgb(var(--shadow-ink) / .5);
  --shadow-m:  0 2px 8px rgb(var(--shadow-ink) / .5), 0 20px 48px rgb(var(--shadow-ink) / .55);
  --shadow-l:  0 4px 14px rgb(var(--shadow-ink) / .55), 0 36px 90px rgb(var(--shadow-ink) / .65);
  --logo-wordmark: url("../img/logo-wordmark-dark.png");
  --arrow-btn:     url("../img/arrow-dark.png");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Kök rengi açıkça verilir: aksi halde color-scheme:dark, <html>'e tarayıcı
   varsayılanı olan saf beyazı atar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color: var(--text); background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Montserrat geometrik ve geniş bir yazı tipi: aynı punto sistem yazı tipinden
   daha iri ve daha geniş okunur. Bu yüzden gövde 17px yerine 16px, satır
   yüksekliği biraz daha açık, harf aralığı ise sıfıra yakın tutulur. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
               "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
code, pre, samp, kbd { font-family: inherit; font-variant-numeric: tabular-nums; }

/* Başlıklar bold (700). Montserrat'ın büyük puntolarda doğal aralığı geniştir,
   bu yüzden negatif harf aralığı verilir — ama abartılırsa geometrik harfler
   birbirine girer, o yüzden ölçülü. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
p { margin: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* İnce, temaya uyan kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 38%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- düzen */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap--wide { max-width: 1280px; }
.wrap--narrow { max-width: 780px; }
.center { text-align: center; }

.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(56px, 8vw, 96px) 0; }
.section--alt { background: var(--bg-alt); }

/* Büyük harf kullanımında Montserrat sıkışık durur; aralık açılır. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.center .eyebrow::after {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.h1 { font-size: clamp(40px, 7vw, 84px); letter-spacing: -0.038em; line-height: 1.02; }
.h2 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.032em; line-height: 1.06; }
.h3 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.018em; line-height: 1.25; }

/* Yeşil degrade metin — yalnızca kısa vurgularda */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
  letter-spacing: -0.006em;
}
.muted { color: var(--muted); }
.small { font-size: 13.5px; line-height: 1.55; }
.tiny  { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
}

/* -------------------------------------------------------------- butonlar */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.004em;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s var(--ease), transform .22s var(--ease),
              box-shadow .3s var(--ease), opacity .2s, border-color .2s;
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
/* Parıltı: fare üstüne geldiğinde düğmenin yüzeyinden bir ışık geçer. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(253 253 251 / .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { background: var(--accent-h); text-decoration: none; box-shadow: var(--glow); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]::after { display: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--ghost {
  background: transparent;
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent-text) 45%, transparent);
  box-shadow: none;
}
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.btn--quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow-s);
}
.btn--quiet::after { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 70%); }
.btn--quiet:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-s); }

.btn--dark {
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-m);
}
.btn--dark:hover { background: var(--text); box-shadow: var(--shadow-l); }

.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--xs { height: 30px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.btn--xs svg { width: 14px; height: 14px; }
.btn--lg { height: 54px; padding: 0 30px; font-size: 16.5px; }

.linkarrow { font-size: 16.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.linkarrow::after { content: "→"; transition: transform .25s var(--ease-spring); }
.linkarrow:hover { text-decoration: none; }
.linkarrow:hover::after { transform: translateX(4px); }
[dir="rtl"] .linkarrow::after { content: "←"; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px -18px rgb(var(--shadow-ink) / .35);
}
/* --- sade üst bar --- (2026-10-24, kullanıcı kararı): solda yalnız tema +
   dil yuvarlak düğmeleri, ortada logo, sağda iki yuvarlak düğme genişliğinde
   "Aracı aç" hapı. Sayfa bağlantısı, hesap bağlantısı ve kaydırınca dolan
   yeşil şerit yok. 1fr auto 1fr ızgarası logoyu gerçek ortada tutar; RTL'de
   ızgara kendiliğinden aynalanır. */
.nav { --yuv: 40px; --yuv-ara: 8px; }
.nav__in {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
}
.nav__sol { position: relative; justify-self: start; display: flex; align-items: center; gap: var(--yuv-ara); min-width: 0; }
/* Dil menüsü sol grubun başından açılır (dil düğmesinin değil): 375 px'te
   340 px'lik menü ekrandan taşmasın. */
.nav .nxdil { position: static; }
.nav__logo, .nav__in > .brand { justify-self: center; }
.nav__sag { justify-self: end; display: flex; align-items: center; min-width: 0; }
.nav .themebtn { width: var(--yuv); height: var(--yuv); flex: none; }
.nav .themebtn svg { width: 16px; height: 16px; }
.nav .langwrap { flex: none; }
.nav a.nxdil__dugme { text-decoration: none; }
.nav__cta {
  width: calc(var(--yuv) * 2 + var(--yuv-ara)); /* = 88 px: iki yuvarlak + aradaki boşluk */
  height: var(--yuv);
  padding: 0 10px;
  border-radius: 999px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
}
.nav__ctaKisa { display: none; }
.nav__cta.is-kisa .nav__ctaUzun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__cta.is-kisa .nav__ctaKisa { display: inline; }
/* Marka yazı logosu. Harfler koyu/açık olduğu için temaya göre iki ayrı
   dosya kullanılır; ikisi de saydam zeminlidir. */
.brand {
  display: block;
  flex: none;
  width: 112px;
  height: 23px;
  background: var(--logo-wordmark) left center / contain no-repeat;
  transition: opacity .2s, transform .3s var(--ease-spring);
}
.brand:hover { text-decoration: none; opacity: .85; transform: translateY(-1px); }

/* Yuvarlak ok düğmesi — markanın dönüşüm simgesi */
.arrowbtn {
  position: relative;
  width: 54px; height: 54px;
  flex: none;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--arrow-btn) center / contain no-repeat;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), filter .22s var(--ease);
}
.arrowbtn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s, transform .4s var(--ease-spring);
}
.arrowbtn:hover { transform: scale(1.08) rotate(-8deg); }
.arrowbtn:hover::before { opacity: 1; transform: scale(1); }
.arrowbtn:active { transform: scale(.94); }
.arrowbtn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.arrowbtn.is-pulse::before { animation: nxring 1.8s var(--ease-out) infinite; }
.arrowbtn--sm { width: 26px; height: 26px; }
@keyframes nxring {
  0%   { opacity: .9; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* tema düğmesi */
.themebtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease-spring);
}
.themebtn:hover { color: var(--text); border-color: var(--line); transform: rotate(18deg); }
.themebtn svg { width: 15px; height: 15px; animation: nxpop .45s var(--ease-spring); }
.themebtn .ico-moon { display: none; }
.themebtn.is-dark .ico-sun { display: none; }
.themebtn.is-dark .ico-moon { display: block; }
@keyframes nxpop { from { transform: scale(.4) rotate(-60deg); opacity: 0; } }

/* Telefon genişliği: yan boşluk 16 px, logo 92 px. Üst bar 375 px'te
   16+88+12+92+12+88+16 = 324 px; hiçbir genişlikte yatay taşma yok.
   Araçtaki dil seçimi <select> (.langsel) olarak kalır; genişliği sınırlı. */
@media (max-width: 560px) {
  .nav__in { gap: 12px; padding: 0 16px; }
  .brand { width: 92px; }
  .langsel { width: 86px; text-overflow: ellipsis; }
}
@media (max-width: 400px) {
  .langsel { width: 66px; padding-right: 22px; }
}

/* --------------------------------------------------------- form alanı */

.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.field input, .field select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field .hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.notice {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 11px 13px;
}

/* ------------------------------------------------------------ bildirim */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 560px);
  transform: translate(-50%, 24px) scale(.96);
  background: var(--text);
  color: var(--bg);
  padding: 12px 20px 12px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-l);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-spring);
  z-index: 200;
}
.toast::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Bağlantı gibi görünen düğme — gerçekten bir eylem olduğu için <button>. */
.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s, opacity .2s;
}
.linkbtn:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- kart */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  padding: 28px;
}

/* Işık takibi: fare kartın üstünde gezerken imleç altında yumuşak bir yeşil
   hale belirir. Konumu fx.js --mx / --my değişkenleriyle yazar. */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%),
              color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.spot:hover::before { opacity: 1; }
/* Kenar ışığı: aynı konumdan kenarlığa vuran ince çizgi */
.spot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%),
              color-mix(in srgb, var(--accent) 70%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; color: var(--accent-text); }

/* --------------------------------------------------------------- tablo */

.nx-tablewrap {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.nx-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: max-content;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.002em;
}
/* Başlık şeridi, indirilen .xlsx dosyasındaki başlık satırıyla aynı yeşil. */
.nx-th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--head);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-head);
  padding: 11px 14px;
  border-right: 1px solid rgb(var(--shadow-ink) / .18);
  white-space: nowrap;
}
.nx-th:last-child { border-right: 0; }
.nx-th.is-num, .nx-td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-th--idx, .nx-td--idx { width: 52px; text-align: left; }
.nx-th--act, .nx-td--act { width: 40px; }

.nx-td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  vertical-align: top;
  max-width: 320px;
  word-break: break-word;
  transition: background-color .5s var(--ease-out);
}
.nx-td:last-child { border-right: 0; }
.nx-tr:last-child .nx-td { border-bottom: 0; }
.nx-tr:hover .nx-td { background: color-mix(in srgb, var(--tint) 70%, transparent); }
.nx-td.is-empty::after { content: "—"; color: var(--line); }
.nx-td[contenteditable]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface);
}
/* Isı haritası hücreleri: temaya göre yumuşatılmış yeşil / kırmızı */
.nx-td.cell-yesil { background-color: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important; color: var(--text) !important; font-weight: 500; }
.nx-td.cell-kirmizi { background-color: color-mix(in srgb, var(--danger) 16%, var(--surface)) !important; color: var(--text) !important; font-weight: 500; }
.nx-td.has-formula { position: relative; }
.nx-td.has-formula::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--accent) transparent transparent;
}
/* Satır numarası sütunu — Excel'in sol kenar şeridi gibi */
.nx-td--idx {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--bg-alt);
  text-align: center;
  font-size: 12px;
}
.nx-idx { display: inline-block; min-width: 18px; }
.nx-warn {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 5px;
  border-radius: 50%;
  background: var(--warn);
  color: #fdf6ef;
  font-size: 10px; font-weight: 700;
  cursor: help;
  vertical-align: 1px;
}
.nx-tr.has-issue .nx-td--idx { background: color-mix(in srgb, var(--warn) 10%, var(--bg-alt)); }
.nx-rowdel {
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.nx-tr:hover .nx-rowdel { opacity: 1; }
.nx-rowdel:hover { background: var(--line-soft); color: var(--text); }

.nx-tablewrap.is-compact { max-height: 340px; overflow-y: auto; }

/* Satırlar kademeli belirir — yeni tablo geldiğinde "oluştu" hissi */
.nx-table.is-enter .nx-tr {
  animation: nxrow .5s var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 24) * 22ms);
}
@keyframes nxrow {
  from { opacity: 0; transform: translateY(8px); }
}
/* Komutla değişen hücre bir an yeşille parlar */
.nx-td.is-flash { animation: nxflash 1.4s var(--ease-out); }
@keyframes nxflash {
  0%, 25% { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  100%    { background-color: transparent; }
}
.nx-th.is-new, .nx-td.is-new { animation: nxcol .6s var(--ease-out) both; }
@keyframes nxcol {
  from { opacity: 0; transform: translateX(-10px); }
}

/* ---------------------------------------------------------- animasyonlar */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal--scale { transform: translateY(20px) scale(.96); }
.reveal--blur { filter: blur(8px); }
.reveal--left { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; filter: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Izgara zemini: elektronik tablonun hücre çizgileri, kenarlara doğru söner */
.fx-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 96px 30px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
/* Kuzey ışığı: yavaşça gezinen bulanık yeşil lekeler */
.fx-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.fx-aurora i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  animation: nxdrift 22s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(1) { background: #00bf63; top: -22vmax; left: -8vmax; }
.fx-aurora i:nth-child(2) { background: #0d9488; top: -18vmax; right: -14vmax; animation-duration: 28s; animation-delay: -6s; }
.fx-aurora i:nth-child(3) { background: #9be15d; top: 12vmax; left: 30%; width: 30vmax; height: 30vmax; opacity: .12; animation-duration: 34s; animation-delay: -12s; }
:root[data-theme="dark"] .fx-aurora i { opacity: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fx-aurora i { opacity: .16; } }
@keyframes nxdrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vmax, 3vmax) scale(1.08); }
  100% { transform: translate(-4vmax, 6vmax) scale(.94); }
}

@keyframes nxspin { to { transform: rotate(360deg); } }
@keyframes nxfade { from { opacity: 0; } }
@keyframes nxup { from { opacity: 0; transform: translateY(10px); } }
@keyframes nxshimmer { to { background-position: -200% 0; } }
@keyframes nxblink { 50% { opacity: 0; } }
@keyframes nxfloat { 50% { transform: translateY(-8px); } }

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-alt) 25%, color-mix(in srgb, var(--line-soft) 80%, var(--surface)) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: nxshimmer 1.3s linear infinite;
}

/* -------------------------------------------------------------- altbilgi */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 42px 0 56px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg-alt);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: space-between;
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* --------------------------------------------------------- dil seçici */

.langwrap { display: inline-flex; }
.langsel {
  height: 34px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .2s, color .2s;
}
.langsel:hover { border-color: var(--line); color: var(--text); }

/* Sağdan sola diller: yerleşim yönü tersine döner, sayı sütunları hariç. */
[dir="rtl"] .plan__tag { left: auto; right: 28px; }
[dir="rtl"] .plan__list li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .plan__list li::before { left: auto; right: 4px; }
[dir="rtl"] .ba__lines li { padding-left: 0; padding-right: 15px; }
[dir="rtl"] .ba__lines li::before { left: auto; right: 0; }
[dir="rtl"] .nx-th, [dir="rtl"] .nx-td { text-align: right; }
[dir="rtl"] .nx-th.is-num, [dir="rtl"] .nx-td.is-num { text-align: left; }

/* ------------------------------------------------------ gezintideki hesap */

.nav__hesap { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.nav__hesap:hover { color: var(--text); text-decoration: none; }
.nav__kredi {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--tint);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- yuvarlak dil seçici (i18n.js) */
/* seciciKur(el, {bicim:'yuvarlak'}): üst çubuğun solundaki yuvarlak düğme
   (küre + dil kodu) ve 20 dilin kendi adlarıyla açılan menü. */
.nxdil { position: relative; display: inline-flex; }
.nxdil__dugme {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center; place-content: center;
  gap: 0;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.nxdil__dugme svg { width: 15px; height: 15px; margin-bottom: 1px; }
.nxdil__kod { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.nxdil__dugme:hover, .nxdil.is-acik .nxdil__dugme { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); }
.nxdil__dugme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nxdil__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  animation: nxdilin .18s var(--ease-out);
}
.nxdil__menu[hidden] { display: none; }
@keyframes nxdilin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.nxdil__sec {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.nxdil__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxdil__k { flex: none; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.nxdil__sec:hover, .nxdil__sec:focus-visible { background: var(--bg-alt); color: var(--text); outline: none; }
.nxdil__sec.is-on { background: var(--tint); color: var(--accent-text); }
.nxdil__sec.is-on .nxdil__k { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .nxdil__menu { animation: none; } }