/* ==========================================================================
   NOVAHUN — Design System & Motion Layer
   1. Tokens          6. Reveal / Motion
   2. Reset & Base    7. Layout Bileşenleri
   3. Tipografi       8. Sayfa Bölümleri
   4. Butonlar        9. Footer & Dock
   5. Navbar         10. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Marka renkleri */
  --nv-ink:        #060B18;
  --nv-ink-2:      #0B1327;
  --nv-ink-3:      #121C33;
  --nv-blue:       #2563EB;
  --nv-blue-600:   #1D4ED8;
  --nv-cyan:       #06B6D4;
  --nv-violet:     #8B5CF6;
  --nv-emerald:    #10B981;

  /* Yüzeyler */
  --surface:       #FFFFFF;
  --surface-soft:  #F5F8FE;
  --surface-alt:   #ECF2FD;
  --line:          #E2E8F0;
  --line-soft:     #EEF2F9;

  /* Metin */
  --text:          #0A1226;
  --text-muted:    #4A5A75;
  --text-faint:    #8496AF;
  --text-invert:   #F1F5FB;
  --text-invert-m: rgba(198, 213, 236, 0.72);

  /* Gradyanlar */
  --grad-brand:    linear-gradient(120deg, #2563EB 0%, #06B6D4 100%);
  --grad-aurora:   linear-gradient(120deg, #60A5FA 0%, #22D3EE 45%, #A78BFA 100%);
  --grad-dark:     linear-gradient(180deg, #060B18 0%, #0B1327 55%, #060B18 100%);
  --grad-glass:    linear-gradient(140deg, rgba(255,255,255,.86), rgba(255,255,255,.42));

  /* Tipografi */
  --font-display:  'Lexend', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-serif:    'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:     ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  /* Radius */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-full: 999px;

  /* Gölge */
  --sh-sm:   0 1px 2px rgba(9, 21, 44, .06), 0 2px 6px rgba(9, 21, 44, .05);
  --sh-md:   0 6px 18px rgba(9, 21, 44, .08), 0 2px 6px rgba(9, 21, 44, .05);
  --sh-lg:   0 18px 48px rgba(9, 21, 44, .12), 0 6px 16px rgba(9, 21, 44, .06);
  --sh-xl:   0 40px 90px rgba(9, 21, 44, .18);
  --sh-glow: 0 12px 40px rgba(37, 99, 235, .35);

  /* Hareket */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-soft:  cubic-bezier(.25, .8, .25, 1);
  --t-fast:  180ms var(--ease-soft);
  --t-base:  320ms var(--ease-soft);
  --t-slow:  760ms var(--ease-out);

  /* Ölçü */
  --container: 1240px;
  --nav-h:     78px;
  --nav-h-sm:  64px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* Kapalı off-canvas menü ekranın sağında bekler ve position:fixed
     olduğu için body'deki overflow-x kuralıyla kırpılmaz. Kök öğede clip,
     görünüm alanına yayılarak yatay kaydırmayı tamamen engeller. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  line-height: 1.65;
  /* DİKKAT: burada 'hidden' kullanılmamalı. overflow-x:hidden, overflow-y'yi
     'auto'ya zorlayarak gövdeyi bir kaydırma konteynerine çevirir ve
     içerideki position:sticky (sabitlenen sahne + yatay sahne) hiç
     devreye girmez. 'clip' kaydırma konteyneri oluşturmaz. */
  overflow-x: hidden;   /* clip desteklemeyen eski tarayıcılar için yedek */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }

/* <picture> yalnızca tarayıcıya kaynak seçtirir; kendisi düzende bir kutu
   oluşturmamalı. display:contents onu kutu ağacından çıkarır, böylece
   içindeki <img> flex/grid kapsayıcısının doğrudan öğesi olarak kalır ve
   .screen__photo, .case__media img gibi mevcut kurallar aynen çalışır. */
picture { display: contents; }
svg { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

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

::selection { background: rgba(37, 99, 235, .18); }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: .6rem 1rem; border-radius: var(--r-sm);
  background: var(--nv-ink); color: #fff; font-size: .85rem;
  transform: translateY(-160%);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

.section { position: relative; padding: clamp(72px, 9vw, 132px) 0; }
.section--tight { padding: clamp(56px, 6vw, 88px) 0; }
.section--dark { background: var(--grad-dark); color: var(--text-invert); overflow: hidden; }
.section--soft { background: var(--surface-soft); }

/* ==========================================================================
   3. TİPOGRAFİ
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }


.h-display { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
.h-section  { font-size: clamp(2rem, 4vw, 3.1rem); }
.h-card     { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

.lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--text-muted);
  max-width: 62ch;
}
.section--dark .lead { color: var(--text-invert-m); }

.grad-text {
  background: var(--grad-aurora);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-text--light { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .h-section { margin: 0 0 1.1rem; }

/* ==========================================================================
   4. BUTONLAR
   ========================================================================== */
.btn {
  --btn-bg: var(--nv-ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem;
  border-radius: var(--r-full);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-base); }
.btn:hover { transform: translateY(-3px); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(-1px); }

.btn--primary { --btn-bg: var(--grad-brand); box-shadow: var(--sh-glow); }
.btn--primary:hover { box-shadow: 0 18px 46px rgba(37, 99, 235, .45); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border: 1.5px solid var(--line);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--nv-blue); color: var(--nv-blue-600); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--nv-ink); box-shadow: var(--sh-lg); }

.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff;
  border: 1.5px solid rgba(255, 255, 255, .3);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }

.btn--sm { min-height: 42px; padding: .58rem 1.2rem; font-size: .88rem; }

/* Parlama efekti */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .92rem; color: var(--nv-blue-600);
  transition: gap var(--t-fast), color var(--t-fast);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: .8rem; }
.section--dark .link-arrow { color: #7DD3FC; }

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
/* ---- AÇILIŞ EKRANI ----
   Sade tutulur: neredeyse siyah zemin, tek bir yumuşak mavi ışık,
   kırık beyaz kelime ve tek renk ilerleme çizgisi. Marka gradyanı
   burada kullanılmaz — ilk izlenim sakin olsun. */
.preloader { display: none; }
.js .preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(37, 99, 235, .16), transparent 72%),
    var(--nv-ink);
  transition: opacity 520ms var(--ease-out), visibility 520ms;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

/* Kelime ile çizgiyi ortak bir ızgarada ortalar. Eskiden bu kapsayıcı
   stilsizdi; çizgi kelimeye göre sola yaslanıyordu. */
.preloader__inner {
  display: grid; justify-items: center;
  gap: clamp(1.15rem, 2.4vw, 1.6rem);
}

.preloader__word {
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.6vw, 2.4rem);
  font-weight: 700;
  color: #EAF0FA;
}
/* letter-spacing son harften sonra da boşluk bırakır; bu boşluk kutuyu
   genişletip yazıyı görsel olarak sola kaydırıyordu. Harfler arası
   boşluğu margin ile verip son harfte sıfırlamak sorunu kökten çözer. */
.preloader__word i {
  font-style: normal;
  margin-right: .34em;
  opacity: 0;
  transform: translateY(14px);
  animation: preloadLetter 620ms var(--ease-out) forwards;
  /* --d: harfin merkeze uzaklığı — ortadakiler önce belirir */
  animation-delay: calc(var(--d, 0) * 70ms);
}
.preloader__word i:last-child { margin-right: 0; }

@keyframes preloadLetter {
  to { opacity: 1; transform: none; }
}

