/* ============================================================================
   simurgh.media — design system v2
   Cinematic edition: Three.js stage, pinned scroll, kinetic type
   ============================================================================ */

:root {
  --sm-purple-900: #2a0c3d;
  --sm-purple-800: #3d1654;
  --sm-purple-700: #5a1f7a;
  --sm-purple-600: #7b2d9b;
  --sm-magenta-500: #c13584;
  --sm-pink-500: #e84a6e;
  --sm-coral-400: #f0395b;

  --sm-grad:        linear-gradient(135deg, #7b2d9b 0%, #c13584 50%, #e84a6e 100%);
  --sm-grad-soft:   linear-gradient(135deg, rgba(123,45,155,.18), rgba(193,53,132,.16), rgba(232,74,110,.16));
  --sm-grad-vivid:  linear-gradient(135deg, #5a1f7a, #c13584 60%, #e84a6e);
  --sm-grad-warm:   linear-gradient(135deg, #ffd76b, #ff9aa8 60%, #f0395b);

  /* Dark — the only palette */
  --sm-bg:        #06030d;
  --sm-bg-soft:   #0c0618;
  --sm-bg-card:   #110926;
  --sm-surface:   #110926b3;
  --sm-fg:        #f3eaff;
  --sm-fg-soft:   #c8b8d8;
  --sm-fg-mute:   #8d7fa0;
  --sm-line:      rgba(255,255,255,.10);
  --sm-line-2:    rgba(255,255,255,.05);
  --sm-shadow:    0 4px 14px rgba(0,0,0,.5), 0 40px 100px -20px rgba(120,40,180,.35);
  --sm-glass:     rgba(10,4,22,.5);

  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-soft:   cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 44px;

  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
}

/* ============================================================================
   Base
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--sm-bg);
  color: var(--sm-fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01","ss02","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background .6s var(--ease-out), color .6s var(--ease-out);
}
::selection { background: var(--sm-magenta-500); color: #fff; }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease-out); }
a:hover { color: var(--sm-magenta-500); }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sm-purple-600), var(--sm-pink-500)); border-radius: 999px; border: 2px solid var(--sm-bg); }

/* ============================================================================
   Typography
   ============================================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.0;
}
.section-title em,
.hero-title em,
.manifesto em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.01em;
}

.grad-text {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-fg-soft);
  margin-bottom: 1.25rem;
}
.eyebrow-light { color: rgba(255,255,255,.85); }
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sm-magenta-500);
  box-shadow: 0 0 0 4px rgba(193,53,132,.15);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(193,53,132,0); } }

.section-sub {
  color: var(--sm-fg-soft);
  font-size: 1.06rem;
  max-width: 64ch;
  margin-top: 1rem;
  line-height: 1.6;
}
.lead-soft {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--sm-fg-soft);
  line-height: 1.7;
}
.hl {
  background: linear-gradient(120deg, rgba(193,53,132,.18), rgba(232,74,110,.12));
  padding: .05em .25em;
  border-radius: 6px;
}

/* ============================================================================
   Layout helpers
   ============================================================================ */
.section { padding: clamp(5rem, 10vw, 10rem) 0; position: relative; }
.section-head { max-width: 760px; margin: 0 auto 3.5rem; text-align: center; }
.section-head .section-sub { margin-inline: auto; }
.section-dark { background: var(--sm-bg-soft); border-top: 1px solid var(--sm-line-2); border-bottom: 1px solid var(--sm-line-2); }

/* ============================================================================
   Buttons
   ============================================================================ */
.btn-pill {
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-weight: 500;
  font-size: .94rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  position: relative;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}
.btn-pill.btn-lg { padding: 1.05rem 1.85rem; font-size: 1rem; }
.btn-primary-grad {
  color: #fff;
  background: var(--sm-grad);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 24px -8px rgba(193,53,132,.55),
    0 30px 80px -20px rgba(123,45,155,.45);
}
.btn-primary-grad:hover {
  color: #fff;
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 14px 32px -8px rgba(193,53,132,.7),
    0 38px 100px -20px rgba(123,45,155,.55);
}
.btn-primary-grad i { transition: transform .35s var(--ease-out); }
.btn-primary-grad:hover i { transform: translate(2px,-2px); }

.btn-ghost {
  color: var(--sm-fg);
  background: transparent;
  border: 1px solid var(--sm-line);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  color: var(--sm-fg);
  background: var(--sm-line-2);
  border-color: var(--sm-line);
}

/* ============================================================================
   Grain & vignette
   ============================================================================ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ============================================================================
   Cursor
   ============================================================================ */
.cursor-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
@media (hover: none), (pointer: coarse) { .cursor-canvas { display: none; } }

/* ============================================================================
   Scroll progress
   ============================================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 1100;
  pointer-events: none;
}
.scroll-progress > span {
  display: block; height: 100%; width: 0%;
  background: var(--sm-grad);
  transition: width .12s linear;
}

/* ============================================================================
   Loader
   ============================================================================ */
.loader {
  position: fixed; inset: 0; z-index: 10001;
  background: var(--sm-bg);
  display: grid; place-items: center;
  transition: opacity .9s var(--ease-out), visibility .9s var(--ease-out);
}
.loader.is-out { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-bird { animation: birdSpin 4s linear infinite; }
@keyframes birdSpin { to { transform: rotate(360deg); } }
.loader-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawBird 2.2s var(--ease-out) forwards, drawBird2 2.2s var(--ease-out) infinite alternate-reverse;
}
@keyframes drawBird {
  to { stroke-dashoffset: 0; }
}
@keyframes drawBird2 {
  0%,100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 200; }
}
.loader-meta {
  margin-top: 1.5rem;
  display: flex; gap: 1.2rem;
  align-items: baseline; justify-content: center;
  font-family: var(--font-display);
}
.loader-text { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 500; letter-spacing: -.02em; }
.loader-text i { font-style: normal; background: var(--sm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader-count { font-variant-numeric: tabular-nums; color: var(--sm-fg-mute); font-size: .9rem; letter-spacing: .05em; }
.loader-count i { font-style: normal; opacity: .6; margin-left: 2px; }
.loader-bar {
  margin-top: 1.2rem;
  width: 240px;
  height: 1.5px;
  background: var(--sm-line);
  border-radius: 999px;
  overflow: hidden;
  margin-inline: auto;
}
.loader-bar span {
  display: block; height: 100%; width: 0%;
  background: var(--sm-grad);
  animation: loadBar 1.8s var(--ease-in-out) forwards;
}
@keyframes loadBar { 0%{width:0%} 60%{width:80%} 100%{width:100%} }

/* ============================================================================
   Navbar
   ============================================================================ */
.nav-glass {
  background: var(--sm-glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), padding .35s var(--ease-out);
  padding-block: .85rem;
}
.nav-glass.is-scrolled {
  border-bottom-color: var(--sm-line);
  padding-block: .55rem;
}
.navbar-brand { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; font-size: 1.2rem; color: var(--sm-fg); }
.brand-mark { width: 30px; height: 30px; display: inline-grid; place-items: center; filter: drop-shadow(0 4px 14px rgba(193,53,132,.4)); transition: transform .5s var(--ease-out); }
.navbar-brand:hover .brand-mark { transform: rotate(20deg) scale(1.08); }
.brand-dot { font-style: normal; background: var(--sm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.navbar-nav .nav-link {
  color: var(--sm-fg-soft);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .95rem !important;
  border-radius: 999px;
  position: relative;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
.navbar-nav .nav-link:hover { color: var(--sm-fg); background: var(--sm-line-2); }
.navbar-nav .nav-link.active { color: var(--sm-fg); }
.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--sm-grad);
}

.navbar-toggler { padding: .5rem; }
.navbar-toggler:focus { box-shadow: none; }
.toggler-bars { display: inline-block; position: relative; width: 24px; height: 16px; }
.toggler-bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--sm-fg); border-radius: 2px; transition: transform .3s var(--ease-out); }
.toggler-bars i:nth-child(1) { top: 4px; }
.toggler-bars i:nth-child(2) { top: 12px; }

/* ===== Navbar dropdown (Hizmetler submenu) ===== */
.nav-has-dd {
  position: relative;
}
.nav-chevron {
  font-size: .58rem;
  margin-left: .25rem;
  opacity: .55;
  transition: transform .35s var(--ease-out), opacity .25s;
  display: inline-block;
}
.nav-has-dd:hover .nav-chevron,
.nav-has-dd:focus-within .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 380px;
  padding: .55rem;
  border-radius: 18px;
  background: rgba(12,6,24,.92);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 30px 80px -20px rgba(0,0,0,.7),
    0 12px 40px -12px rgba(123,45,155,.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity .3s var(--ease-out),
    transform .35s var(--ease-out),
    visibility .35s var(--ease-out);
  z-index: 1050;
}
.nav-dd::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0; right: 0;
  height: 12px;
}
.nav-has-dd:hover > .nav-dd,
.nav-has-dd:focus-within > .nav-dd {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dd-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  color: var(--sm-fg-soft);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), gap .25s var(--ease-out);
  text-decoration: none;
}
.nav-dd-item:hover {
  background: rgba(193,53,132,.08);
  color: var(--sm-fg);
  gap: 1rem;
}
.nav-dd-no {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  flex-shrink: 0;
  width: 22px;
}
.nav-dd-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  line-height: 1.2;
  min-width: 0;
}
.nav-dd-name {
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--sm-fg);
}
.nav-dd-desc {
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: 0;
}
.nav-dd-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: .4rem .5rem;
}
.nav-dd-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .9rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: #fff;
  background: linear-gradient(135deg, rgba(123,45,155,.18), rgba(232,74,110,.14));
  border: 1px solid rgba(193,53,132,.3);
  transition: background .3s var(--ease-out), gap .25s var(--ease-out), border-color .3s;
  text-decoration: none;
}
.nav-dd-all:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(123,45,155,.32), rgba(232,74,110,.24));
  border-color: rgba(232,74,110,.55);
}
.nav-dd-all i {
  font-size: .9rem;
  transition: transform .3s var(--ease-out);
}
.nav-dd-all:hover i { transform: translate(3px,-3px); }

/* hide on mobile — offcanvas takes over */
@media (max-width: 991.98px) {
  .nav-dd { display: none; }
  .nav-chevron { display: none; }
}

/* Mobile offcanvas — nested service sub-list */
.off-has-sub > a { margin-bottom: -.4rem; }
.off-sublist {
  list-style: none;
  padding: .4rem 0 .6rem 1.5rem;
  margin: 0 0 .25rem;
  border-left: 1px solid var(--sm-line);
  margin-left: .25rem;
}
.off-sublist li {
  border-bottom: 0;
}
.off-sublist a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 400;
  color: var(--sm-fg-soft);
  letter-spacing: -.005em;
  transition: color .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.off-sublist a:hover {
  color: var(--sm-magenta-500);
  padding-left: .35rem;
}
.off-sublist a span {
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* Offcanvas */
.nav-offcanvas {
  background: var(--sm-bg);
  color: var(--sm-fg);
  border-left: 1px solid var(--sm-line);
  width: 360px;
}
.btn-close-custom {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--sm-line-2);
  border: 0; color: var(--sm-fg);
  transition: transform .35s var(--ease-out);
}
.btn-close-custom:hover { transform: rotate(90deg); }
.off-list { list-style: none; padding: 0; margin: 0; }
.off-list li { border-bottom: 1px solid var(--sm-line-2); }
.off-list a {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--sm-fg);
  letter-spacing: -.015em;
}
.off-list a em {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--sm-fg-mute);
  margin-right: .25rem;
}
.off-list a i { margin-left: auto; transition: transform .35s var(--ease-out); }
.off-list a:hover { color: var(--sm-magenta-500); }
.off-list a:hover i { transform: translate(3px,-3px); }

/* ============================================================================
   HERO with Three.js
   ============================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: 120px;
  padding-bottom: 140px;   /* marquee + scroll cue için yer */
  overflow: hidden;
  isolation: isolate;
  /* Cosmic gradient backdrop unique to hero */
  background:
    radial-gradient(ellipse 80% 60% at 75% 50%, rgba(123,45,155,.20), transparent 60%),
    radial-gradient(ellipse 60% 80% at 30% 80%, rgba(232,74,110,.12), transparent 60%),
    linear-gradient(160deg, #06030d 0%, #0a0418 45%, #150829 100%);
}


.three-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* keep the canvas a viewport tall — never stretch with a long hero */
  height: 100svh;
  z-index: 0;
  pointer-events: auto;
}

.hero-mesh {
  position: absolute; inset: -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(60px) saturate(140%);
  opacity: .6;
}
.blob { position: absolute; border-radius: 50%; opacity: .55; mix-blend-mode: screen; animation: float 20s ease-in-out infinite; }
.blob-a { width: 50vmax; height: 50vmax; background: radial-gradient(circle at 30% 30%, #7b2d9b 0%, transparent 60%); top: -15%; left: -15%; }
.blob-b { width: 45vmax; height: 45vmax; background: radial-gradient(circle at 60% 50%, #c13584 0%, transparent 60%); top: 10%; right: -20%; animation-delay: -6s; }
.blob-c { width: 40vmax; height: 40vmax; background: radial-gradient(circle at 50% 50%, #e84a6e 0%, transparent 60%); bottom: -20%; left: 20%; animation-delay: -12s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(4%, -3%) scale(1.05); }
  66%     { transform: translate(-3%, 4%) scale(.96); }
}

.hero-vignette {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 30%, var(--sm-bg) 100%);
  opacity: .65;
}

.hero-grid {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--sm-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sm-line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .18;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--sm-fg-soft);
  background: var(--sm-glass);
  backdrop-filter: blur(14px);
  padding: .5rem 1rem;
  border: 1px solid var(--sm-line);
  border-radius: 999px;
  margin-bottom: 2rem;
  font-variant-numeric: tabular-nums;
}
.hero-meta .sep { opacity: .4; }
.dot-pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.55);
  animation: dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); }
  70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 8.4rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .92;
  margin: 0;
}
.hero-title .reveal-line {
  display: block;
  overflow: hidden;
  padding: .02em 0;
}
.hero-title .reveal-line > span {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  opacity: 0;
  transition: transform 1.2s var(--ease-out), opacity 1s var(--ease-out);
}
.is-loaded .hero-title .reveal-line > span { transform: translateY(0) rotate(0); opacity: 1; }
.is-loaded .hero-title .reveal-line:nth-child(2) > span { transition-delay: .14s; }
.is-loaded .hero-title .reveal-line:nth-child(3) > span { transition-delay: .28s; }

.hero-sub {
  max-width: 56ch;
  margin: 2rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  color: var(--sm-fg-soft);
  line-height: 1.65;
}

.hero-cta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* Scroll-down cue — centered at the bottom of the hero */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 90px;   /* marquee strip'in hemen üzerinde */
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(243,234,255,.55);
  text-decoration: none;
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
.hero-scroll-cue:hover { color: rgba(243,234,255,.95); transform: translateX(-50%) translateY(-2px); }
.hsc-label { display: inline-block; }
.hsc-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
}
.hsc-arrows i {
  display: block;
  width: 9px; height: 9px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.18;
  animation: hscBlink 1.6s var(--ease-in-out) infinite;
}
.hsc-arrows i + i { margin-top: -4px; }
.hsc-arrows i:nth-child(1) { animation-delay: 0s; }
.hsc-arrows i:nth-child(2) { animation-delay: 0.20s; }
.hsc-arrows i:nth-child(3) { animation-delay: 0.40s; }
@keyframes hscBlink {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}
@media (max-width: 768px) {
  .hero-scroll-cue { bottom: 78px; font-size: .65rem; letter-spacing: .22em; }
  .hsc-arrows i { width: 8px; height: 8px; }
}

/* Hero alt şeridi — kayan ekosistem (eski istatistik strip'in yerinde) */
.hero-marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding-block: 1rem;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(6,3,13,0), rgba(6,3,13,.45));
}
.hero-marquee .marquee::before {
  background: linear-gradient(90deg, rgba(6,3,13,.95), transparent);
  width: 90px;
}
.hero-marquee .marquee::after {
  background: linear-gradient(270deg, rgba(6,3,13,.95), transparent);
  width: 90px;
}
.hero-marquee .marquee-track {
  gap: 1.4rem;
  padding-block: .4rem;
}
.hero-marquee .marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: rgba(243,234,255,.55);
}
.hero-marquee .ms-orb {
  width: 7px; height: 7px;
  opacity: .45;
}
@media (max-width: 768px) {
  .hero-marquee { padding-block: .8rem; }
  .hero-marquee .marquee-track { gap: 1rem; }
  .hero-marquee .marquee-track span { font-size: 1rem; }
}

/* ============================================================================
   Marquee
   ============================================================================ */
.marquee { position: relative; width: 100%; overflow: hidden; }
.marquee::before, .marquee::after { content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  padding-block: 1rem;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--sm-fg-mute);
  transition: color .3s var(--ease-out);
}
.marquee-track span:hover { color: var(--sm-fg); }
.ms-orb {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--sm-grad);
  display: inline-block;
  opacity: .55;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================================
   Manifesto
   ============================================================================ */
/* ===== Manifesto — AI inference stage ===== */
.section-manifesto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
@media (max-width: 768px) {
  .section-manifesto {
    min-height: auto;        /* mobilde içerik kadar — boş alan bırakmasın */
    padding-block: 3rem;
    align-items: flex-start;
  }
}
.mfs-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .25;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at center, transparent 5%, #000 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, transparent 5%, #000 70%);
}
.mfs-orb {
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.mfs-orb-a {
  background: radial-gradient(circle, rgba(123,45,155,.32), transparent 60%);
  top: -10%; left: -15%;
  animation: float 18s ease-in-out infinite;
}
.mfs-orb-b {
  background: radial-gradient(circle, rgba(232,74,110,.24), transparent 60%);
  bottom: -15%; right: -12%;
  animation: float 22s ease-in-out infinite -8s;
}
.mfs-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(193,53,132,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,53,132,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* sweep beam — periodic horizontal scan line */
.mfs-beam {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,74,110,0) 10%,
    rgba(232,74,110,.7) 50%,
    rgba(232,74,110,0) 90%,
    transparent 100%);
  box-shadow: 0 0 20px rgba(232,74,110,.6);
  pointer-events: none;
  z-index: 2;
  animation: beamSweep 9s cubic-bezier(.5,0,.5,1) infinite;
  opacity: 0;
}
@keyframes beamSweep {
  0%       { transform: translateY(0);     opacity: 0; }
  8%       { opacity: 1; }
  92%      { opacity: 1; }
  100%     { transform: translateY(100vh); opacity: 0; }
}

/* scan lines overlay — CRT vibe, very subtle */
.mfs-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255,255,255,.012) 3px,
    rgba(255,255,255,.012) 4px
  );
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* Vertical decorative labels */
.mfs-vlabel {
  position: absolute;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(193,53,132,.4);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}
.mfs-vlabel-l {
  left: 1.6rem;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
}
.mfs-vlabel-r {
  right: 1.6rem;
  top: 50%;
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right center;
}
@media (max-width: 991px) {
  .mfs-vlabel { display: none; }
}

.section-manifesto .container-xl { position: relative; z-index: 3; }

.manifesto { max-width: 1080px; margin: 0 auto; text-align: left; }

/* Tag row */
.mf-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.mf-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(232,74,110,.35);
  border-radius: 999px;
  background: rgba(232,74,110,.08);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,217,200,.95);
  box-shadow: 0 0 24px rgba(232,74,110,.15);
}
.mf-tag-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #ff8da3;
  box-shadow: 0 0 0 4px rgba(232,74,110,.22), 0 0 12px rgba(232,74,110,.8);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Live meters (right side of tag row) */
.mf-meters {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .08em;
  color: rgba(243,234,255,.4);
  font-variant-numeric: tabular-nums;
}
.mf-meter-item {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}
.mf-meter-item strong {
  color: rgba(243,234,255,.95);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mf-meter-lbl {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243,234,255,.35);
}
.mf-unit {
  font-size: .7rem;
  color: rgba(243,234,255,.35);
  letter-spacing: .04em;
}
.mf-meter-dot { opacity: .25; }
.mf-meter-live {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.35);
  color: #2ecc71;
  font-size: .68rem;
  letter-spacing: .2em;
}
.mf-pulse-d {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #2ecc71;
  margin-right: .35rem;
  box-shadow: 0 0 0 0 rgba(46,204,113,.6);
  animation: dotPulse 1.6s ease-out infinite;
}
@media (max-width: 768px) {
  .mf-meters { font-size: .68rem; flex-wrap: wrap; gap: .4rem; }
}

/* Text — cinematic but viewport-friendly */
.manifesto-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.8vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--sm-fg);
  margin-block: 1.4rem;
}
.manifesto-text .line { display: block; }

/* Token reveal — blur + lift, staggered with --i */
.manifesto-text .tk {
  display: inline-block;
  margin-right: 0.25em;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
  transition:
    opacity .7s var(--ease-out),
    filter  .7s var(--ease-out),
    transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.manifesto-text.is-revealed .tk {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.manifesto-text .tk-bold { font-weight: 600; }
.manifesto-text .tk-em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.005em;
}
.manifesto-text .tk-grad {
  background: var(--sm-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  position: relative;
  animation: tkGlow 3.6s ease-in-out infinite, gradShift 8s ease-in-out infinite;
}
.manifesto-text .tk-grad::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(ellipse at center, rgba(193,53,132,.28), transparent 65%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0;
  animation: tkAura 3.6s ease-in-out infinite;
  pointer-events: none;
}
.manifesto-text.is-revealed .tk-grad::before { opacity: 1; }
@keyframes tkGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
@keyframes tkAura {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50%      { opacity: .85; transform: scale(1.04); }
}

/* Typewriter cursor at the end */
.mf-cursor {
  display: inline-block;
  width: 0.45em;
  height: 0.78em;
  background: var(--sm-grad);
  background-size: 200% 100%;
  vertical-align: -0.05em;
  margin-left: 0.12em;
  opacity: 0;
  border-radius: 1px;
  transition: opacity .5s ease-out;
  transition-delay: 1.8s;
}
.manifesto-text.is-revealed .mf-cursor {
  opacity: 1;
  animation: mfBlink 1s steps(2) infinite 2.3s, gradShift 8s ease-in-out infinite;
}
@keyframes mfBlink { 50% { opacity: 0; } }

/* Foot meta row — completion state */
.mf-foot {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .06em;
  color: rgba(243,234,255,.45);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--ease-out) 2.4s, transform .8s var(--ease-out) 2.4s;
}
.manifesto-text.is-revealed + .mf-foot { opacity: 1; transform: translateY(0); }

.mf-foot-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.mf-foot-item i {
  font-size: .9rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.mf-foot-dot { opacity: .35; }
.mf-done {
  color: #2ecc71;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(46,204,113,.10);
  border: 1px solid rgba(46,204,113,.30);
}
.mf-done i {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  color: #2ecc71;
}
.mf-foot-spread {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.mf-spark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
}
.mf-spark i {
  display: block;
  width: 2px;
  background: var(--sm-grad);
  border-radius: 1px;
  animation: spark 1.2s ease-in-out infinite;
  opacity: .6;
}
.mf-spark i:nth-child(1) { animation-delay: -0.0s; height: 30%; }
.mf-spark i:nth-child(2) { animation-delay: -0.15s; height: 65%; }
.mf-spark i:nth-child(3) { animation-delay: -0.3s; height: 90%; }
.mf-spark i:nth-child(4) { animation-delay: -0.45s; height: 75%; }
.mf-spark i:nth-child(5) { animation-delay: -0.6s; height: 90%; }
.mf-spark i:nth-child(6) { animation-delay: -0.75s; height: 60%; }
.mf-spark i:nth-child(7) { animation-delay: -0.9s; height: 40%; }
@keyframes spark { 50% { transform: scaleY(0.35); opacity: 1; } }

@media (max-width: 768px) {
  .mf-foot { font-size: .72rem; gap: .5rem; }
  .mf-foot-spread { margin-left: 0; width: 100%; justify-content: flex-start; padding-top: .3rem; }
}

/* ============================================================================
   Services — sticky sticky scroll storytelling
   ============================================================================ */
.section-services { padding-bottom: clamp(4rem, 8vw, 8rem); }
.srv-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: 2rem;
}
.srv-visual {
  position: sticky;
  top: 110px;
  height: calc(100vh - 140px);
  max-height: 720px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(123,45,155,.35), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(232,74,110,.28), transparent 60%),
    linear-gradient(135deg, #100618 0%, #1a0826 60%, #1f0a30 100%);
  border: 1px solid var(--sm-line);
  box-shadow: var(--sm-shadow);
}
.srv-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.srv-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
}
.srv-viz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-out);
  pointer-events: none;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.srv-viz.is-active { opacity: 1; transform: scale(1); }
