/* ============================================================
   NOVIX AIR — KURUMSAL · ŞİRKET DOSYASI
   Ana sayfa / Projeler tasarım dili: mavi-siyah ↔ yumuşak beyaz
   ritim, Montserrat 200-300 sıkı tracking, JetBrains Mono künye,
   elektrik mavi aksan. İki kıta ağı · ekosistem hattı · omurga.
   ============================================================ */

:root {
  --k-accent:    #2f8dff;
  --k-accent-2:  #63a8ff;
  --k-steel:     #cdd8e8;
  --k-dark:      #06080e;
  --k-dark-2:    #0a0e16;
  --k-soft:      #f5f7fb;
  --k-gray:      #e9edf4;
  --k-fd: 'Inter Tight', Arial, sans-serif;
  --k-fm: 'JetBrains Mono', monospace;
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-ease2: cubic-bezier(0.16, 1, 0.3, 1);
  --k-max: 1500px;
  --k-pad: clamp(20px, 5vw, 88px);
}

#k-index { position: relative; background: var(--k-dark); overflow-x: clip; }
#k-index * { box-sizing: border-box; }

/* ---------- tema değişkenleri ---------- */
#k-index > section {
  position: relative; overflow: hidden;
  --t-bg:var(--k-dark); --t-h:#ffffff; --t-tx:#c3cbdb; --t-mut:#828da3; --t-dim:#4c5462;
  --t-line:rgba(255,255,255,.09); --t-line2:rgba(255,255,255,.15); --t-line3:rgba(255,255,255,.26);
  --t-panel:#0a0e16; --t-accent:var(--k-accent);
  color: var(--t-tx); background: var(--t-bg);
}
#k-index > section.kx-light {
  --t-bg:var(--k-soft); --t-h:#080b11; --t-tx:#4e5766; --t-mut:#6a7688; --t-dim:#a8b0bd;
  --t-line:rgba(8,20,40,.10); --t-line2:rgba(8,20,40,.16); --t-line3:rgba(8,20,40,.28);
  --t-panel:#ffffff;
}
#k-index > section.kx-gray {
  --t-bg:var(--k-gray); --t-h:#080b11; --t-tx:#4e5766; --t-mut:#6a7688; --t-dim:#9aa3b1;
  --t-line:rgba(8,20,40,.11); --t-line2:rgba(8,20,40,.17); --t-line3:rgba(8,20,40,.28);
  --t-panel:#ffffff;
}
#k-index > section.kx-blue {
  --t-bg:var(--k-accent); --t-h:#ffffff; --t-tx:#eaf3ff; --t-mut:#d3e6ff; --t-dim:rgba(255,255,255,.6);
  --t-line:rgba(255,255,255,.26); --t-line2:rgba(255,255,255,.38); --t-line3:rgba(255,255,255,.6);
  --t-panel:rgba(255,255,255,.10); --t-accent:#ffffff;
}

.k-wrap { max-width: var(--k-max); margin: 0 auto; padding-left: var(--k-pad); padding-right: var(--k-pad); position: relative; z-index: 1; }
.k-grid-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgba(160,190,230,.035) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(0deg,  rgba(160,190,230,.028) 0 1px, transparent 1px 220px); }

.k-eyebrow { display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--k-fm); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--t-mut); }
.k-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--k-accent);
  box-shadow: 0 0 10px rgba(47,141,255,.8); }
#k-index .kx-blue .k-eyebrow { color: rgba(255,255,255,.78); }
#k-index .kx-blue .k-eyebrow::before { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); }

.k-cut { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(40px, 6vh, 72px);
  font-family: var(--k-fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--t-mut); }
.k-cut i { flex: 1; height: 1px; background: var(--t-line2); position: relative; }
.k-cut i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; background: var(--t-accent); }
.k-cut .r { color: var(--t-dim); }

.k-h2 { font-family: var(--k-fd); font-weight: 650; color: var(--t-h);
  font-size: clamp(32px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.015em; margin: 16px 0 0; }
.k-up { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--k-ease), transform 1s var(--k-ease); }
.k-up.in { opacity: 1; transform: none; }

/* ============================================================
   HERO — KURUMSAL DOSYA (koyu) + iki kıta ağı
   ============================================================ */
#k-hero { min-height: 100vh; display: flex; align-items: center; padding: 150px 0 90px; }
#k-hero .k-wrap { width: 100%; }
.k-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
  gap: clamp(40px, 6vw, 100px); align-items: center; margin-top: 26px; }
.k-title { font-family: var(--k-fd); font-weight: 650; color: #fff; margin: 18px 0 0;
  font-size: clamp(44px, 5.8vw, 96px); line-height: 1.02; letter-spacing: -0.015em;
  text-shadow: 0 0 70px rgba(47,141,255,.2); }