.preloader__line {
  display: block; overflow: hidden;
  width: min(190px, 46vw); height: 2px;
  border-radius: var(--r-full);
  background: rgba(234, 240, 250, .12);
}
.preloader__line i {
  display: block; width: 100%; height: 100%;
  background: #3B82F6;
  transform: scaleX(0); transform-origin: 0 50%;
  /* Yükleme bitene kadar yavaşlayarak ilerler; %100'e JS tamamlar
     (bkz. initPreloader) — böylece çubuk sayfa hazır olmadan dolmuş
     gibi görünmez. */
  animation: preloadCreep 2.4s var(--ease-out) forwards;
  animation-delay: 380ms;
}
@keyframes preloadCreep {
  to { transform: scaleX(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__word i { animation: none; opacity: 1; transform: none; }
  .preloader__line i { animation: none; transform: scaleX(1); }
}

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 900;
  height: 3px; width: 100%;
  background: var(--grad-aurora);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 1;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(37,99,235,.13) 0%, transparent 62%);
  opacity: 0; transition: opacity 500ms ease;
  will-change: transform;
}
body.has-cursor .cursor-glow { opacity: 1; }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: height var(--t-base), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform 420ms var(--ease-out);
}
.navbar.is-scrolled {
  height: var(--nav-h-sm);
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px rgba(9, 21, 44, .07);
}
.navbar.is-hidden { transform: translateY(-100%); }

.navbar__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: 24px;
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .65rem; margin-right: auto; }
/* Logo yatay bir monogram; kare kutuda contain edilince görsel yükseklik
   kutunun ~%66'sı kadar kalır, bu yüzden kutu 38 yerine 44px. */
.brand__logo { width: 44px; height: 44px; object-fit: contain; transition: transform var(--t-base); }
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.08); }
.brand__text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.brand__text span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.navbar__nav { display: flex; align-items: center; gap: .25rem; }
.navbar__item { position: relative; }

.navbar__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--text-muted);
  transition: color var(--t-fast);
}
.navbar__link::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .35rem;
  height: 2px; border-radius: 2px; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 380ms var(--ease-out);
}
.navbar__link:hover { color: var(--text); }
.navbar__link:hover::after, .navbar__link.is-active::after { transform: scaleX(1); }
.navbar__link.is-active { color: var(--nv-blue-600); font-weight: 600; }
.navbar__caret { width: 14px; height: 14px; transition: transform var(--t-fast); }
.navbar__item--has-menu:hover .navbar__caret { transform: rotate(180deg); }

.megamenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: min(620px, 82vw);
  transform: translate(-50%, 12px);
  padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-xl);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.navbar__item--has-menu:hover .megamenu,
.navbar__item--has-menu:focus-within .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.megamenu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.megamenu__card {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem; border-radius: var(--r-md);
  transition: background var(--t-fast), transform var(--t-fast);
}
.megamenu__card:hover { background: var(--surface-alt); transform: translateX(4px); }
.megamenu__icon {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 10px;
  border-radius: var(--r-md);
  background: var(--grad-brand); color: #fff;
}
.megamenu__body { display: flex; flex-direction: column; }
.megamenu__body strong { font-family: var(--font-display); font-size: .95rem; }
.megamenu__body small { font-size: .78rem; color: var(--text-faint); }
.megamenu__arrow { width: 16px; height: 16px; margin-left: auto; color: var(--nv-blue); opacity: 0; transition: opacity var(--t-fast); }
.megamenu__card:hover .megamenu__arrow { opacity: 1; }

.navbar__actions { display: flex; align-items: center; gap: .75rem; }
.navbar__phone {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 11px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--text-muted);
  transition: all var(--t-fast);
}
.navbar__phone:hover { border-color: var(--nv-blue); color: var(--nv-blue); transform: rotate(12deg); }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; padding: 12px 10px;
  border-radius: var(--r-sm);
}
.hamburger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text);
  transition: transform var(--t-base), opacity var(--t-fast);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h-sm) 0 0; z-index: 790;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem 24px 3rem;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 460ms var(--ease-out), visibility 460ms;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 500;
  opacity: 0; transform: translateX(28px);
}
/* Açılır menünün alt bağlantıları — girintili ve bir tık silik, böylece
   listenin hangi başlığa ait olduğu tek bakışta anlaşılır. */