@keyframes floatY { 50% { transform: translateY(-10px); } }

/* Background orbs behind mockups */
.orb {
  position: absolute;
  width: 60%; height: 60%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .65;
  pointer-events: none;
}
.orb-ai   { background: radial-gradient(circle, #c13584, transparent 65%); top: 5%; right: 8%; }
.orb-auto { background: radial-gradient(circle, #7b2d9b, transparent 65%); bottom: 5%; left: 8%; }
.orb-mkt  { background: radial-gradient(circle, #e84a6e, transparent 65%); top: 5%; left: 15%; }
.orb-voice{ background: radial-gradient(circle, #c13584, transparent 65%); bottom: 5%; right: 5%; }
.orb-web  { background: radial-gradient(circle, #7b2d9b, transparent 65%); top: 15%; right: 15%; }
.orb-cons { background: radial-gradient(circle, #e84a6e, transparent 65%); bottom: 10%; left: 20%; }

/* ============================================================================
   Mockup chrome — shared across all .mock variants
   ============================================================================ */
.mock {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: rgba(20,10,35,.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 50px -10px rgba(0,0,0,.6),
    0 50px 120px -20px rgba(123,45,155,.4);
  font-family: var(--font-display);
  color: #f3eaff;
  animation: mockFloat 6s ease-in-out infinite;
}
.is-active .mock { animation-play-state: running; }
@keyframes mockFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-8px) rotate(.3deg); }
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
  font-size: .78rem;
  letter-spacing: .01em;
}
.mock-dots { display: inline-flex; gap: 5px; }
.mock-dots i { width: 9px; height: 9px; border-radius: 999px; background: #3a2655; display: inline-block; }
.mock-dots i:nth-child(1) { background: #ff5e57; }
.mock-dots i:nth-child(2) { background: #ffbb2e; }
.mock-dots i:nth-child(3) { background: #28c840; }
.mock-title { color: rgba(243,234,255,.7); font-family: var(--font-sans); font-size: .76rem; margin-left: .25rem; }
.mock-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .04em;
  color: rgba(243,234,255,.65);
  padding: .2rem .55rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
}
.mock-status-ok { color: #2ecc71; border-color: rgba(46,204,113,.3); }
.mock-pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.6);
  animation: dotPulse 2.2s ease-out infinite;
}
.mock-body { padding: 1.1rem; }

/* ----- AI Chat mockup ----- */
.mock-chat .mock-body { padding: 1.2rem 1rem; }
.chat-row { display: flex; gap: .55rem; margin-bottom: .85rem; align-items: flex-start; }
.chat-row.chat-user { justify-content: flex-end; }
.chat-bub {
  max-width: 80%;
  padding: .7rem .85rem;
  border-radius: 14px;
  font-size: .82rem;
  line-height: 1.45;
  font-family: var(--font-sans);
  color: #f3eaff;
}
.chat-user .chat-bub {
  background: var(--sm-grad);
  border-top-right-radius: 4px;
  color: #fff;
}
.chat-ai .chat-bub {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: 4px;
}
.chat-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--sm-grad);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(193,53,132,.4);
}
.chat-stream { display: inline; }
.cursor-blink {
  display: inline-block;
  width: 6px; height: .9em;
  background: var(--sm-magenta-500);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.chat-card {
  display: flex; flex-direction: column; gap: .25rem;
  background: linear-gradient(135deg, rgba(123,45,155,.25), rgba(232,74,110,.18));
  border-color: rgba(193,53,132,.35);
}
.chat-card-h {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 500;
  color: #ffd76b;
}
.chat-card-p { font-size: .76rem; color: rgba(243,234,255,.8); line-height: 1.4; }

/* ----- Flow / Workflow mockup ----- */
.mock-flow .flow-body { position: relative; height: 240px; padding: 1.5rem 1rem; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-line {
  stroke-dasharray: 4 4;
  animation: flowDash 1.2s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -16; } }
.flow-pkt { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px rgba(193,53,132,.8)); }
.flow-node {
  position: absolute;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .6rem;
  background: rgba(20,10,35,.95);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  font-size: .72rem;
  color: #f3eaff;
  font-family: var(--font-sans);
  letter-spacing: -.005em;
  z-index: 2;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
.flow-node i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: .85rem;
}
.fn-1 { top: 24%; left: 8%; }
.fn-2 { bottom: 12%; left: 8%; }
.fn-3 { top: 44%; left: 42%; box-shadow: 0 0 0 1px rgba(193,53,132,.5), 0 10px 24px -8px rgba(193,53,132,.4); }
.fn-4 { top: 44%; right: 5%; }
.fn-3 { animation: nodePulse 2s ease-in-out infinite; }
@keyframes nodePulse {
  50% { box-shadow: 0 0 0 1px rgba(232,74,110,.7), 0 10px 30px -6px rgba(232,74,110,.6); }
}

/* ----- Dashboard mockup ----- */
.mock-dash .dash-body { padding: 1rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.kpi {
  padding: .65rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.kpi-lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,234,255,.55);
  margin-bottom: .25rem;
}
.kpi-val {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.025em;
  color: #f3eaff;
  font-variant-numeric: tabular-nums;
}
.kpi-suffix { color: #f3eaff; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: .15rem;
  font-family: var(--font-sans);
  font-size: .68rem;
  margin-left: .35rem;
  color: #2ecc71;
}
.kpi-trend.kpi-down { color: #2ecc71; } /* CPA down = good */
.dash-chart {
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: .5rem;
  border: 1px solid rgba(255,255,255,.05);
  position: relative;
}
.dash-chart svg { display: block; width: 100%; height: 90px; }
.dash-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawChart 3s var(--ease-out) forwards;
}
.is-active .dash-line { animation-play-state: running; }
@keyframes drawChart { to { stroke-dashoffset: 0; } }
.dash-area { opacity: 0; animation: fadeIn 1.5s var(--ease-out) 2s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.dash-dot {
  filter: drop-shadow(0 0 6px #e84a6e);
  animation: dotBlink 1.4s ease-in-out infinite;
}
@keyframes dotBlink { 50% { transform: scale(1.4); opacity: .6; } }

/* ----- Phone / Voice mockup ----- */
.mock-phone { max-width: 360px; border-radius: 32px; }
.mock-bar-phone {
  padding: .85rem 1rem;
}
.mock-back { color: rgba(243,234,255,.7); }
.phone-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--sm-grad);
  display: inline-block;
}
.phone-meta { display: flex; flex-direction: column; line-height: 1.2; }
.phone-name { font-family: var(--font-display); font-size: .85rem; }
.phone-sub { font-family: var(--font-sans); font-size: .68rem; color: #2ecc71; }
.phone-body { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 220px; }
.msg {
  padding: .55rem .8rem;
  border-radius: 16px;
  max-width: 75%;
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.4;
}
.msg-them {
  align-self: flex-start;
  background: rgba(255,255,255,.06);
  border-bottom-left-radius: 4px;
}
.msg-me {
  align-self: flex-end;
  background: var(--sm-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-voice {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  min-width: 220px;
}
.voice-play {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 0;
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.voice-wave { display: inline-flex; align-items: center; gap: 2px; flex: 1; height: 18px; }
.voice-wave span {
  width: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 1px;
  animation: vw 1.4s ease-in-out infinite;
  height: 30%;
}
.voice-wave span:nth-child(1)  { animation-delay: -.0s;  height: 40%; }
.voice-wave span:nth-child(2)  { animation-delay: -.1s;  height: 65%; }
.voice-wave span:nth-child(3)  { animation-delay: -.2s;  height: 80%; }
.voice-wave span:nth-child(4)  { animation-delay: -.3s;  height: 95%; }
.voice-wave span:nth-child(5)  { animation-delay: -.4s;  height: 70%; }
.voice-wave span:nth-child(6)  { animation-delay: -.5s;  height: 50%; }
.voice-wave span:nth-child(7)  { animation-delay: -.6s;  height: 75%; }
.voice-wave span:nth-child(8)  { animation-delay: -.7s;  height: 90%; }
.voice-wave span:nth-child(9)  { animation-delay: -.8s;  height: 60%; }
.voice-wave span:nth-child(10) { animation-delay: -.9s;  height: 80%; }
.voice-wave span:nth-child(11) { animation-delay: -1.0s; height: 70%; }
.voice-wave span:nth-child(12) { animation-delay: -1.1s; height: 55%; }
.voice-wave span:nth-child(13) { animation-delay: -1.2s; height: 80%; }
.voice-wave span:nth-child(14) { animation-delay: -1.3s; height: 90%; }
.voice-wave span:nth-child(15) { animation-delay: -1.4s; height: 65%; }
.voice-wave span:nth-child(16) { animation-delay: -1.5s; height: 45%; }
.voice-wave span:nth-child(17) { animation-delay: -1.6s; height: 70%; }
.voice-wave span:nth-child(18) { animation-delay: -1.7s; height: 55%; }
.voice-wave span:nth-child(19) { animation-delay: -1.8s; height: 35%; }
.voice-wave span:nth-child(20) { animation-delay: -1.9s; height: 25%; }
@keyframes vw { 50% { transform: scaleY(0.4); } }
.voice-time { font-family: var(--font-sans); font-size: .7rem; color: rgba(255,255,255,.85); flex-shrink: 0; }
.msg-typing {
  display: inline-flex;
  gap: 3px;
  padding: .55rem .8rem;
}
.msg-typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  animation: typing 1.4s ease-in-out infinite;
}
.msg-typing span:nth-child(2) { animation-delay: .2s; }
.msg-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: 1; } }

/* ----- Browser / Web mockup ----- */
.mock-bar-browser { padding-block: .55rem; }
.browser-url {
  flex: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  color: rgba(243,234,255,.65);
}
.browser-url i { color: #2ecc71; font-size: .68rem; }
.browser-url span { color: var(--sm-magenta-500); }
.browser-body {
  position: relative;
  padding: 1.4rem 1rem;
  min-height: 260px;
}
.browser-grad {
  position: absolute;
  top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse at center top, rgba(193,53,132,.4), transparent 70%);
  pointer-events: none;
}
.browser-h, .browser-sub-1, .browser-sub-2, .browser-cta {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.4) 100%);
  margin-bottom: .5rem;
  width: 65%;
  opacity: 0;
  animation: blockIn .6s var(--ease-out) forwards;
}
.is-active .browser-h        { animation-delay: .1s; }
.is-active .browser-sub-1    { animation-delay: .3s; }
.is-active .browser-sub-2    { animation-delay: .45s; }
.is-active .browser-cta      { animation-delay: .65s; }
.browser-h { height: 22px; width: 75%; }
.browser-sub-1 { height: 8px; width: 90%; background: rgba(255,255,255,.18); }
.browser-sub-2 { height: 8px; width: 70%; background: rgba(255,255,255,.18); margin-bottom: 1.2rem; }
.browser-cta {
  width: 130px;
  height: 32px;
  border-radius: 999px;
  background: var(--sm-grad);
  margin-bottom: 1.4rem;
}
@keyframes blockIn { to { opacity: 1; } }
.browser-card {
  position: absolute;
  width: 30%; height: 60px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  font-size: 1.3rem;
  opacity: 0;
  animation: blockIn .6s var(--ease-out) forwards;
}
.browser-card i { background: var(--sm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.browser-card-1 { bottom: 1rem; left: 1rem;   animation-delay: .85s; }
.browser-card-2 { bottom: 1rem; left: 35%;    animation-delay: 1.0s;  }
.browser-card-3 { bottom: 1rem; right: 1rem;  animation-delay: 1.15s; }

/* ----- Roadmap / Consulting mockup ----- */
.mock-roadmap .roadmap-body { position: relative; padding: 1.4rem 1.3rem; }
.rm-line {
  position: absolute;
  left: 26px;
  top: 2.4rem;
  bottom: 2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--sm-grad), rgba(255,255,255,.05));
}
.rm-phase {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 0;
  z-index: 2;
}
.rm-dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(20,10,35,1);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: transparent;
  font-size: .65rem;
}
.rm-done .rm-dot { background: var(--sm-grad); border-color: transparent; color: #fff; }
.rm-active .rm-dot {
  background: rgba(232,74,110,.18);
  border-color: var(--sm-pink-500);
  color: var(--sm-pink-500);
  animation: nodePulse 1.6s ease-in-out infinite;
}
.rm-label { display: flex; flex-direction: column; line-height: 1.25; }
.rm-label b { font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: #f3eaff; letter-spacing: -.01em; }
.rm-label span { font-family: var(--font-sans); font-size: .72rem; color: rgba(243,234,255,.55); }
.rm-active .rm-label b { color: #fff; }
.rm-done .rm-label b   { color: rgba(243,234,255,.7); }

.srv-steps { display: flex; flex-direction: column; gap: clamp(4rem, 14vw, 14rem); padding-block: 4rem; }
.srv-step {
  position: relative;
  padding: 2rem 0;
}
.srv-step-num {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--sm-fg-mute);
  margin-bottom: .8rem;
}
.srv-step-tag {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--sm-line);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sm-fg-soft);
  margin-bottom: 1rem;
}
.srv-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.srv-step > p {
  color: var(--sm-fg-soft);
  font-size: 1.04rem;
  line-height: 1.65;
  margin-bottom: 1.4rem;
}
.srv-list { list-style: none; padding: 0; margin: 0; }
.srv-list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; color: var(--sm-fg-soft);
  padding: .4rem 0;
  border-bottom: 1px solid var(--sm-line-2);
}
.srv-list li:last-child { border-bottom: 0; }
.srv-list li i {
  color: var(--sm-magenta-500);
  background: var(--sm-grad-soft);
  border-radius: 999px;
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  font-size: .72rem;
}

/* "Tüm hizmetler" CTA — only renders under the last service step */
.srv-all-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--sm-magenta-500);
  background: rgba(193,53,132,.08);
  color: #fff;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.srv-all-link:hover {
  color: #fff;
  background: rgba(193,53,132,.18);
  transform: translateY(-2px);
}
.srv-all-link i { transition: transform .3s var(--ease-out); }
.srv-all-link:hover i { transform: translate(2px, -2px); }

/* Inline mini-stage — only rendered on mobile via JS clone; hidden by default */
.srv-mini-stage { display: none; }

@media (max-width: 991px) {
  .srv-stage { grid-template-columns: 1fr; }
  .srv-visual { display: none; }      /* mobilde sticky stage gizli */
  .srv-steps { gap: 4rem; padding-block: 1.5rem; }

  /* Her step'in başına klonlanan kendi mockup'u */
  .srv-mini-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--sm-line);
    background:
      radial-gradient(circle at 25% 15%, rgba(123,45,155,.35), transparent 55%),
      radial-gradient(circle at 75% 85%, rgba(232,74,110,.28), transparent 60%),
      linear-gradient(135deg, #100618 0%, #1a0826 60%, #1f0a30 100%);
    box-shadow: var(--sm-shadow);
  }
  .srv-mini-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  }
  .srv-mini-stage .srv-viz {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
  }
  .srv-mini-stage .orb {
    opacity: .4;
    filter: blur(50px);
  }
  .srv-mini-stage .mock {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
}

/* ============================================================================
   Capabilities
   ============================================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cap {
  position: relative;
  padding: 2rem 1.6rem;
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out);
}
.cap-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.25), transparent 60%);
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%,-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.cap:hover { transform: translateY(-4px); border-color: var(--sm-magenta-500); }
.cap:hover .cap-glow { opacity: 1; }
.cap-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: .6rem;
}
.cap h4 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .4rem; }
.cap p { color: var(--sm-fg-soft); font-size: .92rem; line-height: 1.55; margin: 0; }

@media (max-width: 576px) { .cap-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Process — pinned horizontal scroll
   ============================================================================ */
.section-process { padding-bottom: 0; }
.proc-pin {
  position: relative;
  height: 400vh;
  margin-top: 4rem;
}
.proc-track {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 5vw;
  will-change: transform;
}
.proc-card {
  flex: 0 0 min(560px, 80vw);
  height: 70vh;
  max-height: 600px;
  padding: 2.5rem;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sm-shadow);
}
.proc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--sm-grad);
  -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;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.proc-card:hover::before { opacity: 1; }
.proc-card::after {
  content: "";
  position: absolute;
  bottom: -40%; right: -10%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(193,53,132,.25), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.proc-num {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: -.05em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  opacity: .85;
}
.proc-label {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--sm-line);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sm-fg-soft);
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.proc-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.025em;
  margin-bottom: 1rem;
}
.proc-card > p {
  color: var(--sm-fg-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}
.proc-list {
  list-style: none;
  padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--sm-line);
  padding-top: 1.2rem;
}
.proc-list li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem;
  color: var(--sm-fg-soft);
  padding: .3rem 0;
}
.proc-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--sm-grad);
}
.proc-end {
  flex: 0 0 320px;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding-inline: 2rem;
}
.proc-end span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sm-fg-mute); }
.proc-end-link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -.03em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-flex; align-items: center; gap: .4rem;
}
.proc-end-link i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (max-width: 991px) {
  .proc-pin { height: auto; }
  .proc-track {
    position: relative;
    top: auto; height: auto;
    flex-direction: column;
    padding-inline: 5vw;
  }
  .proc-card { flex: 0 0 auto; height: auto; max-height: none; width: 100%; }
}

/* ============================================================================
   Work / Cases
   ============================================================================ */
/* ===== Çalışmalar / Cases — metric-first cards ===== */
.section-work { padding-block: clamp(5rem, 10vw, 10rem); }
.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 768px) { .cases { grid-template-columns: 1fr; } }

.case {
  position: relative;
  padding: 2rem 2rem 1.5rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(20,10,35,.55) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-height: 420px;
  isolation: isolate;
  transition:
    transform .4s var(--ease-out),
    border-color .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.case:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
  box-shadow: 0 30px 80px -20px rgba(123,45,155,.35);
}

.case-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .28;
  pointer-events: none;
  top: -120px; right: -120px;
  z-index: -1;
  transition: opacity .5s var(--ease-out);
}
.case:hover .case-glow { opacity: .45; }
.case:nth-child(1) .case-glow { background: radial-gradient(circle, #7b2d9b, transparent 60%); }
.case:nth-child(2) .case-glow { background: radial-gradient(circle, #c13584, transparent 60%); top: auto; bottom: -120px; left: -120px; right: auto; }
.case:nth-child(3) .case-glow { background: radial-gradient(circle, #e84a6e, transparent 60%); }
.case:nth-child(4) .case-glow { background: radial-gradient(circle, #c13584, transparent 60%); top: auto; bottom: -120px; left: -120px; right: auto; }

/* Head */
.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.case-no { color: rgba(243,234,255,.4); }
.case-tag {
  padding: .32rem .7rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(243,234,255,.78);
  background: rgba(255,255,255,.03);
}

/* Metric */
.case-metric {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}
.case-metric-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(232,74,110,.12);
  border: 1px solid rgba(232,74,110,.35);
  font-size: 1rem;
  color: #e84a6e;
  margin-right: .4rem;
  align-self: center;
}
.case-metric-arrow-up {
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.35);
  color: #2ecc71;
}
.case-metric-val {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  letter-spacing: -.04em;
  line-height: 1;
}
.case-metric-num {
  font-size: clamp(2.6rem, 4.8vw, 4.4rem);
  font-weight: 500;
  background: var(--sm-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}
.case-metric-unit {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--sm-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-left: .05em;
  animation: gradShift 8s ease-in-out infinite;
}
.case-metric-label {
  margin-left: .8rem;
  font-family: var(--font-display);
  font-size: .8rem;
  color: rgba(243,234,255,.55);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  align-self: center;
  flex: 1;
  min-width: 120px;
}

/* Description */
.case-desc {
  color: rgba(243,234,255,.7);
  font-size: .94rem;
  line-height: 1.55;
  margin: 0;
  font-family: var(--font-sans);
}

/* Visualizations — different per case */
.case-viz {
  margin-top: auto;
  height: 70px;
  position: relative;
}

/* Line chart (case 1) */
.case-viz-line svg {
  width: 100%; height: 100%;
}
.case-line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: caseDraw 2.4s var(--ease-out) forwards .3s;
}
.case-area {
  opacity: 0;
  animation: caseFade .8s var(--ease-out) forwards 2s;
}
.case-pt {
  opacity: 0;
  animation: caseFade .4s var(--ease-out) forwards 2.4s, casePulse 1.4s ease-in-out infinite 2.5s;
  transform-origin: 300px 54px;
}
@keyframes caseDraw { to { stroke-dashoffset: 0; } }
@keyframes caseFade { to { opacity: 1; } }
@keyframes casePulse { 50% { transform: scale(1.5); opacity: .6; } }
.case-viz-axis {
  position: absolute;
  bottom: -16px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,234,255,.3);
}

/* Compare bars (case 2) */
.case-viz-compare {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: auto;
}
.cmp-row {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.cmp-label {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243,234,255,.45);
  width: 44px;
  flex-shrink: 0;
}
.cmp-bar {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.cmp-bar i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0);
  animation: cmpFill 1.8s var(--ease-out) forwards .4s;
}
.cmp-bar-before i {
  width: 100%;
  background: linear-gradient(90deg, rgba(193,53,132,.6), rgba(193,53,132,.25));
}
.cmp-bar-after i {
  width: 12%;
  background: var(--sm-grad);
  animation-delay: 1.4s;
  box-shadow: 0 0 16px rgba(232,74,110,.5);
}
@keyframes cmpFill { to { transform: scaleX(1); } }
.cmp-val {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  color: rgba(243,234,255,.85);
  width: 52px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Rising bars (case 3) */
.case-viz-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 70px;
}
.cb {
  flex: 1;
  height: 0;
  background: linear-gradient(180deg, rgba(193,53,132,.7), rgba(123,45,155,.4));
  border-radius: 3px 3px 0 0;
  animation: cbGrow 1.2s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0ms));
  transform-origin: bottom;
}
.case-viz-bars .cb:nth-child(1)  { --d: .3s; }
.case-viz-bars .cb:nth-child(2)  { --d: .35s; }
.case-viz-bars .cb:nth-child(3)  { --d: .4s; }
.case-viz-bars .cb:nth-child(4)  { --d: .45s; }
.case-viz-bars .cb:nth-child(5)  { --d: .5s; }
.case-viz-bars .cb:nth-child(6)  { --d: .55s; }
.case-viz-bars .cb:nth-child(7)  { --d: .6s; }
.case-viz-bars .cb:nth-child(8)  { --d: .65s; }
.case-viz-bars .cb:nth-child(9)  { --d: .7s; }
.case-viz-bars .cb:nth-child(10) { --d: .75s; }
.case-viz-bars .cb:nth-child(11) { --d: .8s; }
.case-viz-bars .cb:nth-child(12) { --d: .85s; }
.cb-now {
  background: linear-gradient(180deg, #ffd76b, #e84a6e);
  box-shadow: 0 0 14px rgba(232,74,110,.6);
}
@keyframes cbGrow { to { height: var(--h); } }

/* Wave decay (case 4) */
.case-viz-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 70px;
}
.cw {
  flex: 1;
  background: var(--sm-grad);
  border-radius: 2px;
  height: 0;
  animation: cwGrow 1.2s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0ms));
}
.case-viz-wave .cw:nth-child(1)  { --d: .3s; }
.case-viz-wave .cw:nth-child(2)  { --d: .35s; }
.case-viz-wave .cw:nth-child(3)  { --d: .4s; }
.case-viz-wave .cw:nth-child(4)  { --d: .45s; }
.case-viz-wave .cw:nth-child(5)  { --d: .5s; }
.case-viz-wave .cw:nth-child(6)  { --d: .55s; }
.case-viz-wave .cw:nth-child(7)  { --d: .6s; }
.case-viz-wave .cw:nth-child(8)  { --d: .65s; }
.case-viz-wave .cw:nth-child(9)  { --d: .7s; }
.case-viz-wave .cw:nth-child(10) { --d: .75s; }
.case-viz-wave .cw:nth-child(11) { --d: .8s; }
.case-viz-wave .cw:nth-child(12) { --d: .85s; }
.case-viz-wave .cw:nth-child(13) { --d: .9s; }
.case-viz-wave .cw:nth-child(14) { --d: .95s; }
.case-viz-wave .cw:nth-child(15) { --d: 1.0s; }
@keyframes cwGrow { to { height: var(--h); } }

