* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
}

.presentation {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ==============================
   Ana slayt alanı
   ============================== */
.slide-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.slide-number {
  font-size: 8rem;
  font-weight: 200;
  color: #e2e8f0;
  user-select: none;
  letter-spacing: -0.04em;
}

/* ==============================
   SLAYT 1 — Hero Section
   ============================== */
.s1-hero {
  width: 100%;
  height: 100%;
  display: flex;
  background: #020202;
  overflow: hidden;
  position: relative;
}

/* Hafif antrasit overlay */
.s1-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 0% 50%, rgba(8, 8, 12, 0.85) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Ortayı bölen ince çizgi */
.s1-divider {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(255,255,255,0.04);
  z-index: 3;
}

/* Sol: İçerik */
.s1-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5% 0 6%;
  position: relative;
  z-index: 4;
}

.s1-tag {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 0.84rem, 1rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
}

.s1-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 4.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(40px);
  margin-bottom: 28px;
}

.s1-title-accent {
  color: #ffffff;
  position: relative;
  -webkit-text-fill-color: #ffffff;
}
.s1-title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  background: #ffffff;
  opacity: 0.25;
}

.s1-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: #777;
  max-width: 520px;
  opacity: 0;
  transform: translateY(30px);
  margin-bottom: 40px;
}

.s1-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.s1-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-weight: 500;
  color: #020202;
  text-decoration: none;
  padding: 14px 36px;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.s1-cta:hover {
  background: #e5e5e5;
  color: #020202;
}

/* Staggered animasyon — slayt aktifken */
.slide.active .s1-tag {
  animation: s1FadeUp 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s1-title {
  animation: s1FadeUp 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s1-subtitle {
  animation: s1FadeUp 0.8s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s1-cta-row {
  animation: s1FadeUp 0.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s1FadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Sağ Panel: Metrik & Mimari ---- */
.s1-visual {
  width: 50%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Mimari ince grid */
.s1-arch-grid {
  position: absolute;
  inset: 10%;
}
.s1-ag {
  position: absolute;
  background: rgba(255,255,255,0.025);
}
.s1-ag-h {
  left: 0; right: 0; height: 1px;
}
.s1-ag-v {
  top: 0; bottom: 0; width: 1px;
}

/* Ana metrik bloğu */
.s1-metric {
  text-align: center;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(30px);
}

.slide.active .s1-metric {
  animation: s1FadeUp 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.s1-metric-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.65rem, 0.75vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 16px;
}

.s1-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.s1-metric-old {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.5rem, 6vw, 7rem);
  font-weight: 200;
  color: #d48a8a;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.15);
}

.s1-metric-arrow {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  color: #444;
  font-weight: 200;
}

.s1-metric-new {
  font-family: 'Inter', sans-serif;
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 800;
  color: #7ec9a4;
  letter-spacing: -0.04em;
  line-height: 1;
}

.s1-metric-unit {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1.3rem);
  font-weight: 300;
  color: #555;
  letter-spacing: 0.05em;
  align-self: flex-end;
  margin-bottom: 0.15em;
}

.s1-metric-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.75rem, 0.85vw, 0.95rem);
  font-weight: 300;
  color: #555;
  margin-top: 14px;
  letter-spacing: 0.02em;
}

/* Alt veri kartları */
.s1-data-cards {
  position: relative;
  width: 80%;
  display: flex;
  gap: 1px;
  z-index: 3;
  margin-top: 32px;
}

.s1-dcard {
  flex: 1;
  padding: 20px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
}

.s1-dcard-1 { border-top-color: rgba(126, 184, 218, 0.3); }
.s1-dcard-2 { border-top-color: rgba(126, 201, 164, 0.3); }
.s1-dcard-3 { border-top-color: rgba(168, 140, 199, 0.3); }

.slide.active .s1-dcard-1 {
  animation: s1FadeUp 0.7s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s1-dcard-2 {
  animation: s1FadeUp 0.7s 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s1-dcard-3 {
  animation: s1FadeUp 0.7s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.s1-dcard-val {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.s1-dcard-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.65rem, 0.72vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
}

.s1-dcard-detail {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 0.68vw, 0.75rem);
  font-weight: 300;
  color: #444;
  letter-spacing: 0.01em;
}

/* Sağ alt köşe imza */
.s1-corner-mark {
  position: absolute;
  bottom: 5%;
  right: 6%;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  opacity: 0;
}

.slide.active .s1-corner-mark {
  animation: s1FadeUp 0.6s 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.s1-cm-line {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

.s1-cm-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #444;
  text-transform: uppercase;
}

/* ==============================
   SLAYT 2 — Problem: Zaman Kaybı
   ============================== */
.s2-wrap {
  width: 100%;
  height: 100%;
  background: #050505;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% 7%;
  overflow: hidden;
  position: relative;
}

/* Üst: Başlık */
.s2-header {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
}

.s2-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 20px;
}

.s2-title {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.s2-big-num {
  font-family: 'Inter', sans-serif;
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.s2-title-text {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.2;
  color: #555555;
}

/* Zaman Çizelgesi */
.s2-timeline {
  margin-bottom: 40px;
  padding: 0 2%;
  opacity: 0;
}

.s2-tl-track {
  position: relative;
  height: 72px;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

/* Ana çizgi — dolgu (sadece dot-1'den dot-2'ye, birleşik) */
.s2-tl-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(126, 184, 218, 0.2) 0%, rgba(126, 184, 218, 0.5) 100%);
  transform: translateY(-50%);
}

/* Kesikli çizgi — dot-2'den dot-3'e (40-60 gün arası boşluk) */
.s2-tl-dashed {
  position: absolute;
  left: 46%;
  right: 16%;
  top: 50%;
  height: 0;
  border-top: 1px dashed rgba(212, 138, 138, 0.25);
  transform: translateY(-50%);
}

/* Sağ kırmızı parça — dot-3 noktasında */
.s2-tl-end {
  position: absolute;
  right: 16%;
  top: 50%;
  height: 1px;
  width: 0;
  background: #d48a8a;
  transform: translateY(-50%);
}

/* Durak noktaları */
.s2-tl-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s2-dot-1 { left: 0; }
.s2-dot-2 { left: 45%; }
.s2-dot-3 { left: 82%; }

.s2-dot-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7eb8da;
  border: 2px solid #555555;
  transition: all 0.3s ease;
}

.s2-dot-warn {
  background: #d4a574;
  border-color: #d4a574;
  box-shadow: 0 0 10px rgba(212, 165, 116, 0.3);
}

.s2-dot-danger {
  background: #d48a8a;
  border-color: #d48a8a;
  box-shadow: 0 0 12px rgba(212, 138, 138, 0.3);
}

.s2-dot-label {
  position: absolute;
  top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #666666;
  white-space: nowrap;
  line-height: 1.4;
}

.s2-dot-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: #444444;
  margin-top: 2px;
}

.s2-sub-danger {
  color: #d48a8a;
  font-weight: 500;
}

.s2-label-danger {
  color: #d48a8a;
  font-weight: 700;
}

/* Ay isimleri satırı */
.s2-months {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-top: 56px;
  position: relative;
}

.s2-months::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}

.s2-month {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444444;
  flex: 1;
  text-align: center;
}

.s2-month-active {
  color: #888888;
}

.s2-month-dim {
  color: #2a2a2a;
}

/* Data Void bloğu */
.s2-data-void {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s2-void-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.s2-void-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    rgba(212, 138, 138, 0.15) 0px,
    rgba(212, 138, 138, 0.15) 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 3px;
}

.s2-void-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.s2-void-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d48a8a;
}