.mobile-menu__link--sub {
  padding-left: 1.25rem; font-size: .98rem; color: var(--text-muted);
}
.mobile-menu__link--sub::before {
  content: ''; display: inline-block; width: 10px; height: 1px;
  margin-right: .6rem; vertical-align: middle; background: var(--line);
}
.mobile-menu.is-open .mobile-menu__link {
  animation: slideInRight 480ms var(--ease-out) forwards;
}
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { animation-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { animation-delay: 110ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { animation-delay: 160ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { animation-delay: 210ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { animation-delay: 260ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { animation-delay: 310ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(7) { animation-delay: 360ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(8) { animation-delay: 410ms; }
.mobile-menu__cta { margin-top: auto; }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }

/* ==========================================================================
   6. REVEAL / MOTION KATMANI
   ========================================================================== */
/* JS yoksa hiçbir içerik gizlenmez — .js sınıfı <head>'de eklenir */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    clip-path 1000ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]     { transform: translate3d(0, 46px, 0); }
[data-reveal="down"]   { transform: translate3d(0, -46px, 0); }
[data-reveal="left"]   { transform: translate3d(-72px, 0, 0); }
[data-reveal="right"]  { transform: translate3d(72px, 0, 0); }
[data-reveal="zoom"]   { transform: scale(.9); }
[data-reveal="blur"]   { transform: translate3d(0, 24px, 0); filter: blur(14px); }
[data-reveal="flip"]   { transform: perspective(1000px) rotateX(24deg) translateY(40px); transform-origin: 50% 100%; }
[data-reveal="mask"]   { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); }
[data-reveal="skew"]   { transform: translate3d(0, 50px, 0) skewY(4deg); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Kelime kelime açılan başlıklar */
.split { display: inline-block; }
.split .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split .word > i {
  display: inline-block; font-style: inherit;
  transform: translateY(112%) rotate(4deg);
  transition: transform 880ms var(--ease-out);
  transition-delay: calc((var(--i) + var(--split-offset, 0)) * 62ms);
}
.split.is-visible .word > i { transform: translateY(0) rotate(0); }

/* Degrade metin + harf harf açılan başlık.
   ------------------------------------------------------------------
   İkisi birlikte kullanıldığında yazı görünmez oluyordu. Sebebi şu:
   background-clip:text degradeyi elemanın KENDİ metin katmanına kırpar.
   Buradaysa harfler .word > i içinde duruyor ve bu öge hem overflow:hidden
   hem transform taşıdığı için ayrı bir katmanda boyanıyor. Üst ögenin
   kırpılmış degradesi o katmana ulaşamıyor, geriye yalnızca miras alınan
   saydam renk kalıyordu.

   Çözüm degradeyi harflerin kendisine vermek. Bunun bedeli, rampanın her
   kelimede baştan başlaması. background-attachment:fixed ile tek sürekli
   rampa denendi ama işe yaramıyor: transform taşıyan bir öge sabit
   arka planlar için kendi kapsayıcı bloğu hâline gelir, yani "sabit"
   görüntü alanına değil yine ögenin kendisine göre çözümlenir. Sürekli
   rampa ancak kelime kelime background-position hesaplayan bir betikle
   mümkün; iki duraklı kısa bir başlıkta bu maliyete değmez. */
.grad-text.split .word > i,
.grad-text--light.split .word > i {
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-text.split .word > i { background-image: var(--grad-aurora); }
.grad-text--light.split .word > i { background-image: var(--grad-brand); }

/* Scroll ile netleşen metin */
.focus-text span {
  display: inline-block;
  filter: blur(10px);
  opacity: .25;
  transition: filter 700ms var(--ease-out), opacity 700ms var(--ease-out);
  transition-delay: calc(var(--i) * 45ms);
}
.focus-text.is-visible span { filter: blur(0); opacity: 1; }

/* Sayaçlar */
.counter { font-variant-numeric: tabular-nums; }

/* Yüzen animasyonlar */
@keyframes floatY   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatY2  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes drift    { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-24px) scale(1.06); } 66% { transform: translate(-22px,18px) scale(.96); } }
@keyframes marquee  { to { transform: translate3d(-50%, 0, 0); } }
@keyframes shimmer  { to { background-position: 200% 0; } }

.float-1 { animation: floatY  6.5s ease-in-out infinite; }
.float-2 { animation: floatY2 8s   ease-in-out infinite .6s; }
.float-3 { animation: floatY  7.2s ease-in-out infinite 1.2s; }
.float-4 { animation: floatY2 9s   ease-in-out infinite 1.8s; }

/* 3D tilt */
.tilt { transform-style: preserve-3d; transition: transform 260ms var(--ease-soft); will-change: transform; }
.tilt__inner { transform: translateZ(28px); }

/* ==========================================================================
   7. LAYOUT BİLEŞENLERİ
   ========================================================================== */
.card {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: rgba(37, 99, 235, .28); }

.card--glass {
  background: var(--grad-glass);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, .6);
}

.icon-badge {
  display: grid; place-items: center;
  width: 56px; height: 56px; padding: 14px;
  border-radius: var(--r-md);
  color: #fff;
  transition: transform var(--t-base);
}
.card:hover .icon-badge { transform: scale(1.08) rotate(-6deg); }
.icon-badge--blue    { background: linear-gradient(135deg, #3B82F6, #1D4ED8); box-shadow: 0 10px 26px rgba(37,99,235,.32); }
.icon-badge--cyan    { background: linear-gradient(135deg, #22D3EE, #0891B2); box-shadow: 0 10px 26px rgba(6,182,212,.32); }
.icon-badge--violet  { background: linear-gradient(135deg, #A78BFA, #7C3AED); box-shadow: 0 10px 26px rgba(139,92,246,.32); }
.icon-badge--emerald { background: linear-gradient(135deg, #34D399, #059669); box-shadow: 0 10px 26px rgba(16,185,129,.32); }

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  padding: .28rem .7rem; border-radius: var(--r-full);
  background: var(--surface-alt); border: 1px solid var(--line-soft);
  font-size: .74rem; font-weight: 500; color: var(--text-muted);
}
.section--dark .tag,
.tag-row--light .tag { background: rgba(148, 197, 255, .08); border-color: rgba(148, 197, 255, .18); color: #A7C4E8; }
.tag-row--light .tag { padding: .34rem .85rem; font-size: .78rem; }

/* ==========================================================================
   8. SAYFA BÖLÜMLERİ
   ========================================================================== */

/* ---- 8.1 HERO ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 72px;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(6, 182, 212, .16), transparent 62%),
    radial-gradient(900px 560px at 12% 82%, rgba(139, 92, 246, .14), transparent 60%),
    linear-gradient(168deg, #F7FAFF 0%, #E9F1FE 52%, #F4F8FF 100%);
  overflow: hidden;
}
.hero__blob {
  position: absolute; z-index: 0;
  border-radius: 50%; filter: blur(72px); opacity: .5;
  animation: drift 22s ease-in-out infinite;
}
.hero__blob--a { top: -8%; right: -6%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(37,99,235,.5), transparent 68%); }
.hero__blob--b { bottom: -12%; left: -8%; width: 40vw; height: 40vw; max-width: 540px; max-height: 540px; background: radial-gradient(circle, rgba(6,182,212,.45), transparent 68%); animation-delay: -8s; }

.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}

.hero__title {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  margin: 0 0 1.5rem;
}
.hero__title .line { display: block; }
.hero__desc { font-size: clamp(1rem, 1.3vw, 1.14rem); color: var(--text-muted); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2.1rem 0 2.6rem; }

.hero__stats { display: flex; flex-wrap: wrap; gap: .7rem; }
.stat-pill {
  display: flex; flex-direction: column;
  padding: .85rem 1.3rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.stat-pill:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.stat-pill b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-pill span { font-size: .78rem; color: var(--text-faint); margin-top: .2rem; }

/* Hero görsel — yüzen cam kartlar */
.hero__visual { position: relative; min-height: 460px; }
.hero__stage {
  position: relative; height: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  perspective: 1400px;
}
.float-card {
  position: relative;
  padding: 1.35rem;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.62));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: none;
  backdrop-filter: blur(18px);
  transition: transform var(--t-base);
}
.float-card:hover { box-shadow: none; }
.float-card--wide { grid-column: span 2; display: flex; align-items: center; gap: 1.15rem; }
.float-card__title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; margin-top: .85rem; }
.float-card--wide .float-card__title { margin-top: 0; }
.float-card__desc { font-size: .82rem; color: var(--text-faint); margin-top: .28rem; line-height: 1.5; }
.float-card .icon-badge { width: 48px; height: 48px; padding: 12px; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint);
}
.hero__scroll i {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--nv-blue), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%      { transform: scaleY(0); transform-origin: 0 0; }
  45%     { transform: scaleY(1); transform-origin: 0 0; }
  55%     { transform: scaleY(1); transform-origin: 0 100%; }
  100%    { transform: scaleY(0); transform-origin: 0 100%; }
}

/* ---- 8.2 GÜVEN ŞERİDİ ---- */
.trust-band {
  background: var(--nv-ink);
  color: var(--text-invert);
  padding: 1.05rem 0;
  overflow: hidden;
}
.trust-band__track {
  display: flex; align-items: center; gap: 3rem; width: max-content;
  animation: marquee 34s linear infinite;
}
.trust-band:hover .trust-band__track { animation-play-state: paused; }
.trust-band__item { display: inline-flex; align-items: center; gap: .6rem; font-size: .88rem; white-space: nowrap; color: rgba(226, 240, 255, .85); }
.trust-band__item svg { width: 17px; height: 17px; color: var(--nv-cyan); flex: none; }

/* ---- 8.3 SAHNE — scroll ile odaklanan dev marka kelimesi (pinned) ---- */
.stage {
  position: relative;
  height: 320vh;                    /* sticky sahneye kaydırma payı */
  background: #04070F;
  color: var(--text-invert);
}
.stage__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Perspektif zemin ızgarası */
.stage__floor {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(148, 197, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, .10) 1px, transparent 1px);
  background-size: 76px 76px;
  transform: perspective(560px) rotateX(62deg) scale(2.4);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 42%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 78%, transparent);
  opacity: .7;
}
.stage__halo {
  position: absolute; z-index: 0;
  top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 78vw; height: 52vw; max-width: 1100px;
  border-radius: 50%; filter: blur(110px); opacity: .3;
  background: radial-gradient(circle, rgba(37, 99, 235, .95), transparent 66%);
}

.stage__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-inline: 24px;
  width: 100%;
}
.stage__word {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 13vw, 11rem);
  line-height: .92; letter-spacing: -.045em; white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 18%, #93B4E0 62%, #33507C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}
.stage__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 3.4vw, 2.6rem);
  letter-spacing: -.02em; color: #C8D8F0;
  margin-top: .2rem;
}

/* JS yokken sahne düz bir bölüm gibi okunur; başlangıç durumları .js altında */
.js .stage__word { transform: scale(5.6); filter: blur(46px); }
.js .stage__sub  { opacity: 0; }

/* Kelime netleştikten sonra beliren blok */
.stage__reveal {
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
}
.js .stage__reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
}
.js .stage__reveal.is-revealed { opacity: 1; transform: none; }
.stage__badge {
  padding: .62rem 1.5rem; border-radius: var(--r-full);
  border: 1px solid rgba(148, 197, 255, .3);
  background: rgba(148, 197, 255, .06);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #DCE9FF;
}
.stage__desc {
  max-width: 46ch; font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.75; color: var(--text-invert-m);
}
.stage__desc em { font-style: normal; color: #7DD3FC; font-weight: 600; }

@media (max-width: 720px) {
  .stage { height: 260vh; }
  .stage__floor { background-size: 48px 48px; }
}

/* ---- 8.4 ODAK / NETLEŞEN METİN ---- */
.focus-section {
  position: relative;
  padding: clamp(90px, 12vw, 170px) 0;
  background: var(--surface-soft);
  text-align: center;
  overflow: hidden;
}
.focus-section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3.4rem); line-height: 1.25; letter-spacing: -.025em;
  max-width: 20ch; margin-inline: auto;
}
/* Not: filter+background-clip:text birlikte kırılgan olduğundan burada düz renk kullanılır */
.focus-section__title em { font-style: normal; color: var(--nv-blue); }