/* Foot */
.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.06);
}
.case-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.case-tags span {
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-display);
  font-size: .68rem;
  color: rgba(243,234,255,.6);
  letter-spacing: .04em;
}
.case-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-display);
  font-size: .76rem;
  color: rgba(243,234,255,.7);
  white-space: nowrap;
  transition: color .25s var(--ease-out), gap .25s var(--ease-out);
}
.case-link i { transition: transform .3s var(--ease-out); }
.case:hover .case-link { color: #fff; gap: .55rem; }
.case:hover .case-link i { transform: translate(2px, -2px); }

@media (max-width: 768px) {
  .case { padding: 1.5rem 1.5rem 1.2rem; min-height: 0; }
  .case-metric { gap: .25rem; }
  .case-metric-label { font-size: .75rem; margin-left: .4rem; min-width: 0; }
}

/* ============================================================================
   About / Timeline
   ============================================================================ */
.section-about { padding-block: clamp(5rem, 10vw, 10rem); }
.timeline {
  margin-top: 2.5rem;
  border-left: 1px solid var(--sm-line);
  padding-left: 1.5rem;
}
.tl-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1rem;
  padding: .85rem 0;
  position: relative;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -1.66rem; top: 1.2rem;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sm-fg-mute);
  border: 2px solid var(--sm-bg);
}
.tl-item.tl-now::before { background: var(--sm-grad); animation: pulse 2.4s ease-in-out infinite; }
.tl-year { font-family: var(--font-display); font-weight: 500; color: var(--sm-fg); font-variant-numeric: tabular-nums; }
.tl-text { color: var(--sm-fg-soft); }
.tl-now .tl-year { background: var(--sm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================================
   Quote
   ============================================================================ */
/* ===== Trust band — kayan müşteri logoları ===== */
.section-trust {
  padding-block: clamp(4rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--sm-line-2);
  border-bottom: 1px solid var(--sm-line-2);
  background: linear-gradient(180deg, transparent, rgba(123,45,155,.04), transparent);
}
.trust-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.trust-head .eyebrow { justify-content: center; }
.trust-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.trust-sub {
  margin-top: .9rem;
  color: var(--sm-fg-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.trust-band {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.trust-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.trust-track {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: .5rem;
  white-space: nowrap;
  will-change: transform;
}
.trust-row-right .trust-track { animation: trustLeft 55s linear infinite; }
.trust-row-left  .trust-track { animation: trustRight 60s linear infinite; }
.trust-row:hover .trust-track { animation-play-state: paused; }

@keyframes trustLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes trustRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.trust-logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.2rem .7rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(243,234,255,.75);
  transition: color .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
  cursor: default;
}
.trust-logo:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(193,53,132,.45);
  transform: translateY(-2px);
}
.trust-mark {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--sm-grad);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 14px -2px rgba(193,53,132,.4);
}
.trust-name { white-space: nowrap; }

@media (max-width: 768px) {
  .trust-logo { font-size: .92rem; padding: .55rem 1rem .55rem .55rem; gap: .55rem; }
  .trust-mark { width: 26px; height: 26px; font-size: .76rem; }
  .trust-row-right .trust-track { animation-duration: 40s; }
  .trust-row-left  .trust-track { animation-duration: 45s; }
}

/* ===== Testimonial — holographic carousel ===== */
.section-quote {
  position: relative;
  overflow: hidden;
  background: var(--sm-bg);
  border-top: 1px solid var(--sm-line-2);
  border-bottom: 1px solid var(--sm-line-2);
  padding-block: clamp(5rem, 10vw, 9rem);
}

/* background depth */
.qz-orb {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: .8;
}
.qz-orb-a {
  background: radial-gradient(circle, rgba(123,45,155,.30), transparent 60%);
  top: -10%; left: -15%;
  animation: float 20s ease-in-out infinite;
}
.qz-orb-b {
  background: radial-gradient(circle, rgba(232,74,110,.24), transparent 60%);
  bottom: -10%; right: -10%;
  animation: float 24s ease-in-out infinite -10s;
}
.qz-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(193,53,132,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,53,132,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.section-quote .container-xl { position: relative; z-index: 1; }

.qz-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.qz-head .eyebrow { justify-content: center; }

/* Carousel container */
.qz-carousel {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

/* Holographic frame */
.qz-frame {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(20,10,35,.55) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  display: grid;
  min-height: 320px;
  isolation: isolate;
}
.qz-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(123,45,155,.55) 0%,
    rgba(193,53,132,.20) 30%,
    rgba(232,74,110,.55) 70%,
    rgba(123,45,155,.30) 100%);
  -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;
}

/* Scan light — sweeps left to right slowly */
.qz-scan {
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent 0%, rgba(193,53,132,.10) 50%, transparent 100%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
  animation: qzScan 7s ease-in-out infinite;
}
@keyframes qzScan {
  0%, 100% { left: -40%; }
  50%      { left: 110%; }
}

/* Corner brackets — tech HUD */
.qz-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(232,74,110,.7);
  pointer-events: none;
  z-index: 3;
}
.qz-corner-tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; border-top-left-radius: 6px; }
.qz-corner-tr { top: 12px; right: 12px; border-top: 1.5px solid; border-right: 1.5px solid; border-top-right-radius: 6px; }
.qz-corner-bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid; border-left: 1.5px solid; border-bottom-left-radius: 6px; }
.qz-corner-br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; border-bottom-right-radius: 6px; }

/* Big quote mark */
.qz-mark {
  position: absolute;
  top: -.3rem;
  left: 2rem;
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: .35;
  pointer-events: none;
  z-index: 1;
  animation: gradShift 8s ease-in-out infinite;
  background-size: 200% 100%;
}

/* Slides — stacked grid, only active visible */
.qz-slide {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.8rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  pointer-events: none;
}
.qz-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.qz-slide blockquote { margin: 0; }
.qz-slide blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: rgba(243,234,255,.95);
}
.qz-slide blockquote strong {
  font-weight: 500;
  color: #fff;
}
.qz-hl {
  background: var(--sm-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}

.qz-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap;
}

.qz-avatar {
  position: relative;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: -.01em;
  box-shadow: 0 6px 20px -4px rgba(123,45,155,.5);
}
.qz-avatar[data-bg="grad-1"] { background: linear-gradient(135deg, #5a1f7a, #c13584); }
.qz-avatar[data-bg="grad-2"] { background: linear-gradient(135deg, #c13584, #e84a6e); }
.qz-avatar[data-bg="grad-3"] { background: linear-gradient(135deg, #7b2d9b, #e84a6e); }
.qz-avatar::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,74,110,.45);
  animation: qzPing 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes qzPing {
  0%   { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.qz-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.qz-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.qz-name i { color: #2ecc71; font-size: .85rem; }
.qz-role { color: rgba(243,234,255,.55); font-size: .82rem; font-family: var(--font-sans); }

.qz-rating {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: .35rem .7rem;
  border: 1px solid rgba(255,217,107,.3);
  border-radius: 999px;
  background: rgba(255,217,107,.06);
}
.qz-stars {
  display: inline-flex;
  gap: 2px;
}
.qz-stars i {
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 4px 6px 4px;
  border-color: transparent transparent #ffd76b transparent;
  display: inline-block;
  position: relative;
  margin-top: 4px;
  filter: drop-shadow(0 0 4px rgba(255,217,107,.6));
}
.qz-stars i::after {
  content: "";
  position: absolute;
  top: 4px; left: -4px;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #ffd76b transparent transparent transparent;
}
.qz-rating-val {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  color: #ffd76b;
  font-variant-numeric: tabular-nums;
}

/* Nav dots */
.qz-nav {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.5rem;
}
.qz-dot {
  width: 28px; height: 4px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background .3s, width .3s;
}
.qz-dot:hover { background: rgba(255,255,255,.22); }
.qz-dot.is-active { background: rgba(255,255,255,.10); width: 56px; }
.qz-dot.is-active span {
  position: absolute;
  inset: 0;
  background: var(--sm-grad);
  transform-origin: left;
  animation: qzDotFill 6.5s linear forwards;
}
@keyframes qzDotFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.qz-dot span { display: block; height: 100%; }

/* Aggregate metrics bar */
.qz-metrics {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 920px;
  margin-inline: auto;
}
.qz-metric { text-align: center; }
.qz-metric-val {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--sm-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  animation: gradShift 8s ease-in-out infinite;
}
.qz-metric-sub {
  font-size: .55em;
  margin-left: .03em;
  opacity: .85;
}
.qz-metric-sep {
  font-size: .8em;
  opacity: .7;
  margin: 0 .02em;
}
.qz-metric-lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: .76rem;
  color: rgba(243,234,255,.55);
  letter-spacing: .04em;
  margin-top: .5rem;
}

@media (max-width: 768px) {
  .qz-mark { font-size: 5rem; left: 1rem; }
  .qz-corner { width: 14px; height: 14px; }
  .qz-foot { gap: .7rem; }
  .qz-rating { margin-left: 0; width: 100%; justify-content: center; }
  .qz-metrics { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

/* ============================================================================
   CTA
   ============================================================================ */
.section-cta { padding-bottom: 6rem; }
.cta-card {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(232,74,110,.42), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(123,45,155,.55), transparent 55%),
    linear-gradient(135deg, #1a0626 0%, #3d1654 50%, #5a1f7a 100%);
  color: #fff;
  padding: clamp(2.2rem, 5vw, 4.5rem);
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(123,45,155,.5);
}
.cta-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .4;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta-glow {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,107,.35), transparent 60%);
  filter: blur(40px);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: ctaGlow 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaGlow {
  0%,100% { transform: translate(-30%,-50%) scale(1); }
  50%     { transform: translate(30%,-50%) scale(1.2); }
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  font-weight: 500;
}
.cta-title .grad-text {
  background: var(--sm-grad-warm);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cta-sub { color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.6; margin-top: .8rem; max-width: 50ch; }
.cta-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.cta-list li { padding: .35rem 0; color: rgba(255,255,255,.85); font-size: .94rem; display: flex; align-items: center; gap: .55rem; }
.cta-list i { color: #ffd76b; }

.cta-form {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}
.floating { position: relative; margin-bottom: .8rem; }
.floating input, .floating textarea {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.2rem 1rem .55rem;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.floating textarea { resize: vertical; min-height: 100px; padding-top: 1.4rem; }
.floating input:focus, .floating textarea:focus {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
}
.floating label {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  pointer-events: none;
  transition: transform .25s var(--ease-out), font-size .25s var(--ease-out), top .25s var(--ease-out), color .25s var(--ease-out);
}
.floating textarea + label { top: 1.3rem; transform: none; }
.floating input:focus + label,
.floating input:not(:placeholder-shown) + label,
.floating textarea:focus + label,
.floating textarea:not(:placeholder-shown) + label {
  top: .5rem;
  transform: translateY(0);
  font-size: .7rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cta-form .btn-primary-grad { margin-top: .5rem; }
.form-foot { color: rgba(255,255,255,.65); font-size: .8rem; margin-top: .8rem; text-align: center; }

/* ============================================================================
   Footer
   ============================================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(5rem, 9vw, 8rem);
  border-top: 1px solid var(--sm-line-2);
  background: var(--sm-bg);
}
.footer::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 700px;
  background:
    radial-gradient(ellipse at center, rgba(193,53,132,.16), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}

/* ---- Top CTA hero ---- */
.ft-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--sm-line);
  position: relative;
  z-index: 1;
}
.ft-hero-inner { max-width: 760px; }
.ft-mega {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--sm-fg);
  margin: .5rem 0 1rem;
}
.ft-mega-grad {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
}
.ft-mega-grad i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: .55em;
  margin-left: .15em;
  transition: transform .5s var(--ease-out);
}
.ft-mega:hover { color: var(--sm-fg); }
.ft-mega:hover .ft-mega-grad i { transform: translate(8px, -8px); }
.ft-hero-sub {
  color: var(--sm-fg-soft);
  font-size: 1.05rem;
  max-width: 50ch;
  margin: 0;
}
.ft-mail {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid var(--sm-line);
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  color: var(--sm-fg);
  position: relative;
  text-align: left;
  min-width: 240px;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ft-mail:hover {
  transform: translateY(-3px);
  border-color: var(--sm-magenta-500);
  box-shadow: var(--sm-shadow);
  color: var(--sm-fg);
}
.ft-mail-lbl { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sm-fg-mute); }
.ft-mail-val { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; }
.ft-mail > i {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.1rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: transform .4s var(--ease-out);
}
.ft-mail:hover > i { transform: translate(3px,-3px); }

/* ---- Newsletter ---- */
.ft-news {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--sm-line);
}
.ft-news h5 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--sm-fg);
  margin: 0 0 .25rem;
}
.ft-news p { color: var(--sm-fg-soft); font-size: .94rem; margin: 0; }
.ft-news-form {
  display: flex;
  align-items: stretch;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  border-radius: 999px;
  padding: .35rem;
  min-width: 360px;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ft-news-form:focus-within {
  border-color: var(--sm-magenta-500);
  box-shadow: 0 0 0 4px rgba(193,53,132,.12);
}
.ft-news-form input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: .5rem 1rem;
  color: var(--sm-fg);
  font-family: var(--font-sans);
  font-size: .94rem;
}
.ft-news-form input::placeholder { color: var(--sm-fg-mute); }
.ft-news-form button {
  position: relative;
  background: var(--sm-grad);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  transition: background-position .35s var(--ease-out), transform .25s var(--ease-out);
  overflow: hidden;
  min-width: 140px;
}
.ft-news-form button:hover { background-position: 100% 50%; }
.ft-news-form button .b-done {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  background: linear-gradient(135deg,#2ecc71,#27ae60);
}
.ft-news-form.is-done .b-default { opacity: 0; }
.ft-news-form.is-done .b-done    { opacity: 1; }

@media (max-width: 768px) {
  .ft-hero { grid-template-columns: 1fr; }
  .ft-news { grid-template-columns: 1fr; }
  .ft-news-form { min-width: 0; }
}

/* ---- Link grid ---- */
.ft-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1fr;
  gap: 2.5rem;
  padding: 3rem 0;
}
.ft-col h6 { /* uses .footer-h below */ }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--sm-fg);
  margin-bottom: .9rem;
}
.footer-brand .brand-mark { filter: drop-shadow(0 4px 14px rgba(193,53,132,.4)); }
.footer-tag { color: var(--sm-fg-soft); max-width: 38ch; line-height: 1.55; margin-bottom: 1.4rem; }

.ft-social { display: flex; gap: .5rem; }
.ft-social a {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: var(--sm-bg-card);
  display: grid; place-items: center;
  color: var(--sm-fg-soft);
  font-size: .95rem;
  transition: transform .35s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.ft-social a:hover {
  transform: translateY(-3px);
  color: #fff;
  background: var(--sm-grad);
  border-color: transparent;
}

.footer-h {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-bottom: 1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li {
  padding: .3rem 0;
  display: flex; align-items: center; gap: .5rem;
}
.footer-list a {
  color: var(--sm-fg-soft);
  font-size: .94rem;
  position: relative;
  transition: color .25s var(--ease-out), padding-left .3s var(--ease-out);
}
.footer-list a::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 8px; height: 1px;
  background: var(--sm-grad);
  transition: transform .3s var(--ease-out);
}
.footer-list a:hover {
  color: var(--sm-fg);
  padding-left: 14px;
}
.footer-list a:hover::before { transform: translateY(-50%) scaleX(1); }
.ft-pill {
  display: inline-block;
  padding: .1rem .4rem;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--sm-grad);
  color: #fff;
  border-radius: 999px;
  margin-left: .3rem;
}

.ft-contact li {
  align-items: flex-start;
  padding: .5rem 0;
}
.ft-ico {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--sm-grad-soft);
  color: var(--sm-magenta-500);
  font-size: .85rem;
}
.ft-contact a, .ft-contact span:not(.ft-ico):not(.dot-pulse) {
  color: var(--sm-fg-soft);
  font-size: .94rem;
  line-height: 1.4;
  padding-top: .25rem;
}
.ft-contact a:hover { color: var(--sm-fg); }
.ft-live { display: inline-flex; align-items: center; gap: .5rem; color: var(--sm-fg) !important; }

@media (max-width: 991px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ft-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
  .ft-grid { grid-template-columns: 1fr; }
}

/* ---- Wordmark band ---- */
.ft-wordmark {
  position: relative;
  text-align: center;
  margin: 1rem 0 1.5rem;
  overflow: hidden;
}
.ft-wordmark span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 11vw, 10rem);
  letter-spacing: -.045em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: .12;
  transition: opacity 1s var(--ease-out), letter-spacing 1.2s var(--ease-out);
}
.ft-wordmark span i {
  font-style: normal;
  background: var(--sm-grad-warm);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ft-wordmark span { opacity: .15; }
.ft-wordmark:hover span { opacity: .3; letter-spacing: -.035em; }

/* ---- Footer rule ---- */
.footer-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sm-line), transparent);
  margin: 1rem 0 1.5rem;
}

/* ---- Bottom row ---- */
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0 2.5rem;
}
.ft-bottom small { color: var(--sm-fg-mute); font-size: .8rem; letter-spacing: .01em; }
.ft-bottom-l { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.ft-bottom-r { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ft-bottom-r a small { color: var(--sm-fg-soft); transition: color .25s var(--ease-out); }
.ft-bottom-r a:hover small { color: var(--sm-fg); }
.ft-meta-sep { opacity: .4; }
.ft-top { display: inline-flex; align-items: center; gap: .35rem; }
.ft-top small { color: var(--sm-fg); }
.ft-top i { transition: transform .35s var(--ease-out); }
.ft-top:hover i { transform: translateY(-3px); }

/* ============================================================================
   Reveal
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

.magnetic { will-change: transform; }

/* ============================================================================
   Responsive bridges
   ============================================================================ */
@media (max-width: 768px) {
  .navbar-nav .nav-link { padding: .75rem 1rem !important; }
  .hero { padding-top: 96px; }
  .section-head { text-align: left; }
  .section-head .section-sub { margin-inline: 0; }
}

html { color-scheme: dark; }

/* ============================================================================
   SERVICES PAGE (services.html)
   ============================================================================ */

/* --- Page hero --- */
.sp-hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 5rem;
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(123,45,155,.16), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(232,74,110,.12), transparent 60%),
    linear-gradient(180deg, #06030d 0%, #0a0418 60%, var(--sm-bg) 100%);
  border-bottom: 1px solid var(--sm-line-2);
}
.sp-hero-orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.sp-hero-orb-a {
  background: radial-gradient(circle, rgba(123,45,155,.30), transparent 60%);
  top: -15%; left: -10%;
  animation: float 20s ease-in-out infinite;
}
.sp-hero-orb-b {
  background: radial-gradient(circle, rgba(232,74,110,.22), transparent 60%);
  bottom: -20%; right: -10%;
  animation: float 24s ease-in-out infinite -10s;
}
.sp-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(193,53,132,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,53,132,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.sp-hero .container-xl { position: relative; z-index: 1; }

.sp-crumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-bottom: 2rem;
}
.sp-crumb a { color: var(--sm-fg-soft); }
.sp-crumb a:hover { color: var(--sm-fg); }
.sp-crumb i { font-size: .7rem; opacity: .5; }
.sp-crumb span { color: var(--sm-fg); }

.sp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.0;
  margin: 0 0 1.5rem;
  color: var(--sm-fg);
}
.sp-hero-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}
.sp-hero-sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--sm-fg-soft);
  line-height: 1.6;
  margin-bottom: 3rem;
}

/* Quick nav chips */
.sp-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 3.5rem;
}
.sp-quick-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  color: var(--sm-fg);
  transition: transform .35s var(--ease-out), border-color .3s, background .3s;
}
.sp-quick-item:hover {
  color: var(--sm-fg);
  border-color: rgba(193,53,132,.5);
  background: rgba(193,53,132,.06);
  transform: translateY(-2px);
}
.sp-quick-num {
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--sm-fg-mute);
  flex-shrink: 0;
}
.sp-quick-name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  flex: 1;
}
.sp-quick-item i {
  color: var(--sm-fg-mute);
  transition: transform .35s var(--ease-out), color .3s;
  font-size: .85rem;
}
.sp-quick-item:hover i {
  color: var(--sm-pink-500);
  transform: translateY(2px);
}

/* Hero meta strip */
.sp-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sm-line);
}
.sp-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.sp-hero-meta-item b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -.025em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.sp-hero-meta-item span {
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--sm-fg-mute);
  letter-spacing: .04em;
}

@media (max-width: 991px) {
  .sp-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sp-hero { padding: 110px 0 3rem; }
  .sp-quick { grid-template-columns: 1fr; }
  .sp-hero-meta { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* --- Service sections --- */
.sp-svc {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--sm-line-2);
  overflow: hidden;
}
.sp-svc-alt { background: var(--sm-bg-soft); }

.sp-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 991px) {
  .sp-svc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-svc-alt .sp-svc-visual { order: 2; }      /* mockup always second on mobile */
  .sp-svc-alt .sp-svc-detail { order: 1; }
}

.sp-svc-visual {
  position: relative;
}
.sp-svc-mock {
  position: relative;
  padding: 2rem clamp(1rem, 2vw, 2rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 25% 15%, rgba(123,45,155,.35), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(232,74,110,.28), transparent 60%),
    linear-gradient(135deg, #100618 0%, #1a0826 60%, #1f0a30 100%);
  border: 1px solid var(--sm-line);
  box-shadow: var(--sm-shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.sp-svc-mock[data-bg="grad-1"]::before,
.sp-svc-mock[data-bg="grad-2"]::before,
.sp-svc-mock[data-bg="grad-3"]::before,
.sp-svc-mock[data-bg="grad-4"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.sp-svc-mock .mock {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
}

/* Detail panel */
.sp-svc-detail {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.sp-svc-head {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.sp-svc-no {
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--sm-fg-mute);
}
.sp-svc-tag {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.03);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-soft);
}
.sp-svc-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
}
.sp-svc-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0;
}
.sp-svc-lead strong { color: var(--sm-fg); font-weight: 500; }
.sp-svc-p {
  color: var(--sm-fg-soft);
  font-size: .96rem;
  line-height: 1.6;
  margin: 0;
}
.sp-svc-p strong { color: var(--sm-fg); font-weight: 500; }

.sp-svc-block {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sm-line-2);
}
.sp-svc-block h4 {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  font-weight: 500;
  margin: 0;
}
.sp-svc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-svc-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  font-size: .94rem;
  color: var(--sm-fg-soft);
  border-bottom: 1px solid var(--sm-line-2);
}
.sp-svc-list li:last-child { border-bottom: 0; }
.sp-svc-list li i {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--sm-grad-soft);
  color: var(--sm-magenta-500);
  display: inline-grid;
  place-items: center;
  font-size: .68rem;
  flex-shrink: 0;
}

.sp-svc-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.sp-case {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg);
  transition: border-color .3s, background .3s;
}
.sp-case:hover {
  border-color: rgba(193,53,132,.4);
  background: rgba(193,53,132,.05);
}
.sp-case i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1rem;
}

.sp-svc-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sp-svc-stack span {
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .76rem;
  color: var(--sm-fg-soft);
  letter-spacing: .02em;
  background: rgba(255,255,255,.02);
}

.sp-svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sm-line);
  margin-top: .5rem;
}
.sp-svc-meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-fg-mute);
}
.sp-svc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.sp-svc-meta-item i {
  color: var(--sm-magenta-500);
}
.sp-svc-meta-item b {
  color: var(--sm-fg);
  font-weight: 500;
  margin-left: .15rem;
}

@media (max-width: 600px) {
  .sp-svc-cases { grid-template-columns: 1fr; }
}

/* --- Matrix / need → service --- */
.sp-matrix {
  padding-block: clamp(5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--sm-line-2);
}
.sp-mx {
  max-width: 1000px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.sp-mx-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .35s var(--ease-out), border-color .35s;
}
.sp-mx-row:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.4);
}
.sp-mx-need {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.sp-mx-need > i {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--sm-grad-soft);
  display: grid; place-items: center;
  font-size: 1.1rem;
  color: var(--sm-magenta-500);
  flex-shrink: 0;
}
.sp-mx-need h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .15rem;
}
.sp-mx-need p {
  font-size: .88rem;
  color: var(--sm-fg-soft);
  margin: 0;
  line-height: 1.45;
}
.sp-mx-arrow {
  color: var(--sm-fg-mute);
  font-size: 1.1rem;
}
.sp-mx-services {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sp-mx-pill {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--sm-magenta-500);
  background: rgba(193,53,132,.08);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: background .25s, transform .25s;
}
.sp-mx-pill:hover {
  background: rgba(193,53,132,.18);
  transform: translateY(-1px);
  color: #fff;
}
@media (max-width: 768px) {
  .sp-mx-row { grid-template-columns: 1fr; gap: 1rem; }
  .sp-mx-arrow { display: none; }
  .sp-mx-services { justify-content: flex-start; }
}

