/* ============================================================
   ADWIXA — Global Brand Presentation
   Design System · Apple-style · Liquid Glass
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand — derived from the Adwixa logo */
  --violet-050: #efe9ff;
  --violet-200: #c9b8ff;
  --violet-300: #a98bff;
  --violet-400: #8f6bff;
  --violet-500: #7c5cff;   /* core brand */
  --violet-600: #6a45f5;
  --violet-700: #5a34e0;
  --violet-900: #2a1a5e;

  /* Neutrals / space background */
  --ink-000: #05030b;
  --ink-050: #08050f;
  --ink-100: #0d0819;
  --ink-200: #140d26;

  /* Metallic silver (logo wordmark) */
  --silver-hi: #ffffff;
  --silver-mid: #d6d9e6;
  --silver-lo: #8b90a6;

  /* Glass */
  --glass-fill: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025));
  --glass-fill-strong: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  --glass-border: rgba(255,255,255,0.14);
  --glass-border-strong: rgba(255,255,255,0.22);
  --glass-shadow: 0 30px 80px rgba(3,1,10,0.55);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.05);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Helvetica Neue", Arial, sans-serif;

  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  height: 100%;
  background: var(--ink-000);
  color: #fff;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: rgba(124,92,255,0.4); }

/* ============================================================
   DECK / SLIDE SYSTEM
   ============================================================ */
.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 96px);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.7s;
  background: radial-gradient(120% 120% at 50% 0%, var(--ink-100) 0%, var(--ink-000) 70%);
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.8s var(--ease), transform 1.1s var(--ease), visibility 0s linear 0s;
  z-index: 2;
}

/* Reveal children of active slide */
.slide.is-active [data-reveal] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}

/* ============================================================
   AMBIENT BACKGROUND (aurora blobs + grain)
   ============================================================ */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: drift 22s var(--ease) infinite alternate;
}
.blob--1 {
  width: 46vw; height: 46vw;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--violet-400), transparent 65%);
}
.blob--2 {
  width: 40vw; height: 40vw;
  bottom: -14vw; right: -6vw;
  background: radial-gradient(circle at 60% 40%, var(--violet-700), transparent 62%);
  animation-delay: -6s;
}
.blob--3 {
  width: 30vw; height: 30vw;
  top: 30%; left: 55%;
  background: radial-gradient(circle at 50% 50%, #3f2bd6, transparent 60%);
  animation-delay: -12s;
  opacity: 0.4;
}

@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(4vw, 3vw) scale(1.15); }
}

