/* ============================================================================
   Nöron Bilişim — site tasarım sistemi
   Marka Kılavuzu v1.5 kurallarına bağlıdır. Değiştirmeden önce oku:
     · TEK turuncu. Sayfa başına TEK birincil CTA. Turuncu yüzey payı ≤ %5.
     · GRADYAN YASAK — her yerde düz renk.
     · Köşe yarıçapı ≤ 8px (tek istisna: .rozet pill ve nokta göstergeleri).
     · Kartlarda gölge YOK; ayrım boşluk + zemin ton farkıyla yapılır.
     · Hareket 150–250 ms, tek easing, bir hareket bir anlam. Parallax/glow yok.

   🔴 TOKEN MİMARİSİ — buradaki ayrım kritik:
   "metin rengi" (--ink) ile "daima-koyu panel zemini" (--surface-dark) AYRI
   token'lardır. Hero, metrik şeridi, kapanış ve footer HER İKİ TEMADA da koyu
   kalır; tek token kullanılsaydı koyu temada ters dönüp beyaz olurlardı.
   --on-signal de ayrıdır: turuncu buton üstündeki metin iki temada da koyu.
============================================================================ */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  /* latin-ext ÖNCE: Türkçe ğ/ş/ı/İ bu altkümede. Sıra ters olsaydı tarayıcı
     latin'i seçip Türkçe karakterlerde yedek fonta düşerdi (karışık gövde). */
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("hanken-grotesk-latin-wght-normal.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;
}

* { box-sizing: border-box; }

:root {
  /* açık tema (varsayılan) */
  --paper: #faf7f2;
  --ink: #1c1b22;
  --signal: #ff5a28;
  --signal-hover: #ff6e42;
  --signal-text: #c93b14; /* açık zeminde erişilebilir turuncu METİN */
  --grey: #8a8694;
  --gri2: #6e6a78;
  --card: #fffdf9;
  --line: rgba(28, 27, 34, 0.14);

  /* her iki temada KOYU kalan yüzeyler */
  --surface-dark: #1c1b22;
  --on-dark: #f5f1ea;
  --on-dark-muted: #a29dab;
  --on-signal: #1c1b22; /* turuncu üstü metin — iki temada da koyu */
  --frame: #1c1b22; /* ekran çerçevesi */
  --frame-dot: #4a4754;

  --ez: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Koyu tema: yalnız ROL token'ları yeniden tanımlanır; yukarıdaki
   daima-koyu yüzeyler bilinçli olarak dokunulmaz. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --paper: #141119;
    --ink: #f0ece5;
    --signal-text: #ff8256;
    --grey: #8a8694;
    --gri2: #a29dab;
    --card: #1f1c26;
    --line: rgba(240, 236, 229, 0.16);
  }
}
:root[data-tema="koyu"] {
  --paper: #141119;
  --ink: #f0ece5;
  --signal-text: #ff8256;
  --grey: #8a8694;
  --gri2: #a29dab;
  --card: #1f1c26;
  --line: rgba(240, 236, 229, 0.16);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
p { margin: 0; }
img { max-width: 100%; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1088px; margin: 0 auto; padding: 0 24px; }
/* Ekran ağırlıklı bölümler için geniş kap: metin 1088'de rahat okunur ama
   ürün ekranı 1088 içinde küçük kalıyordu ("hiçbir şey gözükmüyor" geri
   bildirimi). Genişlik yalnız ekran taşıyan bölümlerde açılır. */
.wrap-genis { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: -0.0125em; margin: 0; }
.lede { color: var(--gri2); font-size: 18px; line-height: 1.56; margin-top: 16px; max-width: 56ch; }
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey); font-feature-settings: "case";
}

/* Reveal — içerik sahneye BİR KEZ girer (İletim ilkesi).
   🔴 `.js` KAPISI ŞART: kural doğrudan `.reveal`e yazılsaydı JavaScript
   çalışmadığında (hata, engelleyici eklenti, tarayıcı ayarı) sayfanın gövdesi
   KALICI OLARAK GÖRÜNMEZ kalırdı — ilk derlemede tam sayfa ekran görüntüsünde
   ürün kartları ve giriş kutuları bomboş çıktı. Sınıfı <head>'deki satır içi
   betik ekler; yani opaklık ancak onu geri alacak JS varsa sıfırlanır. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.22s var(--ez), transform 0.22s var(--ez); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- üst bar ---------- */