/* --- FAQ accordion --- */
.sp-faq {
  padding-block: clamp(5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--sm-line-2);
}
.sp-faq-list {
  max-width: 880px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.sp-faq-item {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s;
}
.sp-faq-item[open] {
  border-color: rgba(193,53,132,.4);
}
.sp-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--sm-fg);
  transition: color .25s;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary i {
  font-size: 1rem;
  color: var(--sm-magenta-500);
  flex-shrink: 0;
  transition: transform .4s var(--ease-out);
}
.sp-faq-item[open] summary i { transform: rotate(45deg); }
.sp-faq-item summary:hover { color: var(--sm-magenta-500); }

.sp-faq-body {
  padding: 0 1.4rem 1.4rem;
  font-family: var(--font-sans);
  color: var(--sm-fg-soft);
  font-size: .96rem;
  line-height: 1.65;
}
.sp-faq-body p { margin: 0; }
.sp-faq-body strong { color: var(--sm-fg); font-weight: 500; }

/* ============================================================================
   SERVICE DETAIL PAGES (service-*.html)
   ============================================================================ */

/* --- Hero --- */
.sd-hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%, rgba(123,45,155,.20), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(232,74,110,.16), transparent 60%),
    linear-gradient(180deg, #06030d 0%, #0a0418 60%, var(--sm-bg) 100%);
  border-bottom: 1px solid var(--sm-line-2);
}
.sd-hero-orb {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.sd-hero-orb-a {
  background: radial-gradient(circle, rgba(123,45,155,.35), transparent 60%);
  top: -20%; left: -15%;
  animation: float 20s ease-in-out infinite;
}
.sd-hero-orb-b {
  background: radial-gradient(circle, rgba(232,74,110,.28), transparent 60%);
  bottom: -25%; right: -10%;
  animation: float 24s ease-in-out infinite -10s;
}
.sd-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(193,53,132,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,53,132,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.sd-hero-floating {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sd-float {
  position: absolute;
  padding: .35rem .85rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(20,10,35,.4);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(243,234,255,.6);
  animation: float 12s ease-in-out infinite;
  white-space: nowrap;
}
.sd-float-1 { top: 12%; left: 4%;  animation-delay: -1s; }
.sd-float-2 { top: 22%; right: 6%; animation-delay: -3s; }
.sd-float-3 { top: 65%; left: 3%;  animation-delay: -5s; }
.sd-float-4 { bottom: 28%; right: 4%; animation-delay: -7s; }
.sd-float-5 { top: 45%; right: 2%; animation-delay: -2s; }
.sd-float-6 { bottom: 15%; left: 5%; animation-delay: -6s; }
.sd-float-7 { top: 55%; left: 48%; animation-delay: -4s; }
@media (max-width: 991px) {
  .sd-float-3, .sd-float-5, .sd-float-6, .sd-float-7 { display: none; }
}

.sd-hero .container-xl { position: relative; z-index: 2; }

.sd-hero-grid-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 2rem 4rem;
}
@media (max-width: 991px) {
  .sd-hero-grid-row { grid-template-columns: 1fr; }
}

.sd-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(232,74,110,.35);
  background: rgba(232,74,110,.08);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,217,200,.95);
  margin-bottom: 1.6rem;
}
.sd-hero-no {
  font-variant-numeric: tabular-nums;
  color: var(--sm-fg-mute);
}
.sd-hero-cat { color: var(--sm-fg); font-weight: 500; }
.sd-hero-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46,204,113,.8);
  animation: pulse 2s ease-in-out infinite;
}
.sd-hero-live { color: #2ecc71; font-size: .7rem; }

.sd-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.0;
  margin: 0 0 1.5rem;
  color: var(--sm-fg);
}
.sd-hero-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}

.sd-hero-sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--sm-fg-soft);
  line-height: 1.6;
  margin-bottom: 2.2rem;
}
.sd-hero-sub strong { color: var(--sm-fg); font-weight: 500; }

.sd-hero-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.sd-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sm-line);
}
.sd-hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.sd-hero-meta b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  letter-spacing: -.02em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.sd-hero-meta span {
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: .03em;
}
@media (max-width: 600px) {
  .sd-hero-meta { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

.sd-hero-mock {
  position: relative;
  padding: 2rem clamp(1rem, 2vw, 2rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 25% 15%, rgba(123,45,155,.35), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(232,74,110,.28), transparent 60%),
    linear-gradient(135deg, #100618 0%, #1a0826 60%, #1f0a30 100%);
  border: 1px solid var(--sm-line);
  box-shadow: var(--sm-shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sd-hero-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.sd-hero-mock .mock { position: relative; z-index: 1; width: 100%; max-width: 460px; }

/* --- Anchor strip (sticky tab nav) --- */
.sd-anchor-strip {
  position: sticky;
  top: 64px;
  z-index: 10;
  background: rgba(10,4,22,.75);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .5rem 0;
}
.sd-anchor-row {
  display: flex;
  gap: .3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.sd-anchor-row::-webkit-scrollbar { display: none; }
.sd-anchor {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  color: var(--sm-fg-soft);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background .25s, color .25s;
  flex-shrink: 0;
}
.sd-anchor span {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  letter-spacing: .14em;
  padding: .15rem .35rem;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--sm-fg-mute);
}
.sd-anchor:hover {
  color: var(--sm-fg);
  background: rgba(255,255,255,.04);
}

/* --- Generic section wrapper --- */
.sd-section {
  padding-block: clamp(5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--sm-line-2);
}
.sd-section-alt { background: var(--sm-bg-soft); }

/* --- Capabilities (6-grid) --- */
.sd-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 991px) { .sd-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sd-cap-grid { grid-template-columns: 1fr; } }

.sd-cap {
  position: relative;
  padding: 1.8rem 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.sd-cap::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--sm-grad);
  -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;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  pointer-events: none;
}
.sd-cap:hover {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow);
  border-color: transparent;
}
.sd-cap:hover::before { opacity: 1; }

.sd-cap-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sm-grad-soft);
  color: var(--sm-magenta-500);
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}
.sd-cap h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}
.sd-cap > p {
  color: var(--sm-fg-soft);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.sd-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-cap-list li {
  position: relative;
  padding: .3rem 0 .3rem 1.1rem;
  font-size: .85rem;
  color: var(--sm-fg-soft);
}
.sd-cap-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .8rem;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--sm-grad);
}

/* --- Anatomy diagram --- */
.sd-anatomy {
  max-width: 1000px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.sd-layer {
  position: relative;
  padding: 1.6rem 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: border-color .4s, transform .4s var(--ease-out);
}
.sd-layer:hover { border-color: rgba(193,53,132,.4); transform: translateY(-2px); }
.sd-layer-pulse {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(193,53,132,.12), transparent 60%),
    var(--sm-bg-card);
  border-color: rgba(193,53,132,.30);
}
.sd-layer-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sd-layer-no {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.025em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  flex-shrink: 0;
  min-width: 38px;
}
.sd-layer-head h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .2rem;
}
.sd-layer-head p {
  font-size: .88rem;
  color: var(--sm-fg-soft);
  margin: 0;
}
.sd-layer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sd-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg-soft);
  letter-spacing: -.005em;
}
.sd-pill i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: .85rem;
}
.sd-pill-bright {
  border-color: rgba(232,74,110,.5);
  background: rgba(232,74,110,.08);
  color: var(--sm-fg);
}

/* Flow arrow between layers */
.sd-flow-arrow {
  position: relative;
  height: 40px;
  margin: 0 auto;
  width: 2px;
  overflow: visible;
}
.sd-flow-line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sm-magenta-500), transparent);
  transform: translateX(-50%);
}
.sd-flow-dot {
  position: absolute;
  left: 50%;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--sm-grad);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(193,53,132,.7);
  animation: sdFlowDot 2.2s linear infinite;
}
.sd-flow-d1 { animation-delay: 0s; }
.sd-flow-d2 { animation-delay: -.7s; }
.sd-flow-d3 { animation-delay: -1.4s; }
@keyframes sdFlowDot {
  0%   { top: -8px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* --- Sectoral tabs --- */
.sd-sectors { margin-top: 2.5rem; }
.sd-sec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sm-line);
  margin-bottom: 2rem;
}
.sd-sec-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--sm-fg-soft);
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.sd-sec-tab i {
  font-size: 1rem;
  color: var(--sm-magenta-500);
}
.sd-sec-tab:hover { color: var(--sm-fg); border-color: rgba(193,53,132,.4); }
.sd-sec-tab.is-active {
  color: #fff;
  background: var(--sm-grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -6px rgba(193,53,132,.5);
}
.sd-sec-tab.is-active i {
  color: #fff;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}

.sd-sec-panels { display: grid; }
.sd-sec-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: start;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.sd-sec-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sd-sec-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.sd-sec-content > p {
  color: var(--sm-fg-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.sd-sec-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.sd-sec-bullets span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: var(--sm-fg-soft);
}
.sd-sec-bullets i {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--sm-grad-soft);
  display: grid; place-items: center;
  font-size: .6rem;
  color: var(--sm-magenta-500);
  flex-shrink: 0;
}

.sd-sec-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
}
.sd-sec-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sm-line-2);
}
.sd-sec-stat:last-child { padding-bottom: 0; border-bottom: 0; }
.sd-sec-stat b {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.025em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.sd-sec-stat span {
  font-size: .82rem;
  color: var(--sm-fg-mute);
}
@media (max-width: 991px) {
  .sd-sec-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .sd-sec-bullets { grid-template-columns: 1fr; }
}

/* --- Tech stack categorized --- */
.sd-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
@media (max-width: 768px) { .sd-stack-grid { grid-template-columns: 1fr; } }

.sd-stack-cat {
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.sd-stack-cat:hover { border-color: rgba(193,53,132,.4); transform: translateY(-2px); }
.sd-stack-cat header {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-bottom: 1.2rem;
}
.sd-stack-cat header i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1.1rem;
}
.sd-stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sd-stack-items span {
  padding: .4rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg);
  letter-spacing: -.005em;
}

/* --- Featured case --- */
.sd-case {
  position: relative;
  margin-top: 3rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(20,10,35,.6) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  isolation: isolate;
}
.sd-case-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,45,155,.4), transparent 60%);
  filter: blur(80px);
  top: -200px; right: -200px;
  z-index: -1;
  pointer-events: none;
}
.sd-case-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.sd-case-no { color: var(--sm-fg-mute); }
.sd-case-tag {
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.04);
  color: var(--sm-fg);
}
.sd-case-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 991px) { .sd-case-grid { grid-template-columns: 1fr; } }

.sd-case-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.sd-case-block {
  padding-left: 1.2rem;
  border-left: 2px solid var(--sm-magenta-500);
}
.sd-case-block h5 {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-magenta-500);
  margin: 0 0 .45rem;
}
.sd-case-block p {
  color: var(--sm-fg-soft);
  font-size: .96rem;
  line-height: 1.6;
  margin: 0;
}

.sd-case-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
}
.sd-case-stat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.sd-case-arrow {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(232,74,110,.12);
  border: 1px solid rgba(232,74,110,.35);
  color: #e84a6e;
  display: inline-grid; place-items: center;
  font-size: .85rem;
  margin-bottom: .5rem;
}
.sd-case-arrow-up {
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.35);
  color: #2ecc71;
}
.sd-case-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.sd-case-num i {
  font-style: normal;
  font-size: .55em;
  margin-left: .05em;
}
.sd-case-lbl {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg-soft);
}

.sd-case-foot {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sm-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sd-case-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.sd-case-tags span {
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-soft);
  letter-spacing: .04em;
}
.sd-case-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--sm-fg);
  transition: gap .3s var(--ease-out), color .3s;
}
.sd-case-link:hover { color: var(--sm-magenta-500); gap: .55rem; }

/* --- Engagement packages --- */
.sd-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
@media (max-width: 991px) {
  .sd-pack-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.sd-pack {
  position: relative;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.sd-pack:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
}
.sd-pack-feature {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(193,53,132,.10), transparent 60%),
    var(--sm-bg-card);
  border-color: rgba(193,53,132,.45);
  box-shadow: 0 30px 80px -20px rgba(123,45,155,.30);
}
.sd-pack-badge {
  position: absolute;
  top: -10px; right: 16px;
  padding: .25rem .65rem;
  background: var(--sm-grad);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(193,53,132,.5);
}

.sd-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.sd-pack-tag {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-magenta-500);
}
.sd-pack-time {
  font-family: var(--font-display);
  font-size: .76rem;
  color: var(--sm-fg-mute);
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
}

.sd-pack h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}
.sd-pack > p {
  color: var(--sm-fg-soft);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}
.sd-pack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.sd-pack-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  font-size: .88rem;
  color: var(--sm-fg-soft);
  border-bottom: 1px solid var(--sm-line-2);
}
.sd-pack-list li:last-child { border-bottom: 0; }
.sd-pack-list i {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--sm-grad-soft);
  color: var(--sm-magenta-500);
  display: grid; place-items: center;
  font-size: .6rem;
  flex-shrink: 0;
}
.sd-pack-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--sm-line);
  margin-top: auto;
}
.sd-pack-best {
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: .03em;
}
.sd-pack-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 500;
  color: var(--sm-fg);
  transition: color .3s, gap .3s var(--ease-out);
}
.sd-pack-cta:hover { color: var(--sm-magenta-500); gap: .5rem; }

/* --- Related services --- */
.sd-related {
  padding-block: clamp(5rem, 9vw, 8rem);
}
.sd-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
@media (max-width: 991px) { .sd-rel-grid { grid-template-columns: 1fr; } }

.sd-rel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  color: var(--sm-fg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.sd-rel:hover { transform: translateY(-4px); border-color: rgba(193,53,132,.4); color: var(--sm-fg); }
.sd-rel-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.25), transparent 60%);
  filter: blur(60px);
  top: -100px; right: -100px;
  z-index: 0;
  opacity: .5;
  transition: opacity .4s;
}
.sd-rel:hover .sd-rel-glow { opacity: 1; }

.sd-rel > * { position: relative; z-index: 1; }
.sd-rel-no {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--sm-fg-mute);
}
.sd-rel h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}
.sd-rel > p {
  color: var(--sm-fg-soft);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}
.sd-rel-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 500;
  color: var(--sm-fg);
  transition: gap .3s var(--ease-out), color .3s;
}
.sd-rel:hover .sd-rel-link { color: var(--sm-magenta-500); gap: .5rem; }

/* ============================================================================
   CAPABILITIES PAGE (capabilities.html) — cb-* prefix
   ============================================================================ */

/* Hero stack visualization (right side of hero) */
.cb-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 2rem 4rem;
}
@media (max-width: 991px) { .cb-hero-grid { grid-template-columns: 1fr; } }

.cb-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  perspective: 1200px;
}
.cb-stack-layer {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20,10,35,.7) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 32px -10px rgba(0,0,0,.5);
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
  position: relative;
  z-index: 1;
}
.cb-stack-layer:hover {
  transform: translateY(-3px) translateZ(20px);
  border-color: rgba(193,53,132,.45);
  z-index: 10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 40px -10px rgba(123,45,155,.4);
}
.cb-stack-no {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  font-variant-numeric: tabular-nums;
}
.cb-stack-layer strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--sm-fg);
  margin-bottom: .15rem;
}
.cb-stack-layer em {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-style: normal;
  color: var(--sm-fg-mute);
  letter-spacing: 0;
}
.cb-stack-layer > i {
  font-size: 1.2rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cb-stack-conn {
  height: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sm-magenta-500), transparent);
  margin-left: 36px;
  position: relative;
}
.cb-stack-conn::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--sm-magenta-500);
  box-shadow: 0 0 8px var(--sm-magenta-500);
  animation: cbStackPulse 2.4s ease-in-out infinite;
}
.cb-stack-layer[data-layer="2"] { background: linear-gradient(135deg, rgba(123,45,155,.20) 0%, rgba(10,5,20,.85) 100%); }
.cb-stack-layer[data-layer="3"] { background: linear-gradient(135deg, rgba(193,53,132,.16) 0%, rgba(10,5,20,.85) 100%); }
.cb-stack-layer[data-layer="4"] { background: linear-gradient(135deg, rgba(232,74,110,.16) 0%, rgba(10,5,20,.85) 100%); }
@keyframes cbStackPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: .6; }
  50%      { transform: translateY(-50%) scale(1.6); opacity: 1; }
}

/* ===== 4 layers detail section ===== */
.cb-layers {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2rem;
}

.cb-layer {
  position: relative;
  padding: 2.2rem 2rem;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(20,10,35,.45) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid var(--sm-line);
  overflow: hidden;
  transition: border-color .4s var(--ease-out);
}
.cb-layer:hover { border-color: rgba(193,53,132,.4); }
.cb-layer::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.18), transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.cb-layer > * { position: relative; z-index: 1; }

.cb-layer-head {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.cb-layer-no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.03em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.cb-layer-title h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0 0 .2rem;
  color: var(--sm-fg);
}
.cb-layer-tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--sm-fg-soft);
}
.cb-layer-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--sm-grad-soft);
  font-size: 1.5rem;
}
.cb-layer-icon i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cb-layer-body {
  color: var(--sm-fg-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.6rem;
  max-width: 70ch;
}
.cb-layer-body strong { color: var(--sm-fg); font-weight: 500; }

.cb-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .cb-layer-grid { grid-template-columns: 1fr; } }

.cb-sub h5 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--sm-fg);
  margin: 0 0 .65rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--sm-line);
  width: 100%;
}
.cb-sub h5 i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1rem;
}
.cb-sub ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cb-sub li {
  position: relative;
  padding: .25rem 0 .25rem 1.1rem;
  font-size: .9rem;
  color: var(--sm-fg-soft);
  line-height: 1.4;
}
.cb-sub li::before {
  content: "";
  position: absolute;
  left: 0; top: .8rem;
  width: 5px; height: 1px;
  background: var(--sm-magenta-500);
}

.cb-layer-foot {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: rgba(193,53,132,.08);
  border: 1px solid rgba(193,53,132,.3);
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--sm-fg);
}
.cb-layer-out i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cb-layer-out strong {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 500;
}

/* ===== Cross-cutting capabilities ===== */
.cb-cross-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
@media (max-width: 768px) { .cb-cross-grid { grid-template-columns: 1fr; } }

.cb-cross {
  position: relative;
  padding: 2rem 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.cb-cross:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
}
.cb-cross-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--sm-grad-soft);
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}
.cb-cross-icon i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cb-cross h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 .55rem;
}
.cb-cross > p {
  color: var(--sm-fg-soft);
  font-size: .94rem;
  line-height: 1.55;
  margin: 0 0 1.2rem;
}
.cb-cross > p strong { color: var(--sm-fg); font-weight: 500; }
.cb-cross-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cb-cross-list li {
  position: relative;
  padding: .35rem 0 .35rem 1.2rem;
  font-size: .88rem;
  color: var(--sm-fg-soft);
}
.cb-cross-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: .85rem;
  font-weight: 700;
}

/* ===== Maturity matrix ===== */
.cb-matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .cb-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .cb-matrix { grid-template-columns: 1fr; } }

.cb-mat {
  position: relative;
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.cb-mat:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.4);
}
.cb-mat.is-current {
  background:
    linear-gradient(135deg, rgba(123,45,155,.15), rgba(232,74,110,.10)),
    var(--sm-bg-card);
  border-color: rgba(193,53,132,.5);
  box-shadow: 0 20px 50px -16px rgba(193,53,132,.4);
}
.cb-mat-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: .25rem .7rem;
  background: var(--sm-grad);
  color: #fff;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(193,53,132,.5);
}
.cb-mat-head {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sm-line);
}
.cb-mat-no {
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  font-variant-numeric: tabular-nums;
}
.cb-mat h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
}
.cb-mat-tag {
  font-family: var(--font-sans);
  font-size: .76rem;
  color: var(--sm-fg-soft);
  letter-spacing: 0;
}
.cb-mat > p {
  color: var(--sm-fg-soft);
  font-size: .85rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.cb-mat-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem 0;
  font-size: .78rem;
  color: var(--sm-fg-soft);
}
.cb-mat-row i {
  font-size: .85rem;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.cb-mat-row .bi-check2 { color: #2ecc71; }
.cb-mat-row .bi-x { color: #e84a6e; opacity: .7; }
.cb-mat-row .bi-dash { color: var(--sm-fg-mute); }

.cb-matrix-foot {
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-matrix-foot p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .94rem;
  color: var(--sm-fg-soft);
  max-width: 60ch;
}
.cb-matrix-foot p strong {
  color: var(--sm-fg);
  font-weight: 500;
}
.cb-matrix-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--sm-magenta-500);
  background: rgba(193,53,132,.08);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: background .25s, gap .25s var(--ease-out);
}
.cb-matrix-link:hover {
  color: #fff;
  background: rgba(193,53,132,.18);
  gap: .55rem;
}
.cb-matrix-link i { transition: transform .3s var(--ease-out); }
.cb-matrix-link:hover i { transform: translate(2px, -2px); }

/* ===== Tech atlas ===== */
.cb-atlas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .cb-atlas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .cb-atlas { grid-template-columns: 1fr; } }

.cb-atlas-cat {
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.cb-atlas-cat:hover {
  border-color: rgba(193,53,132,.4);
  transform: translateY(-2px);
}
.cb-atlas-cat header {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-bottom: 1rem;
}
.cb-atlas-cat header i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1rem;
}
.cb-atlas-items {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.cb-atlas-items span {
  padding: .35rem .75rem;
  border-radius: 8px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg);
}

/* ===== Combinations ===== */
.cb-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .cb-combo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .cb-combo-grid { grid-template-columns: 1fr; } }

.cb-combo {
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.cb-combo:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
}
.cb-combo-layers {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(193,53,132,.08);
  border: 1px solid rgba(193,53,132,.3);
}
.cb-combo-l {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cb-combo-plus {
  font-family: var(--font-display);
  font-size: .68rem;
  color: var(--sm-fg-mute);
}
.cb-combo h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .55rem;
  color: var(--sm-fg);
}
.cb-combo > p {
  color: var(--sm-fg-soft);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.cb-combo-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sm-line);
}
.cb-combo-stack span {
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-soft);
}

/* ============================================================================
   PROCESS PAGE (process.html) — pr-* prefix
   ============================================================================ */

.pr-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 2rem 4rem;
}
@media (max-width: 991px) { .pr-hero-grid { grid-template-columns: 1fr; } }

/* Hero timeline visualization */
.pr-timeline {
  position: relative;
  padding: 1.5rem 0;
}
.pr-tl-line {
  position: absolute;
  left: 16px;
  top: 36px; bottom: 36px;
  width: 2px;
  background: linear-gradient(180deg, var(--sm-purple-600), var(--sm-pink-500));
  border-radius: 2px;
}
.pr-tl-pulse {
  position: absolute;
  left: 13px;
  top: 36px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sm-grad);
  box-shadow: 0 0 12px rgba(232,74,110,.8);
  animation: prTlPulse 4s ease-in-out infinite;
}
@keyframes prTlPulse {
  0%   { top: 36px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 44px); opacity: 0; }
}
.pr-tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
}
.pr-tl-dot {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 2px solid var(--sm-magenta-500);
  background: rgba(193,53,132,.10);
  position: relative;
  z-index: 2;
}
.pr-tl-dot-active {
  background: var(--sm-grad);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(232,74,110,.6);
  animation: prTlDot 2s ease-in-out infinite;
}
@keyframes prTlDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.pr-tl-card {
  padding: .9rem 1.2rem;
  border-radius: 14px;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .35s var(--ease-out), border-color .35s;
}
.pr-tl-step:hover .pr-tl-card {
  transform: translateX(4px);
  border-color: rgba(193,53,132,.45);
}
.pr-tl-no {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  font-variant-numeric: tabular-nums;
}
.pr-tl-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--sm-fg);
  margin-right: auto;
}
.pr-tl-card em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-fg-mute);
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
}

/* ===== Section 1: Linear flow ===== */
.pr-flow {
  margin-top: 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pr-flow::-webkit-scrollbar { display: none; }
.pr-flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
  min-width: 920px;
}
.pr-flow-step {
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.pr-flow-step:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
  box-shadow: var(--sm-shadow);
}
.pr-flow-active {
  background:
    linear-gradient(135deg, rgba(193,53,132,.10), rgba(232,74,110,.06)),
    var(--sm-bg-card);
  border-color: rgba(193,53,132,.4);
}
.pr-flow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pr-flow-no {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.03em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.pr-flow-time {
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  letter-spacing: .02em;
}
.pr-flow-step h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
}
.pr-flow-step > p {
  font-size: .88rem;
  color: var(--sm-fg-soft);
  line-height: 1.5;
  margin: 0;
}
.pr-flow-out {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg);
}
.pr-flow-out i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1.2rem;
}
.pr-flow-arrow {
  display: grid;
  place-items: center;
  color: var(--sm-fg-mute);
  font-size: 1.4rem;
}