/* subtle film grain */
.grain {
  position: absolute;
  inset: -200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* thin vignette to seat the glass */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--radius-lg);
}
.glass--pill {
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--glass-fill-strong);
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.metallic {
  background: linear-gradient(180deg, #ffffff 0%, #eef0f6 42%, #a9adc0 72%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gradient-violet {
  background: linear-gradient(120deg, var(--violet-200), var(--violet-500) 55%, var(--violet-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eyebrow {
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--violet-200);
}

/* ============================================================
   COVER SLIDE
   ============================================================ */
.cover {
  flex-direction: column;
  text-align: center;
}
.cover__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 5vh, 60px);
}

.cover__logo {
  width: clamp(240px, 27vw, 430px);
  height: auto;
  filter: drop-shadow(0 26px 64px rgba(124,92,255,0.42));
}

.cover__slogans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.2vh, 26px);
}
.cover__tagline {
  font-size: clamp(20px, 2.7vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 500;
  padding-left: 0.32em; /* balance tracking */
  background: linear-gradient(90deg, #bda6ff 0%, #8f6bff 46%, #7d8dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(124,92,255,0.42));
}
.cover__subtag {
  font-size: clamp(10px, 0.95vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--silver-lo);
  padding-left: 0.34em; /* optical: balance last-letter tracking */
}

.cover__web {
  position: absolute;
  bottom: clamp(30px, 5vh, 58px);
  left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--silver-lo);
  opacity: 0.75;
}

/* ---------- Qlaritics cover (dark navy + brand lights, Adwixa layout) ---------- */
.slide.q-cover {
  /* geçişli, siyaha yakın lacivert taban (merkez koyu, kenarlara doğru açılan lacivert)
     — gren katmanının yaptığı ~4/255 aydınlanmayı telafi etmek için biraz daha koyu tutuldu */
  background:
    radial-gradient(135% 125% at 50% 42%, #05081b 0%, #03050f 54%, #010205 100%);
}
/* İnce gürültü katmanı: koyu degradelerdeki renk bantlaşmasını (banding) kırar.
   'normal' blend + ince gren, her tonda eşit dither uygular (overlay koyularda çalışmıyordu). */
.q-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='qn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23qn)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.04;
}
/* Işıklar Adwixa kapağıyla aynı yerleşim/boyut/konumda; renkler Qlaritics */
.q-cover .blob { display: block; }
.q-cover .blob--1 { /* sol-üst — büyük, baskın mor */
  background: radial-gradient(circle at 30% 30%, #7a52e0, transparent 65%);
  opacity: 0.33;
}
.q-cover .blob--2 { /* sağ-alt — orta, mavi */
  background: radial-gradient(circle at 60% 40%, #2b6bf6, transparent 62%);
  opacity: 0.32;
}
.q-cover .blob--3 { /* merkez — küçük, magenta aksan */
  background: radial-gradient(circle at 50% 50%, #b23bc4, transparent 60%);
  opacity: 0.18;
}
.q-cover .blob--4 { /* sol-alt — amber / kehribar aksan (ekrandan yarı dışarı) */
  width: 42vw; height: 42vw;
  left: -23vw; bottom: -22vw; top: auto; right: auto;
  background: radial-gradient(circle at 42% 42%, rgba(227,154,58,0.9) 0%, rgba(210,134,46,0.42) 36%, rgba(180,110,40,0) 72%);
  opacity: 0.30;
  filter: blur(104px);
  animation-delay: -9s;
}
/* köşelerden içeri doğru siyah gradient */
.q-cover .vignette {
  display: block;
  background: radial-gradient(116% 88% at 50% 44%, transparent 48%, rgba(0,0,0,0.66) 100%);
}
.q-cover .cover__logo {
  width: clamp(220px, 24vw, 380px);
  filter: drop-shadow(0 26px 66px rgba(43,155,246,0.40));
}
.q-cover .cover__tagline {
  background: linear-gradient(90deg, #aec3ff 0%, #6f83f2 46%, #4a53c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(88,110,235,0.40));
}

/* ---------- Alnixa cover (graphite-black canvas + platinum wordmark, ecosystem accents) ---------- */
.slide.alx-cover {
  /* soğuk, siyaha yakın grafit taban — Alnixa kurumsal kanvası (daha koyu) */
  background:
    radial-gradient(135% 125% at 50% 42%, #080910 0%, #040509 54%, #010103 100%);
  background-color: #010103;
}
/* İnce gürültü katmanı — koyu degradelerdeki bantlaşmayı kırar */
.alx-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='an'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23an)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.07;
}
/* Ekosistem ışıkları: nötr gri/çelik — sabit (hareketsiz), yumuşak/geniş geçişli */
.alx-cover .blob { display: block; animation: none; filter: blur(130px); }
.alx-cover .blob--1 { /* sol-üst — büyük, nötr çelik gri (renksiz) */
  background: radial-gradient(circle at 30% 30%, rgba(123,127,136,0.9) 0%, rgba(123,127,136,0.5) 30%, rgba(123,127,136,0.18) 52%, rgba(123,127,136,0) 74%);
  opacity: 0.18;
}
.alx-cover .blob--2 { /* sağ-alt — koyu gri/çelik ışık (nötr) */
  background: radial-gradient(circle at 60% 40%, rgba(58,62,72,0.95) 0%, rgba(58,62,72,0.5) 32%, rgba(58,62,72,0.16) 54%, rgba(58,62,72,0) 74%);
  opacity: 0.26;
}
.alx-cover .blob--3 { /* merkez — koyu gri aksan (renksiz), çok ince */
  background: radial-gradient(circle at 50% 50%, rgba(63,67,77,0.9) 0%, rgba(63,67,77,0.4) 34%, rgba(63,67,77,0) 70%);
  opacity: 0.14;
}
.alx-cover .blob--4 { /* sol-alt — koyu gri ışık (ekrandan yarı dışarı), renksiz */
  width: 40vw; height: 40vw;
  left: -22vw; bottom: -20vw; top: auto; right: auto;
  background: radial-gradient(circle at 42% 42%, rgba(84,88,98,0.65) 0%, rgba(84,88,98,0.34) 34%, rgba(84,88,98,0.12) 54%, rgba(84,88,98,0) 76%);
  opacity: 0.20;
  filter: blur(130px);
  animation: none;
}
.alx-cover .vignette {
  display: block;
  background: radial-gradient(116% 88% at 50% 44%, transparent 48%, rgba(0,0,0,0.66) 100%);
}
.alx-cover .cover__logo {
  width: clamp(152px, 16.8vw, 272px);
  filter: drop-shadow(0 22px 54px rgba(140,150,180,0.28));
}
.alx-cover .cover__tagline {
  /* platin/gümüş metalik — Alnixa wordmark ile uyumlu */
  font-size: clamp(15px, 1.9vw, 27px);
  background: linear-gradient(90deg, #e7eaf3 0%, #b3b9cb 48%, #d3d8e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(150,160,190,0.32));
}

/* ---------- Qlaritics content slides (blue/navy accent) ---------- */
.gradient-blue {
  background: linear-gradient(90deg, #aec3ff 0%, #6f83f2 46%, #4a53c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.q-slide .eyebrow { color: #8ea6ff; }
.q-slide .hl { color: #eef2ff; font-weight: 500; }
.q-slide .hl-b { color: #9db4ff; font-weight: 600; }
.q-slide .blob--1 { background: radial-gradient(circle at 30% 30%, #4864cf, transparent 66%); }
.q-slide .blob--3 { background: radial-gradient(circle at 50% 50%, #2b6bf6, transparent 60%); }

/* Overview layout: hero (left) + dense body (right) + Q-AI strip (full width) */
.qintro {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-areas: "hero body";
  gap: clamp(20px, 2.4vw, 34px) clamp(34px, 4.4vw, 68px);
  align-items: stretch;
}
.qintro__hero { grid-area: hero; display: flex; flex-direction: column; }
.qintro__logo {
  width: clamp(120px, 12vw, 175px);
  height: auto;
  margin-bottom: clamp(14px, 1.9vh, 20px);
}
.qintro__title {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: #e9edf6;
}
.qintro__lead {
  margin-top: 20px;
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--silver);
  max-width: 30ch;
}
.qintro__web {
  margin-top: auto;
  padding-top: clamp(18px, 3vh, 32px);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: #8ea6ff;
  opacity: 0.85;
}
.qintro__qr {
  margin-top: auto;
  padding-top: clamp(18px, 3vh, 32px);
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.4vw, 22px);
}
.qintro__qr-card {
  padding: clamp(9px, 0.95vw, 15px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(30,44,96,0.30), rgba(12,16,36,0.24));
  border: 1px solid rgba(120,150,255,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.qintro__qr-img {
  width: clamp(80px, 7.6vw, 112px);
  height: auto;
  display: block;
}
.qintro__qr-txt { display: flex; flex-direction: column; gap: clamp(2px, 0.5vh, 5px); }
.qintro__qr-lbl { font-size: clamp(12.5px, 1.05vw, 16px); font-weight: 600; color: #eaf0ff; letter-spacing: 0.01em; }
.qintro__qr-sub { font-size: clamp(10px, 0.82vw, 12.5px); color: var(--silver-lo); letter-spacing: 0.02em; }

.qintro__body {
  grid-area: body;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vh, 24px);
  padding: clamp(26px, 2.8vw, 44px) clamp(28px, 2.8vw, 44px);
  transition: opacity 0.9s var(--ease),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s var(--ease),
              box-shadow 0.6s var(--ease);
}
.qintro__body-hd {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  padding-bottom: clamp(15px, 1.9vh, 22px);
  border-bottom: 1px solid rgba(150,166,210,0.15);
}
.qintro__eyebrow {
  font-size: clamp(10px, 0.85vw, 12.5px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8ea6ff;
  font-weight: 600;
}
.qintro__body-ttl {
  margin: 0;
  font-size: clamp(15px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #eef2ff;
  max-width: 34ch;
}
.qintro__body-txt {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.4vh, 16px);
}
.qintro__body-txt p {
  margin: 0;
  font-size: clamp(11.5px, 0.95vw, 14px);
  line-height: 1.62;
  color: var(--silver-lo);
}
.qintro__body-txt p b { color: #cddaff; font-weight: 600; }

.qintro__qai {
  grid-area: qai;
  position: relative;
  padding: clamp(13px, 1.5vw, 19px) clamp(20px, 2.1vw, 28px);
  padding-left: clamp(24px, 2.4vw, 34px);
  background: linear-gradient(90deg, rgba(74,107,216,0.16), rgba(74,83,200,0.05));
}
.qintro__qai::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #9db4ff, #4a53c8);
}
.qintro__qai p {
  margin: 0;
  font-size: clamp(11px, 0.92vw, 13.5px);
  line-height: 1.55;
  color: var(--silver);
}
.qintro__qai .qai-tag {
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #bcd0ff, #6f83f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   DATA INTELLIGENCE · anlatım oynarken kart öne gelip sağa açılır,
   yanında Qlaritics tanıtım videosu belirir (Alnixa kartlarıyla aynı dil).
   ============================================================ */
.qintro { --qgen-w: clamp(360px, 33vw, 520px); }

/* Video açıkken sol taraftaki tanıtım (hero) kararır → kart + video öne çıkar */
.qintro.is-qgen-live .qintro__hero {
  opacity: 0.06;
  filter: saturate(0.6) brightness(0.7);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}

/* Aktif kart: öne gelir, sola kayar (sağda geniş video alanı açılır) */
.qintro.is-qgen-live .qintro__body {
  z-index: 6;
  transform: translateX(-76%);
  overflow: visible;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px rgba(60,120,246,0.34);
}

/* Kartın sağ gövdesinden çıkan video uzantısı */
.qgen-ext {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 100%;
  width: 0;
  overflow: hidden;
  z-index: 2;
  border: 1px solid rgba(90,140,246,0.5);
  border-left: none;
  border-radius: 0 34px 34px 0;
  background: linear-gradient(165deg, rgba(46,116,246,0.16), rgba(18,18,34,0.22));
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px rgba(60,120,246,0.34);
  opacity: 0;
  pointer-events: none;
  /* kapanış: olduğu yerde yumuşakça opaklığı düşerek kaybolur */
  transition: opacity 1s ease, width 0s linear 1s;
}
.qgen-ext::before {
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8fb0ff, #3f6bff);
}
.qintro.is-qgen-video .qgen-ext {
  width: var(--qgen-w);
  opacity: 1;
  /* açılış: soldan sağa doğru yumuşakça açılır (easeOut) + belirir */
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
}
.qgen-ext__frame {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 16px;
  width: calc(var(--qgen-w) - 32px);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(46,116,246,0.30), 0 12px 34px rgba(0,0,0,0.5);
}
.qgen-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Qlaritics process flow (7-step) ---------- */
.qflow-wide { padding-left: clamp(28px, 3vw, 52px); padding-right: clamp(28px, 3vw, 52px); }
.stage.qflow { max-width: 1360px; }
.qflow { display: flex; flex-direction: column; }
.qflow__head { text-align: center; margin-bottom: clamp(28px, 5vh, 60px); }
.qflow__head .eyebrow { margin-bottom: 14px; }
.qflow__title { font-size: clamp(24px, 3vw, 42px); }
.qflow__lead { margin: 16px auto 0; max-width: 640px; }

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
/* continuous connecting line behind the nodes */
.flow::before {
  content: "";
  position: absolute;
  top: clamp(22px, 2.15vw, 31px);
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(140,166,255,0.06) 0%,
    rgba(140,166,255,0.42) 16%,
    rgba(140,166,255,0.42) 84%,
    rgba(140,166,255,0.06) 100%);
  z-index: 0;
}
.flow__step {
  position: relative;
  z-index: 1;
  padding: 0 clamp(6px, 0.7vw, 12px);
  text-align: center;
}
/* directional chevron between steps */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: clamp(22px, 2.15vw, 31px);
  right: 0;
  transform: translate(50%, -50%);
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid rgba(158,180,255,0.75);
  z-index: 2;
}
.flow__node {
  width: clamp(44px, 4.3vw, 62px);
  height: clamp(44px, 4.3vw, 62px);
  border-radius: 18px;
  margin: 0 auto clamp(14px, 1.9vh, 22px);
  display: grid;
  place-items: center;
  color: #bcd0ff;
  background: linear-gradient(150deg, rgba(74,107,216,0.34), rgba(43,107,246,0.07));
  border: 1px solid rgba(140,166,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 26px rgba(18,28,74,0.4);
}
.flow__step--ai .flow__node {
  color: #d8c6ff;
  background: linear-gradient(150deg, rgba(122,82,224,0.42), rgba(43,107,246,0.12));
  border-color: rgba(170,150,255,0.42);
}
.flow__title {
  font-size: clamp(9px, 0.86vw, 10.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: clamp(8px, 1vh, 12px);
  white-space: nowrap;
}
.flow__desc {
  font-size: clamp(8.5px, 0.78vw, 10.5px);
  line-height: 1.5;
  color: var(--silver-lo);
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

/* ---------- Qlaritics capabilities wall (24 cards) ---------- */
.qcaps-slide { padding: clamp(26px, 4vh, 44px) clamp(28px, 3vw, 52px); }
.stage.qcaps { max-width: 1360px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.qcaps__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.qcaps__headL .eyebrow { margin-bottom: clamp(10px, 1.4vh, 14px); }
.qcaps__lead {
  max-width: 720px;
  text-align: left;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.5;
  color: var(--silver-lo);
}
/* editorial (heading-forward, no boxes) */
.qcaps__grid {
  columns: 4;
  column-gap: clamp(28px, 3vw, 56px);
  margin-top: clamp(4px, 0.8vh, 10px);
}
.qcap {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: clamp(20px, 3.1vh, 34px);
}
.qcap h3 {
  display: flex;
  align-items: flex-start;
  gap: clamp(7px, 0.6vw, 10px);
  font-size: clamp(12px, 1.08vw, 15px);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: #f3f6ff;
  margin-bottom: clamp(5px, 0.85vh, 9px);
  line-height: 1.2;
}
.qcap h3::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: #35e8ff;
  box-shadow: 0 0 8px rgba(53,232,255,0.85), 0 0 3px rgba(53,232,255,0.95);
}
.qcap p {
  font-size: clamp(9px, 0.82vw, 10.8px);
  line-height: 1.55;
  color: var(--silver-lo);
}

/* ---------- Qlaritics · Data Intelligence Platform (architecture map) ---------- */
.qmap-slide { padding: clamp(18px, 2.8vh, 32px) clamp(18px, 1.8vw, 38px); }
.stage.qmap { max-width: 1440px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.qmap__head { text-align: center; margin-bottom: clamp(10px, 1.6vh, 18px); }
.qmap__brandline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(11px, 1.1vw, 17px);
}
.qmap__logo {
  height: clamp(19px, 1.9vw, 28px);
  width: auto;
  display: block;
}
.qmap__bar {
  width: 1px;
  height: clamp(13px, 1.3vw, 19px);
  background: rgba(140,166,255,0.42);
}
.qmap__sub {
  margin: clamp(4px, 0.8vh, 8px) auto 0;
  max-width: 940px;
  font-size: clamp(9.5px, 0.85vw, 12.5px);
  line-height: 1.45;
  color: var(--silver-lo);
}

.qmap__pipe {
  display: grid;
  grid-template-columns: 1.15fr 1.06fr 1.34fr 3.78fr 1.42fr 1.12fr 1.03fr;
  gap: clamp(10px, 1vw, 16px);
  align-items: stretch;
}

/* each stage = transparent container: raised header + shorter body panel */
.qcol {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* main stage card (body only) — sits below the lifted header, a bit shorter */
.qpanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(9px, 0.85vw, 13px);
  border-radius: 16px;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(140,166,255,0.10);
  box-shadow: 0 14px 34px rgba(6,10,32,0.30);
  margin-bottom: clamp(14px, 2.4vh, 30px);
}
.qcol--4 .qpanel { background: rgba(120,98,220,0.05); border-color: rgba(150,125,225,0.14); }

.qcol__hd {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(5px, 0.6vh, 8px);
  min-height: clamp(44px, 4.8vh, 58px);
  padding: clamp(9px, 0.8vw, 13px) clamp(8px, 0.65vw, 11px);
  border-radius: 12px;
  margin-bottom: clamp(8px, 1vh, 12px);
  background: linear-gradient(135deg, rgba(74,107,216,0.28), rgba(74,107,216,0.08));
  border: 1px solid rgba(140,166,255,0.2);
  box-shadow: 0 10px 22px rgba(6,10,32,0.4);
}
.qcol--4 .qcol__hd, .qcol--6 .qcol__hd {
  background: linear-gradient(135deg, rgba(122,90,220,0.24), rgba(122,90,220,0.055));
  border-color: rgba(160,135,235,0.2);
}
.qcol__no {
  flex: none;
  width: clamp(19px, 1.8vw, 24px);
  height: clamp(19px, 1.8vw, 24px);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: clamp(9px, 0.82vw, 11.5px);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4a6bd8, #6f83f2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(30,50,120,0.4);
}
.qcol--4 .qcol__no, .qcol--6 .qcol__no {
  background: linear-gradient(135deg, #7a52e0, #6f83f2);
}
.qcol__tt {
  width: 100%;
  font-size: clamp(10px, 0.9vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: #eef2ff;
  overflow-wrap: break-word;
}

/* pipeline arrows between stage cards */
.qcol:not(.qcol--1)::before {
  content: "";
  position: absolute;
  top: clamp(22px, 2.5vh, 30px);
  left: calc(clamp(10px, 1vw, 16px) / -2);
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid rgba(150,168,235,0.5);
  z-index: 3;
}

.qcol__body { display: flex; flex-direction: column; gap: clamp(6px, 0.78vh, 10px); }
/* distribute content evenly inside the (shorter) panel */
.qcol__body.qpanel, .qlist.qpanel { justify-content: space-between; }
/* cols 6-7: list fills the panel, the summary box sits at the bottom */
.qpanel > .qlist { flex: 1; justify-content: space-between; }

/* title + description items (cols 1-2) */
.qitem h4 {
  font-size: clamp(8.5px, 0.78vw, 10.5px);
  font-weight: 600;
  color: #eaf0ff;
  line-height: 1.14;
}
.qitem p {
  margin-top: 2px;
  font-size: clamp(7px, 0.66vw, 8.8px);
  line-height: 1.3;
  color: var(--silver-lo);
}

/* highlight box (col 1) */
.qhl {
  margin-top: clamp(4px, 0.6vh, 8px);
  padding: clamp(8px, 0.8vw, 11px) clamp(9px, 0.85vw, 12px);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(74,107,216,0.2), rgba(43,107,246,0.06));
  border: 1px solid rgba(140,166,255,0.26);
}
.qhl h4 { font-size: clamp(8.5px, 0.8vw, 10.5px); font-weight: 700; color: #cdd9ff; line-height: 1.18; }
.qhl p { margin-top: 4px; font-size: clamp(7px, 0.64vw, 8.6px); line-height: 1.34; color: var(--silver-lo); }

/* simple bullet lists (cols 3,5,6,7) */
.qlist { list-style: none; display: flex; flex-direction: column; gap: clamp(5px, 0.68vh, 8px); }
.qlist li {
  position: relative;
  padding-left: 12px;
  font-size: clamp(8px, 0.75vw, 10px);
  font-weight: 500;
  line-height: 1.24;
  color: #dfe6f7;
}
.qlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 4px; height: 4px;
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #9db4ff, #6b7bf0);
}

/* col 4 — analysis groups */
.qcol--wide .qcol__body { gap: clamp(5px, 0.6vh, 8px); }
.qgrp__label {
  display: block;
  text-align: center;
  font-size: clamp(7.5px, 0.72vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c3b0ff;
  margin-bottom: clamp(3px, 0.45vh, 6px);
  padding: 3px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(150,120,255,0.14), transparent);
}
.qgrp__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(5px, 0.5vw, 8px); }
.qgrp--6 .qgrp__row { grid-template-columns: repeat(6, 1fr); }
.qchip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(5px, 0.5vw, 8px) clamp(4px, 0.4vw, 7px);
  border-radius: 9px;
  font-size: clamp(6.8px, 0.62vw, 8.4px);
  font-weight: 500;
  line-height: 1.2;
  color: #dce3f6;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(150,125,225,0.18);
}
.qcol__note {
  margin-top: clamp(5px, 0.7vh, 9px);
  text-align: center;
  font-size: clamp(8px, 0.76vw, 10.5px);
  font-weight: 600;
  background: linear-gradient(90deg, #bcd0ff, #c3b0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* col 6 — Q·AI note */
.qai-box {
  margin-top: clamp(8px, 1vh, 13px);
  text-align: center;
  padding-top: clamp(7px, 0.9vh, 11px);
  border-top: 1px solid rgba(150,125,225,0.22);
}
.qai-box .qai-logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.4vw, 6px);
}
.qai-logo__mark {
  height: clamp(18px, 1.9vw, 27px);
  width: auto;
  display: block;
}
.qai-logo__ai {
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #c9b6ff, #8ea6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.qai-box p { margin-top: 3px; font-size: clamp(7px, 0.66vw, 8.8px); line-height: 1.32; color: var(--silver-lo); }

/* col 7 — mini viz */
.qmini { margin-top: clamp(8px, 1vh, 13px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.qmini > div {
  height: clamp(38px, 4.4vh, 56px);
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(180,120,200,0.18);
  display: grid;
  place-items: center;
  padding: 6px;
}
.qmini svg { width: 100%; height: 100%; }

/* bottom base panels */
.qmap__base {
  margin-top: clamp(12px, 1.8vh, 20px);
  display: flex;
  justify-content: center;
}
.qmap__base .qbase { width: 100%; max-width: clamp(680px, 66vw, 980px); }
.qbase {
  padding: clamp(10px, 1vw, 15px) clamp(12px, 1.2vw, 20px);
  border-radius: 16px;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(140,166,255,0.14);
}
.qbase__label {
  display: block;
  text-align: center;
  font-size: clamp(9px, 0.82vw, 11px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8ea6ff;
  margin-bottom: clamp(8px, 1vh, 12px);
}
.qbase__grid { display: grid; gap: clamp(6px, 0.7vw, 10px); }
.qbase__grid--4 { grid-template-columns: repeat(4, 1fr); }
.qbase__grid--5 { grid-template-columns: repeat(5, 1fr); }
.qtag {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6px, 0.6vw, 9px) clamp(5px, 0.5vw, 8px);
  border-radius: 9px;
  font-size: clamp(7px, 0.66vw, 9px);
  font-weight: 500;
  line-height: 1.24;
  color: #dce3f6;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(140,166,255,0.14);
}

/* ---------- Qlaritics · Kullanım Alanları (audience cards) ---------- */
.quse-slide { padding: clamp(26px, 4vh, 48px) clamp(28px, 3vw, 56px); }
.stage.quse { max-width: 1420px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.quse__head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(22px, 3.8vh, 46px); }
.quse__head .eyebrow { margin-bottom: clamp(12px, 1.7vh, 18px); }
.quse__lead {
  max-width: 920px;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--silver-lo);
}
.quse__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(15px, 1.6vw, 26px);
}
.quse-card {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 13px);
  padding: clamp(17px, 1.7vw, 27px) clamp(15px, 1.4vw, 23px);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid rgba(140,166,255,0.15);
  box-shadow: 0 16px 40px rgba(6,10,32,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}
.quse-card__ic {
  flex: 0 0 auto;
  width: clamp(40px, 3.6vw, 54px);
  height: clamp(40px, 3.6vw, 54px);
  border-radius: 13px;
  display: grid; place-items: center;
  margin-bottom: clamp(3px, 0.6vh, 8px);
  background: linear-gradient(150deg, rgba(122,90,220,0.22), rgba(74,107,216,0.08));
  border: 1px solid rgba(150,125,225,0.26);
}
.quse-card__ic svg {
  width: 52%; height: 52%;
  fill: none; stroke: #c3b0ff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.quse-card h3 {
  font-size: clamp(12px, 1.12vw, 15px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #f2f5ff;
  line-height: 1.22;
}
.quse-card p {
  font-size: clamp(9px, 0.84vw, 11.2px);
  line-height: 1.5;
  color: var(--silver-lo);
}

/* Sesli anlatımda kartlar sırayla yavaşça parlar ve yumuşakça dalgalanır.
   PERF: yalnızca opacity geçişli; parlama anlık, dalga transform ile (akıcı). */
.quse.is-narr .quse-card { transition: opacity .5s var(--ease); }
.quse.is-narr .quse-card:not(.is-lit) { opacity: 0.42; }
.quse.is-narr .quse-card.is-lit {
  position: relative; z-index: 2;
  border-color: rgba(150,175,255,0.6);
  box-shadow: 0 18px 44px rgba(50,110,240,0.34), 0 0 0 1px rgba(140,168,255,0.5),
              0 0 44px rgba(96,120,246,0.3), inset 0 1px 0 rgba(255,255,255,0.09);
  animation: qgbobCard 2s ease-in-out infinite;
}
.quse.is-narr .quse-card.is-lit .quse-card__ic {
  border-color: rgba(160,140,240,0.55);
  box-shadow: 0 0 24px rgba(120,110,235,0.5);
}
.quse.is-narr .quse-card.is-lit .quse-card__ic svg { stroke: #e6ddff; }
.quse.is-narr:not(.is-live) .quse-card.is-lit { animation-play-state: paused; }

/* ---------- Qlaritics · Örnek Raporlar ---------- */
.qrep-slide { padding: clamp(26px, 4vh, 48px) clamp(28px, 3vw, 56px); }
.stage.qrep {
  max-width: 1280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.8vh, 36px);
}
.qrep__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.qrep__head .eyebrow { margin-bottom: clamp(12px, 1.7vh, 18px); }
.qrep__lead {
  max-width: 960px;
  font-size: clamp(12.5px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--silver-lo);
}
.qrep__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(16px, 1.7vw, 28px);
}
.qrep-card {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.2vh, 15px);
  padding: clamp(20px, 1.9vw, 32px) clamp(18px, 1.7vw, 28px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid rgba(140,166,255,0.15);
  box-shadow: 0 16px 40px rgba(6,10,32,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}
.qrep-card__ic {
  flex: 0 0 auto;
  width: clamp(42px, 3.6vw, 54px);
  height: clamp(42px, 3.6vw, 54px);
  border-radius: 13px;
  display: grid; place-items: center;
  margin-bottom: clamp(2px, 0.5vh, 6px);
  background: linear-gradient(150deg, rgba(74,107,216,0.24), rgba(43,107,246,0.08));
  border: 1px solid rgba(120,150,240,0.28);
}
.qrep-card__ic svg {
  width: 52%; height: 52%;
  fill: none; stroke: #a9c0ff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.qrep-card__ttl {
  font-size: clamp(14px, 1.22vw, 18px);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: #f2f5ff;
  line-height: 1.24;
}
.qrep-card__sub {
  font-size: clamp(10px, 0.82vw, 12.2px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #9db4ff;
  line-height: 1.35;
}
.qrep-card__desc {
  font-size: clamp(10.5px, 0.9vw, 12.8px);
  line-height: 1.58;
  color: var(--silver-lo);
}
.qrep__note {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(14px, 1.6vh, 20px) clamp(18px, 1.8vw, 28px);
  border-radius: 14px;
  border: 1px solid rgba(140,166,255,0.12);
  background: rgba(255,255,255,0.02);
}
.qrep__note-ttl {
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9db4ff;
}
.qrep__note p {
  font-size: clamp(10px, 0.84vw, 12.2px);
  line-height: 1.55;
  color: var(--silver-lo);
}

/* ---------- Qlaritics · Global Veri Ekosistemi ---------- */
.qglobe-slide { padding: clamp(15px, 2.2vh, 28px) clamp(24px, 2.6vw, 48px); }
.stage.qglobe { max-width: 1500px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.15vh, 14px); }
.qglobe__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.qglobe__head .eyebrow { margin-bottom: clamp(5px, 0.8vh, 10px); }
.qglobe__lead { max-width: 900px; font-size: clamp(11px, 0.94vw, 14.5px); line-height: 1.5; color: var(--silver-lo); }

.qreach, .qwall {
  padding: clamp(12px, 1.1vw, 18px);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid rgba(140,166,255,0.15);
  box-shadow: 0 12px 30px rgba(6,10,32,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Global Kapsama — wide top card */
.qreach--wide { display: flex; flex-direction: row; align-items: center; gap: clamp(16px, 1.8vw, 30px); }
.qreach__id { flex: 0 0 auto; display: flex; flex-direction: column; gap: clamp(3px, 0.4vh, 6px); min-width: clamp(138px, 12.5vw, 186px); }
.qreach__ttl { font-size: clamp(17px, 1.9vw, 29px); font-weight: 800; letter-spacing: -0.02em; color: #f2f5ff; line-height: 1.05; }
.qreach__sub { font-size: clamp(13px, 1.35vw, 20px); font-weight: 700; letter-spacing: -0.01em; color: #9db4ff; }
.qreach--wide .qflags { flex: 1 1 auto; }
.qflags { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: clamp(2px, 0.25vw, 3px); }
.qflag { width: clamp(15px, 1.25vw, 20px); height: clamp(15px, 1.25vw, 20px); border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.qflag img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* compact category cards — one row, big numbers */
.qglobe__cats { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: clamp(8px, 0.8vw, 13px); }
.qsrc { display: flex; flex-direction: column; gap: clamp(3px, 0.5vh, 6px); padding: clamp(8px, 0.75vw, 13px) clamp(11px, 1vw, 16px); border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014)); border: 1px solid rgba(140,166,255,0.15); box-shadow: 0 10px 26px rgba(6,10,32,0.3), inset 0 1px 0 rgba(255,255,255,0.05); }
.qsrc__top { display: flex; align-items: center; }
.qsrc__ttl { font-size: clamp(12.5px, 1.1vw, 17px); font-weight: 700; letter-spacing: -0.01em; color: #f2f5ff; line-height: 1.15; }
.qsrc__stat { display: flex; align-items: baseline; gap: 5px; }
.qsrc__stat b { font-size: clamp(21px, 2.15vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: #9db4ff; line-height: 1; }
.qsrc__stat span { font-size: clamp(10px, 0.82vw, 12.5px); font-weight: 600; color: #8ea0c6; }
.qsrc__ex { font-size: clamp(8px, 0.66vw, 9.6px); line-height: 1.4; color: var(--silver-lo); }

/* logo wall — full width */
.qwall { display: flex; flex-direction: column; }
.qwall__cap { display: block; font-size: clamp(9px, 0.72vw, 10.5px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #9db4ff; margin-bottom: clamp(7px, 0.9vh, 12px); }
.qwall__grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: clamp(3px, 0.34vw, 5px); }
.qchip { border-radius: 7px; background: #fff; display: grid; place-items: center; padding: clamp(1px, 0.22vw, 4px) clamp(2px, 0.34vw, 5px); box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.qchip img { max-width: 100%; max-height: clamp(9px, 0.92vw, 13px); object-fit: contain; display: block; }
.qchip--stat {
  background: linear-gradient(150deg, #2f74f0, #4a53c8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 9px rgba(43,107,246,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
}
.qchip--stat b { font-size: clamp(13px, 1.35vw, 21px); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.qchip--stat span { margin-top: 1px; font-size: clamp(6.5px, 0.58vw, 8.5px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.86); }

.qglobe__tag { text-align: center; font-size: clamp(14px, 1.5vw, 23px); font-weight: 600; letter-spacing: -0.01em; color: #eef2ff; }

/* ============================================================
   GLOBAL VERİ EKOSİSTEMİ · ses odaklı parlama + dalga animasyonu
   Play'e basınca .stage.qglobe'a .is-narr eklenir; JS ses zamanına
   göre öğelere .is-lit verir. Duraklayınca (.is-live yok) dalga durur.
   ============================================================ */
/* Bayrak & markalar: scale'li canlı dalga (kullanıcı beğendi) */
@keyframes qgbob     { 0%,100% { transform: translateY(0) scale(1); }    50% { transform: translateY(-9px) scale(1.14); } }
/* Başlık, sayı ve kartlar: SADECE yumuşak dalga — büyüyüp küçülme (scale) yok */
@keyframes qgbobCard { 0%,100% { transform: translateY(0); }             50% { transform: translateY(-5px); } }
@keyframes qgbobText { 0%,100% { transform: translateY(0); }             50% { transform: translateY(-3px); } }
@keyframes qgbobStat { 0%,100% { transform: translateY(0); }             50% { transform: translateY(-6px); } }

/* Metin başlıkları soldan büyüsün (yalnızca birkaç öğe, geçiş ucuz) */
.qglobe.is-narr .qreach__ttl,
.qglobe.is-narr .qreach__sub,
.qglobe.is-narr .qglobe__head .eyebrow { transition: filter .3s var(--ease); transform-origin: left center; }
.qglobe.is-narr .qsrc { transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }

/* PERF: süpürmede yüzlerce öğede box-shadow/filter GEÇİŞİ sürekli yeniden boyama
   yaratıp takılmaya yol açıyordu. Bayrak & logolarda parlama ANLIK verilir; yalnızca
   transform (dalga) animasyonu çalışır → GPU'da akıcı kalır. */

/* Bayraklar */
.qglobe.is-narr .qflag.is-lit {
  position: relative; z-index: 4;
  border-color: rgba(170,195,255,0.95);
  box-shadow: 0 4px 10px rgba(90,140,246,0.7), 0 0 0 1px rgba(150,180,255,0.7);
  filter: brightness(1.16) saturate(1.1);
  animation: qgbob 0.9s ease-in-out infinite;}

/* Marka logoları */
.qglobe.is-narr .qchip.is-lit {
  position: relative; z-index: 4;
  box-shadow: 0 5px 13px rgba(90,140,246,0.5), 0 0 0 1.5px rgba(120,160,255,0.8);
  filter: brightness(1.05);
  animation: qgbob 0.9s ease-in-out infinite;}

/* Kategori kartları — yumuşak dalga, büyüme yok */
.qglobe.is-narr .qsrc.is-lit {
  position: relative; z-index: 3;
  border-color: rgba(150,180,255,0.6);
  box-shadow: 0 14px 32px rgba(50,110,240,0.32), 0 0 0 1px rgba(140,170,255,0.42), inset 0 1px 0 rgba(255,255,255,0.07);
  animation: qgbobCard 1.4s ease-in-out infinite;}

/* Başlık ve sayı metinleri — yumuşak dalga, büyüme yok */
.qglobe.is-narr .qglobe__head .eyebrow.is-lit,
.qglobe.is-narr .qreach__ttl.is-lit,
.qglobe.is-narr .qreach__sub.is-lit {
  filter: drop-shadow(0 0 13px rgba(140,175,255,0.8)) brightness(1.16);
  animation: qgbobText 1.6s ease-in-out infinite;}

/* 3M+ Kaynak kartı — parlamayla belirgin, büyüme yok */
.qglobe.is-narr .qchip--stat.is-lit {
  position: relative; z-index: 6;
  box-shadow: 0 14px 40px rgba(50,110,240,0.8), 0 0 0 2px rgba(160,190,255,0.95), 0 0 46px rgba(90,140,246,0.7);
  filter: brightness(1.12) saturate(1.1);
  animation: qgbobStat 1.4s ease-in-out infinite;}

/* Duraklatınca dalga donar (parlama kalır) */
.qglobe.is-narr:not(.is-live) .is-lit { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .qglobe.is-narr .is-lit { animation: none !important; }
}

/* ============================================================
   CONTENT SLIDES (reusable)
   ============================================================ */
.ambient--soft .blob { opacity: 0.28; }
.ambient--soft .blob--3 { opacity: 0.2; }

.stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow { display: inline-block; }

.slide-title {
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: #fff;
}
.slide-lead {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--silver-lo);
  font-weight: 400;
}

/* Cards / pillars */
.card {
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--radius-md);
}
.card__ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,92,255,0.42), rgba(124,92,255,0.08));
  border: 1px solid var(--glass-border-strong);
  color: var(--violet-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.card h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.card p {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.62;
  color: var(--silver-lo);
}

/* Stat chips */
.chips { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 44px); }
.chip .n {
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.chip .l {
  margin-top: 8px;
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-lo);
}

/* ---------- About layout ---------- */
.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
.about__col { display: flex; flex-direction: column; }
.about__col .eyebrow { margin-bottom: 20px; }
.about__col .slide-lead { margin-top: 24px; max-width: 560px; }
.about__col .chips { margin-top: clamp(30px, 4vh, 46px); }

.about__cards { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.about__cards .card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}
.about__cards .card > div h3 { margin-bottom: 8px; }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Manifesto / About narrative ---------- */
.manifesto {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
.manifesto__lead { display: flex; flex-direction: column; }
.manifesto__lead .eyebrow { margin-bottom: 20px; }
.manifesto__head {
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  font-weight: 600;
  color: #fff;
}
.manifesto__sub {
  margin-top: 16px;
  font-size: clamp(10px, 0.95vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--silver-lo);
  padding-left: 0.3em;
}
.manifesto__loc {
  margin-top: clamp(30px, 4.2vh, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: 0.14em;
  color: #fff;
}
.manifesto__loc .pin { color: var(--violet-300); display: inline-flex; }
.manifesto__loc i { color: var(--violet-300); font-style: normal; opacity: 0.9; }

.manifesto__body { padding: clamp(26px, 2.9vw, 48px); }
.manifesto__body .lead {
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.55;
  color: #edeef6;
  font-weight: 400;
}
.manifesto__body p + p { margin-top: clamp(14px, 1.5vw, 20px); }
.manifesto__body p {
  font-size: clamp(13.5px, 1.12vw, 16px);
  line-height: 1.68;
  color: #9ea3b8;
}
.manifesto__divider {
  height: 1px;
  margin: clamp(18px, 2vw, 26px) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent);
}
.hl { color: #fff; font-weight: 500; }
.hl-v {
  background: linear-gradient(120deg, var(--violet-200), var(--violet-400));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 500;
}

@media (max-width: 960px) {
  .manifesto { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Tech infrastructure ---------- */
.tech { display: flex; flex-direction: column; gap: clamp(26px, 3.6vh, 46px); }
.tech__head { max-width: 900px; }
.tech__head .eyebrow { margin-bottom: 16px; }
.tech__head .slide-lead { margin-top: 16px; max-width: 760px; }
.tech__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(36px, 4.5vw, 76px);
  align-items: start;
}
.tech__body p { font-size: clamp(14px, 1.14vw, 16.5px); line-height: 1.72; color: #9ea3b8; }
.tech__body p + p { margin-top: clamp(14px, 1.5vw, 20px); }
.tech__caps { display: flex; flex-direction: column; gap: clamp(11px, 1.2vw, 15px); }
.cap {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(13px, 1.3vw, 18px) clamp(16px, 1.5vw, 22px);
  border-radius: var(--radius-md);
}
.cap .card__ic { width: 42px; height: 42px; }
.cap h4 { font-size: clamp(13.5px, 1.15vw, 16.5px); font-weight: 600; color: #fff; letter-spacing: -0.01em; }

@media (max-width: 960px) {
  .tech__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Team & certifications ---------- */
.team { display: flex; flex-direction: column; gap: clamp(22px, 3vh, 40px); }
.team__head { max-width: 900px; }
.team__head .eyebrow { margin-bottom: 16px; }
.team__paras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 60px);
  max-width: 1080px;
}
.team__paras p { font-size: clamp(13.5px, 1.12vw, 16px); line-height: 1.7; color: #9ea3b8; }

.certs { display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 30px); margin-top: clamp(6px, 1vh, 12px); }
.certs__group { display: flex; flex-direction: column; }
.certs__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--silver-lo);
  margin-bottom: clamp(12px, 1.4vh, 16px);
}
.certs__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);
}
.cert-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.2vw, 18px); }

.cert-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(56px, 5.4vw, 72px);
}
.cert-tile img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(3,1,10,0.45));
}

.cert-row--meta img {
  width: clamp(70px, 6.8vw, 92px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 26px rgba(3,1,10,0.5));
  transition: transform 0.4s var(--ease);
}
.cert-row--meta img:hover { transform: translateY(-4px); }

/* ---------- Infra (combined tech + team + certs, single slide) ---------- */
.infra {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(30px, 3.4vw, 60px);
  align-items: center;
}
.infra__left { display: flex; flex-direction: column; }
.infra__left .eyebrow { margin-bottom: 14px; }
.infra__title {
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: #f2f3f8;
}
.infra__lead {
  margin-top: 12px;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.5;
  color: #c7cad8;
  font-weight: 400;
}
.infra__left p.body {
  font-size: clamp(12.5px, 1.02vw, 14.5px);
  line-height: 1.62;
  color: #9298ae;
}
.infra__left p.body + p.body { margin-top: 10px; }

.infra__caps { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: clamp(11px, 0.92vw, 13px);
  font-weight: 500;
  color: #d7d9e6;
}
.cap-chip .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-300), var(--violet-600));
  box-shadow: 0 0 8px rgba(124,92,255,0.7);
}

.infra__divider {
  height: 1px;
  margin: clamp(16px, 2.2vh, 24px) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);
}
.infra__subhead {
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #f2f3f8;
  margin-bottom: 12px;
}

/* Certifications panel */
.cert-panel {
  padding: clamp(24px, 2.7vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vh, 32px);
}
.cert-panel__title {
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--violet-200);
}
.cert-block { display: flex; flex-direction: column; gap: clamp(16px, 2vh, 22px); }
.cert-head { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 24px); }
.cert-head__name {
  flex-shrink: 0;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--silver-mid);
}
.cert-head__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.30));
}
.cert-head__logo { flex-shrink: 0; display: block; }
.cert-head__logo--google { height: clamp(26px, 2.6vw, 36px); width: auto; filter: drop-shadow(0 8px 20px rgba(3,1,10,0.4)); }
.cert-head__logo--meta { width: clamp(112px, 11vw, 140px); height: auto; margin-right: 2px; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.1vw, 14px); }
.cert-grid .cert-tile { height: clamp(44px, 4.1vw, 56px); }
.cert-panel .cert-row--meta { gap: clamp(18px, 2.2vw, 34px); justify-content: space-between; }
.cert-panel .cert-row--meta img { width: clamp(54px, 4.9vw, 70px); }

@media (max-width: 960px) {
  .infra { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   NAV / CHROME
   ============================================================ */
.chrome {
  position: fixed;
  z-index: 50;
  bottom: clamp(20px, 3vh, 34px);
  right: clamp(24px, 4vw, 46px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
}
.chrome button {
  all: unset;
  cursor: pointer;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--silver-mid);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease);
}
.chrome button:hover { background: rgba(255,255,255,0.10); color: #fff; }
.chrome button:active { transform: scale(0.92); }
.chrome__count {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--silver-mid);
  min-width: 58px;
  text-align: center;
}
.chrome__count b { color: #fff; font-weight: 600; }

/* ============ SLIDE · TEKNOLOJİ EKOSİSTEMİMİZ ============ */
.stage.eco {
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.1vh, 26px);
}
.eco__title {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #f2f3f8;
  text-align: center;
  line-height: 1.05;
}
.eco__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
  font-size: clamp(9.5px, 0.82vw, 11.5px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--silver-mid);
  font-weight: 500;
}
.eco__label::before,
.eco__label::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: clamp(60px, 16vw, 260px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16));
}
.eco__label::after { background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent); }

/* Authority credentials */
.eco__authority {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 52px);
  width: 100%;
}
.eco-auth {
  height: clamp(38px, 3.5vw, 48px);
  width: auto;
  object-fit: contain;
  display: block;
}
.eco-auth--seal { height: clamp(56px, 5.2vw, 74px); }
.eco-auth--meta { height: clamp(20px, 1.95vw, 26px); }
.eco-auth[src*="gmp-platform"] { filter: brightness(1.32); }

/* GMP products (boxed, larger) */
.eco__gmp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 252px));
  justify-content: center;
  gap: clamp(12px, 1.2vw, 20px);
  width: 100%;
}
.eco__gmp .eco-tile {
  height: clamp(58px, 5.4vw, 74px);
  padding: 0 clamp(16px, 1.8vw, 30px);
  border-radius: 14px;
}
.eco__gmp .eco-tile img {
  max-height: clamp(32px, 3.1vw, 40px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Tool logo wall */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(8px, 0.75vw, 12px);
  width: 100%;
  margin-top: clamp(2px, 0.6vh, 8px);
}
.eco-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(46px, 4.4vw, 62px);
  padding: 0 clamp(8px, 1vw, 16px);
  border-radius: 13px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.eco-tile:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(124,92,255,0.35);
  transform: translateY(-2px);
}
.eco-tile img {
  max-height: clamp(24px, 2.3vw, 32px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Powered by Alnixa */
.eco__powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.8vh, 34px);
  width: 100%;
  margin-top: clamp(4px, 1vh, 12px);
}
.eco__powered-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 90px);
}
.eco__powered-logos img {
  height: clamp(30px, 3vw, 42px);
  width: auto;
  object-fit: contain;
  display: block;
}
.eco__powered-logos img[src*="qlaritics"] {
  height: clamp(25px, 2.5vw, 35px);
}