.k-title b { font-weight: 650; color: var(--k-accent-2); }
.k-hero-sub { max-width: 600px; margin-top: 28px; color: var(--t-tx);
  font-size: clamp(14.5px, 1.2vw, 17px); line-height: 1.8; font-weight: 300; }

/* iki kıta ağ paneli */
.k-net { position: relative; background: var(--k-dark-2); border: 1px solid rgba(255,255,255,.12);
  padding: 22px; box-shadow: 0 50px 100px -50px rgba(3,5,10,.9); }
.k-net-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--k-fm); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #8fa5c9; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
.k-net-head .st { color: var(--k-accent-2); }
.k-net-map { position: relative; padding: 26px 0 8px; }
.k-net-arc { display: block; width: 100%; height: auto; }
.k-net-arc .base { stroke: rgba(160,190,230,.16); }
.k-net-arc .flow { stroke: var(--k-accent); stroke-dasharray: 8 10; animation: kFlow 2.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(47,141,255,.7)); }
@keyframes kFlow { to { stroke-dashoffset: -180; } }
.k-node { position: absolute; bottom: 0; width: 44%; }
.k-node.tr { left: 0; } .k-node.us { right: 0; text-align: right; }
.k-node .dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--k-accent); box-shadow: 0 0 14px rgba(47,141,255,.9); margin-bottom: 10px; }
.k-node .dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(47,141,255,.55); animation: kPing 2.4s ease-out infinite; }
.k-node.us .dot { background: var(--k-steel); box-shadow: 0 0 12px rgba(205,216,232,.7); }
.k-node.us .dot::after { border-color: rgba(205,216,232,.5); animation-delay: 1.2s; }
@keyframes kPing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.k-node .nm { font-family: var(--k-fd); font-weight: 400; color: #fff; font-size: 15.5px; letter-spacing: -0.01em; }
.k-node .rl { margin-top: 4px; font-family: var(--k-fm); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #55617a; }
.k-node .tm { margin-top: 7px; font-family: var(--k-fm); font-size: 11px; color: #8fa5c9; letter-spacing: .1em; }
.k-net-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09);
  font-family: var(--k-fm); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #55617a; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.k-net-foot b { color: #8fa5c9; font-weight: 400; }

/* ============================================================
   KİMLİK (beyaz) — statement + sayaç paneli
   ============================================================ */
#k-kimlik { padding: clamp(90px, 12vh, 150px) 0; }
.k-kimlik-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: clamp(40px, 6vw, 110px); align-items: start; }
.k-kimlik-grid .k-h2 { max-width: 640px; }
.k-body { margin-top: 24px; max-width: 620px; color: var(--t-tx); font-size: 15px; line-height: 1.85; font-weight: 300; }
.k-body + .k-body { margin-top: 16px; }
.k-facts { border-top: 1px solid var(--t-line2); position: sticky; top: 120px; }
.k-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px 2px; border-bottom: 1px solid var(--t-line); }
.k-facts .v { font-family: var(--k-fd); font-weight: 500; color: var(--t-h);
  font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.012em; line-height: 1; }
.k-facts .v small { font-size: .55em; color: var(--t-mut); font-weight: 400; }
.k-facts .k { font-family: var(--k-fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--t-mut); text-align: right; }

/* ============================================================
   EKOSİSTEM (gri) — entegrasyon hattı
   ============================================================ */
#k-eko { padding: clamp(90px, 12vh, 150px) 0; }
#k-eko .lead { max-width: 660px; margin-top: 22px; color: var(--t-tx); font-size: 15px; line-height: 1.8; font-weight: 300; }
.k-pipe { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(44px, 7vh, 80px); }
.k-pipe::before { content: ""; position: absolute; left: 2%; right: 2%; top: 27px; height: 1px;
  background: var(--t-line2); }
.k-pipe .pulse { position: absolute; top: 24px; left: 2%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-accent); box-shadow: 0 0 12px rgba(47,141,255,.9);
  animation: kPulse 5.2s var(--k-ease2) infinite; }
@keyframes kPulse { 0% { left: 2%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 96.5%; opacity: 0; } }
.k-pnode { position: relative; padding-top: 54px; }
.k-pnode::before { content: ""; position: absolute; top: 21px; left: 0; width: 13px; height: 13px;
  border: 1px solid var(--t-line3); background: var(--t-bg); transform: rotate(45deg); }