/* ===== Section 2: Phase detail ===== */
.pr-phases {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.pr-phase {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(20,10,35,.45) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid var(--sm-line);
  transition: border-color .4s var(--ease-out);
  overflow: hidden;
  position: relative;
}
.pr-phase:hover { border-color: rgba(193,53,132,.4); }
.pr-phase::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.18), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.pr-phase > * { position: relative; z-index: 1; }

.pr-phase-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--sm-line);
}
.pr-phase-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding-right: 1rem;
  border-right: 1px solid var(--sm-line);
}
.pr-phase-no {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -.03em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.pr-phase-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  white-space: nowrap;
}
.pr-phase-title h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0 0 .2rem;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}
.pr-phase-en {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .65em;
  color: var(--sm-fg-mute);
}
.pr-phase-tagline {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--sm-fg-soft);
}
.pr-phase-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--sm-grad-soft);
  font-size: 1.5rem;
}
.pr-phase-icon i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pr-phase-body {
  color: var(--sm-fg-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.6rem;
  max-width: 75ch;
}
.pr-phase-body strong { color: var(--sm-fg); font-weight: 500; }

.pr-phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@media (max-width: 991px) { .pr-phase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .pr-phase-grid { grid-template-columns: 1fr; } }

.pr-sub h5 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--sm-fg);
  margin: 0 0 .65rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--sm-line);
  width: 100%;
}
.pr-sub h5 i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1rem;
}
.pr-sub ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pr-sub li {
  position: relative;
  padding: .3rem 0 .3rem 1rem;
  font-size: .87rem;
  color: var(--sm-fg-soft);
  line-height: 1.4;
}
.pr-sub li::before {
  content: "";
  position: absolute;
  left: 0; top: .85rem;
  width: 5px; height: 1px;
  background: var(--sm-magenta-500);
}

/* ===== Section 3: Rhythm ===== */
.pr-rhythm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .pr-rhythm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .pr-rhythm-grid { grid-template-columns: 1fr; } }

.pr-rhythm {
  position: relative;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.pr-rhythm:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
}
.pr-rhythm-cadence {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  padding: .25rem .65rem;
  background: var(--sm-grad);
  border-radius: 999px;
  margin-bottom: 1rem;
}
.pr-rhythm h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .55rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.pr-rhythm h4 i {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1.05rem;
}
.pr-rhythm > p {
  color: var(--sm-fg-soft);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.pr-rhythm-who {
  display: block;
  padding-top: .8rem;
  border-top: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: .02em;
}

/* ===== Section 4: Artifacts ===== */
.pr-art-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) { .pr-art-matrix { grid-template-columns: 1fr; } }

.pr-art {
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.pr-art:hover { border-color: rgba(193,53,132,.4); transform: translateY(-2px); }
.pr-art header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sm-line);
}
.pr-art-no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.03em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.pr-art header h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
}
.pr-art ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pr-art li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .92rem;
  color: var(--sm-fg-soft);
  line-height: 1.5;
}
.pr-art li i {
  flex-shrink: 0;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1.05rem;
  margin-top: .1rem;
}

/* ===== Section 5: Principles ===== */
.pr-princ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .pr-princ-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .pr-princ-grid { grid-template-columns: 1fr; } }

.pr-princ {
  position: relative;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  overflow: hidden;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.pr-princ:hover {
  border-color: rgba(193,53,132,.45);
  transform: translateY(-3px);
}
.pr-princ::after {
  content: "";
  position: absolute;
  bottom: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.15), transparent 60%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  pointer-events: none;
}
.pr-princ:hover::after { opacity: 1; }
.pr-princ-no {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -.035em;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: .8rem;
}
.pr-princ h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}
.pr-princ p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* ===== Section 6: RACI ===== */
.pr-raci {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) { .pr-raci { grid-template-columns: 1fr; } }

.pr-raci-col {
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
}
.pr-raci-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--sm-line);
}
.pr-raci-head h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
}
.pr-raci-head i {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--sm-grad-soft);
  font-size: 1.1rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  border: 1px solid var(--sm-line);
  background-color: rgba(193,53,132,.06);
}
.pr-raci-us h4 { color: var(--sm-fg); }
.pr-raci-you h4 { color: var(--sm-fg); }
.pr-raci-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pr-raci-col li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .92rem;
  color: var(--sm-fg-soft);
  line-height: 1.5;
}
.pr-raci-col li i {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--sm-grad-soft);
  color: var(--sm-magenta-500);
  display: grid; place-items: center;
  font-size: .65rem;
  margin-top: .15rem;
}
.pr-raci-col li strong {
  color: var(--sm-fg);
  font-weight: 500;
}

.pr-raci-foot {
  margin-top: 2.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  text-align: center;
}
.pr-raci-foot p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--sm-fg-soft);
}
.pr-raci-foot strong {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 500;
}

/* ============================================================================
   WORKS PAGE (works.html) — wk-* prefix
   ============================================================================ */

.wk-hero-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 2rem 4rem;
}
@media (max-width: 991px) { .wk-hero-row { grid-template-columns: 1fr; } }

.wk-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.wk-stat {
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: transform .35s var(--ease-out), border-color .35s;
}
.wk-stat:hover { transform: translateY(-3px); border-color: rgba(193,53,132,.4); }
.wk-stat b {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wk-stat b sup { font-size: .55em; vertical-align: super; }
.wk-stat span {
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--sm-fg-soft);
  letter-spacing: .02em;
}

/* ===== Featured case ===== */
.wk-feat {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(20,10,35,.55) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  isolation: isolate;
}
.wk-feat-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,45,155,.35), transparent 60%);
  filter: blur(80px);
  top: -200px; right: -200px;
  z-index: -1;
  pointer-events: none;
}
.wk-feat-grid {
  display: grid;
  grid-template-columns: auto 2fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 991px) {
  .wk-feat-grid {
    grid-template-columns: 1fr;
  }
}

.wk-feat-meta {
  padding: 1.4rem 1.2rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.wk-feat-tag {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(232,74,110,.4);
  background: rgba(232,74,110,.08);
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffd2c4;
  align-self: flex-start;
}
.wk-feat-stage {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.wk-feat-stage span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg-soft);
}
.wk-feat-stage i {
  font-size: .95rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.wk-feat-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.wk-feat-block {
  padding-left: 1.2rem;
  border-left: 2px solid var(--sm-magenta-500);
}
.wk-feat-block h5 {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-magenta-500);
  margin: 0 0 .45rem;
}
.wk-feat-block p {
  color: var(--sm-fg-soft);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}
.wk-feat-block p strong { color: var(--sm-fg); font-weight: 500; }

.wk-feat-stats {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius);
}
.wk-feat-stat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--sm-line-2);
}
.wk-feat-stat:last-child { padding-bottom: 0; border-bottom: 0; }
.wk-feat-arrow {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
  color: #2ecc71;
  display: grid; place-items: center;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.wk-feat-arrow-down {
  border-color: rgba(232,74,110,.35);
  background: rgba(232,74,110,.10);
  color: #e84a6e;
}
.wk-feat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wk-feat-num sup { font-size: .5em; vertical-align: super; }
.wk-feat-lbl {
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg-soft);
}

.wk-feat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  margin-top: 2rem;
  border-top: 1px solid var(--sm-line);
}
.wk-feat-tech {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.wk-feat-tech-lbl {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-right: .35rem;
}
.wk-feat-tech span:not(.wk-feat-tech-lbl) {
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-soft);
}
.wk-feat-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--sm-fg);
  transition: gap .3s var(--ease-out), color .3s;
}
.wk-feat-link:hover { color: var(--sm-magenta-500); gap: .55rem; }

/* ===== Filter bar ===== */
.wk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sm-line);
}
.wk-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 500;
  color: var(--sm-fg-soft);
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.wk-filter i {
  font-size: .95rem;
  color: var(--sm-magenta-500);
}
.wk-filter b {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--sm-fg-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wk-filter:hover {
  color: var(--sm-fg);
  border-color: rgba(193,53,132,.4);
}
.wk-filter.is-active {
  color: #fff;
  background: var(--sm-grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -6px rgba(193,53,132,.5);
}
.wk-filter.is-active i,
.wk-filter.is-active b {
  color: #fff;
  background: rgba(255,255,255,.18);
}

/* ===== Cases grid ===== */
.wk-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 991px) { .wk-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wk-cases { grid-template-columns: 1fr; } }

.wk-case {
  position: relative;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(20,10,35,.5) 0%, rgba(10,5,20,.85) 100%);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s, opacity .4s var(--ease-out);
}
.wk-case:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.4);
  box-shadow: var(--sm-shadow);
}
.wk-case-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,53,132,.18), transparent 60%);
  filter: blur(60px);
  top: -100px; right: -100px;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  transition: opacity .4s var(--ease-out);
}
.wk-case:hover .wk-case-glow { opacity: 1; }
.wk-case.is-hidden {
  opacity: 0;
  transform: scale(.95);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.wk-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wk-case-no { color: var(--sm-fg-mute); }
.wk-case-tag {
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.03);
  color: var(--sm-fg-soft);
}

.wk-case h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--sm-fg);
}
.wk-case > p {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
}

.wk-case-metric {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-top: .8rem;
  border-top: 1px solid var(--sm-line);
  margin-top: auto;
}
.wk-case-arrow {
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(232,74,110,.35);
  background: rgba(232,74,110,.10);
  color: #e84a6e;
  display: grid; place-items: center;
  font-size: .8rem;
  align-self: center;
  flex-shrink: 0;
}
.wk-case-arrow-up {
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
  color: #2ecc71;
}
.wk-case-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wk-case-num sup { font-size: .5em; vertical-align: super; }
.wk-case-lbl {
  font-family: var(--font-display);
  font-size: .76rem;
  color: var(--sm-fg-soft);
  margin-left: .35rem;
}

.wk-case footer {
  padding-top: .8rem;
  border-top: 1px solid var(--sm-line);
}
.wk-case-tags {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.wk-case-tags span {
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .68rem;
  color: var(--sm-fg-mute);
}

/* Empty state */
.wk-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--sm-line);
  margin-top: 2rem;
}
.wk-empty.is-shown { display: flex; }
.wk-empty i {
  font-size: 2.5rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wk-empty p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--sm-fg-soft);
  margin: 0;
  max-width: 40ch;
}

/* ===== Industries grid ===== */
.wk-ind {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .wk-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wk-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wk-ind-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  transition: transform .3s var(--ease-out), border-color .3s;
}
.wk-ind-item:hover {
  transform: translateY(-2px);
  border-color: rgba(193,53,132,.4);
}
.wk-ind-item i {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--sm-grad-soft);
  display: grid; place-items: center;
  font-size: 1.05rem;
  color: var(--sm-magenta-500);
  flex-shrink: 0;
}
.wk-ind-item span {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  color: var(--sm-fg);
  flex: 1;
  min-width: 0;
}
.wk-ind-item b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ===== Numbers grid ===== */
.wk-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) { .wk-numbers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wk-numbers { grid-template-columns: 1fr; } }

.wk-num {
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: transform .35s var(--ease-out), border-color .35s;
}
.wk-num:hover { transform: translateY(-3px); border-color: rgba(193,53,132,.4); }
.wk-num-val {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.wk-num-val sup { font-size: .45em; vertical-align: super; }
.wk-num-lbl {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sm-fg);
  letter-spacing: -.005em;
}
.wk-num-sub {
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--sm-fg-mute);
  letter-spacing: 0;
}

/* ===== Quotes grid ===== */
.wk-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .wk-quotes { grid-template-columns: 1fr; } }

.wk-quote {
  position: relative;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform .35s var(--ease-out), border-color .35s;
}
.wk-quote:hover { transform: translateY(-3px); border-color: rgba(193,53,132,.45); }
.wk-quote-mark {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: .5;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  align-self: flex-start;
}
.wk-quote p {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sm-fg);
  margin: 0;
}
.wk-quote p strong {
  font-weight: 500;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wk-quote footer {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sm-line);
}
.wk-quote-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(123,45,155,.5);
}
.wk-quote-avatar[data-color="purple"]  { background: linear-gradient(135deg, #5a1f7a, #c13584); }
.wk-quote-avatar[data-color="magenta"] { background: linear-gradient(135deg, #c13584, #e84a6e); }
.wk-quote-avatar[data-color="coral"]   { background: linear-gradient(135deg, #7b2d9b, #e84a6e); }
.wk-quote footer > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.wk-quote-name {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 500;
  color: var(--sm-fg);
}
.wk-quote-role {
  font-family: var(--font-sans);
  font-size: .76rem;
  color: var(--sm-fg-mute);
}
.wk-quote-stars {
  letter-spacing: 1px;
  font-size: .85rem;
  background: linear-gradient(135deg, #ffd76b, #ff9aa8);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}


/* ============================================================================
   STUDIO PAGE (st-*) — Hakkımızda / Stüdyo
   ============================================================================ */

/* ===== Hero — split grid with signature card ===== */
.st-hero { padding-bottom: 8rem; }

.st-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  margin-top: 2rem;
}
@media (max-width: 991.98px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

.st-hero-card {
  position: relative;
  perspective: 1200px;
}
.st-hero-card-inner {
  position: relative;
  padding: 2.25rem 2rem;
  border-radius: 1.5rem;
  background:
    linear-gradient(155deg, rgba(123,45,155,.22), rgba(232,74,110,.10) 60%, rgba(10,4,22,.85)),
    var(--sm-bg-card);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px -20px rgba(123,45,155,.50),
    0 1px 0 0 rgba(255,255,255,.08) inset;
  overflow: hidden;
  isolation: isolate;
  transform: rotate(.6deg);
}
.st-hero-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(123,45,155,.35), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(232,74,110,.18), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.st-hero-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(193,53,132,.55), rgba(123,45,155,.0) 35%, rgba(232,74,110,.55));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.st-hero-card-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--sm-fg-soft);
  text-transform: uppercase;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 1.5rem;
}
.st-hero-card-mark i {
  color: var(--sm-pink-500);
  font-style: normal;
}
.st-hero-card-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--sm-fg);
  margin: 0 0 1.75rem;
}
.st-hero-card-quote strong {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.st-hero-card-sig {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.st-hero-card-sig-name {
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--sm-fg);
  letter-spacing: .02em;
}
.st-hero-card-sig-loc {
  font-size: .78rem;
  color: var(--sm-fg-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ===== Manifesto blocks ===== */
.st-manifesto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) {
  .st-manifesto { grid-template-columns: 1fr; gap: 1rem; }
}
.st-mf-block {
  position: relative;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.st-mf-block::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--sm-grad);
  opacity: .5;
}
.st-mf-block:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.35);
}
.st-mf-block h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--sm-fg);
}
.st-mf-block h3 em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--sm-pink-500);
}
.st-mf-block p {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
  margin: 0;
}
.st-mf-block p strong {
  color: var(--sm-fg);
  font-weight: 600;
}

/* ===== Timeline ===== */
.st-timeline {
  position: relative;
  margin-top: 3rem;
  padding-left: 2.5rem;
}
@media (min-width: 768px) {
  .st-timeline { padding-left: 0; max-width: 880px; margin-left: auto; margin-right: auto; }
}
.st-tl-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: .85rem;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(123,45,155,0) 0%,
    rgba(123,45,155,.55) 12%,
    rgba(193,53,132,.55) 50%,
    rgba(232,74,110,.55) 88%,
    rgba(232,74,110,0) 100%);
  border-radius: 2px;
}
@media (min-width: 768px) {
  .st-tl-line { left: 50%; transform: translateX(-50%); }
}
.st-tl-item {
  position: relative;
  padding: 1rem 0 1.5rem 1.5rem;
}
@media (min-width: 768px) {
  .st-tl-item {
    width: 50%;
    padding: 1.25rem 0 1.5rem 0;
    padding-right: 3rem;
  }
  .st-tl-item:nth-child(odd) { /* keep .st-tl-line at nth=1 in mind */
  }
  /* Items: 1st child is the line. Real items start at nth-of-type. Use of-type. */
  .st-tl-item:nth-of-type(odd) {
    margin-left: 0;
  }
  .st-tl-item:nth-of-type(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 3rem;
  }
}
.st-tl-dot {
  position: absolute;
  top: 1.4rem;
  left: -1.65rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sm-bg);
  border: 2px solid var(--sm-purple-600);
  box-shadow: 0 0 0 4px rgba(123,45,155,.12);
  z-index: 2;
}
@media (min-width: 768px) {
  .st-tl-item:nth-of-type(odd) .st-tl-dot {
    left: auto;
    right: -7px;
  }
  .st-tl-item:nth-of-type(even) .st-tl-dot {
    left: -7px;
  }
}
.st-tl-content {
  position: relative;
  padding: 1.4rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  transition: border-color .35s ease, transform .35s ease;
}
.st-tl-content:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateY(-2px);
}
.st-tl-year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--sm-pink-500);
  text-transform: uppercase;
  margin-bottom: .5rem;
  font-weight: 600;
}
.st-tl-content h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .5rem;
}
.st-tl-content p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* Major years emphasize */
.st-tl-major .st-tl-dot {
  width: 18px;
  height: 18px;
  background: var(--sm-grad);
  border-color: transparent;
  box-shadow: 0 0 0 5px rgba(193,53,132,.14), 0 0 22px rgba(232,74,110,.5);
}
@media (min-width: 768px) {
  .st-tl-item.st-tl-major:nth-of-type(odd) .st-tl-dot { right: -9px; }
  .st-tl-item.st-tl-major:nth-of-type(even) .st-tl-dot { left: -9px; }
}
.st-tl-major .st-tl-content {
  background: linear-gradient(155deg, rgba(123,45,155,.16), rgba(232,74,110,.06));
  border-color: rgba(193,53,132,.30);
}
.st-tl-major .st-tl-year {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* "Now" item */
.st-tl-now .st-tl-dot {
  width: 20px;
  height: 20px;
  background: var(--sm-grad);
  border-color: transparent;
  animation: stPulseNow 2.4s ease-in-out infinite;
}
@media (min-width: 768px) {
  .st-tl-item.st-tl-now:nth-of-type(odd) .st-tl-dot { right: -10px; }
  .st-tl-item.st-tl-now:nth-of-type(even) .st-tl-dot { left: -10px; }
}
.st-tl-now .st-tl-content {
  background: linear-gradient(155deg, rgba(123,45,155,.24), rgba(232,74,110,.10));
  border-color: rgba(232,74,110,.45);
}
.st-tl-now .st-tl-year {
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@keyframes stPulseNow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(232,74,110,.18), 0 0 20px rgba(232,74,110,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(232,74,110,.06), 0 0 30px rgba(232,74,110,.8); }
}

/* ===== Values grid ===== */
.st-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .st-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .st-values { grid-template-columns: 1fr; } }
.st-value {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.st-value:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.30);
}
.st-value-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(123,45,155,.18);
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg);
  margin-bottom: 1rem;
  border: 1px solid rgba(193,53,132,.25);
  letter-spacing: .04em;
}
.st-value h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .55rem;
}
.st-value p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* ===== Team grid ===== */
.st-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .st-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .st-team { grid-template-columns: 1fr; } }
.st-member {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.st-member:hover {
  transform: translateY(-4px);
  border-color: rgba(193,53,132,.30);
}
.st-member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px -8px rgba(232,74,110,.4);
  letter-spacing: .04em;
}
.st-member-avatar[data-color="purple"]  { background: linear-gradient(135deg, #5a1f7a, #7b2d9b); }
.st-member-avatar[data-color="magenta"] { background: linear-gradient(135deg, #c13584, #e84a6e); }
.st-member-avatar[data-color="coral"]   { background: linear-gradient(135deg, #7b2d9b, #e84a6e); }
.st-member-role {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--sm-pink-500);
  text-transform: uppercase;
  margin-bottom: .35rem;
  font-weight: 600;
}
.st-member h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .65rem;
}
.st-member p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0 0 1rem;
}
.st-member-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.st-member-tags span {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--sm-fg-soft);
  padding: .25rem .65rem;
  border-radius: 1rem;
  background: rgba(123,45,155,.12);
  border: 1px solid rgba(193,53,132,.18);
}

.st-team-more {
  margin-top: 2rem;
  text-align: center;
  font-size: .98rem;
  color: var(--sm-fg-soft);
  line-height: 1.7;
}
.st-team-more a {
  color: var(--sm-pink-500);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px dashed rgba(232,74,110,.5);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.st-team-more a:hover {
  color: #fff;
  border-color: #fff;
}

/* ===== Culture grid ===== */
.st-culture {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .st-culture { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .st-culture { grid-template-columns: 1fr; } }
.st-cu {
  padding: 1.6rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
  transition: transform .35s ease, border-color .35s ease;
}
.st-cu:hover {
  transform: translateY(-2px);
  border-color: rgba(193,53,132,.28);
}
.st-cu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(123,45,155,.22), rgba(232,74,110,.18));
  border: 1px solid rgba(193,53,132,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--sm-fg);
  margin-bottom: 1rem;
}
.st-cu h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .45rem;
}
.st-cu p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* ===== Partners grid ===== */
.st-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .st-partners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .st-partners { grid-template-columns: 1fr; } }
.st-partner {
  padding: 1.65rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.1rem;
  text-align: left;
  transition: transform .35s ease, border-color .35s ease;
}
.st-partner:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.30);
}
.st-partner-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--sm-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: .9rem;
  box-shadow: 0 6px 20px -6px rgba(232,74,110,.5);
}
.st-partner h5 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .25rem;
}
.st-partner-level {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--sm-pink-500);
  text-transform: uppercase;
  margin-bottom: .65rem;
  font-weight: 600;
}
.st-partner p {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* ===== Certs strip ===== */
.st-certs {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(180deg, rgba(123,45,155,.10), rgba(255,255,255,.02));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
}
.st-certs-title {
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-weight: 600;
}
.st-certs-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.st-certs-list span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2rem;
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg);
}
.st-certs-list span i {
  color: var(--sm-pink-500);
  font-size: .95rem;
}

/* ===== Jobs list ===== */
.st-jobs {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-top: 2.5rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.st-job {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  position: relative;
  overflow: hidden;
}
.st-job:hover {
  transform: translateY(-2px);
  border-color: rgba(193,53,132,.40);
  background: linear-gradient(180deg, rgba(123,45,155,.10), rgba(232,74,110,.02));
}
.st-job-l {
  flex: 1;
  min-width: 0;
}
.st-job-r {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .st-job { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .st-job-r { flex-wrap: wrap; gap: .85rem; }
}
.st-job-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--sm-pink-500);
  text-transform: uppercase;
  margin-bottom: .5rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 1rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.20);
}
.st-job-tag-warm {
  background: linear-gradient(135deg, rgba(255,215,107,.18), rgba(255,154,168,.10));
  border-color: rgba(255,215,107,.35);
  color: #ffd76b;
}
.st-job h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .35rem;
}
.st-job p {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
}
.st-job-meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg-soft);
}
.st-job-meta i {
  color: var(--sm-pink-500);
}
.st-job-arrow {
  font-size: 1.25rem;
  color: var(--sm-fg-soft);
  transition: color .25s, transform .25s;
}
.st-job:hover .st-job-arrow {
  color: #fff;
  transform: rotate(-45deg);
}

.st-job-spec {
  background: linear-gradient(155deg, rgba(255,215,107,.06), rgba(232,74,110,.04));
  border-color: rgba(255,215,107,.18);
  border-style: dashed;
}
.st-job-spec:hover {
  border-color: rgba(255,215,107,.45);
  background: linear-gradient(155deg, rgba(255,215,107,.12), rgba(232,74,110,.06));
}


/* ============================================================================
   CONTACT PAGE (ct-*) — İletişim
   ============================================================================ */

/* ===== Hero — left text + live status card right ===== */
.ct-hero { padding-bottom: 6.5rem; }