/* ============ SLIDE · YETKİNLİKLER ============ */
.stage.caps {
  max-width: 1260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4.2vh, 58px);
}
.caps__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.caps__title {
  font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #f2f3f8;
}
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.5vw, 24px);
  width: 100%;
}
.cap-card {
  padding: clamp(20px, 2vw, 32px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1vw, 16px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.cap-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,92,255,0.35);
}
.cap-card__icon {
  width: clamp(46px, 3.6vw, 56px);
  height: clamp(46px, 3.6vw, 56px);
  flex-shrink: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet-300);
  background: linear-gradient(135deg, rgba(124,92,255,0.22), rgba(124,92,255,0.05));
  border: 1px solid rgba(124,92,255,0.32);
}
.cap-card__icon svg { width: clamp(22px, 1.9vw, 26px); height: clamp(22px, 1.9vw, 26px); }
.cap-card__title {
  font-size: clamp(15px, 1.32vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2;
}
.cap-card__desc {
  font-size: clamp(10.5px, 0.68vw, 13px);
  line-height: 1.5;
  color: #9298ae;
  text-wrap: balance;
}

/* ============ SLIDE · İLERİ SEVİYE HEDEFLEME ============ */
.tgt-slide { padding-block: clamp(24px, 3.4vh, 48px); }
.stage.tgt {
  max-width: 1640px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 34px);
}
.tgt__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(22px, 2.4vw, 40px);
  align-items: stretch;
}
.tgt__intro { display: flex; flex-direction: column; }
.tgt__intro .eyebrow { margin-bottom: 10px; }
.tgt__title {
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #f2f3f8;
}
.tgt__lead {
  margin-top: 12px;
  font-size: clamp(11px, 0.86vw, 14px);
  line-height: 1.6;
  color: #a2a7bd;
  max-width: 52ch;
}
.tgt__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1vw, 16px);
}
.tgt-comp {
  padding: clamp(14px, 1.1vw, 20px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.tgt-comp--adx {
  border-color: rgba(124,92,255,0.32);
  background: linear-gradient(150deg, rgba(124,92,255,0.14), rgba(124,92,255,0.03));
}
.tgt-comp__tag {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--silver-lo);
}
.tgt-comp--adx .tgt-comp__tag { color: var(--violet-200); }
.tgt-comp p {
  font-size: clamp(10px, 0.78vw, 12px);
  line-height: 1.5;
  color: #9297ac;
}
.tgt-comp--adx p { color: #b9bccb; }

.tgt__label {
  display: block;
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-lo);
  margin-bottom: clamp(8px, 1vh, 12px);
}
.tgt__label--accent { color: var(--violet-200); margin-bottom: 6px; }

.tgt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(8px, 0.7vw, 12px);
}
.tgt-grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 0.9vw, 15px); }
.tgt-cell {
  padding: clamp(10px, 0.85vw, 15px);
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border-top: 2px solid rgba(124,92,255,0.4);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.tgt-cell:hover { border-top-color: var(--violet-400); transform: translateY(-2px); }
.tgt-cell h4 {
  font-size: clamp(10.5px, 0.82vw, 12.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.2;
}
.tgt-cell p {
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1.42;
  color: #8f94a9;
}

.tgt__example {
  padding: clamp(14px, 1.2vw, 22px) clamp(16px, 1.4vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(124,92,255,0.22);
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(255,255,255,0.015));
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(18px, 2vw, 36px);
  align-items: start;
}
.tgt-ex__head h3 {
  margin-top: 3px;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
  line-height: 1.15;
}
.tgt-ex__intro {
  margin-top: 9px;
  font-size: clamp(10px, 0.78vw, 12.5px);
  line-height: 1.55;
  color: #a7abbf;
  text-wrap: pretty;
}
.tgt-ex__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px clamp(16px, 1.6vw, 28px);
  align-content: center;
}
.tgt-ex__list li {
  position: relative;
  padding-left: 16px;
  font-size: clamp(9.5px, 0.76vw, 12px);
  line-height: 1.35;
  color: #c2c5d3;
}
.tgt-ex__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet-400);
}