/* ---- 8.5 ÇÖZÜM DAİRELERİ ---- */
.orbit-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
}
.orbit-item {
  text-align: center;
  transition: transform var(--t-base);
}
.orbit-item:hover { transform: translateY(-10px); }

.orbit-item__ring {
  position: relative;
  width: min(160px, 100%); aspect-ratio: 1; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 30%, #fff, var(--surface-soft));
  transition: border-color var(--t-base), box-shadow var(--t-base);
  /* Sürekli, yumuşak süzülme — her kart farklı ritimde */
  animation: orbitFloat var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform;
}
.orbit-item:nth-child(1) .orbit-item__ring { --float-dur: 6.2s; --float-delay: 0s; }
.orbit-item:nth-child(2) .orbit-item__ring { --float-dur: 7.4s; --float-delay: -.9s; }
.orbit-item:nth-child(3) .orbit-item__ring { --float-dur: 6.8s; --float-delay: -1.8s; }
.orbit-item:nth-child(4) .orbit-item__ring { --float-dur: 8s;   --float-delay: -2.7s; }

@keyframes orbitFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-13px) rotate(.8deg); }
  66%      { transform: translateY(-5px) rotate(-.8deg); }
}
.orbit-item__ring::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, var(--nv-cyan) 86%, transparent 100%);
  opacity: 0; transition: opacity var(--t-base);
  animation: spinSlow 4.5s linear infinite;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}
.orbit-item:hover .orbit-item__ring { box-shadow: var(--sh-lg); border-color: transparent; }
.orbit-item:hover .orbit-item__ring::before { opacity: 1; }
.orbit-item__glyph {
  display: grid; place-items: center;
  width: 46%; aspect-ratio: 1;
  color: var(--nv-blue);
  transition: transform var(--t-base), color var(--t-base);
}
.orbit-item:hover .orbit-item__glyph { transform: scale(1.12); color: var(--nv-cyan); }
.orbit-item__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.orbit-item__desc { font-size: .82rem; color: var(--text-faint); margin-top: .25rem; }

/* ---- 8.6 BENTO ---- */
.bento {
  display: grid;
  /* Dort esit kart. Once birinci kart iki sutun+iki satir kapliyordu;
     icerigi digerleriyle ayni uzunlukta oldugu icin altinda buyuk bir olu
     alan kaliyordu. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.bento__cell {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.bento__cell::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(37, 99, 235, .1), transparent 60%);
  opacity: 0; transition: opacity var(--t-base); pointer-events: none;
}
.bento__cell:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: rgba(37, 99, 235, .26); }
.bento__cell:hover::before { opacity: 1; }
.bento__num {
  position: absolute; top: 1rem; right: 1.4rem;
  font-family: var(--font-display); font-size: 4.4rem; font-weight: 800;
  line-height: 1; color: rgba(37, 99, 235, .06);
}
.bento__cell p { color: var(--text-muted); font-size: .94rem; }
.bento__cell .link-arrow { margin-top: auto; }

/* ---- 8.7 SEKTÖR / LAPTOP ---- */
/* Sabitlenen sahne: kaydırma sayfayı indirmek yerine sekmeleri dolaşır.
   Sabitleme yalnızca .is-pinned varken açılır — bu sınıfı JS, içerik
   ekrana sığdığında ekler; sığmadığında bölüm normal akışta kalır. */
.sectors-pin { position: relative; }
.sectors-pin--soft { background: var(--surface-soft); }

.sectors-pin__sticky { padding-block: clamp(64px, 8vw, 112px); }
.sectors-pin__inner { width: 100%; }
/* Başlık her koşulda 3B tuvalin üstünde kalsın */
.sectors-pin .section-head { position: relative; z-index: 3; }

/* Sabitlenmiş hâlde sahne bir ekrana sığmalı — .is-measure aynı sıkı
   ölçüleri sabitleme olmadan uygular, JS ölçümü onunla yapar. */
/* Üstte biraz fazla pay: aşağı kaydırırken navbar gizlenir, yukarı
   kaydırırken geri gelir — başlık ona yapışmasın. */
.sectors-pin.is-pinned .sectors-pin__sticky,
.sectors-pin.is-measure .sectors-pin__sticky { padding-block: clamp(46px, 4.5vw, 72px) clamp(28px, 3vw, 44px); }
.sectors-pin.is-pinned .section-head,
.sectors-pin.is-measure .section-head { margin-bottom: clamp(18px, 2vw, 28px); }
.sectors-pin.is-pinned .lead,
.sectors-pin.is-measure .lead { font-size: .96rem; }
/* Sekmeler sıkışır — 1366×768 gibi kısa dizüstü ekranlarında da sahne
   tek ekrana sığsın diye. */
.sectors-pin.is-pinned .sector-tabs,
.sectors-pin.is-measure .sector-tabs { gap: .45rem; }
.sectors-pin.is-pinned .sector-tab,
.sectors-pin.is-measure .sector-tab { padding: .72rem 1rem; }

.sectors-pin.is-pinned {
  /* İlk sektör için bir ekran + kalan her sektör için ek kaydırma payı */
  height: calc(100svh + (var(--sec-count, 5) - 1) * 68svh);
}
.sectors-pin.is-pinned .sectors-pin__sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}

.sectors-pin__progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 2px; background: rgba(37, 99, 235, .1);
  opacity: 0; transition: opacity var(--t-base);
}
.sectors-pin.is-pinned .sectors-pin__progress { opacity: 1; }
.sectors-pin__progress i {
  display: block; height: 100%; width: 100%;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: 0 50%;
}

.sectors__layout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}

/* 3B model ile CSS maketi aynı kutuyu paylaşır: model hazır olduğunda
   maket saydamlaşır ama yerinde kalır, böylece bölüm yüksekliği
   (ve sabitleme ölçümü) her iki durumda da değişmez. */
.laptop-stage { position: relative; }
.macbook3d {
  /* Tuval yanlardan ve alttan taşar — model daha büyük görünür ama
     mutlak konumlu olduğu için bölüm yüksekliği değişmez.
     ÜSTTEN taşmaz: yukarıdaki başlık bloğunun altına girip modelin
     tepesinin kaybolmasına yol açıyordu. */
  position: absolute; inset: 0 -10% -20%; z-index: 2;
  opacity: 0; transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
.macbook3d.is-ready { opacity: 1; pointer-events: auto; }
.macbook3d canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

/* Yumuşak zemin gölgesi. 3B sahnede bir düzlem olarak çizilirse model
   döndükçe onunla birlikte eğilip bozuluyordu; CSS katmanı hem her
   açıda doğru durur hem de bedavaya gelir. */
.macbook3d::after {
  content: ''; position: absolute; z-index: 0;
  left: 50%; bottom: 26%; translate: -50% 0;
  width: 60%; height: 8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(9, 21, 44, .3), rgba(9, 21, 44, 0) 70%);
  filter: blur(6px);
}

.laptop-stage.is-3d .laptop { opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-out); }

.laptop { position: relative; }
.laptop__frame {
  position: relative;
  border-radius: 18px 18px 6px 6px;
  padding: 12px 12px 20px;
  background: linear-gradient(160deg, #2A3550, #131B2E);
  box-shadow: 0 40px 90px rgba(9, 21, 44, .34), inset 0 1px 0 rgba(255,255,255,.14);
}
.laptop__screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(165deg, #0B1327, #060B18);
  border: 1px solid rgba(148, 197, 255, .12);
}
.laptop__base {
  height: 14px; margin: 0 auto;
  width: 116%; max-width: none; transform: translateX(-7%);
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #1F293F, #0E1526);
  box-shadow: 0 18px 32px rgba(9, 21, 44, .3);
}
.laptop__base::after {
  content: ''; display: block; width: 96px; height: 4px; margin: 4px auto 0;
  border-radius: 0 0 6px 6px; background: rgba(148, 197, 255, .18);
}

.screen {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: scale(1.02);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out), visibility 620ms;
}
/* Giren ekran daima üstte kalmalı; aksi halde geçiş sırasında çıkan ekranın
   fotoğrafı yeni ekranın yazısıyla üst üste biniyor. */