.ct-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  margin-top: 2rem;
}
@media (max-width: 991.98px) {
  .ct-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.ct-hero-card { position: relative; perspective: 1200px; }
.ct-hero-card-inner {
  position: relative;
  padding: 1.85rem 1.85rem;
  border-radius: 1.5rem;
  background:
    linear-gradient(155deg, rgba(123,45,155,.22), rgba(232,74,110,.10) 60%, rgba(10,4,22,.85)),
    var(--sm-bg-card);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px -20px rgba(123,45,155,.50),
    0 1px 0 0 rgba(255,255,255,.08) inset;
  overflow: hidden;
  isolation: isolate;
}
.ct-hero-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(193,53,132,.55), rgba(123,45,155,.0) 35%, rgba(232,74,110,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.ct-status-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ct-status-pulse {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.ct-status-pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2bd47b;
}
.ct-status-pulse span:nth-child(2) {
  background: rgba(43,212,123,.5);
  animation: ctPulse 2.2s ease-out infinite;
}
@keyframes ctPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.ct-status-label {
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .16em;
  color: #2bd47b;
  font-weight: 600;
}

.ct-status-clock {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}
.ct-status-clock-no {
  display: block;
  font-family: var(--font-display);
  font-size: 2.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sm-fg);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff, #c8b8d8);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ct-status-clock-tz {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--sm-fg-mute);
  margin-top: .25rem;
}
.ct-status-day {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.ct-status-day span:first-child {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--sm-fg);
}
.ct-status-day span:last-child {
  font-family: var(--font-display);
  font-size: .76rem;
  color: var(--sm-fg-mute);
  letter-spacing: .04em;
}

.ct-status-list {
  list-style: none;
  padding: 1rem 0 1.1rem;
  margin: 0;
  border-top: 1px dashed rgba(255,255,255,.08);
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.ct-status-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .42rem 0;
  font-size: .86rem;
  color: var(--sm-fg-soft);
  line-height: 1.4;
}
.ct-status-list li i { font-size: .55rem; color: #2bd47b; flex-shrink: 0; }
.ct-status-list li:nth-child(3) i { color: #ffb340; }

.ct-status-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}
.ct-status-foot > span {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg-mute);
}
.ct-status-foot a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 1.5rem;
  background: rgba(37,211,102,.10);
  border: 1px solid rgba(37,211,102,.30);
  color: #2bd47b;
  font-family: var(--font-display);
  font-size: .82rem;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
}
.ct-status-foot a:hover {
  background: rgba(37,211,102,.18);
  border-color: rgba(37,211,102,.55);
  transform: translateY(-1px);
}

/* ===== Form ===== */
.ct-form {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: 2.25rem 2rem 2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)),
    var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ct-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sm-grad);
  opacity: .6;
}

.ct-form-steps {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}
.ct-step {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg-mute);
  transition: color .25s;
}
.ct-step i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--sm-line);
  font-size: .68rem;
  font-style: normal;
  letter-spacing: .04em;
  transition: all .25s;
}
.ct-step.is-on { color: var(--sm-fg); }
.ct-step.is-on i {
  background: var(--sm-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 18px rgba(232,74,110,.4);
}
.ct-step.is-done { color: var(--sm-fg-soft); }
.ct-step.is-done i {
  background: rgba(43,212,123,.15);
  border-color: rgba(43,212,123,.5);
  color: #2bd47b;
}
.ct-step.is-done i::before { content: "✓"; }
.ct-step.is-done i { font-size: 0; }
.ct-step.is-done i::before { font-size: 12px; }
.ct-step-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.10);
  min-width: 18px;
}

.ct-form-block {
  padding: 1.5rem 0 1.5rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.ct-form-block:last-of-type { border-bottom: none; }

.ct-form-label {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.ct-form-no {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--sm-pink-500);
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 1rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.20);
}
.ct-form-q {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--sm-fg);
  font-weight: 600;
}
.ct-form-hint {
  font-size: .78rem;
  color: var(--sm-fg-mute);
  margin-left: auto;
}

.ct-form-sub {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--sm-fg-soft);
  margin-bottom: .65rem;
}

.ct-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 767.98px) {
  .ct-grid-2 { grid-template-columns: 1fr; }
}

.ct-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.ct-pill {
  margin: 0;
  cursor: pointer;
}
.ct-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-pill > span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 2rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--sm-fg-soft);
  transition: all .22s ease;
  user-select: none;
}
.ct-pill > span i { color: var(--sm-fg-mute); transition: color .22s; }
.ct-pill:hover > span {
  border-color: rgba(193,53,132,.35);
  color: var(--sm-fg);
}
.ct-pill:hover > span i { color: var(--sm-pink-500); }
.ct-pill.is-on > span {
  background: var(--sm-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(232,74,110,.5);
}
.ct-pill.is-on > span i { color: #fff; }

.ct-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 575.98px) {
  .ct-form-fields { grid-template-columns: 1fr; }
}

.floating-ta { position: relative; }
.floating-ta textarea {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  padding: 1.25rem 1rem .9rem;
  color: var(--sm-fg);
  font-family: var(--font-sans);
  font-size: .95rem;
  resize: vertical;
  min-height: 130px;
  transition: border-color .25s, background .25s;
}
.floating-ta textarea:focus {
  outline: none;
  border-color: rgba(193,53,132,.55);
  background: rgba(255,255,255,.05);
}
.floating-ta label {
  position: absolute;
  top: .9rem;
  left: 1rem;
  font-size: .92rem;
  color: var(--sm-fg-mute);
  pointer-events: none;
  transition: all .22s ease;
  background: var(--sm-bg-card);
  padding: 0 .35rem;
}
.floating-ta textarea:focus + label,
.floating-ta textarea:not(:placeholder-shown) + label,
.floating-ta textarea:valid + label {
  top: -.55rem;
  left: .75rem;
  font-size: .72rem;
  color: var(--sm-pink-500);
}
/* fallback: always lift if textarea has content */
.floating-ta textarea:not(:empty) ~ label { top: -.55rem; font-size: .72rem; }

.ct-form-extras {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ct-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
  font-size: .88rem;
  color: var(--sm-fg-soft);
  line-height: 1.4;
}
.ct-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-check-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  position: relative;
  transition: all .2s;
  margin-top: 1px;
}
.ct-check input:checked + .ct-check-mark {
  background: var(--sm-grad);
  border-color: transparent;
}
.ct-check input:checked + .ct-check-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ct-form-submit {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}
.ct-form-promise {
  margin: 0;
  font-size: .82rem;
  color: var(--sm-fg-mute);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.5;
}
.ct-form-promise i { color: var(--sm-pink-500); flex-shrink: 0; }

/* ===== Channels grid ===== */
.ct-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .ct-channels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ct-channels { grid-template-columns: 1fr; } }
.ct-ch {
  position: relative;
  padding: 1.65rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform .3s ease, border-color .3s ease;
  overflow: hidden;
}
.ct-ch:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.35);
}
.ct-ch-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: .5rem;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.4);
}
.ct-ch-icon[data-color="purple"]  { background: linear-gradient(135deg, #5a1f7a, #7b2d9b); }
.ct-ch-icon[data-color="magenta"] { background: linear-gradient(135deg, #c13584, #e84a6e); }
.ct-ch-icon[data-color="coral"]   { background: linear-gradient(135deg, #7b2d9b, #e84a6e); }
.ct-ch-icon[data-color="green"]   { background: linear-gradient(135deg, #128c7e, #25d366); }
.ct-ch-icon[data-color="blue"]    { background: linear-gradient(135deg, #0a66c2, #1d8eff); }
.ct-ch-icon[data-color="dark"]    { background: linear-gradient(135deg, #2d2735, #4a4150); }
.ct-ch h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
}
.ct-ch p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0 0 .5rem;
}
.ct-ch-target {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-pink-500);
  word-break: break-word;
  padding-top: .5rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  margin-top: auto;
}
.ct-ch-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.1rem;
  color: var(--sm-fg-mute);
  transition: color .25s, transform .25s;
}
.ct-ch:hover .ct-ch-arrow {
  color: #fff;
  transform: rotate(-45deg);
}

/* ===== Office ===== */
.ct-office {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) {
  .ct-office { grid-template-columns: 1fr; }
}
.ct-office-map {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--sm-line);
  background: var(--sm-bg-card);
  min-height: 400px;
}
.ct-office-map svg { width: 100%; height: 100%; display: block; min-height: 400px; }
.ct-office-map-foot {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.1rem;
  background: rgba(10,4,22,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .85rem;
  flex-wrap: wrap;
}
.ct-office-map-foot > span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg);
}
.ct-office-map-foot > span i { color: var(--sm-pink-500); }
.ct-office-map-foot a {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-pink-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ct-office-map-foot a:hover { color: #fff; }

.ct-office-card {
  padding: 1.85rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ct-of-block { display: flex; flex-direction: column; gap: .5rem; }
.ct-of-h {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  font-weight: 600;
}
.ct-of-h i { color: var(--sm-pink-500); font-size: .9rem; }
.ct-of-block p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--sm-fg);
}
.ct-of-hours, .ct-of-list { list-style: none; padding: 0; margin: 0; }
.ct-of-hours li {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--sm-fg-soft);
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.ct-of-hours li:last-child { border-bottom: none; }
.ct-of-hours li span:first-child { color: var(--sm-fg-mute); }
.ct-of-hours li span:last-child { color: var(--sm-fg); font-family: var(--font-display); }
.ct-of-list li {
  padding-left: 1.1rem;
  position: relative;
  font-size: .9rem;
  color: var(--sm-fg-soft);
  padding-bottom: .35rem;
}
.ct-of-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sm-pink-500);
}
.ct-of-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  border-radius: 2rem;
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-size: .86rem;
  text-decoration: none;
  transition: all .25s;
}
.ct-of-cta:hover {
  background: rgba(193,53,132,.10);
  border-color: rgba(193,53,132,.40);
  color: #fff;
}

/* ===== Flow steps ===== */
.ct-flow {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
@media (max-width: 1199.98px) { .ct-flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px)  { .ct-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)     { .ct-flow { grid-template-columns: 1fr; } }
.ct-flow-step {
  position: relative;
  padding: 1.5rem 1.25rem 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.1rem;
  transition: transform .35s ease, border-color .35s ease;
}
.ct-flow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.30);
}
.ct-flow-line {
  position: absolute;
  top: 50%;
  right: -1rem;
  width: 1rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(193,53,132,.4), transparent);
  z-index: 1;
}
@media (max-width: 1199.98px) { .ct-flow-line { display: none; } }
.ct-flow-no {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--sm-pink-500);
  font-weight: 700;
  margin-bottom: .85rem;
  padding: .2rem .55rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.20);
  border-radius: 1rem;
}
.ct-flow-step h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .4rem;
}
.ct-flow-step p {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0 0 .75rem;
}
.ct-flow-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--sm-fg-mute);
  padding-top: .55rem;
  border-top: 1px dashed rgba(255,255,255,.06);
  width: 100%;
}
.ct-flow-time i { color: var(--sm-pink-500); }

/* ===== FAQ ===== */
.ct-faq {
  max-width: 880px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ct-faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color .3s;
}
.ct-faq-item[open] { border-color: rgba(193,53,132,.35); }
.ct-faq-item summary {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}
.ct-faq-item summary::-webkit-details-marker { display: none; }
.ct-faq-q {
  display: inline-flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--sm-fg);
}
.ct-faq-no {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--sm-pink-500);
  padding: .2rem .55rem;
  border-radius: 1rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.20);
}
.ct-faq-toggle {
  font-size: 1.4rem;
  color: var(--sm-fg-soft);
  transition: transform .3s, color .3s;
  flex-shrink: 0;
}
.ct-faq-item[open] .ct-faq-toggle {
  transform: rotate(45deg);
  color: var(--sm-pink-500);
}
.ct-faq-a {
  padding: 0 1.5rem 1.4rem;
}
.ct-faq-a p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
}

/* ===== Booking — calendar + slots ===== */
.ct-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.75rem;
  max-width: 1050px;
  margin: 2.5rem auto 0;
}
@media (max-width: 991.98px) { .ct-booking { grid-template-columns: 1fr; } }

.ct-booking-cal {
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
}
.ct-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ct-cal-head span {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--sm-fg);
}
.ct-cal-head i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  color: var(--sm-fg-soft);
  cursor: pointer;
  transition: all .2s;
}
.ct-cal-head i:hover {
  background: rgba(193,53,132,.15);
  border-color: rgba(193,53,132,.4);
  color: #fff;
}

.ct-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
  padding: .85rem 0 .55rem;
}
.ct-cal-week span {
  text-align: center;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--sm-fg-mute);
  text-transform: uppercase;
}
.ct-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
}
.ct-cal-days span {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--sm-fg);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,.025);
  border: 1px solid transparent;
  transition: all .2s;
}
.ct-cal-days span:hover { background: rgba(193,53,132,.12); border-color: rgba(193,53,132,.30); }
.ct-cal-days span.dim { color: var(--sm-fg-mute); opacity: .35; cursor: default; background: transparent; }
.ct-cal-days span.dim:hover { background: transparent; border-color: transparent; }
.ct-cal-days span.we { color: var(--sm-fg-mute); background: rgba(255,255,255,.01); }
.ct-cal-days span.on {
  background: var(--sm-grad);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 22px -6px rgba(232,74,110,.55);
}

.ct-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.ct-cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .74rem;
  color: var(--sm-fg-mute);
}
.ct-cal-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}
.ct-leg-on { background: var(--sm-grad); }
.ct-leg-we { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ct-leg-bz { background: rgba(232,74,110,.08); border: 1px dashed rgba(232,74,110,.4); }

.ct-booking-slots {
  padding: 1.5rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
}
.ct-slots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 1rem;
  flex-wrap: wrap;
}
.ct-slots-head h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
}
.ct-slots-head span {
  font-family: var(--font-display);
  font-size: .76rem;
  color: var(--sm-fg-mute);
  letter-spacing: .04em;
}

.ct-slots-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  padding: 1rem 0 1.25rem;
}
@media (max-width: 480px) { .ct-slots-grid { grid-template-columns: repeat(3, 1fr); } }
.ct-slot {
  padding: .55rem .4rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sm-line);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg);
  cursor: pointer;
  transition: all .2s;
}
.ct-slot:hover:not(.is-busy) {
  background: rgba(193,53,132,.12);
  border-color: rgba(193,53,132,.40);
  transform: translateY(-1px);
}
.ct-slot.is-on {
  background: var(--sm-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(232,74,110,.55);
}
.ct-slot.is-busy {
  background: rgba(232,74,110,.04);
  border: 1px dashed rgba(232,74,110,.30);
  color: var(--sm-fg-mute);
  cursor: not-allowed;
  font-size: .7rem;
}

.ct-booking-card {
  padding: 1.25rem 1.25rem;
  background: rgba(123,45,155,.08);
  border: 1px solid rgba(193,53,132,.25);
  border-radius: 1rem;
  margin-top: auto;
}
.ct-bk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  font-size: .88rem;
}
.ct-bk-row:last-of-type { border-bottom: none; }
.ct-bk-k {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--sm-fg-mute);
  font-family: var(--font-display);
}
.ct-bk-k i { color: var(--sm-pink-500); }
.ct-bk-v {
  color: var(--sm-fg);
  font-family: var(--font-display);
}


/* ============================================================================
   PRIVACY PAGE (pv-*) — Gizlilik Politikası (legal long-form)
   ============================================================================ */

/* ===== Hero (compact) ===== */
.pv-hero {
  position: relative;
  padding: 9rem 0 3rem;
  overflow: hidden;
  isolation: isolate;
}
.pv-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: end;
  margin-top: 1.5rem;
}
@media (max-width: 991.98px) {
  .pv-hero-row { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
}
.pv-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 1rem 0 1.25rem;
  color: var(--sm-fg);
}
.pv-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--sm-fg-soft);
  max-width: 640px;
  margin: 0;
}

.pv-meta {
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
  position: relative;
  overflow: hidden;
}
.pv-meta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sm-grad);
  opacity: .5;
}
.pv-meta-row {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.07);
  font-size: .86rem;
  gap: 1rem;
}
.pv-meta-row:last-of-type { border-bottom: none; }
.pv-meta-k {
  color: var(--sm-fg-mute);
  font-family: var(--font-display);
  letter-spacing: .04em;
}
.pv-meta-v {
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-weight: 500;
  text-align: right;
}
.pv-meta-dl {
  margin-top: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 1.5rem;
  background: rgba(123,45,155,.12);
  border: 1px solid rgba(193,53,132,.30);
  color: var(--sm-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .82rem;
  transition: all .25s;
}
.pv-meta-dl:hover {
  background: rgba(193,53,132,.20);
  border-color: rgba(193,53,132,.55);
  color: #fff;
  transform: translateY(-1px);
}

/* ===== TL;DR ===== */
.pv-tldr-section { padding: 0 0 3rem; }
.pv-tldr {
  padding: 2rem 2rem 1.75rem;
  background:
    linear-gradient(180deg, rgba(123,45,155,.10), rgba(232,74,110,.04)),
    var(--sm-bg-card);
  border: 1px solid rgba(193,53,132,.25);
  border-radius: 1.5rem;
}
.pv-tldr-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.pv-tldr-pill {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  padding: .3rem .75rem;
  background: var(--sm-grad);
  color: #fff;
  border-radius: 1rem;
  font-weight: 700;
}
.pv-tldr-head h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: var(--sm-fg);
}
.pv-tldr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 991.98px) { .pv-tldr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .pv-tldr-grid { grid-template-columns: 1fr; } }
.pv-tldr-grid article {
  padding: 1.1rem 1.15rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  transition: border-color .3s, transform .3s;
}
.pv-tldr-grid article:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateY(-2px);
}
.pv-tldr-grid article i {
  font-size: 1.3rem;
  color: var(--sm-pink-500);
  margin-bottom: .6rem;
  display: inline-block;
}
.pv-tldr-grid article h4 {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .35rem;
}
.pv-tldr-grid article p {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
}

/* ===== Main layout — TOC sidebar + content ===== */
.pv-main { padding: 0 0 6rem; }
.pv-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .pv-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
.pv-content, .pv-toc-wrap { min-width: 0; }

.pv-toc-wrap { position: relative; }
.pv-toc {
  position: sticky;
  top: 110px;
  padding: 1.25rem 1.25rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.pv-toc::-webkit-scrollbar { width: 6px; }
.pv-toc::-webkit-scrollbar-thumb { background: rgba(193,53,132,.3); border-radius: 3px; }
.pv-toc-head {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--sm-fg-mute);
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: .75rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pv-toc ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: pvtoc;
}
.pv-toc li {
  counter-increment: pvtoc;
}
.pv-toc a {
  display: block;
  padding: .42rem .5rem .42rem 2rem;
  position: relative;
  font-family: var(--font-display);
  font-size: .84rem;
  color: var(--sm-fg-soft);
  text-decoration: none;
  border-radius: 6px;
  transition: all .22s ease;
  line-height: 1.35;
}
.pv-toc a::before {
  content: counter(pvtoc, decimal-leading-zero);
  position: absolute;
  left: .55rem;
  top: .42rem;
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--sm-fg-mute);
  transition: color .22s;
}
.pv-toc a:hover {
  background: rgba(193,53,132,.10);
  color: var(--sm-fg);
}
.pv-toc a:hover::before { color: var(--sm-pink-500); }
.pv-toc a.active {
  background: linear-gradient(135deg, rgba(123,45,155,.20), rgba(232,74,110,.08));
  color: var(--sm-fg);
  border-left: 2px solid var(--sm-pink-500);
  padding-left: calc(2rem - 2px);
}
.pv-toc a.active::before {
  color: var(--sm-pink-500);
  font-weight: 700;
}

.pv-toc-foot {
  display: flex;
  gap: .5rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.pv-toc-dl, .pv-toc-print {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  border-radius: 8px;
  color: var(--sm-fg-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .76rem;
  transition: all .22s;
}
.pv-toc-dl:hover, .pv-toc-print:hover {
  background: rgba(193,53,132,.12);
  border-color: rgba(193,53,132,.35);
  color: #fff;
}
@media (max-width: 991.98px) {
  .pv-toc { position: relative; top: 0; max-height: none; }
}

/* ===== Content sections ===== */
.pv-content { max-width: 760px; }
.pv-sec {
  padding: 1.5rem 0 2.25rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  scroll-margin-top: 120px;
}
.pv-sec:last-of-type { border-bottom: none; }
.pv-sec > header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.pv-sec-no {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--sm-pink-500);
  font-weight: 700;
  padding: .25rem .65rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.20);
  border-radius: 1rem;
  flex-shrink: 0;
}
.pv-sec > header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  margin: 0;
  color: var(--sm-fg);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.pv-sec h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 1.5rem 0 .65rem;
}
.pv-sec p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sm-fg-soft);
  margin: 0 0 1rem;
}
.pv-sec p:last-child { margin-bottom: 0; }
.pv-sec strong { color: var(--sm-fg); font-weight: 600; }
.pv-sec a {
  color: var(--sm-pink-500);
  text-decoration: none;
  border-bottom: 1px dashed rgba(232,74,110,.45);
  transition: color .22s, border-color .22s;
}
.pv-sec a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.pv-sec code {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace;
  font-size: .85em;
  padding: .12rem .4rem;
  background: rgba(193,53,132,.10);
  border: 1px solid rgba(193,53,132,.22);
  border-radius: 5px;
  color: var(--sm-fg);
}

/* Lists */
.pv-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.pv-list li {
  position: relative;
  padding: .35rem 0 .35rem 1.6rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
}
.pv-list li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: 1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sm-grad);
  box-shadow: 0 0 8px rgba(232,74,110,.45);
}

/* Definition list */
.pv-dl {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: .55rem 1.5rem;
  padding: 1rem 0;
  margin: 0;
}
.pv-dl dt {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg-mute);
  letter-spacing: .04em;
}
.pv-dl dd {
  margin: 0;
  font-size: .95rem;
  color: var(--sm-fg);
  font-family: var(--font-sans);
  line-height: 1.5;
}
@media (max-width: 575.98px) {
  .pv-dl { grid-template-columns: 1fr; gap: .1rem 0; }
  .pv-dl dt { margin-top: .65rem; }
}

/* Table */
.pv-table-wrap {
  margin: 1rem 0 1.25rem;
  overflow-x: auto;
  border-radius: .85rem;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
}
.pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 540px;
}
.pv-table thead th {
  text-align: left;
  padding: .85rem 1rem;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  background: rgba(123,45,155,.10);
  border-bottom: 1px solid rgba(193,53,132,.20);
  font-weight: 600;
}
.pv-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  color: var(--sm-fg-soft);
  line-height: 1.5;
  vertical-align: top;
}
.pv-table tbody tr:last-child td { border-bottom: none; }
.pv-table tbody tr:hover { background: rgba(193,53,132,.04); }
.pv-table tbody td:first-child { color: var(--sm-fg); font-family: var(--font-display); font-weight: 500; }

/* Notes / callouts */
.pv-note {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-radius: .85rem;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.025);
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.6;
}
.pv-note > i {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.pv-note > div { color: var(--sm-fg-soft); }
.pv-note-good {
  background: linear-gradient(135deg, rgba(43,212,123,.08), rgba(43,212,123,.02));
  border-color: rgba(43,212,123,.30);
}
.pv-note-good > i { color: #2bd47b; }
.pv-note-info {
  background: linear-gradient(135deg, rgba(123,45,155,.10), rgba(232,74,110,.04));
  border-color: rgba(193,53,132,.30);
}
.pv-note-info > i { color: var(--sm-pink-500); }

.pv-tiny {
  font-size: .82rem !important;
  color: var(--sm-fg-mute) !important;
  font-style: italic;
}

/* Rights grid */
.pv-rights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin: 1.25rem 0;
}
@media (max-width: 991.98px) { .pv-rights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .pv-rights { grid-template-columns: 1fr; } }
.pv-rights article {
  padding: 1rem .9rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  transition: all .25s;
}
.pv-rights article:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateY(-2px);
}
.pv-rights article i {
  font-size: 1.1rem;
  color: var(--sm-pink-500);
  margin-bottom: .45rem;
  display: inline-block;
}
.pv-rights article h4 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .25rem;
}
.pv-rights article p {
  font-size: .78rem !important;
  line-height: 1.45 !important;
  color: var(--sm-fg-mute) !important;
  margin: 0 !important;
}

/* Security bullets grid */
.pv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 1.25rem 0;
}
@media (max-width: 575.98px) { .pv-grid-2 { grid-template-columns: 1fr; } }
.pv-bullet {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .75rem;
}
.pv-bullet i {
  color: var(--sm-pink-500);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: .12rem;
}
.pv-bullet div {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--sm-fg-soft);
}
.pv-bullet strong {
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--sm-fg);
  font-weight: 600;
}