.k-pnode.on::before { border-color: var(--k-accent); background: var(--k-accent); box-shadow: 0 0 12px rgba(47,141,255,.6); }
.k-pnode .ix { font-family: var(--k-fm); font-size: 9.5px; letter-spacing: .2em; color: var(--t-dim); }
.k-pnode h3 { font-family: var(--k-fd); font-weight: 400; color: var(--t-h); margin: 8px 0 8px;
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.01em; }
.k-pnode p { font-size: 12.5px; line-height: 1.65; color: var(--t-mut); font-weight: 300; }
.k-eko-chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: clamp(40px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--t-line); }
.k-eko-chips .lbl { font-family: var(--k-fm); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--t-dim); margin-right: 6px; }
.k-chip { font-family: var(--k-fm); font-size: 11px; letter-spacing: .14em; color: var(--t-h);
  border: 1px solid var(--t-line2); padding: 8px 16px; position: relative;
  transition: border-color .35s ease, color .35s ease, background .35s ease; }
.k-chip:hover { border-color: var(--k-accent); color: var(--k-accent); }

/* ============================================================
   VİZYON & MİSYON (koyu, sinematik doktrin)
   ============================================================ */
#vizyon { padding: clamp(100px, 14vh, 170px) 0; }
.k-doctrine { font-family: var(--k-fd); font-weight: 500; color: #fff; max-width: 1080px;
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1.18; letter-spacing: -0.012em; margin: 24px 0 0; }
.k-doctrine .hl { color: var(--k-accent-2); text-shadow: 0 0 30px rgba(47,141,255,.4); }
.k-vm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(50px, 8vh, 90px); }
.k-vm-card { position: relative; background: var(--k-dark-2); border: 1px solid rgba(255,255,255,.1);
  padding: clamp(24px, 3vw, 40px); overflow: hidden; }
.k-vm-card::before { content: attr(data-num); position: absolute; right: 14px; top: 6px;
  font-family: var(--k-fd); font-weight: 600; font-size: clamp(60px, 6vw, 110px); line-height: 1;
  /* Kontur çift çizgi yapıyordu → dolgulu filigran */
  color: rgba(255,255,255,.07); pointer-events: none; }
.k-vm-card .tag { font-family: var(--k-fm); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--k-accent-2); }
.k-vm-card h3 { font-family: var(--k-fd); font-weight: 600; color: #fff; margin: 14px 0 12px;
  font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.01em; }
.k-vm-card p { color: #a9b4c9; font-size: 14px; line-height: 1.8; font-weight: 300; max-width: 480px; }
.k-vm-card .ln { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--k-accent);
  box-shadow: 0 0 14px rgba(47,141,255,.7); transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--k-ease) .2s; }
.k-vm-card.in .ln { transform: scaleY(1); }

/* ============================================================
   DEĞERLER (beyaz) — plaka satırları
   ============================================================ */
#k-degerler { padding: clamp(90px, 12vh, 150px) 0; }
.k-vals { margin-top: clamp(36px, 5vh, 60px); border-top: 1px solid var(--t-line2); }
.k-val { display: grid; grid-template-columns: 90px 56px minmax(0,.9fr) minmax(0,1.1fr);
  align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 3vh, 34px) 4px; border-bottom: 1px solid var(--t-line);
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--k-ease), transform .9s var(--k-ease), background .4s ease; }
.k-val.in { opacity: 1; transform: none; }
.k-val:hover { background: linear-gradient(90deg, rgba(47,141,255,.05), transparent 55%); }
.k-val .ix { font-family: var(--k-fm); font-size: 10.5px; letter-spacing: .14em; color: var(--t-dim); }
.k-val .ic { width: 40px; height: 40px; color: var(--t-mut); }
.k-val h3 { font-family: var(--k-fd); font-weight: 600; color: var(--t-h);
  font-size: clamp(22px, 2.4vw, 38px); letter-spacing: -0.012em; }
.k-val p { font-size: 13.5px; line-height: 1.7; color: var(--t-mut); font-weight: 300; max-width: 460px; }

/* ============================================================
   AR-GE (gri) — künyeli yetenek karoları
   ============================================================ */
#arge { padding: clamp(90px, 12vh, 150px) 0; }
.k-arge-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px); align-items: center; }
.k-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.k-tile { background: var(--t-panel); border: 1px solid var(--t-line);
  padding: 22px 20px; position: relative; overflow: hidden;
  transition: border-color .35s ease, transform .55s var(--k-ease), box-shadow .55s ease; }
.k-tile:hover { border-color: var(--k-accent); transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(8,20,40,.35); }
.k-tile .cd { font-family: var(--k-fm); font-weight: 500; font-size: 24px; letter-spacing: .1em; color: var(--k-accent); }
.k-tile .ds { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--t-mut); font-weight: 300; }
.k-tile .sq { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px;
  border: 1px solid var(--t-line3); }
.k-tile:hover .sq { background: var(--k-accent); border-color: var(--k-accent); }

/* ============================================================
   YOLCULUK (koyu) — omurgalı zaman çizelgesi
   ============================================================ */