.screen.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; }

/* Sektör fotoğrafı — ekranı tamamen kaplar, aktifken yavaşça yakınlaşır */
.screen__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.screen.is-active .screen__photo { animation: screenPan 16s ease-in-out infinite alternate; }
@keyframes screenPan {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Koyu arayüzle uyum ve metin okunabilirliği için örtü */
.screen__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 11, 24, .82) 0%, rgba(6, 11, 24, .12) 34%, rgba(6, 11, 24, .30) 62%, rgba(6, 11, 24, .90) 100%),
    linear-gradient(90deg, rgba(37, 99, 235, .16), transparent 55%);
}

.screen__ui {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(.85rem, 2vw, 1.5rem);
}
.screen__bar {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; color: rgba(226, 240, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.screen__dots { display: flex; gap: 5px; margin-right: .5rem; }
.screen__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 197, 255, .28); }
.screen__dots i:first-child { background: #F87171; }
.screen__dots i:nth-child(2) { background: #FBBF24; }
.screen__dots i:nth-child(3) { background: #34D399; }

/* Fotoğrafın üzerinde yüzen cam KPI kartları */
.screen__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.screen__kpi {
  padding: .55rem .7rem; border-radius: var(--r-sm);
  background: rgba(10, 18, 38, .55);
  border: 1px solid rgba(148, 197, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.screen.is-active .screen__kpi { opacity: 1; transform: none; }
.screen.is-active .screen__kpi:nth-child(1) { transition-delay: 180ms; }
.screen.is-active .screen__kpi:nth-child(2) { transition-delay: 280ms; }
.screen.is-active .screen__kpi:nth-child(3) { transition-delay: 380ms; }
.screen__kpi b {
  display: block; font-family: var(--font-display);
  font-size: clamp(.9rem, 1.5vw, 1.15rem); color: #F1F7FF;
}
.screen__kpi span { font-size: .62rem; color: rgba(190, 214, 244, .82); }

.sector-tabs { display: flex; flex-direction: column; gap: .6rem; }
.sector-tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.sector-tab::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 420ms var(--ease-out);
}
.sector-tab:hover { transform: translateX(6px); border-color: rgba(37, 99, 235, .3); }
.sector-tab.is-active { background: var(--surface-alt); border-color: rgba(37, 99, 235, .35); box-shadow: var(--sh-md); }
.sector-tab.is-active::before { transform: scaleY(1); }
.sector-tab__icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--nv-blue);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.sector-tab.is-active .sector-tab__icon { background: var(--grad-brand); color: #fff; transform: rotate(-8deg); }
.sector-tab__body strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.sector-tab__body small { font-size: .8rem; color: var(--text-faint); }
.sector-tab__arrow { width: 18px; height: 18px; margin-left: auto; color: var(--text-faint); transition: transform var(--t-base), color var(--t-base); }
.sector-tab.is-active .sector-tab__arrow { color: var(--nv-blue); transform: translateX(4px); }

/* ---- 8.8 METRİKLER ---- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden;
}
.metric {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.3rem) 1.2rem;
  background: var(--surface);
  text-align: center;
  transition: background var(--t-base), transform var(--t-base);
}
.metric:hover { background: var(--surface-soft); }
.metric__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 12px; margin: 0 auto .9rem;
  border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--nv-blue);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}
.metric:hover .metric__icon { transform: translateY(-4px) scale(1.06); background: var(--grad-brand); color: #fff; }
.metric__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric__label { margin-top: .5rem; font-size: .84rem; color: var(--text-muted); font-weight: 500; }

/* ---- 8.9 EKOSİSTEM (KOYU) ---- */
.eco { position: relative; isolation: isolate; }
/* Işık izi tuvali — bölümün üstünde, içerik altında.
   Sönümleme tamamen JS'teki "strength" değeriyle yapılır; buraya CSS geçişi
   eklemek iki ayrı sönümleme yaratıp çıkışı sertleştiriyordu.
   Karışım modu YOK: koyu zeminde 'lighter' compositing zaten parlıyor. */
.eco__trail {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.eco__orb {
  position: absolute; z-index: 0; top: 12%; left: -10%;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  border-radius: 50%; filter: blur(90px); opacity: .38;
  background: radial-gradient(circle, rgba(37, 99, 235, .8), transparent 66%);
  animation: drift 26s ease-in-out infinite;
}
.eco__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.4rem, 5vw, 4rem); }
.eco__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.eco-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.4rem, 2.3vw, 1.9rem);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(148, 197, 255, .12);
  backdrop-filter: blur(10px);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.eco-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(96, 165, 250, .16), transparent 62%);
  opacity: 0; transition: opacity var(--t-base); pointer-events: none;
}
.eco-card:hover { transform: translateY(-8px); border-color: rgba(148, 197, 255, .3); background: rgba(255, 255, 255, .06); }
.eco-card:hover::after { opacity: 1; }
.eco-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #E8F1FF; }
.eco-card__desc { font-size: .9rem; color: var(--text-invert-m); line-height: 1.62; }

/* ---- 8.9b EKOSİSTEM — iç içe geçen iki renkli zemin + katman listesi ----

   Zemin iki renk ailesinden oluşur: sitenin lacivert tonu ve nötr gri.
   Birbirine karışmaları için üç katman üst üste bindirilir — köşelerden
   giren iki geniş elips ve ortadan geçen eğik bir kuşak. Hepsi çok
   yumuşak geçişli olduğu için sınır değil, iç içe geçme okunur.        */
.eco--weave { background: linear-gradient(168deg, #080D18 0%, #0C1322 52%, #090F1B 100%); }

.eco__weave {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* gri aile — sol üstten girer */
    radial-gradient(ellipse 120% 86% at 6% 2%,   rgba(148, 163, 184, .3), transparent 56%),
    /* lacivert aile — sağ alttan girer, grinin içine kadar uzanır */
    radial-gradient(ellipse 105% 78% at 96% 98%, rgba(37, 99, 235, .34),  transparent 58%),
    /* iki aileyi ortada birbirine bağlayan eğik kuşak */
    linear-gradient(112deg,
      transparent 26%,
      rgba(148, 163, 184, .12) 42%,
      rgba(56, 130, 246, .14)  56%,
      transparent 74%);
  animation: weaveDrift 30s ease-in-out infinite alternate;
}
@keyframes weaveDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d( 1.5%,  1%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .eco__weave { animation: none; }
}

.ecosys { position: relative; z-index: 2; }

.ecosys__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ecosys__head .h-section { margin: 0; }
.ecosys__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }

/* Katmanlar kutu ızgarası değil, kademeli bir liste. Her satır bir
   öncekinden biraz içeride başlar; oluşan çapraz ritim bölümü
   yukarıdaki bento kartlarından açıkça ayırır. */
.ecosys__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.ecolayer {
  --shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1rem, 2.2vw, 2rem);
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.8rem);
  margin-left: var(--shift);
  border-top: 1px solid rgba(148, 197, 255, .12);
  transition: background var(--t-base), margin-left 520ms var(--ease-out);
}
.ecolayer:last-child { border-bottom: 1px solid rgba(148, 197, 255, .12); }
.ecolayer:nth-child(2) { --shift: clamp(0px, 3vw, 42px); }
.ecolayer:nth-child(3) { --shift: clamp(0px, 6vw, 84px); }
.ecolayer:nth-child(4) { --shift: clamp(0px, 9vw, 126px); }
.ecolayer:hover { background: rgba(148, 197, 255, .045); }

.ecolayer__no {
  font-family: var(--font-mono); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(148, 197, 255, .42);
  transition: -webkit-text-stroke-color var(--t-base);
}
.ecolayer:hover .ecolayer__no { -webkit-text-stroke-color: rgba(103, 232, 249, .85); }