.s2-void-range {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: #444444;
}

/* Data Void animasyonu */
.slide.active .s2-void-fill {
  animation: s2VoidFill 2s 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes s2VoidFill {
  to {
    width: 75%;
  }
}

/* İki kolon karşılaştırma */
.s2-columns {
  display: flex;
  gap: 0;
  opacity: 0;
  transform: translateY(20px);
}

.s2-col {
  flex: 1;
}

.s2-col-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent 100%);
  margin: 0 40px;
  flex-shrink: 0;
}

.s2-col-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.s2-col-head-active {
  color: #d48a8a;
  border-bottom-color: rgba(212, 138, 138, 0.2);
}

.s2-col-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.s2-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.s2-step-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7eb8da;
  flex-shrink: 0;
  padding-top: 2px;
}

.s2-step-text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555555;
}

/* Solgun step (gecikme vurgusu) */
.s2-step-fade .s2-step-text {
  color: #444444;
}

.s2-danger {
  color: #d48a8a;
  font-weight: 600;
}

/* Canlı step (yeni sistem) */
.s2-step-bright {}

.s2-num-bright {
  color: #ffffff;
}

.s2-text-bright {
  color: #e2e8f0;
  font-weight: 400;
}

/* ========= Slayt 2 Animasyonlar ========= */
.slide.active .s2-header {
  animation: s2FadeUp 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s2-timeline {
  animation: s2FadeIn 0.5s 0.3s ease forwards;
}

.slide.active .s2-tl-fill {
  animation: s2TimelineFill 1.2s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide.active .s2-tl-end {
  animation: s2TimelineEnd 0.6s 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide.active .s2-columns {
  animation: s2FadeUp 0.7s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s2FadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s2FadeIn {
  to {
    opacity: 1;
  }
}

@keyframes s2TimelineFill {
  0% { width: 0; }
  100% { width: 45%; }
}

@keyframes s2TimelineEnd {
  0% { width: 0; }
  100% { width: 2%; }
}

/* ==============================
   SLAYT 3 — Hibrit Maliyet Motoru
   ============================== */
.s3-wrap {
  width: 100%;
  height: 100%;
  background: #050505;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% 7%;
  overflow: hidden;
}

/* Başlık */
.s3-header {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
}

.s3-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
}

.s3-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 14px;
}

.s3-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  max-width: 520px;
}

/* Akış Şeması */
.s3-flow {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* 3 Kaynak Kutu */
.s3-sources {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  width: 38%;
}

.s3-source-box {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.02);
  opacity: 0;
  transform: translateX(-30px);
  transition: border-color 0.3s;
}

.s3-source-box:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.s3-src-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7eb8da;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.s3-src-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.s3-src-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #555555;
  line-height: 1.5;
}

/* Bağlantı Çizgileri */
.s3-connectors {
  flex: 1;
  position: relative;
  height: 220px;
  min-width: 80px;
}

.s3-conn-line {
  position: absolute;
  right: 0;
  height: 1px;
  width: 0;
  background: rgba(126, 184, 218, 0.2);
}

.s3-cl-1 {
  top: 18%;
  left: 0;
}

.s3-cl-2 {
  top: 50%;
  left: 0;
}

.s3-cl-3 {
  top: 82%;
  left: 0;
}

/* Birleşme dikey çizgisi */
.s3-conn-merge {
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(126, 184, 218, 0.1) 0%,
    rgba(126, 201, 164, 0.2) 50%,
    rgba(126, 184, 218, 0.1) 100%
  );
  opacity: 0;
}

/* Hedef kutu */
.s3-target {
  flex-shrink: 0;
  width: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
}

.s3-target-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(126, 201, 164, 0.04);
  filter: blur(50px);
  animation: s3GlowPulse 4s ease-in-out infinite alternate;
}

@keyframes s3GlowPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.15); }
}

.s3-target-box {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(126, 201, 164, 0.18);
  border-radius: 12px;
  padding: 28px 32px;
  background: rgba(126, 201, 164, 0.03);
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.04);
}

.s3-target-label {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #7ec9a4;
  margin-bottom: 6px;
}

.s3-target-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: #64748b;
  letter-spacing: 0.03em;
}