/* ============ SLIDE · HİZMET KAPSAMI ============ */
.stage.svc {
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 28px);
}
.svc__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.svc__head .eyebrow { margin-bottom: 2px; }
.svc__title {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.03;
  color: #f2f3f8;
}
.svc__lead {
  font-size: clamp(13px, 1.05vw, 16.5px);
  line-height: 1.55;
  color: #a2a7bd;
  max-width: 76ch;
  text-wrap: balance;
}
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  gap: clamp(7px, 0.8vw, 12px) clamp(18px, 1.8vw, 32px);
}
.svc-item {
  padding: clamp(8px, 0.65vw, 12px) clamp(13px, 0.95vw, 18px);
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(124,92,255,0.5);
  background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  display: flex;
  gap: clamp(12px, 1vw, 18px);
  align-items: flex-start;
  transition: border-left-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.svc-item:hover { border-left-color: var(--violet-400); transform: translateX(3px); }
.svc-item__no {
  flex-shrink: 0;
  font-size: clamp(11px, 0.9vw, 13.5px);
  font-weight: 600;
  color: var(--violet-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 18px;
}
.svc-item__body { display: flex; flex-direction: column; gap: 4px; }
.svc-item__body h4 {
  font-size: clamp(12.5px, 1.05vw, 15.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.18;
}
.svc-item__body p {
  font-size: clamp(10.5px, 0.8vw, 12px);
  line-height: 1.48;
  color: #9297ac;
}
.svc-item__body p.svc-item__tools {
  margin-top: 3px;
  font-size: clamp(9px, 0.68vw, 10.5px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--violet-200);
  opacity: 0.82;
}

/* ============ SLIDE · BAŞARI HİKAYELERİ ============ */
.stage.stories, .stage.cs { --pos: #5fe0a3; }

.stage.stories {
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4.4vh, 58px);
}
.stories__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stories__title {
  font-size: clamp(32px, 3.8vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.03;
  color: #f2f3f8;
}
.stories__lead {
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.6;
  color: #a2a7bd;
  max-width: 74ch;
  text-wrap: balance;
}
.stories__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 30px); width: 100%; }
.story-card {
  padding: clamp(24px, 2.2vw, 38px);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.story-card:hover { transform: translateY(-4px); border-color: rgba(124,92,255,0.35); }
.story-card__tag {
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--violet-200);
}
.story-card__title {
  font-size: clamp(21px, 1.9vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.1;
}
.story-card__sub { font-size: clamp(12px, 1vw, 14.5px); line-height: 1.5; color: #9aa0b5; }
.story-card__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: clamp(12px, 1.4vh, 18px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.story-card__stat {
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  color: var(--pos);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.story-card__statlbl { font-size: clamp(10.5px, 0.85vw, 12.5px); color: #9297ac; line-height: 1.3; }

.stage.cs {
  max-width: 1560px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 32px);
}
.cs__head { display: flex; flex-direction: column; gap: 8px; }
.cs__head .eyebrow { margin-bottom: 2px; }
.cs__title {
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.03;
  color: #f2f3f8;
}
.cs__sub { font-size: clamp(13px, 1.1vw, 16.5px); line-height: 1.4; color: var(--violet-200); max-width: 68ch; }
.cs__body { display: grid; grid-template-columns: 1.28fr 1fr; gap: clamp(26px, 3vw, 56px); align-items: start; }
.cs-block + .cs-block { margin-top: clamp(14px, 1.8vh, 24px); }
.cs-block .tgt__label { margin-bottom: 8px; }
.cs-block p { font-size: clamp(11px, 0.9vw, 13.5px); line-height: 1.55; color: #9aa0b5; }
.cs-appr { list-style: none; display: flex; flex-direction: column; gap: clamp(6px, 0.7vh, 9px); }
.cs-appr li {
  position: relative;
  padding-left: 16px;
  font-size: clamp(10.5px, 0.85vw, 13px);
  line-height: 1.45;
  color: #a7abbf;
}
.cs-appr li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet-400);
}

.cs-results-wrap {
  padding: clamp(16px, 1.5vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(95,224,163,0.20);
  background: linear-gradient(150deg, rgba(95,224,163,0.06), rgba(255,255,255,0.012));
}
.cs-results-wrap .tgt__label { color: var(--pos); margin-bottom: clamp(10px, 1.4vh, 18px); }
.cs-results { display: flex; flex-direction: column; gap: clamp(9px, 1.2vh, 15px); }
.cs-metric { display: grid; grid-template-columns: clamp(76px, 7vw, 100px) 1fr; gap: clamp(10px, 1vw, 16px); align-items: center; }
.cs-metric__val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: clamp(21px, 2vw, 31px);
  font-weight: 700;
  color: var(--pos);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cs-metric__val .arw { font-size: 0.6em; font-weight: 700; }
.cs-metric__right { display: flex; flex-direction: column; gap: 6px; }
.cs-metric__label { font-size: clamp(10px, 0.8vw, 12.5px); line-height: 1.3; color: #a7abbf; }
.cs-metric__bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.cs-metric__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pos), rgba(95,224,163,0.3)); }

.cs-caps-wrap { margin-top: clamp(14px, 1.8vh, 22px); }
.cs-caps-wrap .tgt__label { margin-bottom: 9px; }
.cs-caps { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-cap {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  color: #d3c4ff;
  border: 1px solid rgba(124,92,255,0.3);
  background: rgba(124,92,255,0.09);
}

/* Section opener · 4 case preview cards */
.stories__cards--4 { gap: clamp(14px, 1.6vw, 24px); }
.stories__cards--4 .story-card { padding: clamp(17px, 1.5vw, 26px); gap: clamp(8px, 0.8vw, 12px); }
.stories__cards--4 .story-card__title { font-size: clamp(18px, 1.5vw, 24px); }
.stories__cards--4 .story-card__sub { font-size: clamp(11.5px, 0.92vw, 13px); }
.stories__cards--4 .story-card__stat { font-size: clamp(21px, 1.9vw, 29px); }

/* Two case studies per slide */
.tgt__label--pos { color: var(--pos); }
.stage.cases2 {
  --pos: #5fe0a3;
  max-width: 1620px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 22px);
}
.cases2__top { text-align: center; }
.cases2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 38px); align-items: stretch; }
.case2 {
  padding: clamp(18px, 1.6vw, 30px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 2px solid rgba(124,92,255,0.5);
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.4vh, 18px);
}
.case2__htext { display: flex; flex-direction: column; gap: 5px; }
.case2__tag { font-size: clamp(9.5px, 0.8vw, 11.5px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--violet-200); }
.case2__title { font-size: clamp(19px, 1.65vw, 27px); font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.08; }
.case2__sub { font-size: clamp(11.5px, 0.92vw, 13.5px); line-height: 1.4; color: var(--violet-200); }
.case2__sec { display: flex; flex-direction: column; }
.case2__sec .tgt__label { margin-bottom: 6px; }
.case2__text { font-size: clamp(10.5px, 0.85vw, 13px); line-height: 1.5; color: #9aa0b5; }
.cs-results--compact { gap: clamp(7px, 0.9vh, 12px); }
.cs-results--compact .cs-metric { grid-template-columns: clamp(64px, 5.5vw, 92px) 1fr; gap: clamp(9px, 0.9vw, 14px); }
.cs-results--compact .cs-metric__val { font-size: clamp(17px, 1.55vw, 25px); }
.cs-results--compact .cs-metric__label { font-size: clamp(9.5px, 0.74vw, 11.5px); }

/* ============ ALNIXA TEKNOLOJİ EKOSİSTEMİ ============ */
.stage.alx {
  max-width: 1580px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 36px);
}
.alx__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 0.9vh, 12px);
}
.alx__slogan {
  font-size: clamp(10.5px, 0.88vw, 13px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c1c6d6;
}
.alx__lead {
  max-width: 74ch;
  margin-top: clamp(10px, 1.6vh, 22px);
  font-size: clamp(12px, 0.98vw, 15.5px);
  line-height: 1.6;
  color: #9aa0b5;
}
.alx__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 30px);
  align-items: stretch;
}
.alx-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 1.8vw, 32px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(165deg, var(--c-bg), rgba(255,255,255,0.014));
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.3vh, 17px);
}
.alx-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c-bar);
}
.alx-card::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-glow), transparent 70%);
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
}
.alx-card > * { position: relative; z-index: 1; }
.alx-card__logo {
  height: clamp(30px, 2.7vw, 46px);
  display: flex;
  align-items: center;
}
.alx-card__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.alx-card__slogan {
  font-size: clamp(10.5px, 0.86vw, 13px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-fg);
}
.alx-card__desc {
  font-size: clamp(10.5px, 0.84vw, 13px);
  line-height: 1.58;
  color: #a7adc0;
}
.alx-card__capttl {
  margin-top: 2px;
  font-size: clamp(9px, 0.68vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-lo);
}
.alx-card__caps { display: flex; flex-direction: column; gap: clamp(6px, 0.78vh, 10px); }
.alx-chip {
  position: relative;
  padding: 0 0 0 17px;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: clamp(10.5px, 0.8vw, 12.5px);
  font-weight: 500;
  line-height: 1.4;
  color: #c2c7d6;
}
.alx-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--c-fg);
  box-shadow: 0 0 9px var(--c-glow);
}
.alx-card--adwixa {
  --c-bg: rgba(124,92,255,0.13);
  --c-bar: linear-gradient(90deg,#9a7bff,#6d4aff);
  --c-glow: rgba(124,92,255,0.38);
  --c-fg: #bca9ff;
  --c-cb: rgba(124,92,255,0.42);
  --c-cbg: rgba(124,92,255,0.13);
  --c-ct: #d9ccff;
}
.alx-card--qlaritics {
  --c-bar: linear-gradient(90deg,#ff4d6d,#ffb020,#2bd4b0,#2b9bff,#8b5cff);
  --c-glow: rgba(64,110,240,0.34);
  --c-fg: #7fd6f2;
  --c-cb: rgba(43,182,230,0.42);
  --c-cbg: rgba(43,182,230,0.12);
  --c-ct: #c3ecfb;
  background:
    radial-gradient(78% 66% at 10% 112%, rgba(170,54,214,0.30), rgba(170,54,214,0) 60%),
    radial-gradient(70% 64% at 104% 20%, rgba(46,116,246,0.24), rgba(46,116,246,0) 62%),
    radial-gradient(58% 52% at 34% 114%, rgba(255,166,60,0.28), rgba(255,166,60,0) 62%),
    radial-gradient(64% 58% at 82% 106%, rgba(38,196,224,0.16), rgba(38,196,224,0) 60%),
    linear-gradient(158deg, rgba(74,46,138,0.22) 0%, rgba(18,18,34,0.30) 52%, rgba(9,9,18,0.34) 100%);
}
.alx-card--adlifty {
  --c-bg: rgba(46,123,255,0.12);
  --c-bar: linear-gradient(90deg,#5b9bff,#1e5fe0);
  --c-glow: rgba(46,123,255,0.36);
  --c-fg: #82adff;
  --c-cb: rgba(46,123,255,0.42);
  --c-cbg: rgba(46,123,255,0.12);
  --c-ct: #d2e1ff;
}
.alx__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 0.9vw, 18px);
  padding: clamp(12px, 1.2vw, 18px) clamp(18px, 1.8vw, 30px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.022);
}
.alx__flow-step { font-size: clamp(10.5px, 0.82vw, 13px); color: #b7bccf; }
.alx__flow-step b { color: #fff; font-weight: 600; }
.alx__flow-sep { color: #8b6cff; font-size: 13px; opacity: 0.8; }
.alx-card__site {
  margin-top: auto;
  padding-top: clamp(11px, 1.1vh, 15px);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--c-fg);
}
.alx__logo { height: clamp(27px, 2.5vw, 43px); width: auto; object-fit: contain; }

/* Alnixa corporate dark canvas — near-black with subtle brand-tinted light hits (global, premium) */
.slide.alx-dark {
  background:
    radial-gradient(32% 24% at 50% -3%, rgba(158,164,188,0.18), rgba(158,164,188,0) 62%),
    radial-gradient(30% 36% at 16% 64%, rgba(124,92,255,0.11), rgba(124,92,255,0) 66%),
    radial-gradient(30% 38% at 50% 86%, rgba(43,182,230,0.09), rgba(43,182,230,0) 66%),
    radial-gradient(30% 36% at 85% 62%, rgba(46,123,255,0.11), rgba(46,123,255,0) 66%),
    radial-gradient(24% 22% at 84% 6%, rgba(126,134,164,0.10), rgba(126,134,164,0) 66%),
    radial-gradient(130% 120% at 50% 36%, #101116 0%, #0a0a0d 40%, #060608 74%, #030304 100%);
  background-color: #030304;
}
.slide.alx-dark .ambient { opacity: 0; }
.slide.alx-dark .vignette {
  background:
    radial-gradient(140% 100% at 50% 40%, transparent 42%, rgba(0,0,0,0.46) 80%, rgba(0,0,0,0.82) 100%);
  box-shadow: inset 0 0 210px 34px rgba(0,0,0,0.55);
}
.slide.alx-dark .alx-card {
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 26px 64px rgba(0,0,0,0.55);
}
.slide.alx-dark .alx__flow {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.09);
}

/* Alnixa corporate typography — minimalist, tracked, light-gray gradient (cards untouched) */
.slide.alx-dark .alx__slogan {
  background: linear-gradient(180deg, #eef0f6 0%, #c3c8d6 58%, #9aa0b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.slide.alx-dark .alx__lead {
  background: linear-gradient(180deg, #c6ccda 0%, #9aa1b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.slide.alx-dark .alx__flow-step { color: #aeb5c9; }
.slide.alx-dark .alx__flow-step b {
  background: linear-gradient(180deg, #eef1f7 0%, #c6ccd9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.slide.alx-dark .alx__flow-sep { color: #7c88a4; opacity: 0.85; }

/* Hide the Adwixa brand mark on the Alnixa corporate slide (footer shows alnixa.com) */
body.on-alx .brand-mini { opacity: 0; visibility: hidden; }

/* ============ ALNIXA · SESLİ ANLATIM OYNATICI (narration player) ============ */
.alx-player {
  position: absolute;
  top: clamp(-4px, -0.3vh, 2px);
  left: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.45vw, 8px);
  padding: clamp(6px, 0.5vw, 9px) clamp(11px, 0.95vw, 16px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(160deg, rgba(40,42,58,0.72), rgba(13,14,21,0.66));
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(145,172,255,0.5),
              0 0 34px rgba(84,132,250,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #eef0f6;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* Sesli anlatım butonu daha belirgin olsun: çevresinde sabit, parlak neon mavi
   ışık + kenarda dönen ince bir "enerji ışığı". */
.alx-player { border-color: rgba(150,175,255,0.38); }

@property --alx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/* Kenar boyunca dönen ince ışık huzmesi (pill kenarına maske ile oturur) */
.alx-player::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                     /* halkanın kalınlığı — ince */
  background: conic-gradient(from var(--alx-angle),
              transparent 0deg,
              transparent 205deg,
              rgba(150,190,255,0.35) 255deg,
              rgba(190,215,255,0.85) 300deg,
              #eaf3ff 322deg,
              rgba(190,215,255,0.85) 344deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: alxSpin 3.4s linear infinite;
}
@keyframes alxSpin { to { --alx-angle: 360deg; } }

/* Data Intelligence (Qlaritics intro) sayfasındaki oynatıcı — sol-üstteki
   küçük marka ikonunun hemen sağında, onunla aynı satırda sabit durur. */
.alx-player--q {
  position: fixed;
  top: clamp(9px, 1.5vh, 19px);
  left: clamp(70px, 7.6vw, 102px);
}

.alx-player:hover {
  border-color: rgba(160,178,255,0.5);
  box-shadow: 0 22px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(150,178,255,0.6),
              0 0 40px rgba(94,144,252,0.95), inset 0 1px 0 rgba(255,255,255,0.08);
}

.alx-pbtn {
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #c8cee0;
  cursor: pointer;
  border-radius: 50%;
  width: clamp(28px, 2.15vw, 34px);
  height: clamp(28px, 2.15vw, 34px);
  transition: color .22s var(--ease), background .22s var(--ease), transform .16s var(--ease);
}
.alx-pbtn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.alx-pbtn:active { transform: scale(0.9); }
.alx-pbtn svg { width: 52%; height: 52%; fill: currentColor; display: block; }

/* ana oynat/duraklat — vurgulu daire */
.alx-pbtn--play {
  position: relative;
  width: clamp(34px, 2.75vw, 44px);
  height: clamp(34px, 2.75vw, 44px);
  color: #fff;
  background: radial-gradient(circle at 32% 26%, rgba(158,178,255,0.95), rgba(92,122,255,0.9) 58%, rgba(58,84,220,0.95));
  box-shadow: 0 6px 18px rgba(70,100,240,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
}
.alx-pbtn--play:hover { color: #fff; background: radial-gradient(circle at 32% 26%, rgba(168,188,255,1), rgba(102,132,255,0.95) 58%, rgba(66,92,230,1)); transform: translateY(-1px); }
.alx-pbtn--play svg { width: 42%; height: 42%; }
.alx-pbtn--play .alx-pico--pause { display: none; }
.alx-player.is-playing .alx-pbtn--play .alx-pico--play { display: none; }
.alx-player.is-playing .alx-pbtn--play .alx-pico--pause { display: block; }
.alx-player.is-playing .alx-pbtn--play::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(150,172,255,0.55);
  animation: alxPulse 1.9s ease-out infinite;
}
@keyframes alxPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.42); opacity: 0; } }

.alx-player__mid { display: flex; flex-direction: column; justify-content: center; margin: 0 clamp(4px, 0.45vw, 8px); }
.alx-player__cta {
  border: 0; background: transparent; color: #eef0f6; cursor: pointer;
  font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; padding: 2px; text-align: left;
}
.alx-player__prog { display: flex; flex-direction: column; gap: 4px; }
.alx-player__track {
  position: relative;
  width: clamp(130px, 12vw, 190px);
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  cursor: pointer;
}
.alx-player__track i {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  border-radius: 999px; background: linear-gradient(90deg, #8fb0ff, #5a78ff);
  transition: width 0.12s linear;
}
.alx-player__track::after {
  content: ""; position: absolute; top: 50%; left: var(--kx, 0%);
  width: 10px; height: 10px; border-radius: 50%; background: #dfe6ff;
  transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.alx-player__track:hover::after { opacity: 1; }
.alx-player__time { font-size: clamp(9.5px, 0.72vw, 11px); color: #aeb5c9; letter-spacing: 0.02em; }
.alx-player__time b { color: #eef0f6; font-weight: 600; }

.alx-pbtn--rate {
  width: auto; min-width: clamp(34px, 3vw, 46px); height: clamp(26px, 2vw, 32px);
  padding: 0 clamp(8px, 0.7vw, 11px); border-radius: 999px;
  font-size: clamp(10.5px, 0.8vw, 12.5px); font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.16); color: #d6dcf0;
}
.alx-pbtn--rate:hover { background: rgba(255,255,255,0.08); color: #fff; }

.alx-pbtn--stop svg { width: 44%; height: 44%; }
.alx-pbtn--stop:hover { color: #ff9aa2; background: rgba(255,90,110,0.12); }

/* progressive disclosure: başlamadan önce yalnızca oynat + CTA görünür */
.alx-player:not(.is-started) .alx-pbtn--rew,
.alx-player:not(.is-started) .alx-pbtn--fwd,
.alx-player:not(.is-started) .alx-pbtn--stop,
.alx-player:not(.is-started) .alx-pbtn--rate,
.alx-player:not(.is-started) .alx-player__prog { display: none; }
.alx-player.is-started .alx-player__cta { display: none; }

/* ---- narration focus mode: applies ONLY after Play is pressed ---- */
.alx.is-narrating [data-cue] {
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease), box-shadow .55s var(--ease);
  transition-delay: 0s;
}
.alx.is-narrating [data-cue]:not(.is-cue) { opacity: 0.24; filter: saturate(0.7) brightness(0.9); }
.alx.is-narrating .alx-card:not(.is-cue) { transform: scale(0.985); }

.alx.is-narrating [data-cue].is-cue { opacity: 1; }
.alx.is-narrating .alx-card.is-cue {
  transform: scale(1.03);
  border-color: var(--c-glow);
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 0 1px var(--c-glow), 0 0 48px var(--c-glow);
}
.alx.is-narrating .alx-card.is-cue::after { opacity: 0.92; }
.alx.is-narrating .alx__head.is-cue { transform: scale(1.015); }
.alx.is-narrating .alx__flow.is-cue {
  transform: scale(1.01);
  border-color: rgba(160,178,255,0.4);
  box-shadow: 0 0 0 1px rgba(140,166,255,0.18), 0 0 42px rgba(90,120,255,0.22);
  background: rgba(120,140,255,0.06);
}

/* ---- extra motion (only while audio is actively playing: .is-live) ---- */

/* Alnixa logosu — anlatılırken yumuşak nabız/parlama */
.alx.is-live .alx__logo.is-glow { animation: alxLogoGlow 2.9s ease-in-out infinite; }
@keyframes alxLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(150,172,255,0.18)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 24px rgba(150,172,255,0.62)); transform: scale(1.05); }
}

/* Aktif kart — canlı kalması için hafif ışık nefesi */
.alx.is-live.is-narrating .alx-card.is-cue { animation: alxCuePulse 2.6s ease-in-out infinite; }
@keyframes alxCuePulse {
  0%, 100% { box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 0 1px var(--c-glow), 0 0 40px var(--c-glow); }
  50%      { box-shadow: 0 30px 80px rgba(0,0,0,0.62), 0 0 0 1px var(--c-glow), 0 0 66px var(--c-glow); }
}

/* Kartların ışıkları sırayla (Adwixa → Qlaritics → AdLifty) TEK sefer, yavaş ve
   zarif bir dalga hâlinde yanar; AdLifty en geç başladığı için son kez yanan kart
   olur ve yumuşakça söner. */
.alx.is-live.is-wave .alx-card { animation: alxWave 5s ease-in-out 1 both; }
.alx.is-live.is-wave .alx-card--qlaritics { animation-delay: 1.5s; }
.alx.is-live.is-wave .alx-card--adlifty { animation-delay: 3s; }
@keyframes alxWave {
  0%, 12%, 100% {
    opacity: 0.26;
    transform: scale(0.985);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 26px 64px rgba(0,0,0,0.55);
  }
  40%, 60% {
    opacity: 1;
    transform: scale(1.025);
    border-color: var(--c-glow);
    box-shadow: 0 30px 72px rgba(0,0,0,0.6), 0 0 0 1px var(--c-glow), 0 0 50px var(--c-glow);
  }
}

/* ---- Alnixa açılış videosu kutusu (yalnızca ilgili cümlede açılır) ---- */
.alx-video {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) scale(0.94);
  width: clamp(360px, 46vw, 700px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vh, 13px);
  opacity: 0;
  filter: blur(9px);
  pointer-events: none;
  /* Ekrandan çıkış (is-video kalkınca): uzun, yumuşak eriyen (dissolve) geçiş */
  transition: opacity 1.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.alx.is-video .alx-video {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  /* Açılış: daha kısa */
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.alx-video__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 46px 110px rgba(0,0,0,0.72), 0 0 0 1px rgba(150,172,255,0.14), 0 0 70px rgba(90,120,255,0.2);
}
.alx-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }
.alx-video__cap {
  font-size: clamp(9.5px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--silver-lo);
}

/* ---- Adwixa videosu: kartın MOR gövdesi sağa uzar, video ekranı içinde açılır ---- */
.alx__grid { position: relative; }
.alx-card--adwixa {
  z-index: 3;
  --adx-w: clamp(360px, 40vw, 620px);   /* uzayan bölümün hedef genişliği */
}
/* Video açılınca kart sağa uzayabilsin: taşma serbest, sağ köşe kartla birleşsin.
   is-cue kuralını (border/1px halka) yenmek için yüksek özgüllük kullanılır.
   ÖNEMLİ: overflow'u KAPANIŞ FADE'İ boyunca da açık tutmak için `is-adx-live`
   sınıfına bağlanır (bu sınıf video görünmez olana kadar kalır). Böylece kapanışta
   taşan video anında kırpılmaz → "pat" gitmez, yumuşakça erir. */
.alx.is-narrating.is-adx-live .alx-card--adwixa,
.alx.is-narrating.is-adx-live .alx-card--adwixa.is-cue {
  overflow: visible;
  z-index: 6;              /* aktif kart öne gelsin → diğer kartların yazıları videonun üstüne binmesin */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;   /* sağ kenarı tamamen kaldır → uzantıyla dikişsiz birleşsin */
  /* sağ kenarda sert 1px glow halkası olmasın (dikişi önler); yumuşak glow kalır */
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
}
.alx.is-adx-live .alx-card--adwixa::after { opacity: 0; }  /* ortada kalan glow'u gizle */

/* Kartın sağ kenarına yapışık, aynı mor gövde; genişliği 0 → hedef olarak animasyonlu */
.alx-adx-ext {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 100%;              /* kartın sağ kenarına tam bitişik (bindirme yok) */
  width: 0;
  overflow: hidden;
  z-index: 2;
  border: 1px solid var(--c-glow);
  border-left: none;
  border-radius: 0 22px 22px 0;
  background: linear-gradient(165deg, rgba(124,92,255,0.13), rgba(255,255,255,0.014));
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
  opacity: 0;
  pointer-events: none;
  /* kapanış: olduğu yerde yumuşakça opaklığı düşerek kaybolur (genişlik geri çekilmez).
     Genişlik ancak tamamen görünmez olduktan sonra sıfırlanır → sıçrama olmaz. */
  transition: opacity 1s ease,
              width 0s linear 1s;
}
.alx-adx-ext::before {   /* kartın üst mor şeridinin devamı */
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 3px;
  background: var(--c-bar);
}
.alx.is-adx-video .alx-adx-ext {
  width: var(--adx-w);
  opacity: 1;
  /* açılış: mor gövde soldan sağa doğru yumuşakça açılır (easeOut) + belirir */
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
}

/* İçteki video ekranı: sabit genişlik → kart uzarken soldan sağa açığa çıkar */
.alx-adx-ext__frame {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: calc(var(--adx-w) - 30px);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(124,92,255,0.28), 0 12px 34px rgba(0,0,0,0.5);
}
.alx-adx-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Qlaritics videosu: aynı mantık — ortadaki kartın gövdesi sağa uzar (mavi ton) ---- */
.alx-card--qlaritics {
  z-index: 3;
  --qlx-w: clamp(440px, 40vw, 560px);   /* ortadaki kart: Adwixa gibi geniş, dikdörtgen video */
}
.alx.is-narrating.is-qlx-live .alx-card--qlaritics,
.alx.is-narrating.is-qlx-live .alx-card--qlaritics.is-cue {
  overflow: visible;
  z-index: 6;              /* aktif kart öne gelsin */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
}
/* Ortadaki kart açılırken sola kayıp öne çıkar → sağda geniş, dikdörtgen video alanı kazanır */
.alx.is-narrating.is-qlx-live .alx-card--qlaritics.is-cue {
  transform: translateX(-58%) scale(1.03);
}
/* Qlaritics videosu açıkken arka plan kararır → video öne çıkar, sola kayan kart temiz durur */
.alx.is-narrating.is-qlx-live [data-cue]:not(.is-cue) {
  opacity: 0.06;
  filter: saturate(0.6) brightness(0.7);
}
.alx.is-qlx-live .alx-card--qlaritics::after { opacity: 0; }

.alx-qlx-ext {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 100%;
  width: 0;
  overflow: hidden;
  z-index: 2;
  border: 1px solid var(--c-glow);
  border-left: none;
  border-radius: 0 22px 22px 0;
  background: linear-gradient(165deg, rgba(46,116,246,0.16), rgba(18,18,34,0.22));
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
  opacity: 0;
  pointer-events: none;
  /* kapanış: olduğu yerde yumuşakça opaklığı düşerek kaybolur */
  transition: opacity 1s ease,
              width 0s linear 1s;
}
.alx-qlx-ext::before {
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 3px;
  background: var(--c-bar);
}
.alx.is-qlx-video .alx-qlx-ext {
  width: var(--qlx-w);
  opacity: 1;
  /* açılış: soldan sağa doğru yumuşakça açılır (easeOut) + belirir */
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
}
.alx-qlx-ext__frame {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: calc(var(--qlx-w) - 30px);   /* Adwixa gibi alanı doldurur (letterbox yok) */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(46,116,246,0.30), 0 12px 34px rgba(0,0,0,0.5);
}
.alx-qlx-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- AdLifty videosu: Qlaritics ile aynı — en sağdaki kart; ortalanır, arka plan kararır ---- */
.alx-card--adlifty {
  z-index: 3;
  --alf-w: clamp(440px, 40vw, 560px);
}
.alx.is-narrating.is-alf-live .alx-card--adlifty,
.alx.is-narrating.is-alf-live .alx-card--adlifty.is-cue {
  overflow: visible;
  z-index: 6;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
}
/* En sağdaki kart açılırken sola kayıp öne çıkar → kompozisyon ekranda ortalanır */
.alx.is-narrating.is-alf-live .alx-card--adlifty.is-cue {
  transform: translateX(-175%) scale(1.03);
}
/* AdLifty videosu açıkken arka plan kararır → video öne çıkar */
.alx.is-narrating.is-alf-live [data-cue]:not(.is-cue) {
  opacity: 0.06;
  filter: saturate(0.6) brightness(0.7);
}

.alx-alf-ext {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 100%;
  width: 0;
  overflow: hidden;
  z-index: 2;
  border: 1px solid var(--c-glow);
  border-left: none;
  border-radius: 0 22px 22px 0;
  background: linear-gradient(165deg, rgba(46,123,255,0.16), rgba(18,18,34,0.22));
  box-shadow: 0 30px 74px rgba(0,0,0,0.6), 0 0 46px var(--c-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease,
              width 0s linear 1s;
}
.alx-alf-ext::before {
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 3px;
  background: var(--c-bar);
}
.alx.is-alf-video .alx-alf-ext {
  width: var(--alf-w);
  opacity: 1;
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
}
.alx-alf-ext__frame {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: calc(var(--alf-w) - 30px);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(46,123,255,0.30), 0 12px 34px rgba(0,0,0,0.5);
}
.alx-alf-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Videolar açılınca kart overflow:visible olur; üstteki 3px aksan şeridi (::before)
   artık yuvarlak köşeye kırpılmadığından sol ucu köşenin dışına taşar. Şeridin sol
   başlangıcını köşe yarıçapı kadar içeri alarak taşmayı önle (üç kart için de). */
.alx.is-adx-live .alx-card--adwixa::before,
.alx.is-qlx-live .alx-card--qlaritics::before,
.alx.is-alf-live .alx-card--adlifty::before {
  left: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .alx-player::after,
  .alx-player.is-playing .alx-pbtn--play::after,
  .alx.is-live .alx__logo.is-glow,
  .alx.is-live.is-narrating .alx-card.is-cue,
  .alx.is-live.is-wave .alx-card { animation: none; }
}

/* ============ SLIDE · REFERANSLAR ============ */
.stage.refs {
  --ref-th: clamp(60px, 5.6vw, 82px);
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vh, 36px);
}
.refs__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.refs__title {
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: #f2f3f8;
  line-height: 1.05;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  row-gap: clamp(16px, 2vh, 28px);
  column-gap: clamp(9px, 0.95vw, 15px);
  width: 100%;
}
.ref-tile {
  width: 100%;
  height: var(--ref-th);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 1.2vw, 18px);
  border-radius: 13px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ref-tile:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(124,92,255,0.32);
  transform: translateY(-2px);
}
.ref-logo {
  max-height: clamp(24px, 2.2vw, 32px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(1.85);
  opacity: 0.85;
}
.refs__note {
  margin-top: clamp(4px, 1vh, 12px);
  text-align: center;
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.012em;
  color: rgba(255,255,255,0.4);
}

/* Legal footer on content slides */
.slide-footer {
  position: absolute;
  left: clamp(24px, 5vw, 96px);
  bottom: clamp(22px, 3vh, 34px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: min(74%, 940px);
}
.slide-footer__web {
  flex-shrink: 0;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  font-weight: 600;
  color: var(--silver-mid);
}
.slide-footer__sep {
  flex-shrink: 0;
  width: 1px; height: 12px;
  background: rgba(255,255,255,0.18);
}
.slide-footer__copy {
  font-size: clamp(9px, 0.78vw, 11px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.34);
}

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  z-index: 60;
  width: 0;
  background: linear-gradient(90deg, var(--violet-300), var(--violet-600));
  box-shadow: 0 0 18px rgba(124,92,255,0.7);
  transition: width 0.6s var(--ease);
}

.brand-mini {
  position: fixed;
  z-index: 50;
  top: clamp(18px, 2.8vh, 30px);
  left: clamp(24px, 4vw, 46px);
  opacity: 0.95;
  display: flex;
  align-items: center;
}
.brand-mini img {
  height: clamp(26px, 2.5vw, 36px);
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(124,92,255,0.4));
}
/* Hide mini brand + hint on the cover for a clean hero */
body.on-cover .brand-mini,
body.on-cover .hint { opacity: 0; pointer-events: none; }
.brand-mini, .hint { transition: opacity 0.6s var(--ease); }

.hint {
  position: fixed;
  z-index: 50;
  top: clamp(22px, 3vh, 32px);
  right: clamp(24px, 4vw, 46px);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-lo);
  opacity: 0.7;
}
/* Hide nav hint on comparison analysis slides so it doesn't collide with the legend */
body:has(.qcmp-slide.is-active) .hint { opacity: 0; pointer-events: none; }

/* ============ "Qlaritics sunumu için devam et" ipucu ============
   Alnixa ekosistem slaytı bölüm sayacında 02/02 gösterir; bu yüzden
   izleyenler sunumun bittiğini sanabilir. Bu ipucu yalnızca o slaytta,
   sağ alttaki sayfa sayacının hemen üzerinde belirir ve tıklanınca
   Qlaritics bölümüne geçer. */
.continue-hint {
  position: fixed;
  z-index: 51;
  /* Sayfa sayacı (chrome) pill'inin hemen soluna, dikey ortalı olacak şekilde. */
  bottom: calc(clamp(20px, 3vh, 34px) + 11px);
  right: calc(clamp(24px, 4vw, 46px) + 190px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(150,180,255,0.34);
  background: linear-gradient(180deg, rgba(28,40,86,0.72), rgba(14,20,44,0.72));
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  color: #eaf1ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  box-shadow: 0 6px 22px rgba(6,12,32,0.45),
              0 0 0 1px rgba(120,150,255,0.12),
              0 0 26px rgba(70,120,245,0.42);
}
.continue-hint__label { white-space: nowrap; }
.continue-hint__arrow {
  display: inline-flex;
  color: #bcd2ff;
  animation: chNudge 1.7s var(--ease) infinite;
}
@keyframes chNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.continue-hint:hover {
  border-color: rgba(170,200,255,0.6);
  box-shadow: 0 8px 26px rgba(6,12,32,0.5),
              0 0 0 1px rgba(140,170,255,0.2),
              0 0 34px rgba(80,135,250,0.6);
}

/* Yalnızca Alnixa ekosistem slaytında görünür. */
body.on-alx .continue-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .continue-hint__arrow { animation: none; }
}

/* ============================================================
   QLARITICS · MİMARİ KARŞILAŞTIRMA (arch-slide)
   ============================================================ */
.arch-slide { padding: clamp(16px, 2.6vh, 30px) clamp(18px, 1.8vw, 40px); }
.stage.arch { max-width: 1500px; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: clamp(10px, 1.6vh, 20px); }

.arch__head { text-align: center; }
.arch__brandline { display: inline-flex; align-items: center; justify-content: center; gap: clamp(11px, 1.1vw, 17px); }
.arch__logo { height: clamp(18px, 1.8vw, 26px); width: auto; display: block; }
.arch__bar { width: 1px; height: clamp(12px, 1.2vw, 18px); background: rgba(140,166,255,0.42); }
.arch__sub {
  margin: clamp(4px, 0.8vh, 8px) auto 0;
  max-width: 900px;
  font-size: clamp(9.5px, 0.85vw, 12.5px);
  line-height: 1.45;
  color: var(--silver-lo);
}

.arch__grid { display: flex; flex-direction: column; gap: clamp(8px, 1.15vh, 14px); }

/* faithful mechanism drawings */
.arch-svg { width: 100%; height: auto; display: block; }
.arch-svg text { font-family: var(--font-sans); }
.lane__flow { min-width: 0; }

/* ---- one lane = id | flow | = | report ---- */
.lane {
  display: grid;
  grid-template-columns: clamp(92px, 9.4vw, 140px) minmax(0, 1fr) clamp(18px, 2vw, 30px) clamp(150px, 15vw, 216px);
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
  padding: clamp(9px, 1.15vh, 15px) clamp(12px, 1.2vw, 20px);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(140,166,255,0.09);
  box-shadow: 0 12px 30px rgba(6,10,32,0.24);
}
.lane--hero {
  background: linear-gradient(120deg, rgba(72,100,207,0.16), rgba(43,107,246,0.05) 55%, rgba(122,90,220,0.12));
  border-color: rgba(150,175,255,0.26);
  box-shadow: 0 18px 44px rgba(20,40,120,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lane--alt { opacity: 0.94; }

/* ---- lane identity ---- */
.lane__id { display: flex; flex-direction: column; gap: 3px; }
.lane__brand { font-size: clamp(11px, 1.02vw, 15px); font-weight: 600; color: #eef2ff; line-height: 1.12; }
.lane--hero .lane__brand { font-size: clamp(13px, 1.25vw, 18.5px); }
.lane__tag { font-size: clamp(7.5px, 0.66vw, 9.4px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-lo); line-height: 1.2; }
.lane--hero .lane__tag { color: #9db4ff; }

/* ---- pipeline flow ---- */
.lane__flow { display: flex; align-items: center; gap: 0; min-width: 0; }
.lane__flow--hero { padding-top: clamp(10px, 1.4vh, 16px); }

/* connector wires (auto-fill between nodes) */
.awire { position: relative; flex: 1 1 auto; min-width: clamp(10px, 1.3vw, 22px); height: 1px; align-self: center; background: linear-gradient(90deg, rgba(140,166,255,0.5), rgba(140,166,255,0.22)); }
.awire::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid rgba(150,168,235,0.62); }
.lane--alt .awire { opacity: 0.5; }
.awire--fan { min-width: clamp(14px, 1.8vw, 30px); }

/* data orb */
.aorb {
  position: relative; flex: 0 0 auto;
  width: clamp(46px, 4.9vw, 64px); height: clamp(46px, 4.9vw, 64px);
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
}
.aorb--full { background: radial-gradient(circle at 34% 30%, #5f83f8, #2f57d8 60%, #1d3ba8 100%); box-shadow: 0 0 22px rgba(52,96,230,0.5), inset 0 2px 6px rgba(255,255,255,0.25); }
.aorb--dim { background: radial-gradient(circle at 34% 30%, #3a4f8f, #26356b 62%, #1a2450 100%); box-shadow: inset 0 2px 6px rgba(255,255,255,0.12); }
.aorb--empty { background: radial-gradient(circle at 34% 30%, #6a6f80, #444a5c 62%, #2c3040 100%); box-shadow: inset 0 2px 6px rgba(255,255,255,0.1); }
.aorb__t { font-size: clamp(7px, 0.66vw, 9px); font-weight: 600; color: #fff; line-height: 1.12; letter-spacing: 0.01em; padding: 0 4px; }
.aorb--empty .aorb__t { color: #e7e9f2; }
.aorb__n {
  position: absolute; right: -4px; bottom: -3px;
  font-size: clamp(6.5px, 0.6vw, 8px); font-weight: 700; letter-spacing: 0.02em;
  color: #fff; background: rgba(15,22,54,0.9); border: 1px solid rgba(150,175,255,0.4);
  border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.aorb--empty .aorb__n { background: #2f6bf6; border-color: rgba(120,160,255,0.7); }
.aorb__n--low { background: #2f6bf6; }

/* generic pipeline node (icon + label) */
.anode { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 0.5vh, 5px); min-width: 0; }
.anode__ic {
  width: clamp(30px, 3.3vw, 44px); height: clamp(30px, 3.3vw, 44px);
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(120,150,240,0.16), rgba(120,150,240,0.05));
  border: 1px solid rgba(150,175,255,0.22);
  color: #cdd8ff;
}
.anode__ic svg { width: 56%; height: 56%; }
.anode__lb { font-size: clamp(7px, 0.64vw, 9px); font-weight: 500; color: var(--silver-mid); text-align: center; line-height: 1.16; }
.lane--alt .anode__ic { background: rgba(255,255,255,0.03); border-color: rgba(150,166,210,0.16); color: #aeb8d6; }
.lane--alt .anode__lb { color: var(--silver-lo); }

/* generic AI text badge (alt3) */
.anode__ic--ai { background: radial-gradient(circle at 36% 30%, #2a2a30, #0c0c10 70%); border-color: rgba(255,255,255,0.14); }
.anode__ic--ai b { font-size: clamp(10px, 1vw, 14px); font-weight: 700; color: #f2f3f7; letter-spacing: 0.02em; }

/* "missing" chips over platform node (modül / metrik yok) */
.anode--plat { padding-top: clamp(15px, 2vh, 22px); }
.amiss { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.amiss__chip {
  position: relative;
  font-size: clamp(6px, 0.56vw, 7.6px); font-weight: 600; letter-spacing: 0.02em;
  color: rgba(251,130,150,0.9);
  background: rgba(251,113,133,0.08);
  border: 1px dashed rgba(251,113,133,0.42);
  border-radius: 5px; padding: 1px 5px; line-height: 1.35; white-space: nowrap;
}
.amiss__chip::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: rgba(251,113,133,0.75); transform: rotate(-9deg); }

/* manual agency node — marked as manual / crossed */
.anode--manual { opacity: 0.82; }
.anode--manual .anode__ic { border-style: dashed; border-color: rgba(251,113,133,0.4); color: #d8b6bf; position: relative; overflow: hidden; }
.anode--manual .anode__ic::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1.4px; background: rgba(251,113,133,0.7); transform: rotate(-24deg); }
.anode__tag { font-size: clamp(6px, 0.56vw, 7.6px); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(251,130,150,0.85); }

.aplus { flex: 0 0 auto; margin: 0 clamp(4px, 0.6vw, 9px); font-size: clamp(12px, 1.2vw, 17px); font-weight: 300; color: var(--silver-lo); }

/* ---- Analiz AI engine (hero centerpiece) ---- */
.aengine { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 0.5vh, 5px); }
.acaps { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.acap {
  display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap;
  font-size: clamp(6px, 0.56vw, 7.6px); color: var(--silver-lo);
  background: linear-gradient(135deg, rgba(120,90,220,0.18), rgba(74,107,216,0.08));
  border: 1px solid rgba(160,140,235,0.28); border-radius: 6px; padding: 1.5px 6px; line-height: 1.3;
}
.acap b { color: #cdb8ff; font-weight: 600; }
.aengine__core {
  width: clamp(40px, 4.4vw, 58px); height: clamp(40px, 4.4vw, 58px); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 36% 30%, #8f6bff, #5a34e0 60%, #2f2b78 100%);
  box-shadow: 0 0 26px rgba(124,92,255,0.55), inset 0 2px 6px rgba(255,255,255,0.28);
}
.aengine__core svg { width: 58%; height: 58%; }
.aengine__lb { font-size: clamp(7.5px, 0.68vw, 9.5px); font-weight: 600; color: #e9ecff; }

/* ---- metric matrix + outputs (hero) ---- */
.amx { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); }
.amx__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(2px, 0.28vw, 4px); }
.amx__grid span { width: clamp(4px, 0.42vw, 6px); height: clamp(4px, 0.42vw, 6px); border-radius: 50%; background: rgba(150,168,235,0.28); }
.amx__grid span.on { background: #2f6bf6; box-shadow: 0 0 6px rgba(47,107,246,0.8); }
.amx__out { display: flex; flex-direction: column; gap: clamp(2px, 0.36vh, 4px); }
.amx__out span { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(6.5px, 0.6vw, 8.4px); color: var(--silver-mid); line-height: 1.25; white-space: nowrap; }
.amx__out i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c); flex: none; }

/* ---- = sign ---- */
.lane__eq { text-align: center; font-size: clamp(14px, 1.5vw, 22px); font-weight: 300; color: rgba(180,190,220,0.55); }
.lane--hero .lane__eq { color: rgba(180,195,255,0.8); }

/* ---- report cards ---- */
.rep { border-radius: 12px; padding: clamp(8px, 0.95vh, 13px) clamp(10px, 0.95vw, 15px); display: flex; flex-direction: column; gap: clamp(3px, 0.45vh, 6px); }
.rep__ttl { font-size: clamp(7px, 0.6vw, 9px); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--silver-lo); text-align: center; }
.rep__stats { list-style: none; display: flex; flex-direction: column; gap: clamp(2px, 0.42vh, 5px); }
.rep__stats li { display: flex; align-items: baseline; gap: 6px; font-size: clamp(8px, 0.72vw, 10px); color: var(--silver-lo); }
.rep__stats b { font-size: clamp(10px, 0.95vw, 13.5px); font-weight: 700; color: #eef2ff; min-width: clamp(38px, 4vw, 58px); }
.rep__stats li.rep__full span { font-size: clamp(9px, 0.82vw, 11.5px); font-weight: 600; color: #eef2ff; }
.rep--hero .rep__stats li.rep__full span { background: linear-gradient(120deg, #eaf0ff, #b9caff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.rep--hero { background: linear-gradient(140deg, rgba(90,130,255,0.16), rgba(122,90,220,0.1)); border: 1px solid rgba(150,175,255,0.34); box-shadow: 0 12px 30px rgba(30,60,160,0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
.rep--hero .rep__ttl { color: #bcd0ff; }
.rep--hero .rep__stats b { background: linear-gradient(120deg, #eaf0ff, #b9caff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.rep--alt { background: rgba(255,255,255,0.022); border: 1px solid rgba(150,166,210,0.14); }
.rep__note { margin-top: 2px; padding-top: clamp(4px, 0.6vh, 7px); border-top: 1px solid rgba(150,166,210,0.14); font-size: clamp(6.5px, 0.58vw, 8px); line-height: 1.3; color: rgba(200,150,160,0.82); }

/* ---------- Mekanizma slaytı (karşılaştırma) ---------- */
.stage.qmech { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: clamp(8px, 1.1vh, 15px); }
.qmech__head { display: flex; flex-direction: column; gap: 6px; }
.qmech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.1vw, 38px); width: 100%; align-items: start; }
.qmech__col { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 34px); }
.qmech-block { display: flex; flex-direction: column; gap: clamp(5px, 0.75vh, 10px); }
.qmech-block__ttl { font-size: clamp(11px, 1vw, 15px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #cdd9ff; }
.qmech-block__ttl em { font-style: normal; font-weight: 500; color: #8ea0c6; letter-spacing: 0.04em; }
.qmech-row { display: flex; align-items: center; gap: clamp(8px, 1vw, 17px); }
.qmech-card {
  margin: 0;
  flex: 0 0 clamp(250px, 54%, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 14px;
  padding: clamp(5px, 0.5vw, 9px);
  background: linear-gradient(160deg, rgba(22,30,56,0.72), rgba(10,15,32,0.72));
  border: 1px solid rgba(120,150,255,0.18);
  box-shadow: 0 18px 46px -28px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.qmech-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.qmech-card--hero { border-color: rgba(150,175,255,0.32); }

.qmech-outs { flex: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.1vh, 15px); justify-content: center; min-width: 0; }
.qmech-out { display: flex; align-items: center; gap: clamp(6px, 0.7vw, 13px); }
.qmech-eq { flex: none; font-size: clamp(15px, 1.6vw, 24px); font-weight: 300; color: rgba(180,195,255,0.6); }
.qrap {
  flex: 1; min-width: 0;
  border-radius: 11px;
  padding: clamp(8px, 0.9vh, 13px) clamp(11px, 1.1vw, 17px);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(150,166,210,0.15);
}
.qrap--hero { background: linear-gradient(140deg, rgba(90,130,255,0.16), rgba(122,90,220,0.1)); border-color: rgba(150,175,255,0.34); box-shadow: 0 12px 30px -18px rgba(30,60,160,0.5); }
.qrap__hd { display: block; text-align: center; font-size: clamp(7px, 0.6vw, 9.5px); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: #7f90b8; margin-bottom: clamp(4px, 0.5vh, 7px); }
.qrap--hero .qrap__hd { color: #9db4ff; }
.qrap__list { list-style: none; display: flex; flex-direction: column; gap: clamp(2px, 0.35vh, 4px); }
.qrap__list li { font-size: clamp(9px, 0.82vw, 12.5px); color: #d3ddf5; line-height: 1.3; }
.qrap__list b { color: #eef2ff; font-weight: 700; }
.qrap--hero .qrap__list b { background: linear-gradient(120deg, #eaf0ff, #b9caff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Mekanizma: tek diyagram (büyük) ---------- */
.stage.qm1 { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(16px, 2.4vh, 34px); }
.qm1__head { display: flex; flex-direction: column; gap: clamp(4px, 0.6vh, 9px); }
.qm1__ttl { margin: 0; font-size: clamp(24px, 2.9vw, 46px); font-weight: 700; letter-spacing: -0.02em; color: #eef2ff; line-height: 1.04; }
.qm1__ttl em { font-style: normal; font-weight: 400; color: #8ea0c6; font-size: 0.52em; letter-spacing: 0.01em; }
.qm1__row { display: flex; align-items: center; gap: clamp(16px, 2vw, 36px); width: 100%; }
.qm1-card {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 20px;
  padding: clamp(9px, 1vw, 17px);
  background: linear-gradient(160deg, rgba(22,30,56,0.72), rgba(10,15,32,0.72));
  border: 1px solid rgba(120,150,255,0.18);
  box-shadow: 0 34px 90px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
.qm1-card--hero { border-color: rgba(150,175,255,0.34); box-shadow: 0 34px 90px -40px rgba(30,60,160,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
.qm1-card img { display: block; width: 100%; height: auto; border-radius: 13px; }
.qm1-outs { flex: 0 0 clamp(230px, 26%, 360px); display: flex; flex-direction: column; gap: clamp(12px, 1.7vh, 22px); }
.qm1 .qrap { padding: clamp(11px, 1.3vh, 19px) clamp(14px, 1.35vw, 23px); border-radius: 14px; }
.qm1 .qrap__hd { font-size: clamp(8px, 0.72vw, 11px); margin-bottom: clamp(6px, 0.75vh, 11px); }
.qm1 .qrap__list { gap: clamp(3px, 0.5vh, 6px); }
.qm1 .qrap__list li { font-size: clamp(11.5px, 1.05vw, 16px); }
.qm1 .qmech-eq { font-size: clamp(18px, 2.1vw, 32px); }
.qm1 .qmech-out { gap: clamp(8px, 1vw, 16px); }

/* ---------- Mekanizma: tek sayfada (temiz + 2 rapor kartı) ---------- */
.stage.qm3 { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(6px, 0.9vh, 11px); }
.qm3__head { display: flex; flex-direction: column; gap: clamp(1px, 0.25vh, 4px); }
.qm3__ttl { margin: 0; font-size: clamp(15px, 1.7vw, 25px); font-weight: 700; letter-spacing: -0.02em; color: #eef2ff; line-height: 1.05; }
.qm3__list { display: flex; flex-direction: column; gap: clamp(9px, 1.3vh, 18px); width: 100%; }
.qm3x-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.9vw, 32px); width: 100%; align-items: start; padding-top: clamp(8px, 1.1vh, 15px); border-top: 1px solid rgba(150,166,210,0.1); }

.qm3x-item { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.6vh, 8px); }
.qm3x-item--disi { opacity: 0.9; }

/* header */
.qm3x-hd { display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); width: 100%; }
.qm3x-bar { flex: none; width: clamp(18px, 2vw, 32px); height: 3px; border-radius: 999px; background: var(--qm3-accent, #7f8aa6); }
.qm3x-item--rakip { --qm3-accent: #8fa6d6; }
.qm3x-item--disi { --qm3-accent: #5b6482; }
.qm3x-ttl { font-size: clamp(11.5px, 1.08vw, 16px); font-weight: 700; letter-spacing: 0.01em; color: #eef2ff; }
.qm3x-item--disi .qm3x-ttl { color: #c7cede; }
.qm3x-sub { font-size: clamp(8px, 0.68vw, 10.5px); font-weight: 500; color: #8593ad; }
.qm3x-item--disi .qm3x-sub { color: #737c92; }
.qm3x-badge { margin-left: auto; flex: none; font-size: clamp(7px, 0.56vw, 9px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px clamp(8px, 0.8vw, 12px); border-radius: 999px; }
.qm3x-badge--rakip { color: #c6d6ff; background: rgba(120,150,255,0.15); border: 1px solid rgba(150,175,255,0.34); }
.qm3x-badge--disi { color: #9aa3b8; background: rgba(150,160,185,0.07); border: 1px solid rgba(150,160,185,0.22); }

/* diagram: yükseklik kontrollü (yeni kompakt görseller) */
.qm3x-fig { margin: 0; width: 100%; display: flex; justify-content: center; }
.qm3x-fig img { display: block; width: auto; max-width: 100%; height: clamp(150px, 20.5vh, 220px); border-radius: 10px; }
.qm3x-pair .qm3x-fig img { height: clamp(120px, 16.5vh, 172px); }
.qm3x-item--disi .qm3x-fig img { filter: saturate(0.82); }

/* wide (Global Rakipler): diagram sol + kartlar sağ */
.qm3x-body { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 1.9vw, 34px); width: 100%; }
.qm3x-item--wide .qm3x-fig { flex: 0 1 auto; min-width: 0; }
.qm3x-reports--side { flex: 0 0 clamp(240px, 33%, 390px); flex-direction: column; flex-wrap: nowrap; }
.qm3x-reports--side .qm3x-rc { flex: 1 1 auto; }

/* 2 report cards */
.qm3x-reports { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 0.9vw, 15px); width: 100%; }
.qm3x-rc {
  flex: 1 1 clamp(150px, 44%, 260px); min-width: 0;
  border-radius: 10px;
  padding: clamp(6px, 0.7vh, 10px) clamp(10px, 1vw, 15px);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(150,166,210,0.13);
}
.qm3x-item--disi .qm3x-rc { background: rgba(255,255,255,0.018); }
.qm3x-rc__hd { display: block; font-size: clamp(6.5px, 0.58vw, 9px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9db4ff; margin-bottom: clamp(3px, 0.4vh, 6px); }
.qm3x-rc--manual .qm3x-rc__hd { color: #e0b06a; }
.qm3x-item--disi .qm3x-rc__hd { color: #8b93a8; }
.qm3x-item--disi .qm3x-rc--manual .qm3x-rc__hd { color: #c39a63; }
.qm3x-rc__m { display: flex; flex-wrap: wrap; gap: clamp(2px, 0.35vh, 5px) clamp(6px, 0.7vw, 11px); }
.qm3x-rc__m span { font-size: clamp(8.5px, 0.76vw, 11.5px); color: #cdd6ea; line-height: 1.25; }
.qm3x-rc__m b { color: #eef2ff; font-weight: 700; margin-right: 3px; }
.qm3x-item--disi .qm3x-rc__m span { color: #aab2c6; }
.qm3x-item--disi .qm3x-rc__m b { color: #d2d8e6; }

/* ============ SLIDE · KARŞILAŞTIRMA (Comparison tables) ============ */
.qcmp-slide { padding: clamp(40px, 5vh, 72px) clamp(30px, 4.4vw, 84px); }
.stage.qcmp { max-width: 1420px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(9px, 1.5vh, 17px); }
.qcmp__head { display: flex; flex-direction: column; gap: clamp(2px, 0.4vh, 5px); }
.qcmp__head .eyebrow { margin-bottom: clamp(2px, 0.5vh, 6px); }
.qcmp__ttl { margin: 0; font-size: clamp(18px, 2.05vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: #eef2ff; line-height: 1.06; }
.qcmp__ttl .en { font-weight: 600; }
.qcmp__sub { margin: 0; font-size: clamp(11px, 1.02vw, 14.5px); color: var(--silver-lo); font-weight: 500; letter-spacing: 0.01em; }

.qcmp__table {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(150,166,210,0.14);
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,24,46,0.5), rgba(9,11,24,0.36));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.qcmp__row {
  --rowh: clamp(28px, 3.4vh, 40px);
  min-height: var(--rowh);
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) repeat(4, minmax(0, 1fr));
  align-items: center;
  border-bottom: 1px solid rgba(150,166,210,0.075);
}
.qcmp__row:last-child { border-bottom: 0; }
.qcmp__row--head {
  min-height: 0;
  background: rgba(19,25,50,0.72);
  border-bottom: 1px solid rgba(150,166,210,0.22);
}
.qcmp__cap {
  padding: clamp(2px,0.4vh,6px) clamp(11px,1.2vw,20px);
  font-size: clamp(9.5px, 0.86vw, 13px);
  color: #d4dbef;
  line-height: 1.16;
  overflow-wrap: break-word;
}
.qcmp__row--head .qcmp__cap,
.qcmp__row--head .qcmp__col {
  font-size: clamp(8px, 0.74vw, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #aab5d4;
  padding-top: clamp(6px,0.9vh,11px);
  padding-bottom: clamp(6px,0.9vh,11px);
  line-height: 1.12;
}
.qcmp__col { text-align: center; padding: 0 4px; }
.qcmp__cell { display: flex; align-items: center; justify-content: center; height: 100%; }

/* Qlaritics column highlight (continuous vertical band) */
.qcmp__row .qcmp__col--q { background: rgba(72,120,255,0.11); box-shadow: inset 1px 0 0 rgba(120,150,255,0.22), inset -1px 0 0 rgba(120,150,255,0.22); }
.qcmp__row--head .qcmp__col--q { background: rgba(72,120,255,0.22); color: #d3ddff; letter-spacing: 0.05em; }

/* marks */
.mk { display: inline-block; line-height: 1; font-size: clamp(11px, 1.05vw, 15px); font-weight: 700; }
.mk--y::before { content: "\2713"; color: #46cf9b; }
.mk--p::before { content: "\25d0"; color: #f2b34b; }
.mk--n::before { content: "\2715"; color: #e06a72; font-weight: 600; }
.qcmp__col--q .mk--y::before { color: #7ee7bb; filter: drop-shadow(0 0 6px rgba(90,220,170,0.35)); }
.qcmp__num { font-size: clamp(9.5px, 0.92vw, 13.5px); font-weight: 700; color: #dee4f6; letter-spacing: -0.01em; }
.qcmp__col--q .qcmp__num { color: #eef3ff; }
.qcmp__na { color: #565d7c; font-weight: 600; }

/* ---- Matrix (standalone, roomier rows, vertically centered) ---- */
.stage.qcmp--matrix { justify-content: center; }
.qcmp--matrix .qcmp__table { flex: 0 1 auto; }
.qcmp--matrix .qcmp__row { --rowh: clamp(25px, 3vh, 35px); }
.qcmp--matrix .qcmp__cell { min-width: 0; padding: 0 5px; }

/* text-valued cells (architecture / depth descriptors) */
.qcmp__txt { display: block; min-width: 0; max-width: 100%; overflow-wrap: break-word; text-align: center; font-size: clamp(8.5px, 0.8vw, 11.5px); font-weight: 600; line-height: 1.18; color: #cfd6ea; padding: 2px 0; }
.qcmp__col--q .qcmp__txt { color: #eef3ff; }

/* Karşılaştırma sayfaları · sesli anlatım: Qlaritics sütun değerleri sırayla
   ÇOK HAFİF, KOYU NEON MAVİ ve İNCE bir ışıkla parlar. Hareket yok — yalnızca
   yumuşak bir parlama (glow) belirir ve kalır. (Matris + çok bölümlü sayfalar) */
.qcmp.is-narr .qcmp__cell.qcmp__col--q {
  transition: box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.qcmp.is-narr .qcmp__cell.qcmp__col--q.is-lit {
  background-color: rgba(22,58,190,0.22);
  box-shadow: inset 1px 0 0 rgba(60,110,240,0.7), inset -1px 0 0 rgba(60,110,240,0.7),
              0 0 6px rgba(24,66,220,0.55);
}
.qcmp.is-narr .qcmp__cell.qcmp__col--q.is-lit .qcmp__num,
.qcmp.is-narr .qcmp__cell.qcmp__col--q.is-lit .qcmp__txt {
  color: #eaf1ff; text-shadow: 0 0 5px rgba(40,96,235,0.8);
}
.qcmp.is-narr .qcmp__cell.qcmp__col--q.is-lit .mk--y::before {
  color: #7ee7bb; filter: drop-shadow(0 0 4px rgba(30,86,230,0.75));
}

/* ---- Multi (2 sections stacked vertically, full width) ---- */
.stage.qcmp--multi { max-width: 1440px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
.qcmp-stack { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); justify-content: center; margin-bottom: auto; }
.qcmp-sec { display: flex; flex-direction: column; gap: clamp(4px, 0.6vh, 8px); min-width: 0; }
.qcmp-stack .qcmp-sec { flex: 0 0 auto; min-height: 0; }
.qcmp-sec__hd { display: flex; align-items: baseline; gap: clamp(9px,0.9vw,14px); flex: 0 0 auto; }
.qcmp-sec__no { font-size: clamp(12px,1.2vw,18px); font-weight: 800; color: #6f8cff; letter-spacing: 0.01em; flex: none; }
.qcmp-sec__ttl { margin: 0; font-size: clamp(12px,1.18vw,17px); font-weight: 700; color: #eef2ff; letter-spacing: -0.01em; line-height: 1.1; }
.qcmp-sec__theme { font-size: clamp(8.5px,0.76vw,11.5px); color: var(--silver-lo); }
.qcmp-sec__theme::before { content: "·"; margin: 0 clamp(6px,0.6vw,9px) 0 clamp(1px,0.3vw,4px); color: rgba(150,166,210,0.55); }
.qcmp--multi .qcmp__table { flex: 0 0 auto; min-height: 0; }
.qcmp--multi .qcmp__row { flex: 0 0 auto; min-height: clamp(15px, 1.85vh, 21px); grid-template-columns: minmax(0,1fr) repeat(4, clamp(116px,12.5vw,190px)); }
.qcmp--multi .qcmp__row--head { flex: 0 0 auto; min-height: 0; }
.qcmp--multi .qcmp__row:nth-child(2n) { background: rgba(255,255,255,0.018); }
.qcmp--multi .qcmp__cap { font-size: clamp(8.5px, 0.78vw, 11.5px); }
.qcmp--multi .mk { font-size: clamp(9px, 0.9vw, 13px); }
.qcmp--multi .qcmp__row--head .qcmp__cap,
.qcmp--multi .qcmp__row--head .qcmp__col { font-size: clamp(7.5px, 0.68vw, 10px); }

/* ---- Dense slide (3 sections) — tighten just enough to fit topbar + all rows ---- */
.qcmp--dense .qcmp-stack { gap: clamp(7px, 1.1vh, 13px); }
.qcmp--dense .qcmp-sec { gap: clamp(2px, 0.35vh, 5px); }
.qcmp--dense .qcmp__row { min-height: clamp(13px, 1.55vh, 18px); }
.qcmp--dense .qcmp__cap { padding-top: clamp(1px, 0.22vh, 3px); padding-bottom: clamp(1px, 0.22vh, 3px); line-height: 1.1; }
.qcmp--dense .qcmp__row--head .qcmp__cap,
.qcmp--dense .qcmp__row--head .qcmp__col { padding-top: clamp(3px, 0.5vh, 6px); padding-bottom: clamp(3px, 0.5vh, 6px); }

/* ---- Single-section slide (tek bölüm, tam sayfa, ferah satırlar) ---- */
.stage.qcmp--single { max-width: 1440px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
.qcmp--single .qcmp-stack { justify-content: center; }
.qcmp--single .qcmp__table { flex: 0 0 auto; min-height: 0; }
.qcmp--single .qcmp__row { flex: 0 0 auto; min-height: clamp(20px, 2.4vh, 30px); grid-template-columns: minmax(0,1fr) repeat(4, clamp(116px,12.5vw,190px)); }
.qcmp--single .qcmp__row--head { flex: 0 0 auto; min-height: 0; }
.qcmp--single .qcmp__row:nth-child(2n) { background: rgba(255,255,255,0.018); }
.qcmp--single .qcmp__cap { font-size: clamp(9.5px, 0.86vw, 12.5px); }
.qcmp--single .mk { font-size: clamp(10px, 0.95vw, 14px); }
.qcmp--single .qcmp__row--head .qcmp__cap,
.qcmp--single .qcmp__row--head .qcmp__col { font-size: clamp(8px, 0.72vw, 10.5px); }

/* ---- Opener + Closing (text layouts) ---- */
.stage.qcmp--text { justify-content: center; gap: clamp(16px, 2.6vh, 30px); max-width: 1120px; }
.qcmp-open__lead, .qcmp-close__p {
  margin: 0;
  font-size: clamp(13px, 1.18vw, 17px);
  line-height: 1.62;
  color: #c4cbe0;
  max-width: 960px;
}
.qcmp-close__p + .qcmp-close__p { margin-top: clamp(10px, 1.6vh, 18px); }
.qcmp-close__note { margin: clamp(14px,2vh,22px) 0 0; font-size: clamp(10.5px, 0.9vw, 12.5px); line-height: 1.5; color: #838aa6; }

.qcmp-legend { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
.qcmp-legend span { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(11px, 1vw, 14px); color: #c0c7dd; }

/* Compact legend bar for comparison table slides */
.qcmp-legend--bar { flex: 0 0 auto; justify-content: flex-end; gap: clamp(14px, 1.8vw, 26px); margin: 0 2px clamp(8px, 1.2vh, 14px); }
.qcmp-legend--bar span { gap: 7px; font-size: clamp(9px, 0.82vw, 11.5px); color: #98a1bd; letter-spacing: 0.01em; }
.qcmp-legend--bar .mk { transform: scale(0.82); }

/* Top bar: single compact row — KPI (left) + legend (right), aligned with the table above it */
/* KPI (endeks) kartları sağa alınır → sesli anlatım butonunun altında kalmaz;
   lejantın ("Destekleniyor") hemen soluna yerleşir. */
.qcmp-topbar { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 26px); margin: auto 2px clamp(6px, 1vh, 11px); }
.qcmp-topbar .qcmp-legend--bar { margin: 0; }
.qcmp-kpi {
  display: flex; align-items: center; gap: clamp(11px, 1.2vw, 18px);
  padding: clamp(7px, 0.95vh, 11px) clamp(12px, 1.25vw, 18px);
  border: 1px solid rgba(110,150,255,0.2);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(30,44,96,0.24), rgba(12,16,36,0.2));
  box-shadow: 0 0 18px rgba(72,120,255,0.06);
}
.qcmp-kpi__item { display: flex; flex-direction: column; gap: clamp(2px, 0.45vh, 4px); }
.qcmp-kpi__item + .qcmp-kpi__item { padding-left: clamp(12px, 1.3vw, 18px); border-left: 1px solid rgba(150,166,210,0.14); }
.qcmp-kpi__lbl { font-size: clamp(6.5px, 0.58vw, 8px); text-transform: uppercase; letter-spacing: 0.06em; color: #8f98b6; }
.qcmp-kpi__q { display: inline-flex; align-items: baseline; gap: clamp(4px, 0.5vw, 7px); white-space: nowrap; }
.qcmp-kpi__brand { font-size: clamp(6.5px, 0.58vw, 8.5px); font-weight: 700; letter-spacing: 0.02em; color: #8fa6ff; padding: clamp(1px,0.3vh,3px) clamp(4px,0.5vw,6px); border: 1px solid rgba(110,150,255,0.32); border-radius: 999px; background: rgba(72,120,255,0.09); }
.qcmp-kpi__val { font-size: clamp(11px, 1.05vw, 15px); font-weight: 800; color: #cddaff; line-height: 1.1; }
.qcmp-kpi__cmp { font-size: clamp(6.5px, 0.58vw, 8px); color: #7e86a2; margin-left: clamp(2px,0.3vw,4px); }

.qcmp-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); width: 100%; }
.qcmp-col-card {
  border: 1px solid rgba(150,166,210,0.14);
  border-radius: 13px;
  padding: clamp(13px, 1.5vw, 20px);
  background: linear-gradient(180deg, rgba(20,24,46,0.5), rgba(9,11,24,0.34));
  display: flex; flex-direction: column; gap: clamp(5px, 0.8vh, 9px);
}
.qcmp-col-card--q { border-color: rgba(110,150,255,0.4); background: linear-gradient(180deg, rgba(40,70,150,0.34), rgba(16,26,60,0.3)); box-shadow: 0 0 34px rgba(72,120,255,0.14); }
.qcmp-col-card h4 { margin: 0; font-size: clamp(12.5px, 1.15vw, 16px); font-weight: 700; color: #eef2ff; letter-spacing: -0.01em; }
.qcmp-col-card--q h4 { color: #cddaff; }
.qcmp-col-card__logo { height: clamp(20px, 1.95vw, 27px); width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; display: block; margin: clamp(2px,0.4vh,4px) 0; }
.qcmp-col-card p { margin: 0; font-size: clamp(10.5px, 0.92vw, 13px); line-height: 1.45; color: var(--silver-lo); }

.qcmp-note {
  display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 18px);
  width: 100%;
  border: 1px solid rgba(150,166,210,0.14);
  border-left: 3px solid rgba(110,150,255,0.55);
  border-radius: 12px;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 22px);
  background: linear-gradient(180deg, rgba(16,20,40,0.42), rgba(9,11,24,0.28));
}
.qcmp-note__tag {
  flex: none;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8fa6ff;
  padding: clamp(3px,0.4vh,5px) clamp(8px,0.8vw,12px);
  border: 1px solid rgba(110,150,255,0.3);
  border-radius: 999px;
  margin-top: 2px;
}
.qcmp-note p { margin: 0; font-size: clamp(10.5px, 0.92vw, 13px); line-height: 1.55; color: #aab2cc; }
.qcmp-note p b { color: #dfe6ff; font-weight: 600; }

/* ---------- Açılış (Platform Konumlandırması) · sesli anlatım ----------
   Sadece Qlaritics kartı ve Not kartı; çok hafif, çok yavaş dalga + yumuşak parlama.
   Yalnızca 2 öğe olduğundan geçiş ucuz — parlama yumuşakça belirir. */
@keyframes qopenBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.qcmp--text.is-narr .qcmp-col-card--q,
.qcmp--text.is-narr .qcmp-note {
  transition: box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.qcmp--text.is-narr .qcmp-col-card--q.is-lit {
  position: relative; z-index: 2;
  border-color: rgba(150,180,255,0.75);
  box-shadow: 0 16px 42px rgba(50,110,240,0.36), 0 0 0 1px rgba(150,178,255,0.5), 0 0 52px rgba(90,140,246,0.4);
  animation: qopenBob 3.4s ease-in-out infinite;
}
.qcmp--text.is-narr .qcmp-note.is-lit {
  position: relative; z-index: 2;
  border-color: rgba(150,180,255,0.5);
  border-left-color: rgba(150,180,255,0.95);
  box-shadow: 0 16px 42px rgba(50,110,240,0.3), 0 0 0 1px rgba(150,178,255,0.42), 0 0 46px rgba(90,140,246,0.32);
  animation: qopenBob 3.6s ease-in-out infinite;
}
.qcmp--text.is-narr:not(.is-live) .is-lit { animation-play-state: paused; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  [data-reveal] { transition-duration: 0.2s; }
}

/* ============================================================
   GİRİŞ KAPISI (login gate)
   ============================================================ */
.login-gate { display: none; }
body.is-locked .login-gate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Kilitliyken sunumun kendisi tamamen gizli. */
body.is-locked #deck,
body.is-locked .chrome,
body.is-locked .brand-mini,
body.is-locked .hint,
body.is-locked .continue-hint,
body.is-locked .progress { display: none !important; }
body.is-locked { overflow: hidden; }

.login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 28%, #182142 0%, #0b1120 58%, #070a13 100%);
}
.login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(58,96,200,0.18), transparent 70%);
  opacity: 0.9;
}

.login-card {
  position: relative;
  z-index: 1;
  width: clamp(300px, 27vw, 350px);
  box-sizing: border-box;
  padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 30px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(24,31,52,0.78), rgba(16,21,38,0.82));
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
          backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(4,8,20,0.6), 0 0 0 1px rgba(120,150,255,0.05);
  animation: loginIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.login-brand__logo { height: clamp(30px, 3.4vh, 38px); width: auto; display: block; }
.login-brand__icon { height: 26px; width: auto; display: block; }
.login-brand__name {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: #f4f7ff;
}
.login-sub {
  margin: 5px 0 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(180,195,230,0.55);
}

.login-field { margin-top: 16px; }
.login-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(190,205,240,0.72);
}
.login-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
  color: #eef3ff;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.login-field input::placeholder { color: rgba(160,175,210,0.4); }
.login-field input:focus {
  border-color: rgba(74,120,240,0.75);
  background: rgba(40,60,120,0.22);
  box-shadow: 0 0 0 3px rgba(52,96,230,0.16);
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eef3ff;
  -webkit-box-shadow: 0 0 0 1000px rgba(30,40,70,0.9) inset;
  caret-color: #eef3ff;
}

.login-error {
  min-height: 0;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #ff8a8a;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, max-height 0.25s ease, transform 0.25s ease, margin 0.25s ease;
}
.login-error.is-show { opacity: 1; max-height: 40px; transform: none; }

.login-submit {
  width: 100%;
  margin-top: 18px;
  padding: 11px 14px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(180deg, #3a76ff, #2f63f0);
  box-shadow: 0 8px 22px rgba(38,84,225,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: filter 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.login-submit:hover { filter: brightness(1.08); box-shadow: 0 10px 26px rgba(38,84,225,0.5), inset 0 1px 0 rgba(255,255,255,0.22); }
.login-submit:active { transform: translateY(1px) scale(0.995); }

/* Hatalı girişte kartı hafifçe salla. */
.login-card.shake { animation: loginShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes loginShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* Başarılı girişte kapı yumuşakça kapanır. */
body.is-unlocking .login-gate { animation: loginOut 0.4s ease both; pointer-events: none; }
@keyframes loginOut { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .login-card, .login-card.shake, body.is-unlocking .login-gate { animation: none; }
}

/* ---------- Giriş kapısı · "veya" ayıracı + yüz ile giriş butonu ---------- */
.login-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 2px;
  color: rgba(160,175,210,0.42);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.login-or::before, .login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.09);
}
.login-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #dbe6ff;
  border: 1px solid rgba(120,150,255,0.28);
  background: rgba(60,90,190,0.12);
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.login-alt svg { color: #9fbdff; }
.login-alt:hover {
  border-color: rgba(150,180,255,0.5);
  background: rgba(70,105,215,0.2);
  color: #f2f6ff;
}

/* ---------- Yüz tanıma paneli ---------- */
.login-face { text-align: center; }

.face-stage {
  position: relative;
  width: clamp(150px, 15vw, 178px);
  height: clamp(150px, 15vw, 178px);
  margin: 16px auto 4px;
}
.face-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #0a0e1a;
  transform: scaleX(-1); /* ayna görüntüsü */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.face-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(120,150,255,0.28);
  box-shadow: 0 0 0 1px rgba(120,150,255,0.12), 0 0 26px rgba(60,110,240,0.25);
  overflow: hidden;
  pointer-events: none;
}
/* Tararken dönen ışıklı yay + yukarı-aşağı süpüren tarama çizgisi */
.face-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg,
              rgba(120,175,255,0.35) 300deg, #bcd6ff 335deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: faceSpin 1.5s linear infinite;
}
.face-scan {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(150,195,255,0.95), transparent);
  box-shadow: 0 0 12px rgba(120,170,255,0.8);
  opacity: 0;
}
.face-stage.is-scanning .face-ring::after { opacity: 1; }
.face-stage.is-scanning .face-scan { opacity: 1; animation: faceScan 1.4s ease-in-out infinite; }
.face-stage.is-scanning .face-video { filter: brightness(1.05) contrast(1.03); }
@keyframes faceSpin { to { transform: rotate(360deg); } }
@keyframes faceScan {
  0% { top: 8%; }
  50% { top: 90%; }
  100% { top: 8%; }
}

.login-face.is-ok .face-ring {
  border-color: rgba(90,220,150,0.7);
  box-shadow: 0 0 0 1px rgba(90,220,150,0.3), 0 0 30px rgba(60,200,130,0.4);
}

.face-status {
  margin: 6px 0 0;
  min-height: 16px;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(200,212,240,0.8);
}

/* Rehberli kayıt adım göstergesi (düz · sağ · sol) */
.face-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 8px 0 2px;
}
.face-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.face-dot.is-active {
  background: rgba(120,165,255,0.9);
  box-shadow: 0 0 10px rgba(90,140,250,0.8);
  transform: scale(1.15);
}
.face-dot.is-done {
  background: #55d68a;
  box-shadow: 0 0 8px rgba(70,200,130,0.6);
  transform: none;
}

.login-face .login-submit { margin-top: 14px; }

.face-enroll { margin-top: 12px; }
.face-toggle {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: rgba(150,180,255,0.85);
  padding: 4px 6px;
  transition: color 0.2s ease;
}
.face-toggle:hover { color: #cfe0ff; }
.face-toggle.is-open { color: #cfe0ff; }
.face-enroll__body { margin-top: 8px; text-align: left; }
.face-enroll__body .login-field { margin-top: 4px; }
.face-note {
  margin: 6px 0 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(170,190,225,0.72);
}

.login-submit--ghost {
  margin-top: 12px;
  background: rgba(60,90,190,0.16);
  border: 1px solid rgba(120,150,255,0.32);
  color: #e6eeff;
  box-shadow: none;
}
.login-submit--ghost:hover { background: rgba(70,105,215,0.26); filter: none; box-shadow: 0 6px 18px rgba(38,84,225,0.25); }

.login-back {
  display: inline-block;
  margin-top: 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(170,185,220,0.62);
  transition: color 0.2s ease;
}
.login-back:hover { color: #d6e2ff; }

.login-submit:disabled,
.login-submit--ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .face-ring::after, .face-scan { animation: none !important; }
}

/* ============================================================
   PORTAL / ANA MENÜ (giriş sonrası ara sayfa)
   ============================================================ */
.portal { display: none; }
body.is-portal .portal {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1500;
  padding: clamp(22px, 3.4vh, 40px) clamp(24px, 5vw, 72px);
  box-sizing: border-box;
  overflow-y: auto;
  animation: portalIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Portaldayken sunum ve gezinme öğeleri gizli. */
body.is-portal #deck,
body.is-portal .chrome,
body.is-portal .brand-mini,
body.is-portal .hint,
body.is-portal .continue-hint,
body.is-portal .progress { display: none !important; }
body.is-portal { overflow: hidden; }

@keyframes portalIn { from { opacity: 0; } to { opacity: 1; } }

.portal__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(58,96,200,0.16), transparent 60%),
    radial-gradient(80% 70% at 12% 100%, rgba(120,80,220,0.10), transparent 62%),
    radial-gradient(140% 120% at 50% 0%, #141c38 0%, #0b1120 56%, #070a13 100%);
}

/* ---- Üst bar ---- */
.portal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(18px, 2.6vh, 30px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.portal__logo { height: clamp(26px, 3vh, 34px); width: auto; display: block; }
.portal__user { display: flex; align-items: center; gap: 16px; }
.portal__who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.portal__hello { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(160,175,210,0.55); }
.portal__email { font-size: 13.5px; font-weight: 600; color: #e6eeff; }
.portal__logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(210,222,250,0.82);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.portal__logout:hover { background: rgba(230,90,110,0.14); border-color: rgba(235,110,130,0.4); color: #ffd9df; }

/* ---- Gövde: sol kategori navigasyonu + içerik ---- */
.portal__body {
  display: grid;
  grid-template-columns: clamp(202px, 17vw, 250px) 1fr;
  grid-template-rows: minmax(min-content, 1fr);
  gap: clamp(30px, 3.6vw, 60px);
  align-items: stretch;
  padding-top: clamp(22px, 3.2vh, 38px);
  flex: 1;
  min-height: 0;
}
.portal__nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 13px 18px;
  border-radius: 20px;
  background:
    radial-gradient(130% 42% at 22% 0%, rgba(74,108,214,0.12), transparent 62%),
    linear-gradient(180deg, rgba(24,32,57,0.66), rgba(12,17,32,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 46px rgba(4,8,18,0.42),
    inset 0 1px 0 rgba(255,255,255,0.05);
  align-self: stretch;
  min-height: 100%;
}
.portal__nav-hd {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(150,165,200,0.42);
  padding: 4px 12px 9px;
}
.portal__main {
  min-width: 0;
  position: relative;
  padding-top: 2px;
}
.portal-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: rgba(180,195,228,0.66);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.portal-tab svg { flex: none; opacity: 0.8; transition: opacity 0.2s ease; }
.portal-tab:hover { background: rgba(255,255,255,0.04); color: #d6e2ff; }
.portal-tab.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(60,96,205,0.26), rgba(46,74,175,0.16));
  border-color: rgba(120,150,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.portal-tab.is-active svg { opacity: 1; }

.portal__nav-div { height: 1px; margin: 8px 8px 6px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }
.portal-tab--admin { color: rgba(202,186,236,0.66); }
.portal-tab--admin.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(150,110,220,0.26), rgba(108,78,188,0.16));
  border-color: rgba(182,152,255,0.30);
}

/* ---- Menüye gömülü sesli asistan tetikleyicisi ---- */
.qla-launch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: auto 0 6px;
  padding: 11px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  isolation: isolate;
  border: 1px solid rgba(120,152,232,0.16);
  background:
    linear-gradient(180deg, rgba(38,54,98,0.62), rgba(18,26,48,0.58));
  box-shadow:
    0 10px 24px rgba(3,7,18,0.36),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(0.22,0.9,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.qla-launch:hover {
  transform: translateY(-1px);
  border-color: rgba(91,140,255,0.42);
  background: linear-gradient(180deg, rgba(46,66,118,0.72), rgba(20,30,56,0.62));
  box-shadow: 0 16px 32px rgba(3,7,18,0.46), 0 0 0 1px rgba(91,140,255,0.10), inset 0 1px 0 rgba(255,255,255,0.09);
}
/* sol kenarda ince kurumsal aksan */
.qla-launch__glow {
  position: absolute;
  left: 1px; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #39c7ff, #5b8cff 55%, #8a7bff);
  opacity: 0.8;
  transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.qla-launch:hover .qla-launch__glow,
.qla-launch.is-open .qla-launch__glow { opacity: 1; top: 10px; bottom: 10px; }

.qla-launch__av {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(150deg, #39c7ff, #5b8cff 60%, #8a7bff);
  box-shadow: 0 4px 12px rgba(63,96,220,0.32);
}
.qla-launch__av img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 32%;
  background: #0d1226;
}
.qla-launch.is-live .qla-launch__av::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(57,199,255,0.6);
  animation: qlaRing 1.9s ease-out infinite;
}
@keyframes qlaRing {
  0%   { transform: scale(0.94); opacity: 0.85; }
  100% { transform: scale(1.2); opacity: 0; }
}

.qla-launch__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qla-launch__tx b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #eef3ff;
  white-space: nowrap;
}
.qla-launch__tx span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(139,167,235,0.72);
  white-space: nowrap;
}
/* sağdaki arama düğmesi */
.qla-launch__cta {
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #a9c4ff;
  border: 1px solid rgba(120,152,232,0.22);
  background: rgba(91,140,255,0.10);
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.qla-launch:hover .qla-launch__cta {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(150deg, #5b8cff, #4a6cd6);
  box-shadow: 0 4px 12px rgba(63,96,220,0.42);
}
.qla-launch.is-live .qla-launch__cta {
  color: #062616;
  border-color: transparent;
  background: linear-gradient(150deg, #5ee9a0, #22c069);
  animation: qlaDot 1.9s ease-out infinite;
}
@keyframes qlaDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,192,105,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34,192,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,192,105,0); }
}

/* ---- İçerik panelleri ---- */
.portal-panel { display: none; animation: portalPanel 0.4s ease both; }
.portal-panel.is-active { display: block; }
@keyframes portalPanel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Alt bölümler (Yönetici Özel) ---- */
.portal-sub { display: none; }
.portal-sub.is-active { display: block; animation: portalPanel 0.32s ease both; }
.portal-subback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(182,196,228,0.72);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.portal-subback:hover { background: rgba(255,255,255,0.08); color: #d6e2ff; border-color: rgba(255,255,255,0.16); }

.portal-panel__hd { margin-bottom: clamp(18px, 2.6vh, 26px); }
.portal-panel__hd h2 {
  margin: 0 0 5px;
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f2f6ff;
}
.portal-panel__hd p { margin: 0; font-size: 13.5px; color: rgba(165,180,214,0.62); }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 26vw, 320px), 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

/* ---- Sunum kartı ---- */
.portal-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  font-family: inherit;
  color: inherit;
  background: linear-gradient(180deg, rgba(24,31,52,0.72), rgba(16,21,38,0.8));
  border: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 12px 34px rgba(5,9,20,0.4);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.portal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(120,150,255,0.36);
  box-shadow: 0 20px 48px rgba(20,40,120,0.4);
}
.portal-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(120px, 15vh, 158px);
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(96,128,240,0.32), transparent 62%),
    linear-gradient(135deg, #1c2748 0%, #121a30 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.portal-card__thumb img { height: 46%; width: auto; opacity: 0.96; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
.portal-card__thumb svg { color: #8fb0ff; opacity: 0.95; filter: drop-shadow(0 6px 18px rgba(20,40,120,0.45)); }
.portal-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #cfe0ff;
  background: rgba(60,96,205,0.32);
  border: 1px solid rgba(120,150,255,0.34);
}
.portal-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.portal-card__ttl { font-size: 16px; font-weight: 700; color: #f2f6ff; letter-spacing: -0.01em; }
.portal-card__sub { font-size: 12.5px; line-height: 1.45; color: rgba(168,183,216,0.66); }
.portal-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #8fb0ff;
  transition: gap 0.2s ease, color 0.2s ease;
}
.portal-card:hover .portal-card__cta { gap: 11px; color: #b8ceff; }

/* ---- Dijital varlıklar (link kartları) ---- */
.portal-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 24vw, 288px), 1fr));
  gap: clamp(12px, 1.3vw, 16px);
}
.portal-link {
  --lk: #5b8cff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(24,31,52,0.66), rgba(16,21,38,0.74));
  border: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 10px 26px rgba(5,9,20,0.32);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.portal-link:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lk) 55%, transparent);
  box-shadow: 0 16px 38px rgba(5,9,20,0.42);
  background: linear-gradient(180deg, rgba(28,36,60,0.72), rgba(18,24,44,0.8));
}
.portal-link__ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--lk);
  background: color-mix(in srgb, var(--lk) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--lk) 30%, transparent);
  transition: background 0.22s ease, color 0.22s ease;
}
.portal-link:hover .portal-link__ic { background: color-mix(in srgb, var(--lk) 26%, transparent); }
.portal-link__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.portal-link__ttl { font-size: 14.5px; font-weight: 700; color: #f2f6ff; letter-spacing: -0.01em; }
.portal-link__sub { font-size: 12px; color: rgba(168,183,216,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-link__go { flex: none; color: rgba(150,168,205,0.5); transition: color 0.22s ease, transform 0.22s ease; }
.portal-link:hover .portal-link__go { color: var(--lk); transform: translate(2px, -2px); }

.portal-link--web { --lk: #5b8cff; }
.portal-link--linkedin { --lk: #3d92e0; }
.portal-link--instagram { --lk: #e1508f; }
.portal-link--x { --lk: #cfd8e8; }
.portal-link--youtube { --lk: #ff4d4d; }

/* ---- Boş durum (yakında) ---- */
.portal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(180px, 30vh, 280px);
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(150,165,200,0.5);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.portal-empty svg { opacity: 0.5; }

/* ---- Portal alt bilgi (footer) ---- */
.portal__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 4.5vh, 48px);
  padding-top: clamp(16px, 2.4vh, 24px);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.portal__footer-brand { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 560px; max-width: 780px; }
.portal__footer-brand img { height: clamp(19px, 2.3vh, 25px); width: auto; opacity: 0.9; flex: none; margin-top: 1px; }
.portal__footer-copy { font-size: 10.5px; line-height: 1.7; color: rgba(150,165,200,0.44); }
.portal__footer-eco { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.portal__footer-eco-lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(150,165,200,0.42); }
.portal__footer-brands { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
.pf-logo { width: auto; display: block; opacity: 0.9; transition: opacity 0.2s ease; }
.pf-logo:hover { opacity: 1; }
.pf-logo--alnixa { height: clamp(13px, 1.55vh, 16px); }
.pf-logo--adwixa { height: clamp(21px, 2.7vh, 27px); }
.pf-logo--adlifty { height: clamp(18px, 2.3vh, 23px); }

@media (max-width: 720px) {
  .portal__body { grid-template-columns: 1fr; }
  .portal__nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .portal__nav-hd { width: 100%; }
  .portal-tab { width: auto; }
  .qla-launch { width: auto; margin: 0; }
  .portal__main { padding-left: 0; }
  .portal__main::before { display: none; }
  .portal__footer { justify-content: flex-start; }
  .portal__footer-eco { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-portal .portal, .portal-panel, .portal-card { animation: none; transition: none; }
  .qla-launch, .qla-launch__cta { animation: none; transition: none; }
  .qla-launch.is-live .qla-launch__av::after { animation: none; opacity: 0; }
}