/* Sol kenardaki ince ray — üzerine gelince yukarıdan aşağı dolar */
.ecolayer__rail {
  position: relative; width: 2px; align-self: stretch;
  background: rgba(148, 197, 255, .16); border-radius: 2px; overflow: hidden;
}
.ecolayer__rail::after {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-aurora);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 520ms var(--ease-out);
}
.ecolayer:hover .ecolayer__rail::after { transform: scaleY(1); }

.ecolayer__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: rgba(148, 197, 255, .09);
  border: 1px solid rgba(148, 197, 255, .18);
  color: #7DD3FC;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.ecolayer__icon svg { width: 22px; height: 22px; }
.ecolayer:hover .ecolayer__icon { background: rgba(103, 232, 249, .16); color: #A5F3FC; transform: translateY(-3px); }

.ecolayer__body { display: flex; flex-direction: column; gap: .45rem; }
.ecolayer__title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: #EAF2FF; }
.ecolayer__lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.35;
  color: #93C5FD;
}
.ecolayer__desc { font-size: .92rem; line-height: 1.68; color: var(--text-invert-m); max-width: 56ch; }

.ecolayer__metric { text-align: right; align-self: center; }
.ecolayer__metric b {
  display: block; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.1;
  background: linear-gradient(96deg, #93C5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ecolayer__metric span { display: block; margin-top: .2rem; font-size: .76rem; color: rgba(167, 196, 232, .78); white-space: nowrap; }

/* ---- 8.10 SÜREÇ ---- */
.process { position: relative; }
.process__line {
  position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
  background: var(--line);
  overflow: hidden;
}
.process__line i {
  display: block; width: 100%; height: 100%;
  background: var(--grad-brand);
  transform: scaleY(var(--p, 0)); transform-origin: 50% 0;
  transition: transform 120ms linear;
}
.process__steps { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.6rem); }
.process-step { display: flex; gap: 1.4rem; align-items: flex-start; }
.process-step__no {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text-faint);
  transition: all var(--t-base);
  z-index: 1;
}
.process-step.is-visible .process-step__no {
  border-color: transparent; background: var(--grad-brand); color: #fff;
  box-shadow: var(--sh-glow);
}
.process-step__body h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.process-step__body p { color: var(--text-muted); font-size: .94rem; max-width: 60ch; }

/* ---- 8.10b YATAY SAHNE (Çalışma Modeli) ----
   gsap.com/#home-animate mantığı: yüksek kapsayıcı kaydırma payı verir,
   içindeki sticky sahne ekranda kalır, JS şeridi yatayda öteler. */
.hsx {
  position: relative;
  height: 420vh;                 /* kaydırma payı — GSAP'taki end:"+=3000px" karşılığı */
  background: var(--grad-dark);
  color: var(--text-invert);
}
.hsx__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hsx__track {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  width: max-content;             /* ← şerit içeriği kadar geniş */
  gap: clamp(2rem, 4.5vw, 5rem);
  padding-inline: clamp(1.5rem, 9vw, 11rem);
  will-change: transform;
}

/* İlerleme çubuğu */
.hsx__progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 2px; background: rgba(148, 197, 255, .12);
}
.hsx__progress i {
  display: block; height: 100%; width: 100%;
  background: var(--grad-aurora);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* --- Paneller --- */
.hsx__panel {
  --offset: 0px;                  /* panelin dikey ritim kaydırması */
  flex: none;
  width: min(78vw, 560px);
  opacity: 0;
  transform: translateY(calc(46px + var(--offset)));
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
}
.hsx__panel.is-in { opacity: 1; transform: translateY(var(--offset)); }
.hsx__panel--intro, .hsx__panel--outro {
  width: min(88vw, 680px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem;
}
.hsx__panel--step { display: flex; flex-direction: column; gap: 1rem; }
/* Çift sıradaki paneller biraz aşağıda dursun — şerit tek düze görünmesin */
.hsx__panel--step:nth-of-type(even) { --offset: 40px; }

/* --- Tipografi çeşitliliği --- */
.hsx__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4.3rem);
  line-height: 1.04; letter-spacing: -.035em;
}
.hsx__serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em;
  background: var(--grad-aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hsx__outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(148, 197, 255, .55);
}
.hsx__intro-desc { font-size: 1.02rem; color: var(--text-invert-m); max-width: 42ch; }
.hsx__hint {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(167, 196, 232, .7);
}
.hsx__hint svg { width: 15px; height: 15px; animation: hintNudge 1.8s ease-in-out infinite; }
@keyframes hintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

.hsx__num {
  display: block;
  font-family: var(--font-mono); font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(148, 197, 255, .5);
}
.hsx__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.03em;
}
.hsx__title .hsx__serif { display: block; font-size: 1.12em; }

.hsx__figure {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(148, 197, 255, .16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  aspect-ratio: 4 / 3;
}
.hsx__figure img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
}
.hsx__panel.is-in .hsx__figure img { transform: scale(1); }
.hsx__figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 24, .12), rgba(6, 11, 24, .58));
}
.hsx__desc { font-size: .95rem; line-height: 1.7; color: var(--text-invert-m); }

/* Yatay sahne dar ekranlarda da yatay kalır — mobilde de aynı animasyon
   çalışsın diye dikey listeye düşürülmez, yalnızca ölçüleri küçültülür.
   Dikey yedek yalnızca prefers-reduced-motion altında devreye girer. */
@media (max-width: 1079px) {
  .hsx { height: 360vh; }
  .hsx__track { gap: clamp(1.25rem, 4vw, 2.5rem); padding-inline: clamp(1.25rem, 6vw, 4rem); }
  .hsx__panel { width: min(84vw, 480px); }
  .hsx__panel--intro, .hsx__panel--outro { width: min(86vw, 520px); }
  .hsx__panel--step:nth-of-type(even) { --offset: 24px; }
}

@media (max-width: 720px) {
  .hsx { height: 320vh; }
  .hsx__panel { width: min(86vw, 400px); }
  .hsx__panel--intro, .hsx__panel--outro { width: min(88vw, 420px); }
  .hsx__figure { aspect-ratio: 16 / 10; }
  .hsx__panel--step:nth-of-type(even) { --offset: 0px; }
}

/* ---- 8.11 REFERANSLAR ---- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.testimonial {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.testimonial:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.testimonial__mark { display: block; width: 32px; height: 32px; color: rgba(37, 99, 235, .22); }
.testimonial__quote { font-size: .98rem; color: var(--text); line-height: 1.72; }
.testimonial__who { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.testimonial__who strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.testimonial__who span { font-size: .8rem; color: var(--text-faint); }

.marquee { overflow: hidden; padding-block: 1.2rem; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .05em; color: var(--text-faint); white-space: nowrap;
  opacity: .55; filter: grayscale(1);
  transition: opacity var(--t-base), color var(--t-base), filter var(--t-base);
}
.marquee__item:hover { opacity: 1; color: var(--nv-blue-600); filter: none; }

/* ---- 8.10c ÇALIŞMA MODELİ — kompakt koyu bant ---- */
.proc-band { position: relative; overflow: hidden; }
.proc-band__orb {
  position: absolute; z-index: 0; pointer-events: none;
  top: -34%; left: 50%; translate: -50% 0;
  width: min(120vw, 1100px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(37, 99, 235, .3), transparent 62%);
  filter: blur(90px);
}
.proc-band .container { position: relative; z-index: 2; }

.proc-band__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  counter-reset: none;
}
.proc-band__step {
  position: relative;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.25rem, 2vw, 1.7rem);
  border-radius: var(--r-lg);
  background: rgba(148, 197, 255, .06);
  border: 1px solid rgba(148, 197, 255, .14);
  transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
}
.proc-band__step:hover {
  transform: translateY(-6px);
  background: rgba(148, 197, 255, .1);
  border-color: rgba(148, 197, 255, .28);
}
.proc-band__no {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.9rem; line-height: 1;
  background: linear-gradient(96deg, #60A5FA, #22D3EE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proc-band__title { font-size: 1rem; color: var(--text-invert); }
.proc-band__desc { font-size: .88rem; line-height: 1.65; color: var(--text-invert-m); }

/* ---- 8.11b SIKÇA SORULAN SORULAR ---- */
.faq-section { background: var(--surface-soft); }
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: .75rem; }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq__item[open] { border-color: rgba(37, 99, 235, .3); box-shadow: var(--sh-md); }
.faq__item:hover { border-color: rgba(37, 99, 235, .3); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.1rem, 2vw, 1.7rem);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.1rem); line-height: 1.4;
  color: var(--text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--nv-blue-600); outline-offset: -2px; }