/* Changelog */
.pv-changelog {
  padding: 1.25rem 1.25rem;
  margin-top: 1.25rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
}
.pv-changelog h4 {
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin: 0 0 .85rem;
  font-weight: 600;
}
.pv-changelog ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pv-changelog li {
  padding: .5rem 0 .5rem 1.25rem;
  position: relative;
  font-size: .88rem;
  color: var(--sm-fg-soft);
  border-bottom: 1px dashed rgba(255,255,255,.06);
  line-height: 1.5;
}
.pv-changelog li:last-child { border-bottom: none; }
.pv-changelog li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .9rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sm-pink-500);
}
.pv-changelog b {
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Contact cards */
.pv-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin: 1.25rem 0;
}
@media (max-width: 991.98px) { .pv-contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .pv-contact-grid { grid-template-columns: 1fr; } }
.pv-contact-card {
  display: flex !important;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line) !important;
  border-radius: .85rem;
  text-decoration: none !important;
  transition: all .25s;
}
.pv-contact-card:hover {
  border-color: rgba(193,53,132,.4) !important;
  transform: translateY(-2px);
  background: rgba(193,53,132,.08);
}
.pv-contact-card i {
  font-size: 1.2rem;
  color: var(--sm-pink-500);
  margin-bottom: .25rem;
}
.pv-contact-card h4 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
}
.pv-contact-card span {
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-fg-mute);
  word-break: break-all;
}

/* End mark */
.pv-end {
  text-align: center;
  padding: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.pv-end > span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--sm-fg-mute);
  letter-spacing: .12em;
}
.pv-end-top {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.15rem;
  border-radius: 2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  color: var(--sm-fg-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .82rem;
  transition: all .22s;
}
.pv-end-top:hover {
  background: rgba(193,53,132,.12);
  border-color: rgba(193,53,132,.4);
  color: #fff;
}


/* ============================================================================
   KVKK PAGE (kv-*) — Aydınlatma Metni (resmi, madde madde)
   ============================================================================ */

/* ===== Hero (legal w/ controller card) ===== */
.kv-hero {
  position: relative;
  padding: 9rem 0 0;
  overflow: hidden;
  isolation: isolate;
}

.kv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: stretch;
  margin: 1.5rem 0 3rem;
}
@media (max-width: 991.98px) {
  .kv-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

.kv-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -.02em;
  margin: 1rem 0 1.25rem;
  color: var(--sm-fg);
}
.kv-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
  max-width: 620px;
  margin: 0 0 1.75rem;
}
.kv-sub strong { color: var(--sm-fg); font-weight: 600; }

.kv-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Controller card (sticky-style) */
.kv-controller {
  position: relative;
  padding: 1.65rem 1.5rem 1.25rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(155deg, rgba(123,45,155,.18), rgba(232,74,110,.06) 60%, rgba(10,4,22,.9)),
    var(--sm-bg-card);
  border: 1px solid rgba(193,53,132,.30);
  box-shadow: 0 30px 80px -20px rgba(123,45,155,.45);
  overflow: hidden;
  isolation: isolate;
}
.kv-controller::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(232,74,110,.20), transparent 65%);
  z-index: -1;
}
.kv-controller-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.kv-stamp {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--sm-pink-500);
  padding: .3rem .65rem;
  border: 1px dashed rgba(232,74,110,.45);
  border-radius: 4px;
  background: rgba(232,74,110,.06);
}
.kv-controller-head i {
  font-size: 1.5rem;
  color: var(--sm-pink-500);
}
.kv-controller h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sm-fg);
  margin: 0 0 1.25rem;
  letter-spacing: -.01em;
}
.kv-controller-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.15rem;
}
.kv-controller-list li {
  display: flex;
  justify-content: space-between;
  padding: .45rem 0;
  font-size: .82rem;
  gap: 1rem;
  border-bottom: 1px dashed rgba(255,255,255,.07);
}
.kv-controller-list li:last-child { border-bottom: none; }
.kv-controller-list li span:first-child {
  color: var(--sm-fg-mute);
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .7rem;
  padding-top: .12rem;
  flex-shrink: 0;
}
.kv-controller-list li span:last-child {
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .82rem;
  text-align: right;
  word-break: break-word;
}
.kv-verbis {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  width: 100%;
  justify-content: center;
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  color: var(--sm-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .82rem;
  transition: all .25s;
}
.kv-verbis:hover {
  background: rgba(193,53,132,.14);
  border-color: rgba(193,53,132,.45);
  color: #fff;
  transform: translateY(-1px);
}
.kv-verbis i { color: var(--sm-pink-500); }

/* Anchor strip — Roman numerals */
.kv-anchor-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: 1rem 0;
  margin: 0 -.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(193,53,132,.3) transparent;
  border-top: 1px solid var(--sm-line);
  border-bottom: 1px solid var(--sm-line);
}
.kv-anchor-strip::-webkit-scrollbar { height: 4px; }
.kv-anchor-strip::-webkit-scrollbar-thumb { background: rgba(193,53,132,.3); border-radius: 2px; }
.kv-anchor {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: transparent;
  border-radius: 2rem;
  color: var(--sm-fg-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .82rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all .22s;
}
.kv-anchor span {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sm-pink-500);
  font-size: .92em;
  min-width: 1.4em;
  text-align: center;
}
.kv-anchor:hover {
  background: rgba(193,53,132,.10);
  color: #fff;
  border-color: rgba(193,53,132,.30);
}
.kv-anchor.active {
  background: var(--sm-grad);
  color: #fff;
  border-color: transparent;
}
.kv-anchor.active span { color: rgba(255,255,255,.85); }

/* ===== Main doc layout ===== */
.kv-main { padding: 4rem 0 6rem; }
.kv-doc {
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--font-sans);
}

/* Section block */
.kv-sec {
  padding: 2.5rem 0 2.75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  scroll-margin-top: 120px;
}
.kv-sec:last-of-type { border-bottom: none; }
.kv-sec > header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgba(193,53,132,.55), transparent) 1;
}
.kv-rn {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3.25rem;
  line-height: 1;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  flex-shrink: 0;
  font-weight: 400;
  letter-spacing: -.04em;
}
.kv-sec > header > div { flex: 1; }
.kv-sec > header small {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--sm-fg-mute);
  font-weight: 600;
  margin-bottom: .35rem;
}
.kv-sec > header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.kv-sec h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 1.75rem 0 .85rem;
  padding-left: .85rem;
  border-left: 2px solid var(--sm-pink-500);
}
.kv-sec p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--sm-fg-soft);
  margin: 0 0 1rem;
}
.kv-sec p:last-child { margin-bottom: 0; }
.kv-sec strong { color: var(--sm-fg); font-weight: 600; }
.kv-sec u { text-decoration-color: var(--sm-pink-500); text-decoration-thickness: 2px; }
.kv-sec a {
  color: var(--sm-pink-500);
  text-decoration: none;
  border-bottom: 1px dashed rgba(232,74,110,.45);
  transition: color .22s, border-color .22s;
}
.kv-sec a:hover { color: #fff; border-bottom-color: #fff; }

/* Glossary */
.kv-glossary {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: .4rem 1.5rem;
  margin: 1rem 0;
  padding: 0;
}
.kv-glossary dt {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--sm-fg);
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.kv-glossary dt::before {
  content: "—";
  color: var(--sm-pink-500);
  margin-right: .4rem;
}
.kv-glossary dd {
  margin: 0;
  padding: .55rem 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.kv-glossary dd strong { color: var(--sm-fg); }
.kv-glossary dt:last-of-type,
.kv-glossary dd:last-of-type { border-bottom: none; }
@media (max-width: 575.98px) {
  .kv-glossary { grid-template-columns: 1fr; gap: 0; }
  .kv-glossary dt { padding-bottom: .2rem; border-bottom: none; }
  .kv-glossary dd { padding-top: 0; margin-bottom: .5rem; }
}

/* Category grid */
.kv-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin: 1.25rem 0;
}
@media (max-width: 991.98px) { .kv-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .kv-cat-grid { grid-template-columns: 1fr; } }
.kv-cat {
  position: relative;
  padding: 1.1rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  transition: all .3s;
  overflow: hidden;
}
.kv-cat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 2px;
  background: var(--sm-grad);
}
.kv-cat:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateY(-2px);
}
.kv-cat-no {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--sm-fg-mute);
}
.kv-cat h4 {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .45rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.kv-cat h4 i {
  color: var(--sm-pink-500);
  font-size: 1.05rem;
}
.kv-cat p {
  font-size: .82rem !important;
  line-height: 1.55 !important;
  color: var(--sm-fg-soft) !important;
  margin: 0 !important;
}

.kv-warn {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: linear-gradient(135deg, rgba(255,179,64,.08), rgba(255,179,64,.02));
  border: 1px solid rgba(255,179,64,.35);
  border-radius: .85rem;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.6;
}
.kv-warn > i { font-size: 1.25rem; color: #ffb340; flex-shrink: 0; margin-top: .1rem; }
.kv-warn > div { color: var(--sm-fg-soft); }
.kv-warn strong { color: var(--sm-fg); }

/* Amaçlar list */
.kv-amac {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .85rem;
}
@media (max-width: 575.98px) { .kv-amac { grid-template-columns: 1fr; } }
.kv-amac li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .85rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--sm-line);
  border-radius: .65rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  transition: border-color .22s, background .22s;
}
.kv-amac li:hover {
  border-color: rgba(193,53,132,.30);
  background: rgba(193,53,132,.04);
}
.kv-amac-no {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--sm-pink-500);
  font-weight: 700;
  padding: .15rem .4rem;
  background: rgba(232,74,110,.10);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Legal sebep grid */
.kv-legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 1.25rem 0;
}
@media (max-width: 767.98px) { .kv-legal-grid { grid-template-columns: 1fr; } }
.kv-legal {
  padding: 1.15rem 1.15rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
}
.kv-legal-art {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .72rem;
  padding: .25rem .55rem;
  background: rgba(123,45,155,.18);
  border: 1px solid rgba(193,53,132,.30);
  border-radius: 4px;
  color: var(--sm-fg);
  margin-bottom: .65rem;
  letter-spacing: .04em;
}
.kv-legal h5 {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .4rem;
}
.kv-legal p {
  font-size: .85rem !important;
  line-height: 1.55 !important;
  color: var(--sm-fg-soft) !important;
  margin: 0 !important;
}
.kv-legal-rıza {
  background: linear-gradient(135deg, rgba(232,74,110,.10), rgba(232,74,110,.02));
  border-color: rgba(232,74,110,.30);
}
.kv-legal-rıza .kv-legal-art {
  background: var(--sm-grad);
  border-color: transparent;
  color: #fff;
}

/* Lists (kv-list) */
.kv-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.kv-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.85rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
}
.kv-list li::before {
  content: "›";
  position: absolute;
  left: .35rem;
  top: .35rem;
  color: var(--sm-pink-500);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}
.kv-list li strong { color: var(--sm-fg); }

/* Table */
.kv-table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
  border-radius: .85rem;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
}
.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 600px;
}
.kv-table thead th {
  text-align: left;
  padding: .85rem 1rem;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  background: rgba(123,45,155,.10);
  border-bottom: 1px solid rgba(193,53,132,.20);
  font-weight: 600;
}
.kv-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  color: var(--sm-fg-soft);
  line-height: 1.5;
  vertical-align: top;
}
.kv-table tbody tr:last-child td { border-bottom: none; }
.kv-table tbody tr:hover { background: rgba(193,53,132,.04); }
.kv-table tbody td:first-child {
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-weight: 500;
}

.kv-foot {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  background: rgba(123,45,155,.08);
  border-left: 3px solid var(--sm-pink-500);
  border-radius: 0 .65rem .65rem 0;
  margin-top: 1rem;
  font-size: .88rem !important;
  line-height: 1.55 !important;
  color: var(--sm-fg-soft) !important;
}
.kv-foot i { color: var(--sm-pink-500); font-size: 1rem; flex-shrink: 0; margin-top: .15rem; }

/* Method grid */
.kv-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin: 1.25rem 0;
}
@media (max-width: 767.98px) { .kv-method-grid { grid-template-columns: repeat(2, 1fr); } }
.kv-method-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem .8rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .75rem;
  text-align: center;
  transition: all .25s;
}
.kv-method-grid article:hover {
  border-color: rgba(193,53,132,.30);
  background: rgba(193,53,132,.06);
  transform: translateY(-2px);
}
.kv-method-grid article i {
  font-size: 1.45rem;
  color: var(--sm-pink-500);
}
.kv-method-grid article span {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--sm-fg);
  line-height: 1.3;
}

/* Rights list (numbered with (a) (b) (c)) */
.kv-rights-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  counter-reset: kvright;
}
.kv-rights-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem;
  margin-bottom: .65rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  transition: border-color .25s, transform .25s;
}
.kv-rights-list li:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateX(3px);
}
.kv-r-no {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  flex-shrink: 0;
  min-width: 2.2rem;
  text-align: center;
  line-height: 1;
  padding-top: .15rem;
}
.kv-rights-list h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .35rem;
  line-height: 1.4;
}
.kv-rights-list p {
  font-size: .88rem !important;
  line-height: 1.6 !important;
  color: var(--sm-fg-soft) !important;
  margin: 0 !important;
}

/* Başvuru section */
.kv-basv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
@media (max-width: 575.98px) { .kv-basv-grid { grid-template-columns: 1fr; } }
.kv-basv-grid article {
  padding: 1.35rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  transition: all .3s;
}
.kv-basv-grid article:hover {
  border-color: rgba(193,53,132,.35);
  transform: translateY(-2px);
}
.kv-basv-grid article i {
  font-size: 1.3rem;
  color: var(--sm-pink-500);
  display: inline-block;
  margin-bottom: .6rem;
  padding: .65rem;
  background: rgba(232,74,110,.10);
  border-radius: 10px;
  border: 1px solid rgba(232,74,110,.25);
}
.kv-basv-grid article h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .45rem;
}
.kv-basv-grid article p {
  font-size: .86rem !important;
  line-height: 1.6 !important;
  color: var(--sm-fg-soft) !important;
  margin: 0 0 .7rem !important;
}
.kv-basv-grid article small {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .76rem;
  color: var(--sm-pink-500);
  padding-top: .55rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  display: block;
  word-break: break-word;
}

/* Form download row */
.kv-form-dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem;
  margin: 1.25rem 0;
  background:
    linear-gradient(135deg, rgba(123,45,155,.15), rgba(232,74,110,.05)),
    rgba(255,255,255,.02);
  border: 1px solid rgba(193,53,132,.30);
  border-radius: 1rem;
}
@media (max-width: 767.98px) {
  .kv-form-dl { flex-direction: column; align-items: flex-start; }
}
.kv-form-dl > div { flex: 1; }
.kv-form-dl h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.kv-form-dl h4 i { color: var(--sm-pink-500); font-size: 1.2rem; }
.kv-form-dl p {
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: var(--sm-fg-soft) !important;
  margin: 0 !important;
}

/* KVKK Kurum bilgi kartı */
.kv-kurul {
  display: flex;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin: 1.25rem 0 0;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  align-items: flex-start;
}
.kv-kurul > i {
  font-size: 2rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  flex-shrink: 0;
}
.kv-kurul > div { display: flex; flex-direction: column; gap: .2rem; }
.kv-kurul strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--sm-fg);
  margin-bottom: .3rem;
}
.kv-kurul span {
  font-size: .86rem;
  color: var(--sm-fg-soft);
  line-height: 1.5;
}
.kv-kurul a { color: var(--sm-pink-500); }

/* Imza / yayın */
.kv-sign {
  margin-top: 3rem;
  padding: 2rem 2rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(123,45,155,.18), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .kv-sign { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
}
.kv-sign small {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--sm-fg-mute);
  font-weight: 600;
  margin-bottom: .5rem;
}
.kv-sign h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .85rem;
}
.kv-sign p {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--sm-fg-soft);
  margin: 0;
}
.kv-sign-stamp {
  position: relative;
  padding: 1.5rem;
  border: 2px dashed rgba(232,74,110,.45);
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 220px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  background: radial-gradient(circle, rgba(232,74,110,.08), transparent 70%);
}
@media (max-width: 767.98px) {
  .kv-sign-stamp { margin: 0 auto; }
}
.kv-sign-ring {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(193,53,132,.30);
  border-radius: 50%;
}
.kv-sign-stamp > div {
  text-align: center;
  z-index: 1;
}
.kv-sign-stamp small {
  margin-bottom: .35rem;
  color: var(--sm-pink-500);
}
.kv-sign-stamp strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sm-fg);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.1;
}
.kv-sign-stamp strong i {
  color: var(--sm-pink-500);
  font-style: normal;
}
.kv-sign-stamp span {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--sm-fg-mute);
  letter-spacing: .08em;
  margin-top: .35rem;
}


/* ============================================================================
   COOKIES PAGE (ck-*) — Çerez Politikası (interactive)
   ============================================================================ */

/* ===== Hero ===== */
.ck-hero {
  position: relative;
  padding: 9rem 0 4rem;
  overflow: hidden;
  isolation: isolate;
}
.ck-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  margin: 1.5rem 0 0;
}
@media (max-width: 991.98px) {
  .ck-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}
.ck-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 1rem 0 1.25rem;
  color: var(--sm-fg);
}
.ck-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--sm-fg);
  letter-spacing: -.01em;
}
.ck-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--sm-fg-soft);
  max-width: 620px;
  margin: 0 0 1.75rem;
}
.ck-sub strong { color: var(--sm-fg); font-weight: 600; }
.ck-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Live cookie jar (right side) */
.ck-jar {
  position: relative;
  padding: 1.85rem 1.75rem 1.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(232,74,110,.20), transparent 60%),
    linear-gradient(155deg, rgba(123,45,155,.18), rgba(10,4,22,.85)),
    var(--sm-bg-card);
  border: 1px solid rgba(193,53,132,.30);
  box-shadow: 0 30px 80px -20px rgba(123,45,155,.50);
  overflow: hidden;
  isolation: isolate;
}
.ck-jar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(193,53,132,.55), transparent 35%, rgba(232,74,110,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ck-jar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ck-jar-label {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--sm-pink-500);
  font-weight: 700;
  position: relative;
  padding-left: 1.1rem;
}
.ck-jar-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2bd47b;
  box-shadow: 0 0 0 4px rgba(43,212,123,.18);
  animation: ckPulse 2s ease-in-out infinite;
}
@keyframes ckPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(43,212,123,.18); }
  50%     { box-shadow: 0 0 0 8px rgba(43,212,123,.06); }
}
.ck-jar-head > i {
  font-size: 1.7rem;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ck-jar-count {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: 1.35rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.ck-jar-no {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff, #c8b8d8);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ck-jar-unit {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg-soft);
  letter-spacing: .02em;
}
.ck-jar-list {
  list-style: none;
  padding: 1rem 0 .5rem;
  margin: 0;
}
.ck-jar-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem 0;
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--sm-fg);
  transition: opacity .25s;
}
.ck-jar-list li i {
  width: 24px;
  text-align: center;
  font-size: .95rem;
  color: var(--sm-pink-500);
}
.ck-jar-list li span {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .82rem;
  background: rgba(123,45,155,.15);
  padding: .12rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(193,53,132,.20);
  font-weight: 600;
}
.ck-jar-list li.off {
  opacity: .35;
}
.ck-jar-list li.off span {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: var(--sm-fg-mute);
}
.ck-jar-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.ck-jar-foot > span {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--sm-fg-mute);
  text-transform: uppercase;
}
.ck-jar-foot code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .82rem;
  background: rgba(232,74,110,.08);
  padding: .25rem .65rem;
  border-radius: 5px;
  border: 1px solid rgba(232,74,110,.25);
  color: var(--sm-fg);
}

/* ===== 01 · Nedir? ===== */
.ck-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .ck-row { grid-template-columns: 1fr; gap: 1.5rem; }
}
.ck-row-l h2 { margin: .65rem 0 0; }
.ck-row-r p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--sm-fg-soft);
  margin: 0 0 1.1rem;
}
.ck-row-r p strong { color: var(--sm-fg); }
.ck-row-r p em {
  font-style: italic;
  color: var(--sm-pink-500);
}

.ck-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}
@media (max-width: 575.98px) { .ck-mini-grid { grid-template-columns: repeat(2, 1fr); } }
.ck-mini-grid > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ck-mini-grid b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--sm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.ck-mini-grid span {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--sm-fg-mute);
}

/* ===== 02 · Categories ===== */
.ck-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 767.98px) { .ck-cats { grid-template-columns: 1fr; } }
.ck-cat {
  position: relative;
  padding: 1.85rem 1.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.25rem;
  transition: transform .35s, border-color .35s;
  overflow: hidden;
  isolation: isolate;
}
.ck-cat::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(232,74,110,.10), transparent 70%);
  z-index: -1;
}
.ck-cat:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.35);
}
.ck-cat > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.ck-cat > header i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  background: var(--sm-grad);
  box-shadow: 0 8px 20px -8px rgba(232,74,110,.4);
}
.ck-cat-stat {
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .14em;
  padding: .3rem .65rem;
  border-radius: 1rem;
  font-weight: 700;
  background: rgba(43,212,123,.10);
  border: 1px solid rgba(43,212,123,.30);
  color: #2bd47b;
}
.ck-cat-stat.ck-on {
  background: rgba(123,45,155,.14);
  border-color: rgba(193,53,132,.35);
  color: var(--sm-pink-500);
}
.ck-cat-stat.ck-off {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: var(--sm-fg-mute);
}
.ck-cat h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.ck-cat p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--sm-fg-soft);
  margin: 0 0 1rem;
}
.ck-cat p strong { color: var(--sm-fg); }
.ck-cat p u { text-decoration-color: var(--sm-pink-500); text-decoration-thickness: 2px; }
.ck-cat ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ck-cat ul li {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .82rem;
  color: var(--sm-fg-soft);
  padding: .35rem .65rem;
  background: rgba(255,255,255,.025);
  border-radius: 6px;
  border-left: 2px solid rgba(193,53,132,.30);
}
.ck-cat ul li code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--sm-fg);
  font-weight: 500;
}
.ck-cat-empty li {
  text-align: center;
  color: var(--sm-fg-mute) !important;
  border-left-color: rgba(255,255,255,.08) !important;
  font-family: var(--font-display) !important;
}
.ck-cat-foot {
  display: block;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-fg-mute);
  letter-spacing: .02em;
}