#k-yol { padding: clamp(100px, 13vh, 170px) 0; }
.k-tl { position: relative; margin-top: clamp(44px, 7vh, 80px); padding-left: clamp(28px, 4vw, 60px); }
.k-tl::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.12); }
.k-tl-fill { position: absolute; left: 6px; top: 0; width: 1px; height: 0;
  background: linear-gradient(180deg, var(--k-accent), var(--k-accent-2));
  box-shadow: 0 0 12px rgba(47,141,255,.7); }
.k-tl-dot { position: absolute; left: 6px; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--k-accent); box-shadow: 0 0 16px rgba(47,141,255,.95); transform: translate(-4px, -4px); }
.k-tl-item { position: relative; padding: 0 0 clamp(40px, 6vh, 64px); max-width: 720px;
  opacity: .38; transition: opacity .6s ease; }
.k-tl-item::before { content: ""; position: absolute; left: calc(6px - clamp(28px, 4vw, 60px)); top: 8px;
  width: 9px; height: 9px; transform: rotate(45deg) ;
  border: 1px solid rgba(255,255,255,.3); background: var(--k-dark); transition: all .5s ease; }
.k-tl-item.lit { opacity: 1; }
.k-tl-item.lit::before { background: var(--k-accent); border-color: var(--k-accent); box-shadow: 0 0 10px rgba(47,141,255,.8); }
.k-tl-item .yr { display: inline-block; font-family: var(--k-fm); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--k-accent-2); border: 1px solid rgba(47,141,255,.35);
  padding: 5px 11px; }
.k-tl-item h3 { font-family: var(--k-fd); font-weight: 600; color: #fff; margin: 14px 0 8px;
  font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -0.01em; }
.k-tl-item p { color: #a9b4c9; font-size: 13.5px; line-height: 1.75; font-weight: 300; max-width: 560px; }

/* ============================================================
   CTA (mavi) — parçacık alanı
   ============================================================ */
#k-cta { padding: clamp(90px, 13vh, 160px) 0; text-align: center; overflow: hidden; }
#k-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#k-cta .k-wrap { position: relative; z-index: 1; }
#k-cta h2 { font-family: var(--k-fd); font-weight: 600; color: #fff; margin: 22px auto 0;
  max-width: 860px; font-size: clamp(30px, 4vw, 58px); line-height: 1.08; letter-spacing: -0.015em; }
#k-cta p { margin: 20px auto 0; max-width: 560px; color: var(--t-tx); font-size: 15px; line-height: 1.75; font-weight: 300; }
.k-cta-row { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.k-btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--k-fm); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid rgba(255,255,255,.55); color: #fff;
  transition: background .35s ease, color .35s ease, border-color .35s ease; will-change: transform; }
.k-btn:hover { background: #fff; color: var(--k-accent); border-color: #fff; }
.k-btn.ghost { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.85); }
.k-btn.ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ============================================================
   GENEL: progress · gren · perde · navbar teması
   ============================================================ */
#nx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 96; pointer-events: none; }
#nx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--k-accent), var(--k-accent-2));
  transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px rgba(47,141,255,.55); }
body .scroll-progress { display: none; } /* pages.js'in eski çubuğu yerine nx-progress */

#nx-grain { position: fixed; inset: 0; z-index: 79; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
body.nx-nav-light #main-navbar { background: linear-gradient(to bottom, rgba(245,247,251,.86), rgba(245,247,251,0)) !important; backdrop-filter: none !important; }
body.nx-nav-light #main-navbar #navbar-logo { filter: brightness(0) !important; opacity: .9; }
body.nx-nav-light #main-navbar .nav-link { color: #080b11 !important; }
body.nx-nav-light #main-navbar #mobile-menu-toggle span { background: #080b11 !important; }
body.nx-nav-light #main-navbar .lang-toggle { color: #080b11 !important; border-color: rgba(8,11,17,.4) !important; }

/* ============================================================
   DUYARLI
   ============================================================ */
@media (max-width: 1100px) {
  .k-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .k-net { max-width: 560px; }
  .k-kimlik-grid { grid-template-columns: 1fr; }
  .k-facts { position: static; }
  .k-arge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .k-pipe { grid-template-columns: 1fr; gap: 26px; }
  .k-pipe::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .k-pipe .pulse { display: none; }
  .k-pnode { padding: 0 0 0 34px; }
  .k-pnode::before { top: 4px; }
  .k-vm { grid-template-columns: 1fr; }
  .k-val { grid-template-columns: 44px minmax(0,1fr); row-gap: 8px; }
  .k-val .ix { display: none; }
  .k-val p { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) {
  #k-hero { padding-top: 120px; }
  .k-tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .k-net-arc .flow { animation: none; }
  .k-node .dot::after { animation: none; opacity: 0; }
  .k-pipe .pulse { animation: none; opacity: 0; }
}