/* Artı → çarpı dönüşen işaret */
.faq__sign { position: relative; flex: none; width: 20px; height: 20px; }
.faq__sign::before,
.faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 2px; border-radius: 2px; background: var(--nv-blue-600);
  transform: translateY(-50%);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__a {
  padding: 0 clamp(1.1rem, 2vw, 1.7rem) clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--text-muted); line-height: 1.72; max-width: 72ch;
}
.faq__item[open] .faq__a { animation: faqReveal .34s var(--ease-out) both; }

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__a { animation: none; }
}

/* ---- 8.12 CTA ---- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(125deg, #0B1327 0%, #1D4ED8 52%, #0891B2 100%);
  color: #fff; text-align: center;
}
.cta__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .45;
}
.cta__glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  border-radius: 50%; filter: blur(90px); opacity: .35;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 62%);
  animation: drift 20s ease-in-out infinite;
}
.cta__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.cta__title { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 1.1rem; }
.cta__desc { color: rgba(226, 240, 255, .88); font-size: 1.04rem; max-width: 56ch; margin: 0 auto 2.2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---- 8.13 SAYFA BAŞLIĞI (alt sayfalar) ---- */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 76px) 0 clamp(56px, 7vw, 92px);
  background:
    radial-gradient(900px 460px at 82% 12%, rgba(6, 182, 212, .18), transparent 62%),
    linear-gradient(160deg, #060B18 0%, #0B1327 60%, #101B34 100%);
  color: var(--text-invert);
}
/* Ana sayfa hero'sundaki süzülen ışık lekelerinin koyu zemin karşılığı */
.page-hero__blob {
  position: absolute; z-index: 0;
  border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: drift 24s ease-in-out infinite;
  pointer-events: none;
}
.page-hero__blob--a {
  top: -32%; right: -6%; width: 44vw; height: 44vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 68%);
}
.page-hero__blob--b {
  bottom: -46%; left: -10%; width: 38vw; height: 38vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle, rgba(6, 182, 212, .42), transparent 68%);
  animation-delay: -9s;
}

.page-hero__inner { position: relative; z-index: 2; max-width: 820px; }
.page-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 1.1rem 0; }
.page-hero__desc { color: var(--text-invert-m); font-size: clamp(1rem, 1.25vw, 1.08rem); max-width: 60ch; line-height: 1.7; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }

/* Koyu zeminde okunur kalan istatistik rozeti */
.stat-pill--dark {
  background: rgba(148, 197, 255, .08);
  border-color: rgba(148, 197, 255, .2);
  backdrop-filter: blur(10px);
}
.stat-pill--dark b {
  background: linear-gradient(96deg, #93C5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-pill--dark span { color: var(--text-invert-m); }
.stat-pill--dark:hover { background: rgba(148, 197, 255, .13); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text-invert-m);
}
.breadcrumb a { color: var(--text-invert-m); transition: color var(--t-fast); }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: #7DD3FC; }
.breadcrumb [aria-current="page"] { color: #BFDBFE; }

/* ---- 8.14 ÖZELLİK LİSTESİ ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.feature {
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(37, 99, 235, .24); }
.feature h3 { font-size: 1.05rem; }
.feature p { font-size: .92rem; color: var(--text-muted); }

.check-list { display: grid; gap: .8rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--text-muted); }
.check-list svg { width: 20px; height: 20px; flex: none; color: var(--nv-emerald); margin-top: 2px; }

.split-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }

/* ---- 8.15 FORM ---- */
.form-card {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--sh-lg);
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  font: inherit; font-size: .94rem; color: var(--text);
  border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--surface-soft);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--nv-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.form-note { font-size: .8rem; color: var(--text-faint); margin-top: .8rem; }

/* Yanıt süresi taahhüdü — formun hemen üstünde. Ziyaretçinin "ne zaman
   dönecekler" sorusuna formu doldurmadan önce yazılı cevap verir. */
.form-pledge {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.3rem; padding: .7rem .95rem;
  border-radius: var(--r-md);
  background: rgba(37, 99, 235, .07);
  border: 1px solid rgba(37, 99, 235, .18);
  font-size: .86rem; font-weight: 500; color: var(--nv-blue);
}
.form-pledge svg { flex: none; width: 18px; height: 18px; }
.form-pledge span { color: var(--text); font-weight: 500; }

/* Yalnızca ekran okuyucular için — görünmez ama okunur.
   display:none kullanılmaz; o, içeriği yardımcı teknolojiden de gizler. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Yasal metin sayfaları ---- */
.legal-block { padding: 1.6rem 0; border-top: 1px solid var(--line-soft); }
.legal-block:first-of-type { border-top: 0; padding-top: 0; }
.legal-block__title {
  display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600; margin: 0 0 .7rem;
}
.legal-block__title span {
  flex: none; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--nv-blue); font-variant-numeric: tabular-nums;
}
.legal-block p { margin: 0; color: var(--text-muted); line-height: 1.75; }
.legal-block--contact { border-top: 1px solid var(--line); }
.legal-nav {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
}

/* ---- Vaka çalışmaları ----
   Görsel ve metin dönüşümlü olarak yer değiştirir; uzun bir listede aynı
   düzenin tekrarı okumayı yoruyor. Sıra CSS'te değiştiriliyor, HTML'de
   değil: kaynak sırası ekran okuyucular ve klavye için sabit kalmalı. */
.case {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line-soft);
}
.case:first-of-type { border-top: 0; padding-top: 0; }
.case--flip .case__media { order: 2; }

.case__media { position: relative; }
/* height:auto şart. Etiketteki height="900" özniteliği tarayıcıya
   sunum ipucu olarak height:900px verir ve aspect-ratio'yu etkisiz
   bırakır; oranın belirleyici olması için bir kenarın auto olması
   gerekir. Öznitelikler yine de duruyor: sayfa yüklenirken yer
   ayırarak içerik kaymasını (CLS) önlüyorlar. */
.case__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}
.case__kpis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1px; margin-top: -2.2rem; margin-inline: clamp(.8rem, 3vw, 1.6rem);
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--line); box-shadow: var(--sh-md);
}
.case__kpi {
  background: var(--surface); padding: .85rem .6rem; text-align: center;
}
.case__kpi b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 700; color: var(--nv-blue);
}
.case__kpi span { display: block; font-size: .72rem; color: var(--text-faint); margin-top: .15rem; }

.case__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.case__tag {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nv-cyan); margin-bottom: .35rem;
}
.case__title { margin: 0; }
.case__client { margin: .35rem 0 0; font-size: .86rem; color: var(--text-faint); }

.case__part { margin-bottom: 1.25rem; }
.case__part:last-child { margin-bottom: 0; }
.case__label {
  margin: 0 0 .3rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.case__part p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.form-alert {
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  font-size: .9rem; margin-bottom: 1.2rem;
}
.form-alert--ok  { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #047857; }
.form-alert--err { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .28); color: #B91C1C; }

.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 3.2rem); align-items: start; }
.contact-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem; border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: var(--surface);
  transition: transform var(--t-base), border-color var(--t-base);
}
.contact-item:hover { transform: translateX(6px); border-color: rgba(37, 99, 235, .28); }
.contact-item svg { width: 22px; height: 22px; flex: none; color: var(--nv-blue); }
.contact-item strong { display: block; font-family: var(--font-display); font-size: .92rem; }
.contact-item span, .contact-item a { font-size: .9rem; color: var(--text-muted); }

/* ==========================================================================
   9. FOOTER & DOCK
   ========================================================================== */