/* ===== 03 · Preference panel ===== */
.ck-panel {
  max-width: 880px;
  margin: 2.5rem auto 0;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)),
    var(--sm-bg-card);
  border: 1px solid var(--sm-line);
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ck-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sm-grad);
  opacity: .6;
}
.ck-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  transition: background .25s;
}
.ck-panel-row:hover { background: rgba(193,53,132,.03); }
.ck-panel-row:last-of-type { border-bottom: none; }
.ck-panel-l {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}
.ck-panel-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}
.ck-panel-icon[data-color="zorunlu"]  { background: linear-gradient(135deg, #2a8d57, #2bd47b); }
.ck-panel-icon[data-color="islev"]    { background: linear-gradient(135deg, #5a1f7a, #7b2d9b); }
.ck-panel-icon[data-color="analitik"] { background: linear-gradient(135deg, #c13584, #e84a6e); }
.ck-panel-icon[data-color="pazarlama"]{ background: linear-gradient(135deg, #3a3142, #564a5e); opacity: .6; }
.ck-panel-l h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .25rem;
}
.ck-panel-l p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0;
  max-width: 480px;
}
.ck-panel-disabled .ck-panel-l h4 { color: var(--sm-fg-mute); }
.ck-panel-disabled .ck-panel-l p { color: var(--sm-fg-mute); }

/* Switch */
.ck-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}
.ck-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ck-switch-track {
  width: 56px;
  height: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: all .28s ease;
  position: relative;
}
.ck-switch-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e6e0ee, #c8b8d8);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
}
.ck-switch input:checked + .ck-switch-track {
  background: var(--sm-grad);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(232,74,110,.45);
}
.ck-switch input:checked + .ck-switch-track .ck-switch-thumb {
  transform: translateX(26px);
  background: linear-gradient(180deg, #ffffff, #f5e7f5);
}
.ck-switch-locked .ck-switch-track {
  background: linear-gradient(135deg, rgba(43,212,123,.5), rgba(43,212,123,.25)) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}
.ck-switch-locked .ck-switch-thumb { transform: translateX(26px); }
.ck-switch-lock {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.85);
  font-size: .72rem;
}
.ck-switch-na {
  cursor: not-allowed;
}
.ck-switch-na .ck-switch-track {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
.ck-switch-na .ck-switch-thumb {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.ck-switch-na-lbl {
  position: absolute;
  top: -6px;
  right: -10px;
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: .12em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--sm-fg-mute);
  padding: .12rem .35rem;
  border-radius: 3px;
}

/* Actions */
.ck-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: 1.5rem 1.25rem 1.25rem;
  margin-top: .25rem;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 100%, rgba(123,45,155,.10), transparent 70%);
}
.ck-panel-actions button { flex: 0 1 auto; }
@media (max-width: 575.98px) {
  .ck-panel-actions button { width: 100%; }
}

.ck-panel-msg {
  padding: 0 1.5rem;
  height: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: .88rem;
  transition: all .3s ease;
  opacity: 0;
}
.ck-panel-msg.show {
  height: auto;
  padding: 1rem 1.5rem 1.25rem;
  opacity: 1;
}
.ck-panel-msg.is-ok    { color: #2bd47b; }
.ck-panel-msg.is-warn  { color: #ffb340; }
.ck-panel-msg::before  { content: "✓ "; }
.ck-panel-msg.is-warn::before { content: "⚠ "; }

/* ===== 04 · Detail table ===== */
.ck-table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid var(--sm-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
    var(--sm-bg-card);
}
.ck-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 800px;
}
.ck-table thead th {
  text-align: left;
  padding: 1rem 1rem;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  background: rgba(123,45,155,.10);
  border-bottom: 1px solid rgba(193,53,132,.20);
  font-weight: 600;
  white-space: nowrap;
}
.ck-table tbody td {
  padding: .9rem 1rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  color: var(--sm-fg-soft);
  line-height: 1.5;
  vertical-align: top;
}
.ck-table tbody tr:last-child td { border-bottom: none; }
.ck-table tbody tr:hover { background: rgba(193,53,132,.04); }
.ck-table tbody td code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .82rem;
  padding: .18rem .55rem;
  background: rgba(193,53,132,.10);
  border: 1px solid rgba(193,53,132,.22);
  border-radius: 5px;
  color: var(--sm-fg);
  font-weight: 500;
}

.ck-tag {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  border-radius: 1rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.ck-tag-zorunlu  { background: rgba(43,212,123,.10); border: 1px solid rgba(43,212,123,.35); color: #2bd47b; }
.ck-tag-islev    { background: rgba(123,45,155,.15); border: 1px solid rgba(193,53,132,.35); color: var(--sm-fg); }
.ck-tag-analitik { background: rgba(232,74,110,.12); border: 1px solid rgba(232,74,110,.35); color: var(--sm-pink-500); }
.ck-tag-pazarlama{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: var(--sm-fg-mute); }

.ck-table-note {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: rgba(123,45,155,.08);
  border-left: 3px solid var(--sm-pink-500);
  border-radius: 0 .75rem .75rem 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
}
.ck-table-note i {
  color: var(--sm-pink-500);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .12rem;
}
.ck-table-note strong { color: var(--sm-fg); }
.ck-table-note u { text-decoration-color: var(--sm-pink-500); text-decoration-thickness: 2px; }

/* ===== 05 · Browsers ===== */
.ck-browsers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 767.98px) { .ck-browsers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .ck-browsers { grid-template-columns: 1fr; } }
.ck-browser {
  padding: 1.35rem 1.35rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform .3s, border-color .3s;
}
.ck-browser:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.35);
}
.ck-browser-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: .35rem;
}
.ck-browser-icon[data-bb="chrome"]  { background: linear-gradient(135deg, #1a73e8, #34a853); }
.ck-browser-icon[data-bb="safari"]  { background: linear-gradient(135deg, #2d2735, #c8b8d8); }
.ck-browser-icon[data-bb="firefox"] { background: linear-gradient(135deg, #e66000, #ffb340); }
.ck-browser-icon[data-bb="edge"]    { background: linear-gradient(135deg, #0078d4, #50c2ed); }
.ck-browser-icon[data-bb="brave"]   { background: linear-gradient(135deg, #fb542b, #f08820); }
.ck-browser-icon[data-bb="opera"]   { background: linear-gradient(135deg, #ff1b2d, #b8112a); }
.ck-browser h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
}
.ck-browser p {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  margin: 0 0 .5rem;
}
.ck-browser > span {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-pink-500);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* ===== 06 · GPC / DNT ===== */
.ck-gpc {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem 2rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(123,45,155,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.5rem;
}
@media (max-width: 991.98px) {
  .ck-gpc { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.5rem; }
}
.ck-gpc h2 { margin: .65rem 0 1rem; }
.ck-gpc-l p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
  margin: 0;
}
.ck-gpc-l p strong { color: var(--sm-fg); }

.ck-gpc-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.ck-gpc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sm-fg-mute);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.ck-gpc-status.is-on .ck-gpc-dot {
  background: #2bd47b;
  box-shadow: 0 0 0 4px rgba(43,212,123,.18);
  animation: ckPulse 2s ease-in-out infinite;
}
.ck-gpc-k {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  margin-bottom: .2rem;
}
.ck-gpc-v {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--sm-fg);
}
.ck-gpc-learn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 1.5rem;
  background: rgba(193,53,132,.10);
  border: 1px solid rgba(193,53,132,.30);
  color: var(--sm-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .82rem;
  transition: all .25s;
}
.ck-gpc-learn:hover {
  background: rgba(193,53,132,.20);
  border-color: rgba(193,53,132,.55);
  color: #fff;
}
.ck-gpc-learn i { color: var(--sm-pink-500); }

/* ===== 07 · CTA cards ===== */
.ck-cta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 991.98px) { .ck-cta { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .ck-cta { grid-template-columns: 1fr; } }
.ck-cta-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.35rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  text-decoration: none;
  transition: all .3s;
}
.ck-cta-card:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.40);
  background: rgba(193,53,132,.06);
}
.ck-cta-card i {
  font-size: 1.4rem;
  color: var(--sm-pink-500);
  margin-bottom: .5rem;
}
.ck-cta-card h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0;
}
.ck-cta-card span {
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--sm-fg-mute);
  word-break: break-word;
}


/* ============================================================================
   Global hardening — overflow safety & skip link
   ============================================================================ */
html { overflow-x: clip; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 3000;
  padding: .75rem 1.25rem;
  background: var(--sm-grad);
  color: #fff;
  border-radius: 2rem;
  font-family: var(--font-display);
  font-size: .9rem;
  text-decoration: none;
  transition: top .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.skip-link:focus-visible {
  top: 1rem;
  color: #fff;
}

/* ============================================================================
   Language switcher (TR/EN)
   ============================================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  border-radius: 2rem;
  backdrop-filter: blur(8px);
}
.lang-opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .32rem .7rem;
  border-radius: 2rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sm-fg-mute);
  cursor: pointer;
  transition: color .22s ease, background .22s ease, box-shadow .22s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.lang-opt:hover { color: var(--sm-fg); }
.lang-opt.is-on {
  background: var(--sm-grad);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(232,74,110,.55);
}
.lang-opt:focus-visible {
  outline: 2px solid rgba(232,74,110,.6);
  outline-offset: 2px;
}

/* Mobil offcanvas geniş varyant */
.lang-switch-wide {
  width: 100%;
  margin-bottom: .85rem;
}
.lang-switch-wide .lang-opt {
  flex: 1;
  justify-content: center;
  padding: .65rem .7rem;
  font-size: .84rem;
}
.lang-switch-wide .lang-opt i { font-size: .95rem; }

/* "Yakında" toast'u */
.lang-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 20px);
  z-index: 4000;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.35rem;
  background:
    linear-gradient(155deg, rgba(123,45,155,.35), rgba(232,74,110,.18)),
    rgba(10,4,22,.92);
  border: 1px solid rgba(193,53,132,.45);
  border-radius: 2rem;
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-size: .88rem;
  box-shadow: 0 18px 50px -12px rgba(123,45,155,.6);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.lang-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lang-toast i {
  color: var(--sm-pink-500);
  font-size: 1rem;
}
@media (max-width: 575.98px) {
  .lang-toast { white-space: normal; text-align: center; max-width: calc(100vw - 3rem); }
}

/* ============================================================================
   BLOG LISTING (bl-*)
   ============================================================================ */
.bl-hero {
  position: relative;
  padding: 9rem 0 3rem;
  overflow: hidden;
  isolation: isolate;
}
.bl-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 1rem 0 1.25rem;
  color: var(--sm-fg);
}
.bl-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}
.bl-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--sm-fg-soft);
  max-width: 640px;
  margin: 0 0 1.75rem;
}

.bl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.bl-f {
  appearance: none;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.03);
  padding: .5rem 1.05rem;
  border-radius: 2rem;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sm-fg-soft);
  cursor: pointer;
  transition: all .22s ease;
}
.bl-f:hover { border-color: rgba(193,53,132,.35); color: var(--sm-fg); }
.bl-f.is-on {
  background: var(--sm-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(232,74,110,.5);
}

/* Meta satırı (kart + yazı ortak) */
.bl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .85rem;
}
.bl-cat {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .28rem .7rem;
  border-radius: 1rem;
}
.bl-cat[data-cat="ai"]        { background: rgba(123,45,155,.18); border: 1px solid rgba(123,45,155,.45); color: #c9a2e8; }
.bl-cat[data-cat="otomasyon"] { background: rgba(193,53,132,.14); border: 1px solid rgba(193,53,132,.45); color: #e8a2c9; }
.bl-cat[data-cat="seo"]       { background: rgba(232,74,110,.12); border: 1px solid rgba(232,74,110,.45); color: #f0a9b8; }
.bl-cat[data-cat="voice"]     { background: rgba(43,212,123,.10); border: 1px solid rgba(43,212,123,.40); color: #7fe0ae; }
.bl-cat[data-cat="web"]       { background: rgba(80,194,237,.10); border: 1px solid rgba(80,194,237,.40); color: #8fd4f0; }
.bl-date, .bl-read {
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--sm-fg-mute);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.bl-read i { color: var(--sm-pink-500); }

/* Featured */
.bl-featured-wrap { padding: 1rem 0 1.5rem; }
.bl-featured-wrap.is-hidden { display: none; }
.bl-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--sm-line);
  background:
    linear-gradient(155deg, rgba(123,45,155,.14), rgba(232,74,110,.05)),
    var(--sm-bg-card);
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, border-color .35s ease;
}
.bl-featured:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.45);
}
@media (max-width: 991.98px) {
  .bl-featured { grid-template-columns: 1fr; }
}
.bl-featured-visual {
  position: relative;
  min-height: 320px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(123,45,155,.35), transparent 60%),
    linear-gradient(135deg, #14081f, #1f0a30);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}
.bl-fv-orb {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,74,110,.22), transparent 65%);
  filter: blur(20px);
}
.bl-fv-mock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  width: min(320px, 100%);
}
.bl-fv-row { display: flex; gap: .5rem; }
.bl-fv-chip {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .72rem;
  padding: .35rem .75rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: var(--sm-fg-soft);
}
.bl-fv-arrow { color: var(--sm-pink-500); font-size: .9rem; opacity: .8; }
.bl-fv-core {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .14em;
  padding: .6rem 1.6rem;
  border-radius: 12px;
  background: var(--sm-grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(232,74,110,.6);
}
.bl-fv-answer {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--sm-fg-soft);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: .7rem .9rem;
  text-align: center;
}
.bl-fv-answer em {
  display: block;
  font-style: normal;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: .68rem;
  color: #2bd47b;
  margin-top: .3rem;
}
.bl-featured-body {
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bl-featured-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--sm-fg);
  margin: 0 0 .85rem;
}
.bl-featured-body p {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
  margin: 0 0 1.5rem;
}
.bl-featured-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--sm-pink-500);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: gap .25s ease;
}
.bl-featured:hover .bl-featured-cta { gap: .85rem; }

/* Grid */
.bl-grid-wrap { padding: 1.5rem 0 3rem; }
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 991.98px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bl-grid { grid-template-columns: 1fr; } }
.bl-card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.35rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1.15rem;
  transition: transform .3s ease, border-color .3s ease;
}
.bl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(193,53,132,.35);
}
.bl-card.is-hidden { display: none; }
.bl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.bl-card-top i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
}
.bl-card-top[data-tone="purple"] i  { background: linear-gradient(135deg, #5a1f7a, #7b2d9b); }
.bl-card-top[data-tone="magenta"] i { background: linear-gradient(135deg, #c13584, #e84a6e); }
.bl-card-top[data-tone="coral"] i   { background: linear-gradient(135deg, #7b2d9b, #e84a6e); }
.bl-soon {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffd76b;
  padding: .3rem .65rem;
  background: rgba(255,215,107,.08);
  border: 1px dashed rgba(255,215,107,.4);
  border-radius: 1rem;
}
.bl-card h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sm-fg);
  margin: 0 0 .55rem;
}
.bl-card p {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--sm-fg-soft);
  margin: 0;
}

.bl-empty {
  text-align: center;
  padding: 3rem 0;
  color: var(--sm-fg-mute);
}
.bl-empty i { font-size: 2rem; color: var(--sm-pink-500); display: block; margin-bottom: .75rem; }

/* Newsletter band */
.bl-news { padding: 2rem 0 5rem; }
.bl-news-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem 2.25rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(123,45,155,.22), transparent 55%),
    linear-gradient(155deg, rgba(193,53,132,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(193,53,132,.30);
}
@media (max-width: 991.98px) {
  .bl-news-card { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 1.5rem; }
}
.bl-news-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--sm-fg);
  margin: .65rem 0 .5rem;
}
.bl-news-card p {
  font-size: .95rem;
  color: var(--sm-fg-soft);
  margin: 0;
  line-height: 1.65;
}
.bl-news-form {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.bl-news-form input {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sm-line);
  border-radius: 2rem;
  padding: .8rem 1.25rem;
  color: var(--sm-fg);
  font-family: var(--font-sans);
  font-size: .92rem;
  transition: border-color .25s;
}
.bl-news-form input:focus {
  outline: none;
  border-color: rgba(193,53,132,.55);
}

/* ============================================================================
   BLOG POST (po-*)
   ============================================================================ */
.po-hero {
  position: relative;
  padding: 9rem 0 3rem;
  overflow: hidden;
  isolation: isolate;
}
.po-head { max-width: 880px; }
.po-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 1rem 0 1.15rem;
  color: var(--sm-fg);
}
.po-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--sm-fg-soft);
  margin: 0 0 1.5rem;
}
.po-author {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.po-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sm-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
.po-author b {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--sm-fg);
  font-weight: 600;
}
.po-author span:not(.po-author-avatar) {
  font-size: .78rem;
  color: var(--sm-fg-mute);
}

/* Layout: TOC + content */
.po-main { padding: 1rem 0 6rem; }
.po-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .po-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
.po-toc-wrap { min-width: 0; }
.po-toc {
  position: sticky;
  top: 110px;
  padding: 1.25rem 1.25rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
}
@media (max-width: 991.98px) {
  .po-toc { position: relative; top: 0; }
}
.po-toc-head {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--sm-fg-mute);
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: .75rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.po-toc ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: potoc;
}
.po-toc li { counter-increment: potoc; }
.po-toc a {
  display: block;
  padding: .4rem .5rem .4rem 1.9rem;
  position: relative;
  font-family: var(--font-display);
  font-size: .84rem;
  color: var(--sm-fg-soft);
  text-decoration: none;
  border-radius: 6px;
  transition: all .2s;
  line-height: 1.35;
}
.po-toc a::before {
  content: counter(potoc, decimal-leading-zero);
  position: absolute;
  left: .5rem;
  top: .42rem;
  font-size: .68rem;
  color: var(--sm-fg-mute);
}
.po-toc a:hover {
  background: rgba(193,53,132,.10);
  color: var(--sm-fg);
}
.po-toc a:hover::before { color: var(--sm-pink-500); }
.po-toc-cta {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .9rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(123,45,155,.20), rgba(232,74,110,.10));
  border: 1px solid rgba(193,53,132,.35);
  text-decoration: none;
  color: var(--sm-fg);
  font-family: var(--font-display);
  font-size: .82rem;
  line-height: 1.35;
  transition: all .25s;
}
.po-toc-cta:hover {
  border-color: rgba(232,74,110,.55);
  color: #fff;
  transform: translateY(-1px);
}
.po-toc-cta > i { color: var(--sm-pink-500); font-size: 1rem; flex-shrink: 0; }

/* Prose */
.po-content { max-width: 760px; min-width: 0; }
.po-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--sm-fg);
  letter-spacing: -.01em;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  scroll-margin-top: 110px;
}
.po-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.po-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--sm-fg-soft);
  margin: 0 0 1.1rem;
}
.po-content strong { color: var(--sm-fg); font-weight: 600; }
.po-content em { color: var(--sm-pink-500); font-style: italic; }
.po-content a {
  color: var(--sm-pink-500);
  text-decoration: none;
  border-bottom: 1px dashed rgba(232,74,110,.45);
  transition: color .2s, border-color .2s;
}
.po-content a:hover { color: #fff; border-bottom-color: #fff; }

.po-list, .po-list-num { margin: 0 0 1.25rem; padding: 0; }
.po-list { list-style: none; }
.po-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
}
.po-list li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: 1.05rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sm-grad);
  box-shadow: 0 0 8px rgba(232,74,110,.45);
}
.po-list-num {
  list-style: none;
  counter-reset: ponum;
}
.po-list-num li {
  counter-increment: ponum;
  position: relative;
  padding: .45rem 0 .45rem 2.4rem;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--sm-fg-soft);
}
.po-list-num li::before {
  content: counter(ponum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  color: var(--sm-pink-500);
  padding: .18rem .45rem;
  background: rgba(232,74,110,.10);
  border: 1px solid rgba(232,74,110,.25);
  border-radius: 6px;
}

.po-note {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: .85rem;
  background: linear-gradient(135deg, rgba(123,45,155,.12), rgba(232,74,110,.04));
  border: 1px solid rgba(193,53,132,.35);
  font-size: .93rem;
  line-height: 1.65;
  align-items: flex-start;
}
.po-note > i { font-size: 1.2rem; color: #ffd76b; flex-shrink: 0; margin-top: .1rem; }
.po-note > div { color: var(--sm-fg-soft); }
.po-note strong { color: var(--sm-fg); }

.po-code {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 1.4rem;
  background: #0c0618;
  border: 1px solid rgba(193,53,132,.25);
  border-left: 3px solid var(--sm-pink-500);
  border-radius: .85rem;
  overflow-x: auto;
}
.po-code code {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace;
  font-size: .84rem;
  line-height: 1.7;
  color: #c8b8d8;
  white-space: pre;
}

.po-table-wrap {
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;
  border-radius: .85rem;
  border: 1px solid var(--sm-line);
  background: rgba(255,255,255,.02);
}
.po-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 620px;
}
.po-table thead th {
  text-align: left;
  padding: .85rem 1rem;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  background: rgba(123,45,155,.10);
  border-bottom: 1px solid rgba(193,53,132,.20);
  font-weight: 600;
}
.po-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  color: var(--sm-fg-soft);
  line-height: 1.55;
  vertical-align: top;
}
.po-table tbody tr:last-child td { border-bottom: none; }
.po-table tbody tr:hover { background: rgba(193,53,132,.04); }
.po-table tbody td:first-child { color: var(--sm-fg); font-family: var(--font-display); font-weight: 500; }

.po-faq {
  margin-bottom: .65rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  overflow: hidden;
  transition: border-color .25s;
}
.po-faq[open] { border-color: rgba(193,53,132,.35); }
.po-faq summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--sm-fg);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.po-faq summary::-webkit-details-marker { display: none; }
.po-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--sm-fg-soft);
  transition: transform .25s, color .25s;
}
.po-faq[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--sm-pink-500);
}
.po-faq p {
  padding: 0 1.25rem 1.1rem !important;
  margin: 0 !important;
  font-size: .93rem !important;
}

.po-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  margin: 2.75rem 0;
  padding: 1.85rem 2rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(123,45,155,.25), transparent 60%),
    linear-gradient(155deg, rgba(193,53,132,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(193,53,132,.35);
  flex-wrap: wrap;
}
.po-cta h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sm-fg);
  margin: 0 0 .4rem;
}
.po-cta p {
  margin: 0 !important;
  font-size: .9rem !important;
}

.po-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.08); }
.po-related-head {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sm-fg-mute);
  font-weight: 700;
  margin-bottom: 1rem;
}
.po-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
@media (max-width: 767.98px) { .po-related-grid { grid-template-columns: 1fr; } }
.po-rel {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.15rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  text-decoration: none;
  transition: all .25s;
}
.po-rel:hover {
  transform: translateY(-2px);
  border-color: rgba(193,53,132,.4);
}
.po-rel h4 {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sm-fg);
  margin: 0;
}
.po-rel-soon {
  font-family: var(--font-display);
  font-size: .74rem;
  color: var(--sm-fg-mute);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
}
.po-rel:hover .po-rel-soon { color: var(--sm-pink-500); }

/* ==========================================================================
   smApp port additions
   ========================================================================== */
a.lang-opt { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.lang-switch-wide { align-items: center; gap: .5rem; }
.po-layout-single { display: block; max-width: 820px; margin: 0 auto; }
.sim-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.sim-list a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: .5rem; display: block; }
.sim-list a:hover { color: #fff; border-color: rgba(232,74,110,.6); }
.sim-search { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sim-search input { flex: 1 1 240px; min-height: 48px; border-radius: 999px; padding: 0 1.25rem; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: inherit; }

/* Packages page */
.pk-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.pk-jump a { color: var(--sm-fg-soft); text-decoration: none; font-size: .875rem; padding: .45rem .95rem; border: 1px solid var(--sm-line); border-radius: 999px; background: var(--sm-glass); transition: color .2s, border-color .2s; }
.pk-jump a:hover, .pk-jump a:focus-visible { color: var(--sm-fg); border-color: rgba(232,74,110,.55); }
.pk-line { scroll-margin-top: 96px; }
.pk-line-head { max-width: 760px; margin-bottom: 2.25rem; }
.pk-line-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 .6rem; color: var(--sm-fg); }
.pk-line-head p { color: var(--sm-fg-soft); margin: 0; font-size: 1.05rem; line-height: 1.6; }
.pk-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pk-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--sm-line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.pk-card.is-featured { border-color: transparent; background: linear-gradient(var(--sm-bg-card), var(--sm-bg-card)) padding-box, var(--sm-grad) border-box; box-shadow: var(--sm-shadow); }
.pk-badge { position: absolute; top: -.75rem; left: 1.5rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .3rem .7rem; border-radius: 999px; background: var(--sm-grad); color: #fff; }
.pk-name { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 .35rem; color: var(--sm-fg); }
.pk-note { color: var(--sm-fg-mute); font-size: .9rem; margin: 0 0 .75rem; }
.pk-price { display: flex; align-items: baseline; gap: .4rem; margin: .5rem 0 .25rem; }
.pk-price b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; color: var(--sm-fg); }
.pk-price span { color: var(--sm-fg-mute); font-size: .9rem; }
.pk-setup { color: var(--sm-fg-mute); font-size: .8rem; margin: 0 0 .75rem; }
.pk-features { list-style: none; padding: 0; margin: .75rem 0 1.5rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--sm-fg-soft); }
.pk-features li { display: flex; gap: .55rem; align-items: flex-start; }
.pk-features i { color: var(--sm-pink-500); margin-top: .1rem; }
.pk-cta { margin-top: auto; justify-content: center; }
.pk-domain-form { display: flex; gap: .75rem; flex-wrap: wrap; max-width: 640px; margin-bottom: 2rem; }
.pk-domain-form input[type="text"] { flex: 1 1 260px; min-height: 52px; border-radius: 999px; padding: 0 1.4rem; border: 1px solid var(--sm-line); background: var(--sm-glass); color: var(--sm-fg); font-size: 1rem; }
.pk-domain-form input[type="text"]:focus { outline: 2px solid rgba(232,74,110,.6); outline-offset: 2px; }
.pk-domain-results { list-style: none; padding: 0; margin: -1rem 0 2rem; max-width: 640px; display: grid; gap: .5rem; }
.pk-domain-results li { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .7rem 1rem; border: 1px solid var(--sm-line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.pk-domain-results b { font-family: var(--font-display); color: var(--sm-fg); flex: 1 1 180px; }
.pk-domain-results .pk-dr-state { font-size: .85rem; color: var(--sm-fg-soft); }
.pk-domain-results .is-free .pk-dr-state { color: #8be3ad; }
.pk-domain-results .is-taken { opacity: .7; }
.pk-domain-results .pk-dr-price { color: var(--sm-fg); font-size: .9rem; }
.pk-domain-results .btn { min-height: 36px; padding: 0 1rem; }
.pk-tlds { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pk-tlds li { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 1rem; border: 1px solid var(--sm-line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.pk-tlds b { font-family: var(--font-display); color: var(--sm-fg); }
.pk-tlds span { color: var(--sm-fg-soft); font-size: .9rem; }
.pk-fine { color: var(--sm-fg-mute); font-size: .82rem; margin: 1.5rem 0 0; }
.nav-link.nav-portal { font-size: 1.25rem; padding-inline: .5rem; line-height: 1; }