/* ========= Slayt 3 Animasyonlar ========= */
.slide.active .s3-header {
  animation: s3FadeUp 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s3-src-1 {
  animation: s3SlideIn 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s3-src-2 {
  animation: s3SlideIn 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s3-src-3 {
  animation: s3SlideIn 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s3-cl-1 {
  animation: s3LineGrow 0.8s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide.active .s3-cl-2 {
  animation: s3LineGrow 0.8s 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide.active .s3-cl-3 {
  animation: s3LineGrow 0.8s 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide.active .s3-conn-merge {
  animation: s3FadeIn 0.5s 1.2s ease forwards;
}

.slide.active .s3-target {
  animation: s3TargetIn 0.8s 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s3FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s3SlideIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s3LineGrow {
  to { width: 100%; }
}

@keyframes s3FadeIn {
  to { opacity: 1; }
}

@keyframes s3TargetIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ==============================
   SLAYT 4 — OMF vs. YKM
   ============================== */
.s4-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4% 6%;
  overflow: hidden;
  position: relative;
}

/* Devasa arka plan kısaltmaları */
.s4-bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.s4-bg-omf,
.s4-bg-ykm {
  font-family: 'Inter', sans-serif;
  font-size: 18rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.025);
  user-select: none;
}

.s4-bg-ykm {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.015);
}

/* Başlık */
.s4-header {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(24px);
}

.s4-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 14px;
}

.s4-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 10px;
}

.s4-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
}

/* Karşılaştırma alan */
.s4-comparison {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Kartlar */
.s4-card {
  flex: 1;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 36px 32px 28px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, background 0.3s;
}

.s4-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.s4-card-omf {
  transform: translateX(-40px);
}

.s4-card-ykm {
  transform: translateX(40px);
  border-color: rgba(126, 201, 164, 0.08);
}

.s4-card-ykm:hover {
  border-color: rgba(126, 201, 164, 0.15);
  background: rgba(126, 201, 164, 0.02);
}

/* Kart üst satır */
.s4-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.s4-card-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7eb8da;
  padding: 5px 12px;
  border: 1px solid rgba(126, 184, 218, 0.15);
  border-radius: 20px;
  background: rgba(126, 184, 218, 0.05);
}

.s4-badge-ykm {
  color: #7ec9a4;
  border-color: rgba(126, 201, 164, 0.15);
  background: rgba(126, 201, 164, 0.05);
}

.s4-card-direction {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.s4-dir-past { color: #7eb8da; }
.s4-dir-future { color: #7ec9a4; }

.s4-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #e2e8f0;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.s4-name-ykm {
  color: #ffffff;
}

.s4-card-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #555;
  margin-bottom: 20px;
}

.s4-role-ykm {
  color: #64748b;
}

.s4-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}

.s4-divider-ykm {
  background: rgba(126, 201, 164, 0.1);
}

.s4-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: #666;
  margin-bottom: 24px;
  flex: 1;
}

.s4-desc-ykm {
  color: #94a3b8;
}

/* Spec grid */
.s4-card-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.s4-spec {
  padding: 14px 16px;
  background: #020202;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s4-spec-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444;
}

.s4-spec-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ccc;
}

.s4-sv-ykm {
  color: #7ec9a4;
}

/* Ortadaki VS ayracı */
.s4-vs {
  width: 64px;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
}

.s4-vs-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 165, 116, 0.15) 50%, transparent 100%);
}

.s4-vs-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #d4a574;
  padding: 10px 0;
  text-align: center;
}

/* Alt bilgi bandı */
.s4-bottom {
  position: relative;
  z-index: 2;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(12px);
}

.s4-bottom-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent 100%);
  margin-bottom: 18px;
}

.s4-bottom-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
  text-align: center;
}

.s4-bottom-text strong {
  color: #d4a574;
  font-weight: 600;
  display: block;
}

/* ========= Slayt 4 Animasyonlar ========= */
.slide.active .s4-header {
  animation: s4FadeUp 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s4-card-omf {
  animation: s4CardLeft 0.8s 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s4-card-ykm {
  animation: s4CardRight 0.8s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s4-vs {
  animation: s4CenterIn 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active .s4-bottom {
  animation: s4FadeUp 0.7s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s4FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s4CardLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s4CardRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s4CenterIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ==============================
   SLAYT 5 — Ürün Bazlı Derin Dalış
   ============================== */
.s5-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Sol: İçerik */
.s5-content {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4% 0 6%;
  position: relative;
  z-index: 2;
}

.s5-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(16px);
}

.s5-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(24px);
}

.s5-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.6;
  max-width: 380px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
}

/* Feature items */
.s5-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s5-feat {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(16px);
}

.s5-feat-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7eb8da;
  letter-spacing: 0.06em;
  padding-top: 3px;
  flex-shrink: 0;
}

.s5-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.s5-feat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.5;
}

/* Sağ: Carousel */
.s5-visual {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3% 4% 3% 0;
  gap: 16px;
  opacity: 0;
  transform: translateX(60px);
}

/* Tabs */
.s5-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}