.ust { background: var(--surface-dark); color: var(--on-dark); }
nav { display: flex; align-items: center; gap: 24px; padding: 20px 0; flex-wrap: wrap; }
nav .logo { display: block; width: 208px; flex: none; }
nav .logo svg { width: 100%; height: auto; display: block; }
nav .baglar { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; }
nav .baglar a { color: var(--on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
nav .baglar a:hover { color: var(--on-dark); }
nav .baglar a.geri { margin-right: auto; }

/* İKİ GİRİŞ AYRI: ERP girişi (çerçeveli) müşteri portalından görsel olarak
   ayrışır; ikisi de turuncu OLAMAZ — sayfanın tek turuncu CTA'sı hero'dadır. */
.giris-grup { display: flex; align-items: center; gap: 10px; }
.giris-btn {
  display: inline-block; font-size: 14px; font-weight: 600; padding: 9px 16px;
  border-radius: 8px; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(245, 241, 234, 0.28); color: var(--on-dark) !important;
}
.giris-btn:hover { border-color: var(--on-dark); }
.giris-btn.dolu { background: var(--on-dark); color: var(--surface-dark) !important; border-color: var(--on-dark); }
.giris-btn.dolu:hover { background: #fff; }

/* ---------- hero ---------- */
.hero { background: var(--surface-dark); color: var(--on-dark); }
.hero-ic { padding: 48px 0 0; }
.hero h1 {
  font-size: clamp(36px, 5vw, 54px); line-height: 1.12; font-weight: 650;
  letter-spacing: -0.02em; margin: 20px 0 0; max-width: 18ch;
}
.hero h1 em { color: var(--signal); font-style: normal; }
.hero-sub { color: var(--on-dark-muted); font-size: 18px; line-height: 1.56; margin: 20px 0 0; max-width: 52ch; }
.hero-orta { text-align: center; }
.hero-orta h1, .hero-orta .hero-sub { margin-left: auto; margin-right: auto; }
.hero-ikili { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-ikili { grid-template-columns: 1fr; } }

.btn {
  display: inline-block; background: var(--signal); color: var(--on-signal);
  font-weight: 600; font-size: 16px; padding: 14px 28px; border-radius: 8px;
  text-decoration: none; margin-top: 32px;
}
.btn:hover { background: var(--signal-hover); }
.btn2 {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 8px; text-decoration: none;
}
.btn2:hover { opacity: 0.88; }
.ikincil {
  display: inline-block; margin-top: 32px; margin-left: 20px; color: var(--on-dark);
  font-weight: 500; font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 234, 0.4); padding-bottom: 2px;
}
.ikincil:hover { border-color: var(--on-dark); }

/* Ürün lockup'ı — ürün sayfası hero'sunda ürünün kendi imzası (Gizli E / T). */
.urun-lockup { width: min(300px, 72vw); margin-bottom: 20px; }
.hero-orta .urun-lockup { margin-inline: auto; }
.urun-lockup svg { width: 100%; height: auto; display: block; }

/* Marka GIF'leri — zeminleri SABİT üretilmiş: gizli-n #FAF7F2, takımyıldız
   #1C1B22 (kit ölçümüyle doğrulandı). Kendi zeminleriyle kart gibi dururlar;
   tema değişse de bozulmazlar. Hareket-azaltmada <picture> durgun kareyi verir. */
.gif-kart { background: #faf7f2; border-radius: 8px; overflow: hidden; max-width: 400px; }
.gif-kart img { display: block; width: 100%; height: auto; }
.hero-gif { max-width: 400px; width: 100%; justify-self: center; }
.hero-gif img { display: block; width: 100%; height: auto; border-radius: 8px; }

.marka-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 40px; }
@media (max-width: 800px) { .marka-grid { grid-template-columns: 1fr; } }
.marka-grid .madde { padding-left: 18px; position: relative; margin-top: 14px; color: var(--gri2); font-size: 15px; line-height: 1.6; }
.marka-grid .madde::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--grey); }
.marka-grid .madde.sinyal::before { background: var(--signal); }
.marka-grid .madde b { color: var(--ink); font-weight: 600; }

.stage3d { width: 100%; aspect-ratio: 1/1; max-height: 440px; position: relative; }
.stage3d canvas { display: block; }
/* Yedek metin VARSAYILAN OLARAK GİZLİ: landing-scene.js WebGL kurulamazsa
   display:block yapar. Görünür bırakılırsa tuvali aşağı iter ve sahne bir
   sonraki bölümün üstüne taşar (ilk derlemede yaşandı). */
