body { font-family: 'Inter', sans-serif; }
    .noise {
      background-image:
        radial-gradient(900px 500px at 70% 0%, rgba(77,77,77,.14), transparent 58%),
        radial-gradient(700px 520px at 10% 10%, rgba(77,77,77,.10), transparent 60%),
        radial-gradient(900px 600px at 80% 90%, rgba(77,77,77,.08), transparent 60%),
        linear-gradient(180deg, #fff 0%, #fff 55%, #f8fafc 100%);
    }
	/* Material Symbols tuning (line icon look) */
  .ms {
    font-family: "Material Symbols Outlined";
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
      'FILL' 0,
      'wght' 420,
      'GRAD' 0,
      'opsz' 24;
  }
  /* Bigger, premium module icons */
  .ms-xl {
    font-size: 34px;
    font-variation-settings:
      'FILL' 0,
      'wght' 230,
      'GRAD' 0,
      'opsz' 32;
  }
  /* ===== LOGO STRIP MICRO INTERACTIONS ===== */

/* kart genel animasyon */
.eco-card {
  position: relative;
  transition:
    transform 420ms cubic-bezier(.2,.8,.2,1),
    box-shadow 420ms cubic-bezier(.2,.8,.2,1),
    border-color 420ms ease;
}

/* hover yükselme + gölge */
.eco-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(11,18,32,.18);
  border-color: rgba(77,77,77,.35);
}

/* ikon tile */
.eco-icon {
  transition:
    transform 420ms cubic-bezier(.2,.8,.2,1),
    background-color 420ms ease,
    box-shadow 420ms ease;
}

/* ikon hover */
.eco-card:hover .eco-icon {
  transform: translateY(-2px) scale(1.05);
}

/* ikon stroke hissi */
.eco-icon .ms {
  transition:
    color 420ms ease,
    font-variation-settings 420ms ease;
}

/* stroke yumuşak vurgu */
.eco-card:hover .eco-icon .ms {
  color: #000000;
  font-variation-settings:
    'FILL' 0,
    'wght' 480,
    'GRAD' 0,
    'opsz' 28;
}

/* alt etiket (küçük yazı) */
.eco-meta {
  transition:
    letter-spacing 420ms ease,
    color 420ms ease;
}

.eco-card:hover .eco-meta {
  letter-spacing: 0.18em;
  color: #6b7280;
}

/* çok hafif üstten ışık */
.eco-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.6),
    rgba(255,255,255,0)
  );
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.eco-card:hover::before {
  opacity: .6;
}
.hero-mock {
  transition: transform 400ms ease;
  will-change: transform;
}
/* ===== SCROLL MICRO ANIMATIONS ===== */

/* başlangıç durumu */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(.2,.8,.2,1),
    transform 700ms cubic-bezier(.2,.8,.2,1);
}

/* görünür olunca */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* kartlar için stagger gecikmesi */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.yellowButton{
	background-color: rgb(255 201 56) !important;
	color:#000 !important;
}
img.logo {
    max-width: 188px;
}
.bigIcon {
    font-size: 120px;cursor: default;
}
.bigIcon2{
	font-size: 120px;cursor: default;
}
.bigIcon3{
	font-size: 50px;cursor: default;
}
.bigIcon4{
	font-size: 120px;cursor: default;
}
.bigIcon5{
	font-size: 120px;cursor: default;
}
.ms {
    font-variation-settings: 'FILL' 0, 'wght' 0, 'GRAD' 0, 'opsz' 24;
	
}
/* ===== MODULE FLOW ANIMATION ===== */

svg path {
  animation: flowDash 14s linear infinite;
}

@keyframes flowDash {
  to {
    stroke-dashoffset: -200;
  }
}
/* ===== MODULE DATA PULSE ===== */

.module-card {
  position: relative;
  overflow: hidden;
}

/* soft pulse ring */
.module-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.module-card:hover::after {
  opacity: 1;
}

/* data flow beam */
.module-card::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,0.25),
    transparent
  );
  top: 50%;
  left: -120%;
  transform: translateY(-50%);
  opacity: 0;
}

.module-card:hover::before {
  opacity: 1;
  animation: dataFlow 1.8s ease-out forwards;
}

@keyframes dataFlow {
  from {
    left: -120%;
  }
  to {
    left: 120%;
  }
}
/* ===== CORE → MODULE BROADCAST ===== */

/* core hover state */
.core-active .module-card {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08),
    0 30px 90px rgba(11,18,32,.25);
}

/* global pulse ring */
.core-active .module-card::after {
  opacity: 1;
}

/* trigger data flow */
.core-active .module-card::before {
  opacity: 1;
  animation: dataFlow 1.6s ease-out forwards;
}
/* ===== CORE SCROLL WAKE ===== */

#coreHub {
  transition:
    box-shadow 600ms ease,
    transform 600ms ease;
}

/* core uyanıyor */
.core-awake #coreHub {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 0 40px rgba(0,0,0,.35),
    0 0 120px rgba(0,0,0,.25);
  transform: scale(1.05);
}

/* hafif nefes alma */
.core-awake #coreHub::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  animation: corePulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes corePulse {
  0%, 100% { opacity: .15; transform: scale(1); }
  50% { opacity: .35; transform: scale(1.08); }
}

/* modüller de hazır hale gelsin */
.core-awake .module-card {
  transform: translateY(-2px);
}

/* ===== DEMO MODE HIGHLIGHT ===== */

.module-card.demo-active {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.1),
    0 40px 120px rgba(11,18,32,.35);
  transform: translateY(-6px) scale(1.02);
}

.module-card.demo-active::after {
  opacity: 1;
}

.module-card.demo-active::before {
  opacity: 1;
  animation: dataFlow 1.6s ease-out forwards;
}
/* ===== DIRECTIONAL FLOW ===== */

.flow-line {
  stroke-dasharray: 6 10;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: none;
}

/* core aktifken akış başlasın */
.core-awake .flow-line,
.core-active .flow-line,
.demo-active .flow-line {
  opacity: 1;
  animation: flowForward 2.6s linear infinite;
}

/* hover’da hızlansın */
.core-active .flow-line {
  animation-duration: 1.8s;
}

@keyframes flowForward {
  to {
    stroke-dashoffset: -260;
  }
}
/* ===== SALES-DRIVEN SPEED (Analytics Feel) ===== */
:root{
  --flow-speed: 2.6s;   /* default */
  --pulse-speed: 1.6s;  /* default (opsiyonel) */
}

/* Directional flow hızını değişkenden al */
.core-awake .flow-line,
.core-active .flow-line,
.demo-active .flow-line {
  animation-duration: var(--flow-speed) !important;
}

/* (Opsiyonel) Core hub varsa pulse hissi */
@keyframes corePulse {
  0% { transform: translateZ(0) scale(1); opacity: .65; }
  60% { transform: translateZ(0) scale(1.12); opacity: .18; }
  100% { transform: translateZ(0) scale(1); opacity: .65; }
}

/* Aşağıdaki selector’ı kendi core elementine uyarlayabilirsin.
   Eğer core hub elementin yoksa bu blok zararsızdır. */
.core-pulse {
  animation: corePulse var(--pulse-speed) ease-in-out infinite;
}