.s5-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #555555;
  background: transparent;
  border: none;
  padding: 12px 24px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.s5-tab:hover { color: #94a3b8; }

.s5-tab-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

/* Screens */
.s5-screens {
  position: relative;
  width: 100%;
  max-width: 700px;
}

.s5-screen {
  border-radius: 10px;
  overflow: hidden;
  display: none;
  animation: s5PanelIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.s5-screen-active { display: block; }

@keyframes s5PanelIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Browser frame */
.s5-browser {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.3s;
}

.s5-browser:hover {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(255, 255, 255, 0.015);
}

.s5-browser-bar {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s5-browser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a2a;
}

.s5-browser-body {
  width: 100%;
  overflow: hidden;
}

.s5-browser-body img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(2.5px);
}

/* Pager */
.s5-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.s5-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #2a2a2a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.s5-pager-dot:hover { background: #555555; }

.s5-pager-active {
  background: #7eb8da;
  width: 32px;
}

/* ========= Slayt 5 Animasyonlar ========= */
.slide.active .s5-tag {
  animation: s5FadeUp 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-title {
  animation: s5FadeUp 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-subtitle {
  animation: s5FadeUp 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-feat-1 {
  animation: s5FadeUp 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-feat-2 {
  animation: s5FadeUp 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-feat-3 {
  animation: s5FadeUp 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s5-visual {
  animation: s5ScreenIn 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s5FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s5ScreenIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ==============================
   SLAYT 6 — What-If Senaryo Simülasyonu
   ============================== */
.s6-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Filigran */
.s6-watermark {
  position: absolute;
  bottom: 8%;
  right: 4%;
  font-family: 'Inter', sans-serif;
  font-size: 8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
}

/* Sol: İçerik */
.s6-content {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3% 0 6%;
  position: relative;
  z-index: 2;
}

.s6-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
  opacity: 0;
  filter: blur(8px);
}

.s6-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  opacity: 0;
  filter: blur(8px);
}

.s6-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.6;
  max-width: 340px;
  margin-bottom: 36px;
  opacity: 0;
  filter: blur(8px);
}

.s6-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.s6-feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  opacity: 0;
  filter: blur(6px);
}

.s6-feat-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d4a574;
  letter-spacing: 0.06em;
  padding-top: 3px;
  flex-shrink: 0;
}

.s6-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.s6-feat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.5;
}

/* Sağ: Carousel */
.s6-visual {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3% 4% 3% 0;
  position: relative;
  z-index: 2;
  gap: 16px;
  opacity: 0;
  transform: translateX(50px);
}

/* Tab bar */
.s6-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}

.s6-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #555555;
  background: transparent;
  border: none;
  padding: 12px 24px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.s6-tab:hover {
  color: #94a3b8;
}

.s6-tab-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

/* Screens container */
.s6-screens {
  position: relative;
  width: 100%;
  max-width: 700px;
}

.s6-screen {
  border-radius: 10px;
  overflow: hidden;
  display: none;
  animation: s6PanelIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.s6-screen-active {
  display: block;
}

@keyframes s6PanelIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.s6-browser {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.3s;
}

.s6-browser:hover {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(255, 255, 255, 0.015);
}

.s6-browser-bar {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s6-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a2a;
}

.s6-browser img {
  width: 100%;
  display: block;
  filter: blur(2.5px);
}

/* Pager dots */
.s6-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.s6-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #2a2a2a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.s6-pager-dot:hover {
  background: #555555;
}

.s6-pager-active {
  background: #d4a574;
  width: 32px;
  border-radius: 3px;
}

/* ========= Slayt 6 Animasyonlar — Blur-in ========= */
.slide.active .s6-tag {
  animation: s6BlurIn 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-title {
  animation: s6BlurIn 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-subtitle {
  animation: s6BlurIn 0.8s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-feat-1 {
  animation: s6BlurIn 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-feat-2 {
  animation: s6BlurIn 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-feat-3 {
  animation: s6BlurIn 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s6-visual {
  animation: s6ScreenIn 1s 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s6BlurIn {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes s6ScreenIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==============================
   SLAYT 7 — Karlılık Projeksiyonu
   ============================== */
.s7-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Dikey filigran */
.s7-watermark {
  position: absolute;
  bottom: 8%;
  right: 4%;
  font-family: 'Inter', sans-serif;
  font-size: 8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Sol: İçerik */
.s7-content {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3% 0 6%;
  position: relative;
  z-index: 2;
}

.s7-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(20px);
}

.s7-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(24px);
}

.s7-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.6;
  max-width: 340px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
}

.s7-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.s7-feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(16px);
}

.s7-feat-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7ec9a4;
  letter-spacing: 0.06em;
  padding-top: 3px;
  flex-shrink: 0;
}

.s7-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.s7-feat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.5;
}

/* Sağ: Carousel */
.s7-visual {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3% 4% 3% 0;
  position: relative;
  z-index: 2;
  gap: 16px;
  opacity: 0;
  transform: scale(0.92);
}

/* Tabs */
.s7-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}

.s7-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #555555;
  background: transparent;
  border: none;
  padding: 12px 24px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.s7-tab:hover { color: #94a3b8; }

.s7-tab-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

/* Screens */
.s7-screens {
  position: relative;
  width: 100%;
  max-width: 700px;
}

.s7-screen {
  border-radius: 10px;
  overflow: hidden;
  display: none;
  animation: s7PanelIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.s7-screen-active { display: block; }

@keyframes s7PanelIn {
  0% { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

.s7-browser {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.3s;
}

.s7-browser:hover {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(255, 255, 255, 0.015);
}

.s7-browser-bar {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s7-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a2a;
}

.s7-browser img {
  width: 100%;
  display: block;
  filter: blur(2.5px);
}

/* Light sweep radar efekti */
.s7-sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.015) 40%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.015) 60%,
    transparent 100%
  );
  pointer-events: none;
  animation: s7Sweep 4s 1s ease-in-out infinite;
}

@keyframes s7Sweep {
  0% { left: -60%; }
  100% { left: 100%; }
}

/* Pager */
.s7-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.s7-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #2a2a2a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.s7-pager-dot:hover { background: #555555; }

.s7-pager-active {
  background: #7ec9a4;
  width: 32px;
}

/* ========= Slayt 7 Animasyonlar ========= */
.slide.active .s7-tag {
  animation: s7Drop 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-title {
  animation: s7Drop 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-subtitle {
  animation: s7Drop 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-feat-1 {
  animation: s7Drop 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-feat-2 {
  animation: s7Drop 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-feat-3 {
  animation: s7Drop 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s7-visual {
  animation: s7ScaleIn 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s7Drop {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s7ScaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* ==============================
   SLAYT 8 — Operasyonel Aksiyon & Kurumsal Hafıza
   ============================== */
.s8-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Filigranlar */
.s8-wm {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.015);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.s8-wm-1 {
  font-size: 8rem;
  top: 8%;
  right: 4%;
  letter-spacing: 0.04em;
}

.s8-wm-2 {
  font-size: 8rem;
  bottom: 8%;
  left: 4%;
  letter-spacing: 0.04em;
}

/* Sol: İçerik */
.s8-content {
  width: 32%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2% 0 5%;
  position: relative;
  z-index: 2;
}

.s8-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(20px);
}

.s8-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(24px);
}

.s8-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
}

.s8-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s8-feat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(16px);
}

.s8-feat-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #a88cc7;
  letter-spacing: 0.06em;
  padding-top: 3px;
  flex-shrink: 0;
}

.s8-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 3px;
}

.s8-feat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.5;
}

/* Sağ: Stacking kartlar */
.s8-visual {
  width: 68%;
  position: relative;
  padding: 3% 3% 3% 0;
  z-index: 2;
}

.s8-card {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
}

.s8-browser {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s, transform 0.3s;
}

.s8-browser:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.s8-browser-bar {
  display: flex;
  gap: 5px;
  padding: 7px 12px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
}

.s8-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2a2a;
}

.s8-bar-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #444444;
  margin-left: auto;
  letter-spacing: 0.04em;
}

.s8-browser img {
  width: 100%;
  display: block;
  filter: blur(2.5px);
}

/* Ana kart: Aksiyonlar — sol/orta */
.s8-card-main {
  top: 8%;
  left: 0;
  width: 58%;
  z-index: 2;
  opacity: 0;
  transform: translateX(-60px);
}

/* Notlar — sağ üst */
.s8-card-notes {
  top: 4%;
  right: 3%;
  width: 46%;
  z-index: 1;
  opacity: 0;
  transform: translateX(60px) translateY(-20px);
}

/* Geçmiş — sağ alt */
.s8-card-history {
  bottom: 6%;
  right: 0;
  width: 52%;
  z-index: 3;
  opacity: 0;
  transform: translateX(60px) translateY(20px);
}

/* Geçmiş scroll simülasyonu */
.s8-history-scroll {
  height: 260px;
  overflow: hidden;
  position: relative;
}

.s8-history-scroll img {
  width: 100%;
  display: block;
  position: relative;
}

.slide.active .s8-history-scroll img {
  animation: s8ScrollDown 12s 2s linear infinite alternate;
}

@keyframes s8ScrollDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(-30%); }
}