.s3-fallback {
  display: none; position: absolute; inset: 0; place-content: center;
  text-align: center; color: var(--on-dark-muted); font-size: 14px; margin: 0;
}

.hero-ekran { max-width: 1160px; margin: 56px auto -110px; position: relative; z-index: 2; }
.hero-alt { height: 136px; background: var(--paper); }

/* ---------- ekran çerçevesi (imza kadraj) ----------
   Gölge yok, perspektif yok, kenarlık yok — kılavuzun 4. yasağı.
   figure varsayılan margin'i sıfırlanır (tarayıcı 1em verir, kadrajı kaydırır). */
.cerceve { background: var(--frame); border-radius: 8px; overflow: hidden; margin: 0; }
.cerceve .bar { display: flex; gap: 6px; padding: 12px 14px; }
.cerceve .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame-dot); }
.cerceve img { display: block; width: 100%; height: auto; }
/* Her çerçeve içi ekran tıklanınca ışık kutusunda tam boy açılır (noron.js). */
.js .cerceve img { cursor: zoom-in; }

/* ---------- ışık kutusu (lightbox) ----------
   "Ekranda hiçbir şey gözükmüyor" geri bildiriminin asıl cevabı: her ekran
   tıklanınca 1800px kaynağıyla neredeyse tam ekran açılır; ←/→ sayfadaki
   diğer ekranlara geçer, Esc kapatır. <dialog> kullanılır — odak tuzağı ve
   Esc tarayıcıdan bedava gelir. */
.isik-kutusu { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
.isik-kutusu::backdrop { background: rgba(20, 17, 25, 0.94); }
.isik-kutusu .ik-ic { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; box-sizing: border-box; }
.isik-kutusu img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; border-radius: 8px; background: var(--frame); }
.isik-kutusu figcaption { color: #f5f1ea; font-size: 14px; text-align: center; max-width: 80ch; }
.isik-kutusu .ik-sayac { color: #a29dab; font-size: 12.5px; letter-spacing: 0.08em; }
.isik-kutusu button {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 8px; border: 1px solid rgba(245, 241, 234, 0.3);
  background: rgba(28, 27, 34, 0.7); color: #f5f1ea; cursor: pointer; font-size: 20px;
}
.isik-kutusu button:hover { border-color: #f5f1ea; }
.isik-kutusu .ik-kapat { top: 20px; right: 20px; }
.isik-kutusu .ik-onceki { left: 16px; top: 50%; transform: translateY(-50%); }
.isik-kutusu .ik-sonraki { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .isik-kutusu .ik-onceki { left: 8px; }
  .isik-kutusu .ik-sonraki { right: 8px; }
  .isik-kutusu img { max-width: 96vw; max-height: 74vh; }
}

/* ---------- değer üçlüsü ---------- */
.deger { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; }
.deger .nok { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-bottom: 16px; }
.deger h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.005em; }
.deger p { color: var(--gri2); font-size: 15px; line-height: 1.6; }

/* ---------- ürün kartları ---------- */
.urunler { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.urun { background: var(--card); border-radius: 8px; padding: 36px 32px 32px; display: flex; flex-direction: column; }
.urun .tile { width: 80px; display: block; }
.urun .tile svg { width: 100%; height: auto; display: block; }
.urun h3 { font-size: 24px; font-weight: 600; margin: 24px 0 0; letter-spacing: -0.01em; }
.urun .durum { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-top: 8px; }
.urun > p { color: var(--gri2); font-size: 15px; line-height: 1.6; margin-top: 12px; }
.urun ul { margin: 20px 0 0; padding: 0; list-style: none; }
.urun li { font-size: 14.5px; line-height: 1.6; color: var(--gri2); padding-left: 18px; position: relative; margin-top: 10px; }
.urun li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.urun li b { color: var(--ink); font-weight: 600; }
.urun .git {
  margin-top: auto; padding-top: 24px; color: var(--ink); font-weight: 500; font-size: 15px;
  text-decoration: none; align-self: flex-start;
}
.urun .git span { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.urun .git:hover span { color: var(--signal-text); border-color: var(--signal-text); }

/* ---------- yapışkan özellik anlatıcısı ----------
   4fr/8fr + geniş kap: ekran sütunu ~840px olur (eski 5fr/6fr + 1088 kapta
   ~530px'ti — okunmuyordu). Metin sütunu 4fr'de hâlâ ~40ch, rahat. */
.ozellikler { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; margin-top: 24px; }
.oz-metin .oz { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; }
.oz .no { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--signal-text); }
.oz h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 10px 0 0; }
.oz .iddia { font-size: 17px; color: var(--ink); font-weight: 500; margin-top: 8px; }
.oz p.aciklama { color: var(--gri2); font-size: 15.5px; line-height: 1.6; margin-top: 12px; max-width: 42ch; }
/* top değeri ekranı görüş alanının DİKEY ORTASINA yakın tutar; 8vh'de
   (şablonun özgün değeri) ekran tepeye yapışıp altında büyük bir boşluk
   bırakıyordu, metin ise ortalıydı — ikisi hizasızdı. */
.oz-sahne { position: sticky; top: 24vh; }
.oz-sahne .katman { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s ease; }
.oz-sahne .katman.aktif { opacity: 1; position: relative; }
.oz-noktalar { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.oz-noktalar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 0.2s; }
.oz-noktalar i.aktif { background: var(--signal); }
@media (max-width: 860px) {
  .ozellikler { grid-template-columns: 1fr; gap: 24px; }
  .oz-sahne { position: static; order: -1; }
  .oz-sahne .katman { display: none; position: relative; }
  .oz-sahne .katman.aktif { display: block; }
  .oz-metin .oz { min-height: 0; padding: 40px 0 8px; }
}

/* ---------- metrik şeridi ---------- */
.metrik { background: var(--surface-dark); color: var(--on-dark); }
.metrik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; text-align: center; }
.metrik .sayi { font-size: clamp(38px, 5vw, 60px); font-weight: 650; letter-spacing: -0.02em; }
.metrik .sayi em { color: var(--signal); font-style: normal; }
.metrik .met-alt { color: var(--on-dark-muted); font-size: 15px; margin-top: 8px; }
.metrik .dip { color: var(--on-dark-muted); font-size: 12.5px; text-align: center; margin-top: 40px; }

/* ---------- "ve dahası" ---------- */
.dahasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.dk { background: var(--card); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.dk .cerceve { border-radius: 0; }
.dk-tx { padding: 24px 28px 28px; }
.dk-tx h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.005em; }
.dk-tx p { color: var(--gri2); font-size: 14.5px; line-height: 1.6; }
.dahasi-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px 48px; margin-top: 56px; }
.dm h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.dm p { color: var(--gri2); font-size: 14px; line-height: 1.6; }