.footer {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7vw, 88px) 0 2rem;
  background: var(--nv-ink); color: var(--text-invert);
}
.footer__glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 80vw; height: 40vw; max-height: 520px;
  border-radius: 50%; filter: blur(100px); opacity: .22;
  background: radial-gradient(circle, rgba(37, 99, 235, .9), transparent 66%);
}
.footer > .container { position: relative; z-index: 2; }
.footer__top {
  display: grid; grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: 2.6rem; border-bottom: 1px solid rgba(148, 197, 255, .12);
}
.brand--footer { margin: 0 0 1.1rem; }
.footer__desc { font-size: .9rem; color: var(--text-invert-m); max-width: 34ch; line-height: 1.7; }
.footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.social {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 11px;
  border-radius: 50%;
  border: 1px solid rgba(148, 197, 255, .16); color: #A7C4E8;
  transition: all var(--t-base);
}
.social:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-4px); }
.footer__title { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #93C5FD; margin-bottom: 1.1rem; }
.footer__links li + li, .footer__contact li + li { margin-top: .6rem; }
.footer__links a { font-size: .9rem; color: var(--text-invert-m); transition: color var(--t-fast), padding-left var(--t-fast); }
.footer__links a:hover { color: #fff; padding-left: 5px; }
.footer__contact li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--text-invert-m); }
.footer__contact svg { width: 17px; height: 17px; flex: none; color: var(--nv-cyan); margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.6rem; font-size: .84rem; color: rgba(167, 196, 232, .6);
}
.footer__legal { display: flex; gap: 1.4rem; }
.footer__legal a:hover { color: #fff; }

.dock {
  position: fixed; right: 18px; bottom: 22px; z-index: 700;
  display: flex; flex-direction: column; gap: .55rem;
  transition: transform var(--t-base);
}
.dock__btn {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  color: var(--text-muted);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(12px);
  transition: all var(--t-base);
}
.dock__btn:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-4px) scale(1.06); }
/* WhatsApp kendi rengiyle görünür: tanınan bir simgeyi tanınmaz hâle
   getirmek, telefonda en çok kullanılan iletişim yolunu gizlemek olur. */
.dock__btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.dock__btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; }
.dock__btn::before {
  content: attr(data-tip);
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
  padding: .3rem .6rem; border-radius: var(--r-sm);
  background: var(--nv-ink); color: #fff; font-size: .74rem; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.dock__btn:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
#back-to-top { opacity: 0; visibility: hidden; transform: translateY(12px); }
#back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.cookie {
  position: fixed; left: 50%; bottom: 20px; z-index: 750;
  transform: translateX(-50%) translateY(140%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  width: min(880px, calc(100vw - 40px));
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xl);
  backdrop-filter: blur(16px);
  transition: transform 560ms var(--ease-out);
}
.cookie.is-open { transform: translateX(-50%) translateY(0); }
.cookie p { flex: 1 1 380px; font-size: .86rem; color: var(--text-muted); }
.cookie p a { color: var(--nv-blue-600); font-weight: 600; }
.cookie__actions { display: flex; gap: .6rem; margin-left: auto; }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .navbar__nav, .navbar__actions { display: none; }
  .hamburger { display: flex; }
  .navbar { height: var(--nav-h-sm); }
  :root { --nav-h: 64px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { min-height: auto; order: -1; }
  .hero__stage { max-width: 560px; margin-inline: auto; }
  .hero__scroll { display: none; }

  .eco__inner, .sectors__layout, .split-media, .contact-grid { grid-template-columns: 1fr; }
  /* Vaka çalışmaları tek sütuna iner; dönüşümlü yerleşimin de anlamı
     kalmadığı için görsel her zaman üstte olur. */
  .case { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .testimonials, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: span 3; }

  .proc-band__list { grid-template-columns: repeat(3, 1fr); }
  .page-hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  .ecosys__head { grid-template-columns: 1fr; align-items: start; }
  /* Kademe dar ekranda yeri boşa harcar */
  .ecolayer { --shift: 0px !important; }
}

@media (max-width: 720px) {
  .container { padding-inline: 20px; }
  .orbit-grid { grid-template-columns: repeat(2, 1fr); }
  .bento, .testimonials, .feature-grid, .eco__cards { grid-template-columns: 1fr; }
  .hero__stage { grid-template-columns: 1fr; }
  .float-card--wide { grid-column: span 1; }
  .form-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: span 2; }
  .screen__kpis { grid-template-columns: repeat(3, 1fr); }
  .hero__actions .btn { flex: 1 1 100%; }
  .dock { right: 12px; bottom: 14px; }
  /* Çerez bandı dar ekranda tam genişlik kapladığı için dock onun üstüne çıkar */
  .has-cookie .dock { transform: translateY(-190px); }
  /* Dikey yerleşimde flex-basis yüksekliğe döner; 380px'lik taban
     bandı ekranı kaplayacak kadar uzatıyordu. */
  .cookie { flex-direction: column; align-items: stretch; text-align: center; gap: .85rem; }
  .cookie p { flex: 0 1 auto; }
  .cookie__actions { margin-left: 0; justify-content: center; }
  .cookie__actions .btn { flex: 1 1 auto; justify-content: center; }
  .process__line { left: 21px; }
  .process-step__no { width: 44px; height: 44px; font-size: .85rem; }

  .proc-band__list { grid-template-columns: 1fr; }
  .page-hero { padding-top: calc(var(--nav-h) + 52px); }
  .page-hero__meta { gap: .5rem; }
  .page-hero__meta .stat-pill { flex: 1 1 calc(50% - .25rem); padding: .75rem 1rem; }
  .page-hero__actions { width: 100%; }
  .page-hero__actions .btn { flex: 1 1 100%; }
  .faq__q { gap: .8rem; }
  .cta__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* Katman satırı dar ekranda iki sıraya iner: üstte numara+ikon+ölçüt,
     altta metin. Beş sütun 375px'e sığmıyor. */
  .ecolayer {
    grid-template-columns: auto auto auto minmax(0, 1fr);
    gap: .85rem 1rem;
    padding-inline: 0;
  }
  .ecolayer__body { grid-column: 1 / -1; }
  .ecolayer__metric { text-align: left; align-self: center; }
  .ecolayer__metric span { white-space: normal; }
  .ecolayer__rail { display: none; }
}

@media (max-width: 480px) {
  .footer__top, .footer__brand { grid-template-columns: 1fr; grid-column: auto; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .page-hero__meta .stat-pill { flex: 1 1 100%; }
  .breadcrumb { font-size: .76rem; }
}

/* ==========================================================================
   11. ERİŞİLEBİLİRLİK — hareket azaltma
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .split .word > i { transform: none !important; }
  .focus-text span { filter: none !important; opacity: 1 !important; }
  .orbit-item__ring { animation: none !important; }
  .stage { height: auto !important; }
  .stage__sticky { position: static !important; height: auto !important; padding-block: 96px; }
  .stage__word { transform: none !important; filter: none !important; }
  .stage__reveal { opacity: 1 !important; transform: none !important; }
  /* Yatay sahne düz dikey listeye döner */
  .hsx { height: auto !important; }
  .hsx__sticky {
    position: static !important; display: block !important;
    height: auto !important; overflow: visible !important; padding-block: 88px;
  }
  .hsx__track {
    flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; transform: none !important;
    padding-inline: 24px;
    max-width: var(--container); margin-inline: auto;
  }
  .hsx__panel { width: auto !important; max-width: 100% !important; opacity: 1 !important; transform: none !important; }
  .hsx__progress { display: none !important; }
  .cursor-glow, .eco__trail { display: none !important; }
  .screen__photo { animation: none !important; }
  /* Sektör sahnesi sabitlenmez, normal akışta kalır */
  .sectors-pin { height: auto !important; }
  .sectors-pin__sticky { position: static !important; min-height: 0 !important; display: block !important; }
  .sectors-pin__progress { display: none !important; }
}

@media print {
  .navbar, .dock, .cookie, .preloader, .scroll-progress, .cursor-glow { display: none !important; }
}