/* Geçmiş kart glow */
.s8-card-history .s8-browser {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 255, 255, 0.02);
}

/* ========= Slayt 8 Animasyonlar ========= */
.slide.active .s8-tag {
  animation: s8FadeUp 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-title {
  animation: s8FadeUp 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-subtitle {
  animation: s8FadeUp 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-feat-1 {
  animation: s8FadeUp 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-feat-2 {
  animation: s8FadeUp 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-feat-3 {
  animation: s8FadeUp 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Kartlar — magnetic çekim */
.slide.active .s8-card-main {
  animation: s8CardLeft 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-card-notes {
  animation: s8CardRight 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s8-card-history {
  animation: s8CardRight 0.9s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s8FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s8CardLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s8CardRight {
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

/* ==============================
   SLAYT 9 — Mimari ve Veri Güvenliği
   ============================== */
.s9-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 3% 6%;
}

/* Filigranlar dikey */
.s9-wm {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-size: 8rem;
  letter-spacing: 0.04em;
}

.s9-wm-left {
  top: 8%;
  left: 4%;
}

.s9-wm-right {
  bottom: 8%;
  right: 4%;
}

/* ===== Parçacık Katmanı ===== */
.s9-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.s9-p {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(126, 184, 218, 0.35);
  opacity: 0;
}

.slide.active .s9-p {
  animation: s9Particle 6s linear infinite;
}

.s9-p1 { top: 20%; animation-delay: 0s !important; }
.s9-p2 { top: 35%; animation-delay: 0.8s !important; }
.s9-p3 { top: 50%; animation-delay: 1.5s !important; }
.s9-p4 { top: 65%; animation-delay: 2.2s !important; }
.s9-p5 { top: 25%; animation-delay: 3s !important; }
.s9-p6 { top: 45%; animation-delay: 3.7s !important; }
.s9-p7 { top: 55%; animation-delay: 4.3s !important; }
.s9-p8 { top: 70%; animation-delay: 5s !important; }

@keyframes s9Particle {
  0% { left: -2%; opacity: 0; transform: scale(0.5); }
  10% { opacity: 0.6; transform: scale(1); }
  90% { opacity: 0.4; transform: scale(0.8); }
  100% { left: 102%; opacity: 0; transform: scale(0.3); }
}

/* ===== Üst Başlık ===== */
.s9-header {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.s9-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(16px);
}

.s9-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(20px);
}

.s9-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
}

/* ===== Akış Diyagramı ===== */
.s9-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 920px;
  position: relative;
  z-index: 2;
  margin-bottom: 36px;
}

.s9-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.s9-block-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 6px;
}

/* Sol: Veri Kaynakları */
.s9-sources {
  flex: 0 0 200px;
  opacity: 0;
  transform: translateX(-40px);
}

.s9-source-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s9-source-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.3s;
}

.s9-source-box:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.s9-src-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7eb8da;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(126, 184, 218, 0.3);
}

.s9-src-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #c8c8c8;
}

/* Bağlantı çizgileri */
.s9-connector {
  flex: 0 0 60px;
  height: 2px;
  position: relative;
  display: flex;
  align-items: center;
}

.s9-conn-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.slide.active .s9-conn-left .s9-conn-line {
  animation: s9LineDraw 1s 0.8s ease-out forwards;
}

.slide.active .s9-conn-right .s9-conn-line {
  animation: s9LineDraw 1s 1.2s ease-out forwards;
}

@keyframes s9LineDraw {
  from { background: rgba(255, 255, 255, 0.06); }
  to { background: rgba(168, 140, 199, 0.25); }
}

/* Akım pulse'ları */
.s9-conn-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 140, 199, 0.5);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.slide.active .s9-conn-pulse {
  animation: s9PulseFlow 2.5s linear infinite;
}

.s9-pulse-l1 { animation-delay: 1.2s !important; }
.s9-pulse-l2 { animation-delay: 2.4s !important; }
.s9-pulse-r1 { animation-delay: 1.8s !important; }
.s9-pulse-r2 { animation-delay: 3s !important; }

@keyframes s9PulseFlow {
  0% { left: -10%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.6; }
  100% { left: 110%; opacity: 0; }
}

/* Orta: n8n Motor */
.s9-engine {
  flex: 0 0 220px;
  position: relative;
  opacity: 0;
  transform: scale(0.85);
}

.s9-engine-glow {
  position: absolute;
  inset: -20px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(168, 140, 199, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.s9-engine-box {
  padding: 24px 20px;
  border: 1px solid rgba(168, 140, 199, 0.15);
  border-radius: 12px;
  background: rgba(168, 140, 199, 0.03);
  text-align: center;
  position: relative;
  z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.s9-engine-box:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.s9-engine-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 4px;
}

.s9-engine-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.s9-engine-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.s9-eline {
  display: block;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.s9-eline:nth-child(1) { width: 80%; }
.s9-eline:nth-child(2) { width: 60%; }
.s9-eline:nth-child(3) { width: 40%; }

/* Sağ: On-Prem Kale */
.s9-fortress {
  flex: 0 0 200px;
  opacity: 0;
  transform: translateX(40px);
}

.s9-fortress-box {
  padding: 4px;
  border: 1px solid rgba(126, 201, 164, 0.12);
  border-radius: 12px;
  background: rgba(126, 201, 164, 0.015);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.s9-fortress-box:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.s9-fortress-inner {
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 9px;
  text-align: center;
  position: relative;
}

.s9-fortress-name {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.s9-fortress-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: #555555;
  letter-spacing: 0.03em;
}

.s9-fortress-border {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  pointer-events: none;
}

.s9-fortress-border-2 {
  inset: -14px;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.015);
}

/* ===== Alt: Strateji Maddeleri ===== */
.s9-details {
  display: flex;
  gap: 32px;
  justify-content: center;
  width: 100%;
  max-width: 920px;
  position: relative;
  z-index: 2;
}

.s9-detail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  opacity: 0;
  transform: translateY(16px);
}

.s9-detail-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #a88cc7;
  letter-spacing: 0.06em;
  padding-top: 2px;
  flex-shrink: 0;
}

.s9-detail-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 3px;
}

.s9-detail-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.55;
}