/* ---------- adım ızgarası (yaklaşım / kurulum) ---------- */
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin-top: 40px; }
.adim .no { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--signal-text); }
.adim h3 { font-size: 19px; font-weight: 600; margin: 8px 0 8px; }
.adim p { color: var(--gri2); font-size: 15px; line-height: 1.6; }

/* ---------- android ---------- */
.apk-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 40px; }
@media (max-width: 760px) { .apk-grid { grid-template-columns: 1fr; } }
.qr-kart { background: var(--card); border-radius: 8px; padding: 32px; text-align: center; }
.qr-kart img { display: block; width: 100%; max-width: 220px; margin: 0 auto; border-radius: 4px; }
.qr-kart p { color: var(--gri2); font-size: 13.5px; margin-top: 14px; }
.apk-alt { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }
.rozet { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--grey); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }

/* ---------- çapraz ürün ---------- */
.capraz { background: var(--card); border-radius: 8px; padding: 36px 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.capraz .tile { width: 88px; flex: none; }
.capraz .tile svg { width: 100%; height: auto; display: block; }
.capraz h3 { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.capraz p { color: var(--gri2); font-size: 15px; max-width: 46ch; }
.capraz a { margin-left: auto; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
.capraz a:hover { color: var(--signal-text); border-color: var(--signal-text); }

/* ---------- tam özellik ızgarası ---------- */
.ozgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 48px; margin-top: 40px; }
.ozkat h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-text); margin: 0 0 16px; font-feature-settings: "case"; }
.ozkat ul { margin: 0; padding: 0; list-style: none; }
.ozkat li { font-size: 14.5px; line-height: 1.55; color: var(--gri2); padding: 9px 0 9px 18px; position: relative; border-top: 1px solid var(--line); }
.ozkat li:first-child { border-top: 0; }
.ozkat li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }
.ozkat li b { color: var(--ink); font-weight: 600; }

/* ---------- son güncellemeler (sürüm kartları) ----------
   İçerik mont.py tarafından nexus-erp changelog'undan DERLEME ANINDA çekilir —
   elle yazılmaz, bayatlamaz. "Ürün yaşıyor" kanıtının kendisi. */
.surumler { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.surum { background: var(--card); border-radius: 8px; padding: 26px 28px; }
.surum .s-bas { display: flex; align-items: baseline; gap: 12px; }
.surum .s-ver { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.surum .s-guncel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--signal-text); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.surum .s-tarih { margin-left: auto; color: var(--grey); font-size: 13px; }
.surum ul { list-style: none; margin: 14px 0 0; padding: 0; }
.surum li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--gri2); }
.surum li i {
  font-style: normal; display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 3px;
}
.surum .s-devam { color: var(--grey); font-size: 12.5px; margin-top: 10px; }

/* ---------- Excel'e karşı Nöron karşılaştırması ---------- */
.kiyas { margin-top: 40px; }
.kiyas-bas { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 24px; padding-bottom: 12px; }
.kiyas-bas span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); font-feature-settings: "case"; }
.kiyas-satir { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.kiyas-satir .konu { font-weight: 600; font-size: 15px; }
.kiyas-satir p { font-size: 14.5px; line-height: 1.6; }
.kiyas-satir .eski { color: var(--grey); }
.kiyas-satir .yeni { color: var(--ink); padding-left: 16px; position: relative; }
.kiyas-satir .yeni::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.hucre-etiket { display: none; }
@media (max-width: 760px) {
  .kiyas-bas { display: none; }
  .kiyas-satir { grid-template-columns: 1fr; gap: 10px; }
  .hucre-etiket {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--grey); margin-bottom: 3px;
  }
}

/* ---------- "hemen dene" şeridi ----------
   Turuncu DEĞİL (sayfanın tek turuncu CTA'sı hero'da); antrasit panel +
   mono giriş bilgileri. Demo hesabı bilerek açık yazılır — kullanıcı kararı. */