/* ===== Slayt 9 Animasyonlar ===== */
.slide.active .s9-tag {
  animation: s9FadeUp 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-title {
  animation: s9FadeUp 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-subtitle {
  animation: s9FadeUp 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Diyagram blokları */
.slide.active .s9-sources {
  animation: s9SlideRight 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-engine {
  animation: s9ScaleIn 0.8s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-fortress {
  animation: s9SlideLeft 0.9s 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Alt detaylar */
.slide.active .s9-d1 {
  animation: s9FadeUp 0.6s 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-d2 {
  animation: s9FadeUp 0.6s 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s9-d3 {
  animation: s9FadeUp 0.6s 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s9FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s9SlideRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s9SlideLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes s9ScaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* ==============================
   SLAYT 10 — Dinamik Dashboard & Analitik Raporlama
   ============================== */
.s10-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 1.5% 5%;
  gap: 0;
}

/* Filigranlar */
.s10-wm {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-size: 8rem;
  letter-spacing: 0.04em;
}

.s10-wm-1 {
  top: 8%;
  left: 4%;
}

.s10-wm-2 {
  bottom: 8%;
  right: 4%;
}

/* ===== Matrix Veri Akışı ===== */
.s10-matrix {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.025;
}

.s10-col {
  position: absolute;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.08em;
}

.slide.active .s10-col {
  animation: s10MatrixScroll linear infinite;
}

.s10-col-1 { top: 10%; animation-duration: 35s !important; }
.s10-col-2 { top: 28%; animation-duration: 28s !important; animation-direction: reverse !important; }
.s10-col-3 { top: 50%; animation-duration: 40s !important; }
.s10-col-4 { top: 68%; animation-duration: 32s !important; animation-direction: reverse !important; }
.s10-col-5 { top: 86%; animation-duration: 38s !important; }

@keyframes s10MatrixScroll {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-200vw); }
}

/* ===== Üst Başlık ===== */
.s10-header {
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.s10-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(16px);
}

.s10-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(20px);
}

.s10-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
}

/* ===== Sahne: Katmanlı Dashboard + Tablo ===== */
.s10-stage {
  width: 100%;
  max-width: 880px;
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
}

/* --- Arka Katman: Rapor Tablosu --- */
.s10-table-layer {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
}

.s10-table {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.s10-tbl-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr 0.7fr 0.8fr;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(126, 184, 218, 0.08);
  background: rgba(126, 184, 218, 0.02);
}

.s10-tbl-header span {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #555555;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s10-tbl-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr 0.7fr 0.8fr;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  transition: background 0.2s;
}

.s10-tbl-row:hover {
  background: rgba(255, 255, 255, 0.015);
}

.s10-tbl-row:last-child {
  border-bottom: none;
}

.s10-tbl-row span {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #888888;
  display: flex;
  align-items: center;
}

.s10-neg {
  color: #d48a8a !important;
  font-weight: 500 !important;
}

.s10-pos {
  color: #7ec9a4 !important;
  font-weight: 500 !important;
}

.s10-status {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex !important;
  width: fit-content;
}

.s10-status-ok {
  color: #7ec9a4 !important;
  background: rgba(126, 201, 164, 0.08);
}

.s10-status-warn {
  color: #d4a574 !important;
  background: rgba(212, 165, 116, 0.08);
}

.s10-status-crit {
  color: #d48a8a !important;
  background: rgba(212, 138, 138, 0.08);
}

/* --- Ön Katman: KPI Kartları --- */
.s10-kpi-layer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 0;
}

.s10-kpi {
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.s10-kpi:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.s10-kpi-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 4px;
}

.s10-kpi-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.s10-kpi-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  margin-bottom: 5px;
  overflow: hidden;
}

.s10-bar-fill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.s10-bar-1 { background: #7eb8da; }
.s10-bar-2 { background: #7ec9a4; }
.s10-bar-3 { background: #d48a8a; }
.s10-bar-4 { background: #a88cc7; }

/* Bar dolum animasyonu aktif slayt */
.slide.active .s10-bar-1 { width: 82%; transition-delay: 1.0s; }
.slide.active .s10-bar-2 { width: 65%; transition-delay: 1.2s; }
.slide.active .s10-bar-3 { width: 18%; transition-delay: 1.4s; }
.slide.active .s10-bar-4 { width: 95%; transition-delay: 1.6s; }

.s10-kpi-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  color: #444444;
}

/* ===== Alt: Özellikler ===== */
.s10-features {
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
  max-width: 880px;
  position: relative;
  z-index: 2;
}

.s10-feat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  opacity: 0;
  transform: translateY(14px);
}

.s10-feat-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7eb8da;
  letter-spacing: 0.06em;
  padding-top: 2px;
  flex-shrink: 0;
}

.s10-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
}

.s10-feat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #555555;
  line-height: 1.5;
}

/* ===== Slayt 10 Animasyonlar ===== */

/* Başlık */
.slide.active .s10-tag {
  animation: s10FadeUp 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-title {
  animation: s10FadeUp 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-subtitle {
  animation: s10FadeUp 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* KPI kartları pop-up */
.slide.active .s10-kpi-1 {
  animation: s10PopUp 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-kpi-2 {
  animation: s10PopUp 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-kpi-3 {
  animation: s10PopUp 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-kpi-4 {
  animation: s10PopUp 0.6s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tablo yumuşak belirme */
.slide.active .s10-table-layer {
  animation: s10TableIn 1s 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Alt özellikler */
.slide.active .s10-f1 {
  animation: s10FadeUp 0.6s 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-f2 {
  animation: s10FadeUp 0.6s 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .s10-f3 {
  animation: s10FadeUp 0.6s 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s10FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s10PopUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  60% { transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes s10TableIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ==============================
   SLAYT 11 — Final & İletişim (CTA)
   ============================== */
.s11-wrap {
  width: 100%;
  height: 100%;
  background: #020202;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 6%;
  gap: 6%;
}

/* Arka plan glow */
.s11-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(126, 184, 218, 0.035) 0%,
    rgba(126, 184, 218, 0.01) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Üstten inen çizgi */
.s11-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 0;
  background: linear-gradient(
    180deg,
    rgba(126, 184, 218, 0.3) 0%,
    rgba(126, 184, 218, 0.06) 60%,
    transparent 100%
  );
  transform: translateX(-50%);
  z-index: 1;
}

.slide.active .s11-line {
  animation: s11LineDown 1.2s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s11LineDown {
  to { height: 20%; }
}

/* ===== Sol: Başlık + CTA ===== */
.s11-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  max-width: 520px;
}

/* Marka adı */
.s11-brand {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7eb8da;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
}

.slide.active .s11-brand {
  animation: s11FadeUp 0.7s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ana Başlık */
.s11-title {
  font-family: 'Inter', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #ffffff;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.slide.active .s11-title {
  animation: s11FadeUp 0.8s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Alt başlık */
.s11-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #666;
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(16px);
}

.slide.active .s11-subtitle {
  animation: s11FadeUp 0.7s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* CTA Block */
.s11-cta-block {
  opacity: 0;
  transform: translateY(12px);
}

.slide.active .s11-cta-block {
  animation: s11FadeUp 0.7s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.s11-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #020202;
  text-decoration: none;
  padding: 18px 48px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.08);
}

.s11-cta:hover {
  background: #e5e5e5;
  color: #020202;
  box-shadow: 0 6px 32px rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.s11-cta-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: #555;
  margin-top: 14px;
  letter-spacing: 0.01em;
}

/* ===== Sağ: Bilgi Paneli ===== */
.s11-right {
  width: 420px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateX(30px);
}

.slide.active .s11-right {
  animation: s11PanelIn 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s11PanelIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Neden CostPera */
.s11-reasons {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.s11-reasons-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 18px;
}

.s11-reason {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.s11-reason:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.s11-reason-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #7eb8da;
  letter-spacing: 0.04em;
  padding-top: 2px;
  flex-shrink: 0;
}

.s11-reason:nth-child(3) .s11-reason-num { color: #7ec9a4; }
.s11-reason:nth-child(4) .s11-reason-num { color: #a88cc7; }

.s11-reason-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s11-reason-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e8f0;
}

.s11-reason-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: #666;
  line-height: 1.5;
}

/* Ayraç */
.s11-sep {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
  margin: 20px 0;
}

/* İletişim */
.s11-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s11-contact-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.s11-contact-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444;
  min-width: 52px;
}

.s11-contact-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: #ccc;
  letter-spacing: 0.01em;
}

/* Alt imza */
.s11-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.s11-footer-line {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.s11-footer-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  color: #444;
  letter-spacing: 0.03em;
}

/* Animasyonlar */
@keyframes s11FadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s11FadeIn {
  to { opacity: 1; }
}

/* ==============================
   Demo Modal — Glassmorphism Dark
   ============================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal-overlay.modal-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 520px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.modal-open .modal {
  transform: translateY(0) scale(1);
}

/* Kapat butonu */
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: #555555;
  font-size: 1.6rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* Header */
.modal-header {
  margin-bottom: 28px;
}

.modal-brand {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
}

.modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.modal-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #666666;
  line-height: 1.5;
}

/* Form */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-group {
  flex: 1;
}

.form-full {
  width: 100%;
}

.form-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
  color: #333333;
  font-weight: 300;
}

.form-input:focus {
  border-color: rgba(126, 184, 218, 0.3);
  box-shadow: 0 0 0 3px rgba(126, 184, 218, 0.06);
}

/* Submit butonu */
.form-submit {
  width: 100%;
  padding: 14px 0;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: #ffffff;
  color: #020202;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.02em;
}

.form-submit:hover {
  opacity: 0.85;
  box-shadow: none;
  transform: translateY(-1px);
}

.form-submit:active {
  transform: translateY(0) scale(0.99);
}

.form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Başarı mesajı */
.modal-success {
  text-align: center;
  padding: 20px 0;
}

.success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(126, 201, 164, 0.1);
  color: #7ec9a4;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.success-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.success-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #666666;
}

/* ==============================
   Sağ Panel — Glassmorphism
   ============================== */
.controls {
  width: 56px;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  z-index: 10;
  transition: background 0.5s, border-color 0.5s;
}

/* Koyu slaytlarda panel adaptasyonu */
.controls.dark-mode {
  background: rgba(2, 2, 2, 0.9);
  border-left-color: rgba(255, 255, 255, 0.06);
}

.controls.dark-mode .nav-btn {
  color: #64748b;
}

.controls.dark-mode .nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.controls.dark-mode .progress-track {
  background: rgba(255, 255, 255, 0.06);
}

.controls.dark-mode .slide-counter {
  color: #64748b;
}

.controls.dark-mode .slide-counter .separator {
  color: #334155;
}

.controls.dark-mode .slide-dot {
  background: #1e293b;
}

.controls.dark-mode .slide-dot:hover {
  background: #475569;
}

.controls.dark-mode .slide-dot.active {
  background: #7eb8da;
}

/* Üst: Navigasyon butonları */
.nav-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nav-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.nav-btn:active {
  transform: scale(0.92);
  background: #e2e8f0;
}

/* Orta: İlerleme */
.progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.progress-track {
  width: 3px;
  height: 120px;
  background: #f1f5f9;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9%;
  background: #7eb8da;
  border-radius: 2px;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-counter {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.slide-counter .separator {
  margin: 0 1px;
  color: #cbd5e1;
}

/* Alt: Slayt noktaları */
.slide-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  padding: 0;
}

.slide-dot:hover {
  background: #94a3b8;
}

.slide-dot.active {
  background: #7eb8da;
  height: 18px;
  border-radius: 3px;
}

/* ==============================
   RESPONSIVE — Tüm Ekran Boyutları
   ============================== */

/* Büyük ekranlar (1920+) */
@media (min-width: 1921px) {
  .s1-content { padding: 0 6% 0 8%; }
  .s1-data-cards { width: 76%; }
}

/* Laptop ekranları (1024–1440) */
@media (max-width: 1440px) {
  .s1-content { padding: 0 4% 0 5%; }
  .s1-subtitle { max-width: 460px; }
}

/* Küçük laptop / tablet yatay (768–1024) */
@media (max-width: 1024px) {
  /* Controls paneli daralt */
  .controls { width: 44px; min-width: 44px; padding: 14px 0; }
  .nav-btn { width: 30px; height: 30px; }
  .progress-track { height: 80px; }
  .slide-counter { font-size: 11px; }
  .slide-dot { width: 5px; height: 5px; }
  .slide-dot.active { height: 14px; }

  /* Slayt 1 */
  .s1-hero { flex-direction: column; }
  .s1-divider { display: none; }
  .s1-content {
    width: 100%;
    height: 55%;
    padding: 6% 6% 2% 6%;
    justify-content: flex-end;
  }
  .s1-visual {
    width: 100%;
    height: 45%;
  }
  .s1-metric-old { font-size: 3.5rem; }
  .s1-metric-new { font-size: 4.5rem; }
  .s1-data-cards {
    width: 88%;
    margin-top: 24px;
  }
  .s1-dcard { padding: 14px 12px; }

  /* Slayt 2 */
  .s2-wrap { padding: 4% 5%; }
  .s2-title { font-size: 2rem; }

  /* Slayt 3 */
  .s3-wrap { padding: 4% 5%; }
  .s3-title { font-size: 2rem; }

  /* Slayt 4 */
  .s4-wrap { padding: 4% 5%; }
  .s4-title { font-size: 2rem; }

  /* Slayt 5, 6, 7, 8 — yan yana düzeni dik çevir */
  .s5-wrap,
  .s6-wrap,
  .s7-wrap,
  .s8-wrap {
    flex-direction: column;
  }
  .s5-left, .s6-left, .s7-left {
    width: 100%;
    padding: 4% 5% 2% 5%;
  }
  .s5-right, .s6-right, .s7-right {
    width: 100%;
    padding: 0 5% 4% 5%;
  }

  /* Slayt 9 */
  .s9-wrap { padding: 4% 5%; }
  .s9-title { font-size: 2rem; }

  /* Slayt 10 */
  .s10-wrap { padding: 4% 5%; }
  .s10-title { font-size: 2rem; }

  /* Slayt 11 */
  .s11-wrap { padding: 4% 5%; }
  .s11-title { font-size: 2.4rem; }
  .s11-right { width: 360px; min-width: 320px; padding: 28px 24px; }
}

/* Tablet dikey (600–768) */
@media (max-width: 768px) {
  .controls { width: 38px; min-width: 38px; padding: 10px 0; }
  .nav-btn { width: 26px; height: 26px; }
  .progress-track { height: 60px; }
  .slide-counter { font-size: 10px; }

  /* Slayt 1 */
  .s1-content { padding: 5% 5% 2% 5%; height: 50%; }
  .s1-visual { height: 50%; }
  .s1-tag { margin-bottom: 16px; }
  .s1-title { margin-bottom: 20px; }
  .s1-subtitle { margin-bottom: 28px; max-width: 100%; }
  .s1-data-cards { gap: 0; width: 92%; }
  .s1-dcard-detail { display: none; }

  /* Slayt 2 */
  .s2-title { font-size: 1.7rem; }
  .s2-subtitle { font-size: 1rem; }

  /* Slayt 3 */
  .s3-title { font-size: 1.7rem; }

  /* Slayt 4 */
  .s4-comparison { flex-direction: column; gap: 20px; }
  .s4-card { width: 100%; }
  .s4-vs { display: none; }
  .s4-title { font-size: 1.7rem; }
  .s4-card-specs { grid-template-columns: repeat(3, 1fr); }
  .s4-card { padding: 28px 24px 22px; }

  /* Slayt 5–8 */
  .s5-title, .s6-title, .s7-title, .s8-title {
    font-size: 1.7rem;
  }

  /* Slayt 9 */
  .s9-flow { flex-direction: column; gap: 20px; }
  .s9-title { font-size: 1.7rem; }

  /* Slayt 10 */
  .s10-title { font-size: 1.7rem; }

  /* Slayt 11 */
  .s11-wrap { flex-direction: column; padding: 4% 5%; gap: 28px; }
  .s11-left { max-width: 100%; align-items: center; text-align: center; }
  .s11-subtitle { max-width: 100%; }
  .s11-right { width: 100%; min-width: unset; }
  .s11-title { font-size: 1.8rem; }
}

/* Mobil (0–600) */
@media (max-width: 600px) {
  .controls { width: 32px; min-width: 32px; padding: 8px 0; }
  .nav-btn { width: 22px; height: 22px; }
  .nav-btn svg { width: 12px; height: 12px; }
  .progress-track { height: 40px; }
  .slide-counter { font-size: 9px; }
  .slide-dot { width: 4px; height: 4px; }
  .slide-dot.active { height: 10px; }

  /* Slayt 1 */
  .s1-content { padding: 4% 4% 2% 4%; height: 55%; }
  .s1-visual { height: 45%; }
  .s1-tag { font-size: 0.6rem; margin-bottom: 12px; }
  .s1-title { margin-bottom: 16px; }
  .s1-subtitle { margin-bottom: 20px; font-size: 0.9rem; }
  .s1-cta { padding: 10px 24px; font-size: 0.85rem; }
  .s1-metric-old { font-size: 2.5rem; }
  .s1-metric-new { font-size: 3.2rem; }
  .s1-metric-arrow { font-size: 1.2rem; }
  .s1-data-cards { flex-direction: column; gap: 0; width: 92%; margin-top: 16px; }
  .s1-dcard { padding: 10px 12px; flex-direction: row; align-items: center; gap: 12px; }
  .s1-dcard-val { margin-bottom: 0; font-size: 1.2rem; }
  .s1-dcard-label { margin-bottom: 0; }
  .s1-dcard-detail { display: none; }
  .s1-corner-mark { display: none; }
  .s1-arch-grid { inset: 4%; }

  /* Slayt 2 */
  .s2-wrap { padding: 3% 4%; }
  .s2-title { font-size: 1.6rem; }
  .s2-subtitle { font-size: 0.85rem; }

  /* Slayt 3–10 genel */
  .s3-wrap, .s4-wrap, .s5-wrap, .s6-wrap, .s7-wrap, .s8-wrap, .s9-wrap, .s10-wrap {
    padding: 3% 4%;
  }
  .s3-title, .s4-title, .s5-title, .s6-title, .s7-title, .s8-title, .s9-title, .s10-title {
    font-size: 1.4rem;
  }
  .s4-comparison { flex-direction: column; gap: 16px; }
  .s4-vs { display: none; }
  .s4-card { padding: 24px 20px 18px; }
  .s4-card-name { font-size: 1.2rem; }
  .s4-card-specs { grid-template-columns: 1fr 1fr 1fr; }
  .s4-spec { padding: 10px 12px; }
  .s4-bottom { margin-top: 20px; }

  /* Slayt 11 */
  .s11-wrap { padding: 3% 4%; flex-direction: column; gap: 20px; }
  .s11-left { max-width: 100%; align-items: center; text-align: center; }
  .s11-right { width: 100%; min-width: unset; padding: 20px 18px; }
  .s11-title { font-size: 1.5rem; }
  .s11-subtitle { font-size: 0.9rem; max-width: 100%; margin-bottom: 24px; }
  .s11-cta { padding: 12px 28px; font-size: 0.9rem; }
  .s11-stats { grid-template-columns: repeat(3, 1fr); }
  .s11-stat { padding: 12px 8px; }
  .s11-stat-val { font-size: 1rem; }

  /* Modal */
  .modal { margin: 10px; padding: 24px 20px; max-height: 95vh; }
  .modal-title { font-size: 1.2rem; }
  .form-row { flex-direction: column; }
}