.dene { background: var(--surface-dark); color: var(--on-dark); border-radius: 8px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.dene h3 { font-size: 24px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.dene p { color: var(--on-dark-muted); font-size: 15px; line-height: 1.6; max-width: 52ch; }
.dene .kimlik { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 16px; }
.dene .kimlik span {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13.5px;
  color: var(--on-dark); background: rgba(245, 241, 234, 0.08);
  border: 1px solid rgba(245, 241, 234, 0.18); border-radius: 6px; padding: 6px 12px;
  font-feature-settings: "liga" 0, "calt" 0;
}
.dene .kimlik b { color: var(--on-dark-muted); font-weight: 500; margin-right: 6px; font-family: "Hanken Grotesk", sans-serif; }
.dene .btn-acik { display: inline-block; background: var(--on-dark); color: var(--surface-dark); font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.dene .btn-acik:hover { background: #fff; }
@media (max-width: 760px) { .dene { grid-template-columns: 1fr; } }

/* ---------- SSS (details/summary — JS gerekmez) ---------- */
.sss { max-width: 780px; margin-top: 32px; }
.sss details { border-top: 1px solid var(--line); }
.sss details:last-child { border-bottom: 1px solid var(--line); }
.sss summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px;
  padding: 18px 4px; font-size: 16.5px; font-weight: 600; color: var(--ink); min-height: 44px;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--grey); border-bottom: 2px solid var(--grey);
  transform: rotate(45deg); transition: transform 0.2s var(--ez);
}
.sss details[open] summary::after { transform: rotate(-135deg); }
.sss summary:hover { color: var(--signal-text); }
.sss .cevap { padding: 0 4px 20px; color: var(--gri2); font-size: 15px; line-height: 1.65; max-width: 64ch; }
.sss .cevap a { color: var(--signal-text); }

/* ---------- kinetik açılış imzası ----------
   Marka kılavuzunun öngördüğü imza: dağınık noktalar Gizli N'ye oturur,
   çekirdek TEK nabız atar, katman kaybolur. Oturum başına BİR KEZ (noron.js
   sessionStorage ile karar verir ve katmanı o zaman kurar); hareket-azaltmada
   hiç oynamaz. Tamamı ~1.6 sn — bekletmez, tıklayınca anında kapanır. */
.imza { position: fixed; inset: 0; z-index: 100; background: var(--surface-dark); display: grid; place-items: center; animation: imzaKaybol 0.3s var(--ez) 1.45s forwards; }
.imza svg { width: min(46vmin, 300px); height: auto; }
/* SVG daire transformları elemanın KENDİ kutusuna göre işlesin — yoksa
   translate/scale viewBox köşesine göre döner ve imza dağılır. */
.imza circle { transform-box: fill-box; transform-origin: center; }
.imza .nokta { fill: #f5f1ea; animation: imzaOtur 0.7s var(--ez) forwards; }
.imza .cekirdek { fill: var(--signal); animation: imzaOtur 0.7s var(--ez) forwards, imzaNabiz 0.5s var(--ez) 0.85s; }
.imza .bag { stroke: #8a8694; stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: imzaBag 0.25s ease-out 0.7s forwards; }
.imza .n1 { transform: translate(-26px, 14px); }
.imza .n2 { transform: translate(-18px, -20px); }
.imza .n3 { transform: translate(24px, 18px); }
.imza .n4 { transform: translate(20px, -14px); }
.imza .n5 { transform: translate(0, -30px); }
@keyframes imzaOtur { to { transform: translate(0, 0); } }
@keyframes imzaBag { to { opacity: 0.85; } }
@keyframes imzaNabiz { 50% { transform: translate(0, 0) scale(1.55); } to { transform: translate(0, 0) scale(1); } }
@keyframes imzaKaybol { to { opacity: 0; visibility: hidden; } }

/* ---------- iki giriş kutusu (landing) ---------- */
.girisler { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.gk { background: var(--card); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; }
.gk h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.gk p { color: var(--gri2); font-size: 14.5px; line-height: 1.6; }
.gk .kime { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
.gk .git { margin-top: 20px; align-self: flex-start; }

/* ---------- kapanış + footer ---------- */
.kapanis { background: var(--surface-dark); color: var(--on-dark); text-align: center; }
.kapanis h2 { font-size: clamp(28px, 3.6vw, 40px); }
.kapanis p { color: var(--on-dark-muted); font-size: 17px; margin-top: 16px; max-width: 52ch; margin-inline: auto; }
.kapanis .iletisim { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.kapanis .iletisim a { color: var(--on-dark); font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(245, 241, 234, 0.35); padding-bottom: 2px; }
.kapanis .iletisim a:hover { border-color: var(--on-dark); }

footer { background: var(--surface-dark); color: var(--on-dark-muted); padding: 48px 0 40px; }
footer .fgrid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; }
footer .flogo { width: 176px; display: block; }
footer .flogo svg { width: 100%; height: auto; display: block; }
footer .slogan { font-size: 14px; margin-top: 14px; max-width: 30ch; }
footer h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 14px; opacity: 0.7; }
footer ul { margin: 0; padding: 0; list-style: none; }
footer li { margin-bottom: 10px; }
footer a { color: var(--on-dark); text-decoration: none; font-size: 14.5px; }
footer a:hover { color: var(--signal); }
footer .alt { border-top: 1px solid rgba(245, 241, 234, 0.14); margin-top: 40px; padding-top: 24px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 13px; }
/* Tescil rozeti: sağlayıcının betiği rozeti position:absolute ile çiziyor.
   Kapsayıcı konumlandırılmazsa en yakın konumlandırılmış ataya (yani sayfaya)
   göre hizalanır ve içeriğin üstüne biner. min-height, betik yüklenene kadar
   satırın zıplamamasını sağlar. */
footer .tescil { margin-left: auto; position: relative; min-height: 34px; min-width: 90px; }

/* ---------- tema düğmesi ---------- */
.tema-btn {
  background: none; border: 1px solid rgba(245, 241, 234, 0.28); color: var(--on-dark);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  display: inline-grid; place-items: center; flex: none;
}
.tema-btn:hover { border-color: var(--on-dark); }
.tema-btn svg { width: 16px; height: 16px; display: block; }
.tema-btn .ay { display: none; }
:root[data-tema="koyu"] .tema-btn .ay { display: block; }
:root[data-tema="koyu"] .tema-btn .gunes { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-btn .ay { display: block; }
  :root:not([data-tema="acik"]) .tema-btn .gunes { display: none; }
}

@media (max-width: 620px) {
  section { padding: 64px 0; }
  nav { gap: 16px; }
  nav .logo { width: 168px; }
  nav .baglar { gap: 14px; width: 100%; margin-left: 0; }
  .hero-ekran { margin: 40px auto -64px; }
  .hero-alt { height: 88px; }
  .ikincil { margin-left: 0; display: block; }
}