/* Leadify — Swiss Editorial × Data-earth Globe × Sharp dual-tone */:root {  --paper: #FAF8F5;  --paper-2: #F2EFE9;  --ink: #121316;  --ink-2: #1A1C20;  --olive: #286652;  --amber: #E07A24;  --line: #E2DDD5;  --muted: #64615A;  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;  --mono: "Cascadia Code", ui-monospace, "Cascadia Mono", monospace;  --wrap: min(1120px, calc(100% - 2.5rem));  --shadow: 0 24px 60px rgba(18, 19, 22, 0.12);}*,*::before,*::after {  box-sizing: border-box;}html {  scroll-behavior: smooth;  scroll-padding-top: 5rem;}body {  margin: 0;  font-family: var(--sans);  font-size: 1.0625rem;  line-height: 1.55;  color: var(--ink);  background: var(--paper);  -webkit-font-smoothing: antialiased;}

/* Ambient particle / grid layer */
.bg-canvas {  position: fixed;  inset: 0;  width: 100%;  height: 100%;  z-index: 0;  pointer-events: none;  opacity: 0.55;}
.nav,main,.footer {  position: relative;  z-index: 1;}
.band-ink .wrap,.band-paper .wrap {  position: relative;  z-index: 1;}
.step,.why-card,.scope-card {  transition: transform 0.25s ease, box-shadow 0.25s ease;  transform-style: preserve-3d;}
.step:hover,.why-card:hover,.scope-card:hover {  box-shadow: 0 16px 40px rgba(18, 19, 22, 0.1);  z-index: 2;}
.shot-frame img {  transition: transform 0.45s ease;}
.btn {  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s ease;  will-change: transform;}
@media (prefers-reduced-motion: reduce) {  .bg-canvas {    opacity: 0.2;  }  
.step,  .why-card,  .scope-card,  .shot-frame img,  .btn {    transition: none;  }}img {  max-width: 100%;  height: auto;  display: block;}a {  color: inherit;  text-decoration: none;}
.skip-link {  position: absolute;  left: -999px;}
.skip-link:focus {  left: 1rem;  top: 1rem;  z-index: 100;  background: var(--ink);  color: var(--paper);  padding: 0.5rem 1rem;}
.wrap {  width: var(--wrap);  margin-inline: auto;}

/* ——— Nav ——— */
.nav {  position: sticky;  top: 0;  z-index: 50;  display: flex;  align-items: center;  gap: 1.5rem;  padding: 0.85rem 1.5rem;  background: rgba(250, 248, 245, 0.92);  border-bottom: 1px solid var(--line);  backdrop-filter: blur(8px);}
.nav.is-scrolled {  background: rgba(18, 19, 22, 0.92);  color: var(--paper);  border-bottom-color: rgba(250, 248, 245, 0.12);}
.nav.is-scrolled .btn-primary {  background: var(--amber);  border-color: var(--amber);  color: var(--ink);}
.logo {  font-family: var(--mono);  font-weight: 700;  letter-spacing: 0.18em;  font-size: 0.85rem;}
.nav-links {  display: flex;  align-items: center;  gap: clamp(0.85rem, 1.4vw, 1.35rem);  margin-left: auto;  font-size: 0.88rem;}
.nav-links a {  position: relative;  padding: 0.25rem 0;  opacity: 0.8;  white-space: nowrap;  transition: opacity 0.2s ease, color 0.2s ease;}
.nav-links a::after {  content: "";  position: absolute;  left: 0;  right: 0;  bottom: -2px;  height: 2px;  background: var(--amber);  transform: scaleX(0);  transform-origin: left center;  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);}
.nav-links a:hover, .nav-links a.is-active, .nav-links a[aria-current="page"] {  opacity: 1;  color: var(--amber);}
.nav-links a.is-active::after, .nav-links a[aria-current="page"]::after {  transform: scaleX(1);}
.nav .btn-sm {  margin-left: 0.5rem;  white-space: nowrap;}
.nav-toggle {  display: none;  background: none;  border: 1px solid var(--line);  color: inherit;  font-size: 1.1rem;  padding: 0.25rem 0.5rem;  cursor: pointer;}

/* ——— Buttons ——— */
.btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 0.5rem;  padding: 0.85rem 1.35rem;  font-family: var(--sans);  font-size: 0.95rem;  font-weight: 600;  border: 1px solid transparent;  border-radius: 0;  cursor: pointer;  transition: background 0.15s, color 0.15s, border-color 0.15s;}
.btn-primary {  background: var(--ink);  color: var(--paper);  border-color: var(--ink);}
.btn-primary:hover {  background: var(--amber);  border-color: var(--amber);  color: var(--ink);}
.btn-ghost {  background: transparent;  color: var(--ink);  border-color: var(--ink);}
.btn-ghost:hover {  background: var(--ink);  color: var(--paper);}
.btn-amber {  background: var(--amber);  color: var(--ink);  border-color: var(--amber);}
.btn-amber:hover {  background: var(--paper);  border-color: var(--paper);}
.btn-sm {  padding: 0.5rem 0.95rem;  font-size: 0.85rem;}
.btn-block {  width: 100%;}

/* ——— Type ——— */
.eyebrow {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.14em;  text-transform: uppercase;  color: var(--muted);  margin: 0 0 0.75rem;}
.eyebrow-amber {  color: var(--amber);}h1,h2 {  font-family: var(--serif);  font-weight: 500;  line-height: 1.08;  letter-spacing: -0.02em;  margin: 0 0 1rem;}h1 {  font-size: clamp(2.4rem, 5.5vw, 4.4rem);}h2 {  font-size: clamp(1.85rem, 3.2vw, 2.75rem);}h3 {  font-family: var(--serif);  font-size: 1.25rem;  margin: 0 0 0.5rem;}
.lead,.section-lead {  font-size: 1.1rem;  color: color-mix(in srgb, var(--ink) 78%, var(--muted));  max-width: 36rem;}
.section-lead.light,.light {  color: color-mix(in srgb, var(--paper) 82%, var(--muted));}
.section-head {  margin-bottom: 2.5rem;  max-width: 40rem;}
.section-head.light h2 {  color: var(--paper);}

/* ——— Hero ——— */
.hero {  position: relative;  padding: clamp(2.5rem, 6vw, 5rem) 0 0;  overflow: hidden;  background: transparent;}
.hero-grid {  width: var(--wrap);  margin-inline: auto;  display: grid;  grid-template-columns: 1.05fr 0.95fr;  gap: 2rem;  align-items: center;  min-height: min(78vh, 720px);}
.hero-copy {  position: relative;  z-index: 2;}
.hero-cta {  display: flex;  flex-wrap: wrap;  gap: 0.75rem;  margin: 1.75rem 0 1rem;}
.hero-note {  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.04em;  color: var(--muted);  margin: 0;}

/* ——— AI Telemetri HUD Kartları & Sahne ——— */
.hero-stage {
  position: relative;
  height: min(540px, 72vw);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.globe-viewport {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}
#globe:active {  cursor: grabbing;}

.hero-frame {  position: absolute;  inset: 2% 2%;  border: 1px solid rgba(18, 19, 22, 0.1);  pointer-events: none;  z-index: 2;}
.hero-frame::before,.hero-frame::after {  content: "";  position: absolute;  width: 14px;  height: 14px;  border: 2px solid var(--ink);}
.hero-frame::before {  top: -2px;  left: -2px;  border-right: 0;  border-bottom: 0;}
.hero-frame::after {  bottom: -2px;  right: -2px;  border-left: 0;  border-top: 0;}

/* Farklı Köşelerde Rastgele Belirip Kaybolan Vurucu İmza Notları */
.floating-insight {
  position: absolute;
  z-index: 4;
  max-width: 255px;
  padding: 0.55rem 0.85rem;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(18, 19, 22, 0.14);
  border-left: 3px solid var(--amber);
  box-shadow: 0 8px 24px rgba(18, 19, 22, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.floating-insight.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fi-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.2rem;
}
.fi-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}
.fi-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

/* 6 Farklı Köşe / Kenar Yuvası */
.floating-insight.pos-tl { top: 4%; left: 3%; right: auto; bottom: auto; }
.floating-insight.pos-tr { top: 4%; right: 3%; left: auto; bottom: auto; }
.floating-insight.pos-bl { bottom: 5%; left: 3%; right: auto; top: auto; }
.floating-insight.pos-br { bottom: 5%; right: 3%; left: auto; top: auto; }
.floating-insight.pos-ml { top: 18%; left: 2%; right: auto; bottom: auto; }
.floating-insight.pos-mr { bottom: 18%; right: 2%; left: auto; top: auto; }

@media (max-width: 800px) {
  .hero-stage { height: 420px; min-height: 380px; }
  .floating-insight {
    max-width: 230px;
    padding: 0.45rem 0.7rem;
  }
  .fi-text { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-insight { opacity: 1; transform: none; transition: none; }
}

/* Ticker Container */
.ticker {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: rgba(250, 248, 245, 0.65);
  display: flex;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

/* Dual Ticker Tracks (Seamless Infinite Loop) */
.ticker-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.75rem;
  padding: 0.72rem 1.75rem 0.72rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  white-space: nowrap;
  animation: ticker-loop 36s linear infinite;
  will-change: transform;
}

.ticker-track i {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--amber);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@keyframes ticker-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .ticker-track { animation: none; }
}

/* Sharp diagonal cut into ink band */
.hero-cut {  height: 48px;  background: var(--ink);  clip-path: polygon(0 100%, 100% 0, 100% 100%);  margin-top: 2rem;}

/* ——— Bands ——— */
.band {  padding: clamp(3.5rem, 8vw, 6.5rem) 0;}
.band-ink {  background: rgba(18, 19, 22, 0.92);  color: var(--paper);  box-shadow: 0 0 0 1px rgba(18, 19, 22, 0.02);}
.band-paper {  background: rgba(250, 248, 245, 0.82);  border-top: 1px solid var(--line);  border-bottom: 1px solid var(--line);}

/* ——— Proof ——— */
.proof {  padding-top: 2.5rem;  padding-bottom: 3rem;  border-top: none;}
.proof-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 1.5rem;  border-top: 1px solid rgba(250, 248, 245, 0.15);  border-bottom: 1px solid rgba(250, 248, 245, 0.15);  padding: 1.75rem 0;}
.proof-num {  display: block;  font-family: var(--mono);  font-size: clamp(2.2rem, 4vw, 3.25rem);  font-weight: 700;  color: var(--amber);  line-height: 1;  margin-bottom: 0.5rem;}
.proof-label {  font-size: 0.92rem;  color: color-mix(in srgb, var(--paper) 75%, var(--muted));}
.proof-src {  margin: 1rem 0 0;  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.06em;  color: var(--muted);}

/* ——— Steps ——— */
.steps {  list-style: none;  margin: 0 0 3rem;  padding: 0;  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 0;  border: 1px solid var(--line);}
.step {  padding: 1.5rem 1.25rem;  border-right: 1px solid var(--line);  background: var(--paper);  transition: background 0.2s, border-color 0.2s;}
.step:last-child {  border-right: 0;}
.step:hover {  background: var(--paper-2);}
.step:hover h3 {  color: var(--olive);}
.step-num {  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.12em;  color: var(--amber);  display: block;  margin-bottom: 0.75rem;}
.step p {  margin: 0;  font-size: 0.95rem;  color: color-mix(in srgb, var(--ink) 80%, var(--muted));}

/* ——— Shots ——— */
.shot-frame {  margin: 0;  border: 1px solid var(--line);  background: var(--paper-2);  box-shadow: var(--shadow);}
.shot-frame img {  width: 100%;}
.shot-frame figcaption {  padding: 0.65rem 1rem;  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.04em;  color: var(--muted);  border-top: 1px solid var(--line);  background: var(--paper);}
.shot-dark {  border-color: rgba(224, 122, 36, 0.45);  background: var(--ink-2);}
.shot-dark figcaption {  background: var(--ink-2);  color: var(--muted);  border-top-color: rgba(250, 248, 245, 0.1);}

/* ——— Panel teaser (yöntem) + panel/ tour page ——— */
.panel-teaser {  margin-top: 2.5rem;  cursor: zoom-in;}
.panel-teaser-row {  display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: space-between;  gap: 1rem;  margin: 1.15rem 0 0;}
.panel-teaser-note {  margin: 0;  flex: 1 1 16rem;  font-size: 0.95rem;  color: color-mix(in srgb, var(--ink) 78%, var(--muted));  line-height: 1.5;}
.panel-fig {  position: relative;  cursor: zoom-in;}
.panel-fig img {  transition: opacity 0.25s ease;}
.panel-fig:hover img {  opacity: 0.94;}
.panel-fig .fig-zoom-badge {  position: absolute;  top: 1rem;  right: 1rem;  width: 2.2rem;  height: 2.2rem;  display: flex;  align-items: center;  justify-content: center;  background: rgba(18, 19, 22, 0.75);  color: var(--paper);  border: 1px solid rgba(250, 248, 245, 0.25);  backdrop-filter: blur(4px);  border-radius: 50%;  font-size: 0.85rem;  opacity: 0;  transform: scale(0.85);  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s;  pointer-events: none;}
.panel-fig:hover .fig-zoom-badge {  opacity: 1;  transform: scale(1);}
.panel-fig:focus-visible, .panel-teaser:focus-visible {  outline: 2px solid var(--amber);  outline-offset: 3px;}
.fig-label {  color: var(--amber);  letter-spacing: 0.12em;  margin-right: 0.45rem;}
.panel-page {  padding-top: 3.5rem;  padding-bottom: 4.5rem;}
.panel-page-head {  max-width: 44rem;  margin-bottom: 2.5rem;}
.panel-page-head h1 {  margin: 0.4rem 0 0.85rem;  font-size: clamp(1.85rem, 3.6vw, 2.55rem);  font-weight: 500;  letter-spacing: -0.025em;  line-height: 1.15;}
.panel-nav-pills {  display: flex;  flex-wrap: wrap;  gap: 0.5rem;  margin: 1.5rem 0 0.25rem;}
.panel-pill {  display: inline-flex;  align-items: center;  gap: 0.4rem;  padding: 0.35rem 0.75rem;  font-family: var(--mono);  font-size: 0.78rem;  letter-spacing: 0.04em;  background: var(--paper-2);  border: 1px solid var(--line);  color: var(--ink);  transition: border-color 0.2s, background 0.2s, color 0.2s;}
.panel-pill:hover {  border-color: var(--amber);  color: var(--amber);}
.panel-pill .pill-num {  color: var(--amber);  font-weight: 700;}
.panel-page-back {  margin: 1.15rem 0 0;  font-family: var(--mono);  font-size: 0.78rem;  letter-spacing: 0.06em;}
.panel-page-back a:hover {  color: var(--amber);}
.panel-figures {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-direction: column;  gap: 2.75rem;}
.panel-figures > li {  margin: 0;  scroll-margin-top: 5rem;}
.panel-fig-note {  margin: 0.85rem 0 0;  max-width: 44rem;  font-size: 0.98rem;  line-height: 1.55;  color: color-mix(in srgb, var(--ink) 80%, var(--muted));}
.panel-page-cta {  margin-top: 3.5rem;  padding: 2rem;  border: 1px solid var(--line);  background: var(--paper-2);  max-width: 40rem;}
.panel-page-cta h2 {  margin: 0 0 0.55rem;  font-size: 1.45rem;  font-weight: 500;}
.panel-page-cta p {  margin: 0 0 1.25rem;  color: color-mix(in srgb, var(--ink) 80%, var(--muted));  line-height: 1.55;}
.panel-cta-actions {  display: flex;  flex-wrap: wrap;  gap: 0.85rem;  align-items: center;}
.panel-lightbox {  position: fixed;  inset: 0;  z-index: 100;  display: flex;  align-items: center;  justify-content: center;  padding: 1.5rem;  background: rgba(18, 19, 22, 0.88);  opacity: 0;  visibility: hidden;  transition: opacity 0.2s ease, visibility 0.2s ease;}
.panel-lightbox.is-open {  opacity: 1;  visibility: visible;}
.panel-lightbox img {  max-width: min(96vw, 1400px);  max-height: 88vh;  width: auto;  height: auto;  object-fit: contain;  border: 1px solid rgba(250, 248, 245, 0.12);  background: var(--paper);}
.panel-lightbox-close {  position: absolute;  top: 1rem;  right: 1rem;  width: 2.5rem;  height: 2.5rem;  border: 1px solid rgba(250, 248, 245, 0.35);  background: transparent;  color: var(--paper);  font-size: 1.4rem;  line-height: 1;  cursor: pointer;}
.panel-lightbox-close:hover, .panel-lightbox-close:focus-visible {  background: var(--paper);  color: var(--ink);}
@media (max-width: 900px) {
  .panel-teaser-row {  flex-direction: column;  align-items: flex-start;}
}
@media (prefers-reduced-motion: reduce) {
  .panel-fig img, .panel-teaser img, .panel-lightbox {  transition: none;}
}

/* ——— Case ——— */
.case-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 2.5rem;  align-items: start;}
/* ——— Case carousel (Oratec + Arttolia) ——— */
.case-carousel {  position: relative;}
.case-carousel-bar {  display: flex;  align-items: flex-end;  justify-content: space-between;  gap: 1rem;  margin-bottom: 1.25rem;}
.case-carousel-meta {  display: flex;  flex-direction: column;  gap: 0.65rem;}
.case-carousel-title {  margin: 0;}
.case-carousel-controls {  display: flex;  align-items: center;  gap: 0.55rem;}
.case-carousel-counter {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.12em;  color: var(--muted);  margin-right: 0.35rem;}
.case-arrow {  width: 2.35rem;  height: 2.35rem;  border: 1px solid var(--ink);  background: var(--paper);  color: var(--ink);  font-size: 1.35rem;  line-height: 1;  cursor: pointer;  display: inline-flex;  align-items: center;  justify-content: center;  transition: background 0.15s, color 0.15s, opacity 0.15s;}
.case-arrow:hover:not(:disabled) {  background: var(--ink);  color: var(--paper);}
.case-arrow:disabled {  opacity: 0.3;  cursor: default;}
.case-arrow:focus-visible {  outline: 2px solid var(--amber);  outline-offset: 2px;}
.case-carousel-track {  position: relative;  padding: 0 0.25rem;}
.case-slide {  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.case-slide[hidden] {  display: none !important;}
.case-slide.is-active {  will-change: transform, opacity;}
.case-slide.is-leaving {  opacity: 0;  transform: perspective(1400px) rotateY(-8deg) translateX(-36px) scale(0.985);  transform-origin: left center;}
.case-slide.is-entering {  opacity: 0;  transform: perspective(1400px) rotateY(8deg) translateX(36px) scale(0.985);  transform-origin: right center;}
.case-edge {  position: absolute;  top: 0;  height: 100%;  min-height: 14rem;  width: 4.25rem;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: 1.15rem;  padding: 1.25rem 0;  border: 1px solid var(--ink);  background: var(--paper-2);  color: var(--ink);  cursor: pointer;  transition: background 0.2s, color 0.2s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;}
.case-edge--next {  right: -4.75rem;  border-left: none;}
.case-edge--prev {  left: -4.75rem;  border-right: none;}
.case-edge-chevron {  font-size: 1.55rem;  line-height: 1;}
.case-edge-label {  writing-mode: vertical-rl;  text-orientation: mixed;  font-family: var(--mono);  font-size: 0.95rem;  font-weight: 700;  letter-spacing: 0.22em;  text-transform: uppercase;}
.case-edge--prev .case-edge-label {  transform: rotate(180deg);}
.case-edge:hover, .case-edge:focus-visible {  background: var(--ink);  color: var(--paper);  border-color: var(--ink);  box-shadow: 0 8px 28px rgba(18, 19, 22, 0.18);}
.case-edge:focus-visible {  outline: 2px solid var(--amber);  outline-offset: 2px;}
.case-edge[hidden] {  display: none !important;}
.case-guide {  position: absolute;  inset: 0;  pointer-events: none;  opacity: 0;  transition: opacity 0.25s ease;  z-index: 3;  overflow: visible;}
.case-guide.is-on {  opacity: 1;}
.case-guide canvas {  width: 100%;  height: 100%;  display: block;  overflow: visible;}
.case-edge.is-guided {  box-shadow: 0 0 0 1px var(--amber), 0 8px 28px rgba(224, 122, 36, 0.18);}
@media (max-width: 680px) {
  .case-edge {  display: none;}
  .case-guide {  display: none;}
}
@media (prefers-reduced-motion: reduce) {
  .case-slide, .case-slide.is-leaving, .case-slide.is-entering {  transition-duration: 0.01ms;  transform: none;}
  .case-edge, .case-guide {  transition: none;}
}
.case-stats {  list-style: none;  margin: 1.5rem 0;  padding: 0;  border-top: 1px solid rgba(250, 248, 245, 0.15);}
.case-stats li {  padding: 0.65rem 0;  border-bottom: 1px solid rgba(250, 248, 245, 0.12);  font-size: 0.98rem;}
.case-stats strong {  font-family: var(--mono);  color: var(--amber);  margin-right: 0.35rem;}
.case-visuals {  display: grid;  gap: 1rem;}

/* ——— Multi-sector scope ——— */
.scope-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 1px;  background: rgba(250, 248, 245, 0.12);  border: 1px solid rgba(250, 248, 245, 0.12);}
.scope-card {  background: var(--ink-2);  padding: 1.75rem 1.5rem;}
.scope-card h3 {  color: var(--paper);}
.scope-card p {  margin: 0;  color: color-mix(in srgb, var(--paper) 78%, var(--muted));  font-size: 0.98rem;}

/* ——— Case waves (dalga 1 / dalga 2) ——— */
.waves {  display: grid;  gap: 1rem;  margin: 1.5rem 0;}
.wave {  border: 1px solid var(--line);  background: var(--paper);  padding: 1.25rem 1.35rem;}
.wave h3 {  margin-bottom: 0.4rem;}
.wave p {  margin: 0;  font-size: 0.95rem;  color: color-mix(in srgb, var(--ink) 80%, var(--muted));}
.wave-tag {  display: inline-block;  font-family: var(--mono);  font-size: 0.68rem;  letter-spacing: 0.12em;  margin-bottom: 0.65rem;  padding: 0.25rem 0.5rem;  border: 1px solid var(--line);  color: var(--muted);}
.wave-live {  border-color: var(--amber);  box-shadow: 4px 4px 0 rgba(224, 122, 36, 0.25);}
.wave-live .wave-tag {  background: var(--amber);  border-color: var(--amber);  color: var(--ink);  font-weight: 600;}
.wave-next {  background: var(--paper-2);}
.wave-next .wave-tag {  border-color: var(--olive);  color: var(--olive);}
.wave .case-stats {  border-top-color: var(--line);  margin-bottom: 0;}
.wave .case-stats li {  border-bottom-color: var(--line);  color: var(--ink);}
.wave .case-stats strong {  color: var(--olive);}
.wave-live .case-stats strong {  color: var(--amber);}

/* Dark-band case layout: case section is paper now — keep visuals readable */
.band-paper .case .section-lead {  color: color-mix(in srgb, var(--ink) 78%, var(--muted));}
.band-paper .case .eyebrow-amber {  color: var(--amber);}

/* ——— Light why cards (paper band) ——— */
.why-grid-light {  background: var(--line);  border-color: var(--line);}
.why-card-light {  background: var(--paper);}
.why-card-light h3 {  color: var(--ink);}
.why-card-light p {  color: color-mix(in srgb, var(--ink) 78%, var(--muted));}

/* ——— Ticks on ink ——— */
.dark-ticks li {  border-bottom-color: rgba(250, 248, 245, 0.14);}
.dark-ticks li::before {  background: var(--amber);}

/* Contact on ink band */
.band-ink .contact-form {  background: var(--ink-2);  border-color: rgba(250, 248, 245, 0.18);}
.band-ink .contact-form input,.band-ink .contact-form textarea {  background: var(--ink);  border-color: rgba(250, 248, 245, 0.2);  color: var(--paper);}
.band-ink .contact-form input::placeholder,.band-ink .contact-form textarea::placeholder {  color: rgba(250, 248, 245, 0.35);}
.band-ink .contact-form label {  color: color-mix(in srgb, var(--paper) 55%, var(--muted));}
.form-note-light {  color: rgba(250, 248, 245, 0.5);}
.btn-on-ink {  background: var(--amber);  border-color: var(--amber);  color: var(--ink);}
.btn-on-ink:hover {  background: var(--paper);  border-color: var(--paper);  color: var(--ink);}

/* ——— Sector ——— */
.sector-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 2.5rem;  align-items: start;}
.sector-matrix-wrap {  margin-top: 2.75rem;  padding-top: 2rem;  border-top: 1px solid rgba(250, 248, 245, 0.12);}
.sector-matrix-head {  display: flex;  flex-wrap: wrap;  align-items: baseline;  justify-content: space-between;  gap: 0.75rem;  margin-bottom: 1.15rem;}
.sector-matrix-sub {  font-family: var(--mono);  font-size: 0.78rem;  color: color-mix(in srgb, var(--paper) 64%, var(--muted));}
.sector-marquee {  display: flex;  overflow: hidden;  user-select: none;  border-top: 1px solid rgba(250, 248, 245, 0.14);  border-bottom: 1px solid rgba(250, 248, 245, 0.14);  background: rgba(26, 28, 32, 0.55);  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);}
.sector-marquee:hover .sector-marquee-track {  animation-play-state: paused;}
.sector-marquee-track {  display: flex;  align-items: stretch;  flex-shrink: 0;  gap: 1rem;  padding: 1rem 1rem 1rem 0;  animation: ticker-loop 58s linear infinite;  will-change: transform;}
.sector-matrix-card {  flex: 0 0 320px;  width: 320px;  background: var(--ink-2);  border: 1px solid rgba(250, 248, 245, 0.12);  border-left: 3px solid var(--amber);  padding: 1.05rem 1.15rem;  transition: border-color 0.2s ease, transform 0.2s ease;}
.sector-matrix-card:hover {  border-color: var(--amber);  transform: translateY(-2px);}
.sector-matrix-card h3, .sector-card-title {  margin: 0 0 0.4rem;  font-family: var(--serif);  font-weight: 600;  font-size: 0.98rem;  line-height: 1.25;  color: var(--paper);}
.sector-matrix-card p, .sector-card-desc {  margin: 0;  font-size: 0.82rem;  line-height: 1.5;  color: color-mix(in srgb, var(--paper) 72%, var(--muted));}
@media (prefers-reduced-motion: reduce) {  .sector-marquee-track {    animation: none;  }}
.ticks {  margin: 1.25rem 0 1.75rem;  padding: 0;  list-style: none;}
.ticks li {  position: relative;  padding: 0.45rem 0 0.45rem 1.35rem;  border-bottom: 1px solid var(--line);}
.ticks li::before {  content: "";  position: absolute;  left: 0;  top: 1rem;  width: 8px;  height: 8px;  background: var(--amber);  clip-path: polygon(0 0, 100% 50%, 0 100%);}

/* ——— Why ——— */
.why-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 1px;  background: rgba(250, 248, 245, 0.12);  border: 1px solid rgba(250, 248, 245, 0.12);}
.why-card {  background: var(--ink-2);  padding: 1.75rem 1.5rem;}
.why-card h3 {  color: var(--paper);}
.why-card p {  margin: 0;  color: color-mix(in srgb, var(--paper) 78%, var(--muted));  font-size: 0.98rem;}

/* ——— CTA / form ——— */
.cta-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 2.5rem;  align-items: start;}
.contact-form {  display: grid;  gap: 0.85rem;  padding: 1.5rem;  border: 1px solid var(--line);  background: var(--paper-2);}
.contact-form label {  display: grid;  gap: 0.35rem;  font-size: 0.85rem;  font-family: var(--mono);  letter-spacing: 0.04em;  text-transform: uppercase;  color: var(--muted);}
.contact-form input,.contact-form textarea {  font: inherit;  font-family: var(--sans);  text-transform: none;  letter-spacing: 0;  padding: 0.7rem 0.8rem;  border: 1px solid var(--line);  background: var(--paper);  color: var(--ink);  border-radius: 0;}
.contact-form input:focus,.contact-form textarea:focus {  outline: 2px solid var(--olive);  outline-offset: 1px;}
.form-note {  margin: 0;  font-size: 0.8rem;  color: var(--muted);}
.form-ok {  margin: 0;  padding: 0.75rem;  background: var(--olive);  color: var(--paper);  font-size: 0.95rem;}

/* ——— KVKK Consent Checkbox & Editorial Modal ——— */
.kvkk-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(250, 248, 245, 0.14);
  background: rgba(18, 19, 22, 0.55);
  margin-top: 0.15rem;
}
.contact-form .kvkk-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.18rem 0 0;
  padding: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.contact-form label.kvkk-consent-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(250, 248, 245, 0.76);
  cursor: pointer;
}
.kvkk-inline-trigger {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--amber);
  padding: 0 0 1px;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--amber);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.kvkk-inline-trigger:hover,
.kvkk-inline-trigger:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
  outline: none;
}

.kvkk-modal {
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  max-width: min(680px, calc(100vw - 2rem));
  width: 100%;
  max-height: min(84vh, 760px);
  margin: auto;
  box-shadow: 0 24px 64px rgba(18, 19, 22, 0.45);
}
.kvkk-modal::backdrop {
  background: rgba(18, 19, 22, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kvkk-modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(84vh, 760px);
}
.kvkk-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.kvkk-modal-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.48rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  margin-top: 0.25rem;
}
.kvkk-modal-close {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--mono);
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.kvkk-modal-close:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.kvkk-modal-body {
  padding: 1.35rem 1.5rem;
  overflow-y: auto;
  font-size: 0.92rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}
.kvkk-modal-body p {
  margin: 0 0 1rem;
}
.kvkk-modal-body p:last-child {
  margin-bottom: 0;
}
.kvkk-sec-title {
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.25rem 0 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.kvkk-term {
  font-weight: 600;
  color: var(--ink);
}
.kvkk-modal-body a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kvkk-modal-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.kvkk-btn-close {
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
}
.kvkk-btn-close:hover {
  border-color: var(--ink);
}
@media (max-width: 680px) {
  .kvkk-modal-head,
  .kvkk-modal-body,
  .kvkk-modal-foot {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .kvkk-modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .kvkk-modal-foot .btn {
    width: 100%;
    text-align: center;
  }
}

/* ——— Footer ——— */
.footer {  padding: 2.5rem 0;  border-top: 1px solid rgba(250, 248, 245, 0.1);}
.footer-grid {  display: grid;  grid-template-columns: 1.2fr 1fr auto;  gap: 1.25rem 1.5rem;  align-items: end;}
.footer p, .footer-tagline {  margin: 0.5rem 0 0;  color: var(--muted);  font-size: 0.9rem;}
.footer-links {  display: flex;  flex-wrap: wrap;  gap: 1.25rem;  font-size: 0.9rem;}
.footer-links a:hover {  color: var(--amber);}
.footer-social {  grid-column: 1 / -1;  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 1rem;  padding-top: 1rem;  border-top: 1px solid rgba(250, 248, 245, 0.08);  font-family: var(--mono);  font-size: 0.75rem;  color: var(--muted);}
.footer-social-label {  text-transform: uppercase;  letter-spacing: 0.08em;}
.footer-social a {  color: rgba(250, 248, 245, 0.72);  text-decoration: none;  transition: color 0.2s;}
.footer-social a:hover {  color: var(--amber);}
.footer-copy {  font-family: var(--mono);  font-size: 0.75rem !important;  color: var(--muted);}

/* ——— Reveal ——— */
.reveal {  opacity: 0;  transform: translateY(24px);}
@media (max-width: 680px) {  .hero-grid,  .case-grid,  .sector-grid,  .cta-grid {    grid-template-columns: 1fr;  }  
.steps {    grid-template-columns: 1fr 1fr;  }  
.step:nth-child(2) {    border-right: 0;  }  
.step:nth-child(1),  .step:nth-child(2) {    border-bottom: 1px solid var(--line);  }  
.why-grid,  .scope-grid,  .proof-grid {    grid-template-columns: 1fr;  }  
.footer-grid {    grid-template-columns: 1fr;  }  
.nav-links {    display: none;    position: absolute;    top: 100%;    left: 0;    right: 0;    flex-direction: column;    background: var(--paper);    color: var(--ink);    padding: 1rem 1.5rem;    border-bottom: 1px solid var(--line);  }  
.nav-links.open {    display: flex;  }  
.nav-toggle {    display: block;    margin-left: auto;  }  
.nav .btn-sm {    display: none;  }}
@media (prefers-reduced-motion: reduce) {  html {    scroll-behavior: auto;  }  
.reveal {    opacity: 1;    transform: none;  }}

/* ——— Artifact card (client work sample in browser chrome) ——— */
.artifact-frame {  margin: 0;  border: 1px solid var(--line);  background: var(--paper);  box-shadow: var(--shadow);}
.artifact-chrome {  display: flex;  align-items: center;  gap: 0.55rem;  padding: 0.55rem 0.85rem;  border-bottom: 1px solid var(--line);  background: var(--paper-2);}
.artifact-dots {  display: flex;  gap: 0.32rem;}
.artifact-dots i {  width: 8px;  height: 8px;  border-radius: 50%;  background: var(--line);}
.artifact-url {  font-family: var(--mono);  font-size: 0.7rem;  letter-spacing: 0.04em;  color: var(--muted);  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.artifact-frame img {  width: 100%;  display: block;}
.artifact-frame figcaption {  padding: 0.65rem 1rem;  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.04em;  color: var(--muted);  border-top: 1px solid var(--line);  background: var(--paper);}
.artifact-link {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.04em;  color: var(--amber);  text-decoration: none;  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);}
.artifact-link:hover {  color: var(--ink);  border-bottom-color: var(--ink);}

/* ——— Deliverables strip ——— */
.deliverables {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 0;  margin: 1.5rem 0;  border: 1px solid var(--line);  background: var(--paper-2);}
.deliverable {  padding: 1rem 1.15rem;  border-bottom: 1px solid var(--line);  border-right: 1px solid var(--line);}
.deliverable:nth-child(2n) {  border-right: none;}
.deliverable:nth-last-child(-n + 2) {  border-bottom: none;}
.deliverable:last-child:nth-child(odd) {  grid-column: 1 / -1;  border-right: none;  border-bottom: none;}
.deliverable dt {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.06em;  text-transform: uppercase;  color: var(--amber);  margin: 0 0 0.35rem;}
.deliverable dd {  margin: 0;  font-size: 0.92rem;  color: color-mix(in srgb, var(--ink) 82%, var(--muted));}
.cta-row {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 1.25rem;  margin-top: 0.5rem;}
.cta-row .artifact-link {  font-size: 0.85rem;}
@media (max-width: 680px) {  .case-grid {    grid-template-columns: 1fr;  }  
.deliverables {    grid-template-columns: 1fr;  }  
.deliverable {    border-right: none;  }  
.deliverable:nth-last-child(-n + 2) {    border-bottom: 1px solid var(--line);  }  
.deliverable:last-child {    border-bottom: none;  }}

/* ——— Blog Nav (sticky, blur, scroll-to-dark) ——— */
.blog-nav {  position: sticky;  top: 0;  z-index: 50;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0.75rem 2rem;  border-bottom: 1px solid var(--line);  background: rgba(250, 248, 245,0.92);  backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  transition: background 0.3s, border-color 0.3s;}
.blog-nav.is-scrolled {  background: rgba(18, 19, 22,0.92);  border-color: rgba(226, 221, 213,0.15);}
.blog-nav.is-scrolled .logo { color: var(--paper); }
.blog-nav.is-scrolled nav a { color: rgba(250, 248, 245,0.7); }
.blog-nav.is-scrolled nav a:hover { color: var(--amber); }
.blog-nav.is-scrolled nav a[aria-current="page"] { color: var(--paper); }
.blog-nav .logo {  font-family: var(--mono);  font-weight: 700;  font-size: 0.85rem;  letter-spacing: 0.15em;  color: var(--ink);  text-decoration: none;}
.blog-nav nav {  display: flex;  align-items: center;  gap: 1.5rem;}
.blog-nav nav a {  font-family: var(--sans);  font-size: 0.85rem;  color: rgba(18, 19, 22,0.7);  text-decoration: none;  transition: color 0.2s;}
.blog-nav nav a[aria-current="page"] { color: var(--ink); }
.blog-nav nav a:hover { color: var(--amber); }
.blog-nav nav a.btn { color: var(--paper); }
.blog-nav nav a.btn:hover { color: var(--ink); }
.blog-nav .nav-toggle {  display: none;  background: none;  border: none;  cursor: pointer;  padding: 0.5rem;  color: var(--ink);}
.blog-nav .nav-toggle span {  display: block;  width: 20px;  height: 2px;  background: currentColor;  margin: 4px 0;  transition: transform 0.2s, opacity 0.2s;}
.blog-nav.is-scrolled .nav-toggle { color: var(--paper); }

/* ——— Blog 3D Card & Animation System ——— */
.article-3d-card {
  perspective: 800px;
  margin: 2rem 0;
}
.article-3d-card-inner {
  transform-style: preserve-3d;
  transform: rotateY(-3deg) rotateX(1deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  box-shadow: 0 4px 20px rgba(18, 19, 22,0.08), 0 1px 3px rgba(18, 19, 22,0.04);
}
.article-3d-card:hover .article-3d-card-inner {
  transform: rotateY(0) rotateX(0);
  box-shadow: 0 8px 40px rgba(18, 19, 22,0.12), 0 2px 8px rgba(18, 19, 22,0.06);
}
.article-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.article-glow {
  position: relative;
}
.article-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--amber);
  opacity: 0;
  pointer-events: none;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.02); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .article-float, .article-glow::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .article-3d-card-inner { transform: none; transition: none; }
}
@media (max-width: 700px) {  .blog-nav { padding: 0.75rem 1rem; }  
.blog-nav .nav-toggle { display: block; }  
.blog-nav nav {    display: none;    position: absolute;    top: 100%;    left: 0;    right: 0;    background: var(--paper);    border-bottom: 1px solid var(--line);    flex-direction: column;    padding: 1rem 1.5rem;    gap: 0.75rem;  }  
.blog-nav nav.is-open { display: flex; }  
.blog-nav.is-scrolled nav { background: rgba(18, 19, 22,0.95); }    
.article-inline--right,  .article-inline--left {    float: none;    width: 100%;    max-width: 100%;    margin: 2rem 0;  }
.article-3d-card:has(.article-inline--right),  .article-3d-card:has(.article-inline--left) {    float: none;    width: 100%;    max-width: 100%;    margin: 2rem 0;  }
.blog-nav.is-scrolled nav a { color: rgba(250, 248, 245,0.8); }}

/* ——— Reading Progress Bar ——— */
.reading-progress {  position: fixed;  top: 0;  left: 0;  width: 0%;  height: 2px;  background: var(--amber);  z-index: 51;  transition: width 0.1s linear;}

/* ——— Blog Hero (editorial, left-aligned) ——— */
.blog-hero {  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);}
.blog-hero .blog-hero-inner {  display: flex;  justify-content: space-between;  align-items: flex-end;  gap: 2rem;  padding-bottom: 2rem;  border-bottom: 1px solid var(--line);}
.blog-hero h1 {  font-family: var(--display);  font-size: clamp(2.4rem, 5.5vw, 4.4rem);  font-weight: 500;  line-height: 1.08;  letter-spacing: -0.02em;  color: var(--ink);  margin: 0;}
.blog-hero .hero-sub {  font-family: var(--sans);  font-size: 1.05rem;  color: var(--muted);  max-width: 36rem;  margin: 0.75rem 0 0;}
.blog-cats {  display: flex;  flex-direction: column;  gap: 0.35rem;  flex-shrink: 0;}
.blog-cats a {  font-family: var(--mono);  font-size: 0.68rem;  letter-spacing: 0.06em;  text-transform: uppercase;  color: var(--muted);  text-decoration: none;  text-align: right;  transition: color 0.2s;}
.blog-cats a:hover { color: var(--amber); }

/* ——— Blog 3D Card & Animation System ——— */
.article-3d-card {
  perspective: 800px;
  margin: 2rem 0;
}
.article-3d-card-inner {
  transform-style: preserve-3d;
  transform: rotateY(-3deg) rotateX(1deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  box-shadow: 0 4px 20px rgba(18, 19, 22,0.08), 0 1px 3px rgba(18, 19, 22,0.04);
}
.article-3d-card:hover .article-3d-card-inner {
  transform: rotateY(0) rotateX(0);
  box-shadow: 0 8px 40px rgba(18, 19, 22,0.12), 0 2px 8px rgba(18, 19, 22,0.06);
}
.article-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.article-glow {
  position: relative;
}
.article-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--amber);
  opacity: 0;
  pointer-events: none;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.02); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .article-float, .article-glow::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .article-3d-card-inner { transform: none; transition: none; }
}
@media (max-width: 700px) {  .blog-hero .blog-hero-inner { flex-direction: column; align-items: flex-start; }  
.blog-cats { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }  
.blog-cats a { text-align: left; }}

/* ——— Featured Post (editorial hero on ink band) ——— */
.blog-featured {  background: var(--ink);  color: var(--paper);  padding: clamp(2.5rem, 5vw, 4rem) 0;  margin: 0;}
.blog-featured-inner {  display: grid;  grid-template-columns: 1fr 1fr;  gap: clamp(2rem, 4vw, 3.5rem);  align-items: center;}
.blog-featured-text .eyebrow {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.1em;  text-transform: uppercase;  color: var(--amber);  margin-bottom: 1rem;}
.blog-featured-text h2 {  font-family: var(--display);  font-size: clamp(1.6rem, 3vw, 2.2rem);  font-weight: 500;  line-height: 1.15;  letter-spacing: -0.01em;  color: var(--paper);  margin: 0 0 1rem;}
.blog-featured-text .featured-excerpt {  font-size: 1rem;  line-height: 1.65;  color: rgba(250, 248, 245,0.7);  margin: 0 0 1.5rem;}
.blog-featured-text .featured-link {  font-family: var(--mono);  font-size: 0.78rem;  letter-spacing: 0.04em;  color: var(--amber);  text-decoration: none;  border-bottom: 1px solid transparent;  transition: border-color 0.2s;}
.blog-featured-text .featured-link:hover { border-color: var(--amber); }
.blog-featured-img {  overflow: hidden;  aspect-ratio: 16/10;}
.blog-featured-img img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;}
@media (max-width: 900px) {  .blog-featured-inner { grid-template-columns: 1fr; }  
.blog-featured-img { max-height: 280px; }}

/* ——— Editorial Post List ——— */
.post-list {  margin: 0;  padding: 0;  list-style: none;}
.post-list-item {  display: grid;  grid-template-columns: 3.5rem 1fr;  gap: 1.5rem;  padding: 1.75rem 0;  border-bottom: 1px solid var(--line);  text-decoration: none;  color: inherit;  transition: background 0.15s;}
.post-list-item:first-child { border-top: 1px solid var(--line); }
.post-list-item:hover { background: var(--paper-2); }
.post-num {  font-family: var(--mono);  font-size: 1.8rem;  font-weight: 700;  color: var(--amber);  line-height: 1;  padding-top: 0.15rem;}
.post-list-body {  display: flex;  flex-direction: column;  gap: 0.35rem;}
.post-list-meta {  font-family: var(--mono);  font-size: 0.68rem;  letter-spacing: 0.04em;  color: var(--muted);}
.post-list-title {  font-family: var(--display);  font-size: 1.2rem;  font-weight: 500;  line-height: 1.3;  color: var(--ink);  margin: 0;}
.post-list-excerpt {  font-size: 0.92rem;  line-height: 1.55;  color: color-mix(in srgb, var(--ink) 70%, var(--muted));  margin: 0;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}
@media (max-width: 600px) {  .post-list-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; }  
.post-num { font-size: 1.3rem; }  
.post-list-title { font-size: 1.05rem; }}

/* ——— Article Page — Prestijli B2B Editoryal (Stripe Press / HBR) ——— */
.article-wrap {  max-width: 760px;  margin: 0 auto;  padding: 0 1.5rem 5rem;}
.article-header {  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;  border-bottom: 1px solid var(--line);  margin-bottom: 2rem;}
.article-header .article-eyebrow {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--amber);  margin-bottom: 1.15rem;  display: flex;  align-items: center;  gap: 1rem;}
.article-header .article-eyebrow .read-time {  color: var(--muted);}
.article-header h1 {  font-family: var(--display);  font-size: clamp(2.15rem, 4.2vw, 3.15rem);  font-weight: 500;  line-height: 1.15;  letter-spacing: -0.025em;  color: var(--ink);  margin: 0 0 1.25rem;}
.article-byline {  font-family: var(--mono);  font-size: 0.8rem;  letter-spacing: 0.04em;  color: var(--muted);  margin: 0;}
.article-byline a {  color: var(--ink);  font-weight: 500;  text-decoration: underline;  text-underline-offset: 3px;}
.article-byline a:hover { color: var(--amber); }

.article-cover {  margin: 0 0 2.5rem;  width: 100%;  max-height: 460px;  overflow: hidden;  border: 1px solid var(--line);  background: var(--paper-2);}
.article-cover img {  width: 100%;  height: 100%;  max-height: 460px;  object-fit: cover;  display: block;}

.article-body {  font-size: 1.12rem;  line-height: 1.8;  color: color-mix(in srgb, var(--ink) 92%, var(--muted));  padding-top: 1rem;}
.article-body p { text-align: left; margin: 0 0 1.65rem; }
.article-body h2 {  font-family: var(--display);  font-size: clamp(1.6rem, 3.2vw, 2rem);  font-weight: 500;  color: var(--ink);  margin: 3.25rem 0 1.15rem;  line-height: 1.25;  padding-top: 1.75rem;  border-top: 1px solid var(--line);  letter-spacing: -0.015em;}
.article-body h3 {  font-family: var(--display);  font-size: 1.32rem;  font-weight: 500;  color: var(--ink);  margin: 2.25rem 0 0.85rem;  line-height: 1.35;}
.article-body strong { color: var(--ink); font-weight: 600; }

.article-body blockquote, .article-body .pull-quote {  margin: 2.75rem 0;  padding: 1.5rem 2rem 1.5rem 2.25rem;  border-left: 3px solid var(--amber);  background: var(--paper-2);  font-family: var(--display);  font-size: 1.3rem;  line-height: 1.55;  color: var(--ink);  font-style: italic;  position: relative;}
.article-body blockquote::before, .article-body .pull-quote::before {  content: '\201C';  font-size: 3.5rem;  line-height: 1;  position: absolute;  top: 0.4rem;  left: 0.65rem;  color: var(--amber);  opacity: 0.22;  font-style: normal;  font-family: var(--serif);}

.article-body ul, .article-body ol { margin: 0 0 1.75rem 1.5rem; }
.article-body li { margin-bottom: 0.6rem; }
.article-body > p:first-of-type {  font-size: 1.22rem;  line-height: 1.72;  color: var(--ink);  margin: 0 0 2rem;}

.article-body .answer-lead {  margin: 0 0 1.5rem;  padding: 0.85rem 1.15rem;  border-left: 3px solid var(--olive);  background: rgba(40, 102, 82,0.07);  font-size: 0.98rem;  line-height: 1.62;  color: var(--ink);}
.article-body .answer-lead strong {  color: var(--olive);  font-weight: 600;}

/* Prestijli editoryal görsel yerleşimi: merkezlenmiş, ferah, metni sıkıştırmayan */
.article-figure, .article-inline {  margin: 2.5rem 0;  width: 100%;  clear: both;  text-align: center;}
.article-figure img, .article-inline img {  max-width: 100%;  width: auto;  max-height: 480px;  margin: 0 auto;  display: block;  border: 1px solid var(--line);  background: #fff;  box-shadow: 0 3px 16px rgba(18, 19, 22,0.06);}
.article-figure figcaption, .article-inline figcaption {  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.03em;  color: var(--muted);  margin-top: 0.75rem;  text-align: center;  line-height: 1.45;}

.data-highlight {  font-family: var(--mono);  font-weight: 700;  color: var(--amber);  font-size: 0.95em;  letter-spacing: -0.02em;}

.key-takeaways {  margin: 0 0 2.5rem;  padding: 1.35rem 1.5rem;  border: 1px solid var(--line);  border-left: 3px solid var(--olive);  background: var(--paper-2);}
.key-takeaways-label {  font-family: var(--mono);  font-size: 0.7rem;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--olive);  font-weight: 600;  margin: 0 0 0.75rem;}
.key-takeaways ul {  margin: 0;  padding: 0 0 0 1.15rem;}
.key-takeaways li {  margin: 0 0 0.5rem;  font-size: 0.98rem;  line-height: 1.6;}
.key-takeaways li:last-child { margin-bottom: 0; }

.share-row {  display: flex;  align-items: center;  gap: 0.75rem;  margin: 2.25rem 0 0;  padding-top: 1.5rem;  border-top: 1px solid var(--line);}
.share-label {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.06em;  text-transform: uppercase;  color: var(--muted);}
.share-btn {  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.04em;  padding: 0.5rem 0.95rem;  border: 1px solid var(--line);  background: var(--paper);  color: var(--ink);  cursor: pointer;  transition: border-color 0.15s, color 0.15s, background 0.15s;}
.share-btn:hover {  border-color: var(--amber);  color: var(--amber);  background: var(--paper-2);}

.author-card {  margin-top: 3rem;  padding: 1.75rem;  border: 1px solid var(--line);  background: var(--paper-2);  display: flex;  align-items: center;  gap: 1.25rem;}
.author-card-avatar {  width: 64px;  height: 64px;  object-fit: cover;  border: 1px solid var(--line);  flex-shrink: 0;}
.author-card-info .author-card-name {  font-family: var(--display);  font-size: 1.15rem;  font-weight: 500;  color: var(--ink);  text-decoration: none;  display: block;  margin-bottom: 0.2rem;}
.author-card-info .author-card-name:hover {  color: var(--amber);}
.author-card-info .author-card-title {  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.04em;  color: var(--muted);  margin-bottom: 0.4rem;}
.author-card-info .author-card-link {  font-family: var(--mono);  font-size: 0.75rem;  color: var(--amber);  text-decoration: none;}
.author-card-info .author-card-link:hover {  text-decoration: underline;}

/* ——— Article Inline Float Reset (artık metni sıkıştırmaz, temiz tam genişlik) ——— */
.article-inline--right, .article-inline--left {  float: none;  width: 100%;  max-width: 100%;  margin: 2.5rem 0;}
.article-3d-card { transform: none !important; animation: none !important; width: 100%; margin: 2.5rem 0; }
.article-float { animation: none !important; }
.article-3d-card:has(.article-inline--right) .article-inline--right,
.article-3d-card:has(.article-inline--left) .article-inline--left {  float: none;  width: 100%;  max-width: 100%;  margin: 0;}
.article-body h2,.blog-cta-card {  clear: both;}
@media (max-width: 700px) {
  .article-inline--right, .article-inline--left,
  .article-3d-card:has(.article-inline--right),
  .article-3d-card:has(.article-inline--left) {
    float: none; width: 100%; max-width: 100%; margin: 2rem 0;
  }
}
.article-footer {  margin-top: 3rem;  padding-top: 2rem;  border-top: 1px solid var(--line);}
.article-back {  font-family: var(--mono);  font-size: 0.82rem;  letter-spacing: 0.04em;  color: var(--amber);  text-decoration: none;  transition: color 0.2s;}
.article-back:hover { color: var(--ink); }
.article-related {  margin-top: 2rem;}
.article-related h3 {  font-family: var(--display);  font-size: 1.15rem;  font-weight: 500;  margin: 0 0 1rem;}
.related-grid {  display: flex;  flex-direction: column;  gap: 0;}
.related-item {  display: grid;  grid-template-columns: 3rem 1fr;  gap: 1rem;  padding: 1rem 0;  border-bottom: 1px solid var(--line);  text-decoration: none;  color: inherit;  transition: background 0.15s;}
.related-item:first-child { border-top: 1px solid var(--line); }
.related-item:hover { background: var(--paper-2); }
.related-num {  font-family: var(--mono);  font-size: 1.1rem;  font-weight: 700;  color: var(--amber);  line-height: 1.3;}
.related-item-body .meta {  font-family: var(--mono);  font-size: 0.68rem;  color: var(--muted);  margin-bottom: 0.2rem;}
.related-item-body h4 {  font-family: var(--display);  font-size: 0.98rem;  font-weight: 500;  margin: 0;  line-height: 1.35;  color: var(--ink);}

/* ——— Homepage Perspektif (editorial index) ——— */
.perspektif-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin: 0 0 2.25rem;
}
.perspektif-head h2 { color: var(--paper); margin: 0 0 0.65rem; }
.perspektif-head .section-lead { margin: 0; }
.perspektif-all {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.perspektif-all:hover { border-bottom-color: var(--amber); }

.perspektif-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid rgba(250, 248, 245, 0.14);
  border-bottom: 1px solid rgba(250, 248, 245, 0.14);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.perspektif-feature:hover { opacity: 0.92; }
.perspektif-feature:hover .perspektif-read { color: var(--amber); }

.perspektif-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5);
  margin-bottom: 0.85rem;
}
.perspektif-num {
  color: var(--amber);
  margin-right: 0.55rem;
  font-weight: 600;
}
.perspektif-feature h3,
.perspektif-row h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}
.perspektif-feature h3 a,
.perspektif-row h3 a {
  color: inherit;
  text-decoration: none;
}
.perspektif-feature h3 a::after,
.perspektif-row h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.perspektif-feature h3 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.18;
}
.perspektif-dek {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(250, 248, 245, 0.68);
  margin: 0 0 1.15rem;
  max-width: 34rem;
}
.perspektif-read {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(250, 248, 245, 0.55);
  transition: color 0.2s;
}
.perspektif-feature-img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(250, 248, 245, 0.1);
}
.perspektif-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.perspektif-feature:hover .perspektif-feature-img img { transform: scale(1.03); }

.perspektif-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(250, 248, 245, 0.14);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.perspektif-row:hover { background: rgba(250, 248, 245, 0.03); }
.perspektif-row:hover h3 { color: var(--amber); }
.perspektif-row .perspektif-num {
  font-family: var(--mono);
  font-size: 0.95rem;
  margin: 0.15rem 0 0;
}
.perspektif-row h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  transition: color 0.2s;
}
.perspektif-row .perspektif-dek {
  margin: 0;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 680px) {
  .perspektif-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .perspektif-feature { grid-template-columns: 1fr; gap: 1.25rem; }
  .perspektif-feature-img { order: -1; max-height: 220px; }
  .perspektif-row { grid-template-columns: 3.25rem 1fr; gap: 0.85rem; }
}

/* ——— Blog 3D Card & Animation System ——— */
.article-3d-card {
  perspective: 800px;
  margin: 2rem 0;
}
.article-3d-card-inner {
  transform-style: preserve-3d;
  transform: rotateY(-3deg) rotateX(1deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  box-shadow: 0 4px 20px rgba(18, 19, 22,0.08), 0 1px 3px rgba(18, 19, 22,0.04);
}
.article-3d-card:hover .article-3d-card-inner {
  transform: rotateY(0) rotateX(0);
  box-shadow: 0 8px 40px rgba(18, 19, 22,0.12), 0 2px 8px rgba(18, 19, 22,0.06);
}
.article-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.article-glow {
  position: relative;
}
.article-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--amber);
  opacity: 0;
  pointer-events: none;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.02); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .article-float, .article-glow::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .article-3d-card-inner { transform: none; transition: none; }
}


/* ——— Blog CTA components ——— */
.blog-cta-box {  margin: 2.5rem 0;  padding: 1.25rem 1.5rem;  border: none;  border-left: 4px solid var(--amber);  background: rgba(224, 122, 36,0.08);  clear: none;  overflow: hidden;}
.blog-cta-box p { margin: 0 0 0.75rem; font-size: 0.95rem; }
.blog-cta-card {  margin: 2.5rem 0;  padding: 2rem;  border: 1px solid var(--amber);  border-left: 3px solid var(--amber);  background: var(--paper);  text-align: center;}
.blog-cta-card h3 {  font-family: var(--display);  font-size: 1.35rem;  font-weight: 500;  margin: 0 0 0.5rem;}
.blog-cta-card p {  margin: 0 0 1rem;  color: color-mix(in srgb, var(--ink) 80%, var(--muted));}
.cta-note {  font-family: var(--mono);  font-size: 0.72rem;  color: var(--muted);  margin-top: 0.5rem !important;}

/* ——— Author Profile ——— */
.author-profile {  max-width: 680px;  margin: 0 auto;  padding: 3rem 1.5rem;}
.author-profile h1 {  font-family: var(--display);  font-size: 2rem;  font-weight: 500;  margin: 0 0 0.5rem;}
.author-bio {  font-size: 1.05rem;  line-height: 1.7;  margin: 1.5rem 0;}
.author-expertise {  display: flex;  flex-wrap: wrap;  gap: 0.5rem;  margin: 1rem 0;}
.author-expertise span {  font-family: var(--mono);  font-size: 0.72rem;  letter-spacing: 0.05em;  padding: 0.35rem 0.75rem;  border: 1px solid var(--line);}

/* ——— Blog Footer ——— */
.blog-footer {  text-align: center;  padding: 2rem 0;  color: var(--muted);  font-family: var(--mono);  font-size: 0.75rem;  letter-spacing: 0.04em;}

/* ——— Blog mobile overrides ——— */
@media (max-width: 600px) {  .article-wrap { padding: 0 1rem 3rem; }  
.blog-cta-card { padding: 1.5rem 1rem; }  
.blog-cta-box { padding: 1rem; }}

/* ——— Blog 3D Hero (Signal Constellation) ——— */
.article-hero-3d {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 0.75rem;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--paper);
  /* Break out of .article-wrap max-width */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero-3d-copy {
  position: relative;
  z-index: 2;
  margin-right: -2.5rem;
}
.article-hero-3d h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.article-hero-3d .article-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.25rem;
  display: flex;
  gap: 1rem;
}
.article-hero-3d .article-byline {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(250, 248, 245, 0.55);
}
.article-hero-3d .article-byline a {
  color: var(--paper);
  text-decoration: none;
}
.hero-3d-stage {
  position: relative;
  height: min(420px, 50vw);
  min-height: 280px;
}
#blog-globe {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
#blog-globe:active { cursor: grabbing; }
.hero-3d-frame {
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(250, 248, 245, 0.1);
  pointer-events: none;
}
.hero-3d-fade {
  height: 80px;
  background: linear-gradient(to bottom, var(--ink), var(--paper));
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
@media (max-width: 680px) {
  .article-hero-3d {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-3d-copy {
    margin-right: 0;
  }
  .hero-3d-stage {
    height: min(320px, 70vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  #blog-globe { cursor: default; }
}

/* =========================================================
   Ana Sayfa & İletişim Eklemeleri (Önizleme V3)
   ========================================================= */

/* Hero sorumluluk satırı */
.hero-id-line {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0.65rem 0 0;
  line-height: 1.5;
}
.hero-id-line span { color: var(--amber); }

/* Form altı doğrudan iletişim hatları */
.contact-direct {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1.25rem 0 0;
  border: 1px solid rgba(250, 248, 245, 0.18);
  background: rgba(18, 19, 22, 0.45);
}
.contact-direct a,
.contact-direct .contact-direct-item {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-right: 1px solid rgba(250, 248, 245, 0.18);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.contact-direct a:nth-child(3) { border-right: 0; }
.contact-direct .contact-direct-item {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid rgba(250, 248, 245, 0.18);
}
.contact-direct a:hover { background: rgba(224, 122, 36, 0.12); color: var(--paper); }
.contact-direct a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.contact-direct .dc-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-direct .dc-value {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-direct .dc-address {
  font-style: normal;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}
.footer-address {
  margin: 0.4rem 0 0;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.footer-address a:hover { color: var(--amber); }
.founder-sign a.fl-name:hover { color: var(--amber); }

/* Kurucu operatör imzası (44px rozet) */
.founder-sign {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 248, 245, 0.12);
}
.founder-sign img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(250, 248, 245, 0.28);
  flex-shrink: 0;
}
.founder-sign .fl-name {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}
.founder-sign .fl-meta {
  display: block;
  margin: 0.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Blog Dinamik Kategori Filtre Butonları */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.filter-pill {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  user-select: none;
}
.filter-pill:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.filter-pill.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

@media (max-width: 680px) {
  .contact-direct {
    grid-template-columns: 1fr;
  }
  .contact-direct a {
    border-right: 0;
    border-bottom: 1px solid rgba(250, 248, 245, 0.18);
  }
  .contact-direct a:last-child {
    border-bottom: 0;
  }
}

/* Karar Verici Rehberi — Görüşme Öncesi SSS (Asimetrik İki Sütunlu Editoryal Düzen) */
.faq-section {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(3rem, 5vw, 4.25rem);
  border-top: 1px solid var(--line);
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: 6.25rem;
}
.faq-intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}
.faq-intro .section-lead {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.faq-aside-box {
  margin-top: 1.75rem;
  padding: 1.25rem 1.35rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
}
.faq-aside-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.65rem;
}
.faq-aside-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.faq-aside-pills span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
.faq-aside-note {
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  margin-bottom: 0.85rem;
}
.faq-aside-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-aside-cta:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}
.faq-item {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item:hover {
  background: var(--paper-2);
}
.faq-item[open] {
  background: #fff;
  border-left-color: var(--amber);
  box-shadow: 0 12px 32px rgba(18, 19, 22, 0.06);
  position: relative;
  z-index: 2;
}
.faq-q {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 1.2rem 1.35rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.faq-num {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 0.15rem;
  transition: color 0.2s ease;
}
.faq-item:hover .faq-num,
.faq-item[open] .faq-num {
  color: var(--amber);
}
.faq-q-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.faq-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.faq-item[open] .faq-tag {
  color: var(--olive);
  font-weight: 600;
}
.faq-q-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.faq-icon {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
  margin-top: 0.1rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover .faq-icon {
  border-color: var(--amber);
  color: var(--amber);
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}
.faq-a {
  padding: 0 1.35rem 1.35rem calc(1.35rem + 3.15rem);
  font-size: 0.94rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
}
.faq-a p {
  margin: 0;
}
@media (max-width: 680px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .faq-intro {
    position: static;
  }
  .faq-q {
    grid-template-columns: 1.85rem 1fr auto;
    gap: 0.65rem;
    padding: 1.05rem 1rem;
  }
  .faq-a {
    padding: 0 1rem 1.15rem 1rem;
  }
}

/* Blog Yazı Sonu İhracat & Yeni Pazar Keşfi CTA Kartı */
.post-cta-card {
  margin: 3.5rem 0 2rem 0;
  padding: 2rem;
  background: var(--paper-2);
  border-left: 4px solid var(--amber);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-cta-card .eyebrow {
  margin-bottom: 0.5rem;
}
.post-cta-card h4 {
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 0.75rem 0;
  font-weight: 600;
}
.post-cta-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.post-cta-card .btn {
  display: inline-block;
}

/* =========================================================
   Bilgisayar & Tablet Görünümü: Asimetrik Sütunlarda Akıcı Kayma (Sticky)
   (Saha Örnekleri #vaka, Pazar & Sektör Evreni #sektor, Keşif Formu #iletisim)
   ========================================================= */
@media (min-width: 681px) {
  .case-visuals {
    position: sticky;
    top: 5.75rem;
  }
  #sektor .sector-grid > .shot-frame {
    position: sticky;
    top: 6.25rem;
  }
  #iletisim .cta-grid > div:first-child {
    position: sticky;
    top: 6.25rem;
  }
}

/* =========================================================
   Tablet Görünümü (Küçük/Dikey & Büyük/Yatay Tabletler: 681px – 1240px)
   Masaüstü (Bilgisayar) Görünümüne %100 Sadık & Taşmasız Ölçekleme
   ========================================================= */
@media (min-width: 681px) and (max-width: 1240px) {
  /* Vaka (#vaka) sağ/sol dikey geçiş kulakçıklarını (ORATEC / ARTTOLIA) ekran dışına taşmadan içerik kenarına hizala */
  .case-carousel-track {
    padding: 0 2.65rem;
  }
  .case-edge {
    width: 2.25rem;
    padding: 0.85rem 0;
    gap: 0.75rem;
  }
  .case-edge--next {
    right: 0;
    border-left: 1px solid var(--ink);
  }
  .case-edge--prev {
    left: 0;
    border-right: 1px solid var(--ink);
  }
  .case-edge-label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }
  .case-edge-chevron {
    font-size: 1.25rem;
  }
}

/* Dikey & Küçük Tabletler (681px – 980px, örn. iPad Mini 768px, iPad Air 820px, iPad Pro 11" 834px) */
@media (min-width: 681px) and (max-width: 980px) {
  :root {
    --wrap: calc(100% - 2rem);
  }

  /* 1. Üst Gezinme Çubuğu: Hamburger menüye düşmeden 7 bağlantı + CTA tek satırda */
  .nav {
    padding: 0.75rem 1rem;
    gap: 0.65rem;
  }
  .logo {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }
  .nav-links {
    gap: clamp(0.45rem, 1.1vw, 0.85rem);
    font-size: clamp(0.75rem, 1.05vw, 0.85rem);
  }
  .nav .btn-sm {
    margin-left: 0.25rem;
    padding: 0.42rem 0.68rem;
    font-size: 0.76rem;
  }

  /* 2. Hero & 3D Küre: 2 sütunlu bilgisayar görünümü */
  .hero {
    padding-top: 2rem;
  }
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.25rem;
    min-height: min(64vh, 520px);
  }
  h1 {
    font-size: clamp(1.95rem, 3.6vw, 2.65rem);
  }
  h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  }
  .lead,
  .section-lead {
    font-size: 0.98rem;
  }
  .hero-cta .btn {
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
  }
  .hero-stage {
    height: min(400px, 50vw);
    min-height: 340px;
  }
  .floating-insight {
    max-width: 205px;
    padding: 0.42rem 0.65rem;
  }
  .fi-text {
    font-size: 0.76rem;
  }

  /* 3. Yöntem (4 kutu yan yana 1x4), Kapsam (3 kutu yan yana) & Neden Biz (3 kutu yan yana) */
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .step {
    padding: 1.1rem 0.8rem;
  }
  .step h3 {
    font-size: 1.02rem;
  }
  .step p {
    font-size: 0.84rem;
    line-height: 1.45;
  }
  .scope-card,
  .why-card {
    padding: 1.25rem 1rem;
  }
  .scope-card h3,
  .why-card h3 {
    font-size: 1.08rem;
  }
  .scope-card p,
  .why-card p {
    font-size: 0.88rem;
  }

  /* 4. Vaka (#vaka): 2 sütunlu bilgisayar görünümü (solda metin + 2 sütunlu teslimatlar, sağda 3 görsel) */
  .case-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.35rem;
  }
  .deliverable {
    padding: 0.75rem 0.85rem;
  }
  .deliverable dd {
    font-size: 0.82rem;
  }
  .wave {
    padding: 1rem 1.05rem;
  }
  .case-visuals {
    position: sticky;
    top: 5.5rem;
  }

  /* 5. Pazar & Sektör, SSS ve İletişim: 2 sütunlu bilgisayar görünümü */
  .sector-grid,
  .cta-grid {
    gap: 1.5rem;
  }
  .faq-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 1.5rem;
  }
  .faq-q {
    padding: 1rem 1.05rem;
    gap: 0.65rem;
  }
  .faq-q-title {
    font-size: 1rem;
  }
  .faq-a {
    padding: 0 1.05rem 1.1rem calc(1.05rem + 2.9rem);
    font-size: 0.88rem;
  }
  .contact-direct a,
  .contact-direct .contact-direct-item {
    padding: 0.7rem 0.75rem;
  }
  .contact-direct .dc-value {
    font-size: 0.82rem;
  }
}

/* =========================================================
   Mobil Hızlandırma & Görünüm Sadeleştirmesi (Cep Telefonları <= 680px)
   ========================================================= */
@media (max-width: 680px) {
  /* 1. Arka plan parçacık canvas, küre üstü yüzen kart ve ikincil hero notunu gizle */
  .bg-canvas,
  .floating-insight,
  .hero-id-line {
    display: none !important;
  }

  /* 2. Hero & 3D Küre sahnesini kompaktlaştır */
  .hero {
    padding-top: 1.75rem;
  }
  .hero-grid {
    min-height: auto;
    gap: 1.25rem;
  }
  .hero-stage {
    height: 300px;
    min-height: 280px;
  }

  /* 3. Bantlar ve kartlar arası dikey boşlukları mobil okuma ritmine göre sıkılaştır */
  .band {
    padding: 2.5rem 0;
  }
  .section-head {
    margin-bottom: 1.5rem;
  }
  .step,
  .scope-card,
  .why-card {
    padding: 1.15rem 1rem;
  }
  .steps {
    margin-bottom: 1.75rem;
  }
  .sector-matrix-wrap {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
  }

  /* 4. Vaka (#vaka): Her iki vakada da sadece 2. sıradaki görseli göster, tekrar eden 5'li teslimat tablosunu gizle */
  #vaka .deliverables {
    display: none;
  }
  .case-visuals figure:not(:nth-child(2)) {
    display: none;
  }
  .wave-next .case-stats {
    display: none;
  }

  /* 5. Perspektif (#perspektif) & Pazar/Sektör (#sektor) kompaktlaştırma */
  .perspektif-feature {
    padding: 1.25rem 0;
  }
  .perspektif-feature-img {
    display: none;
  }
  .perspektif-row {
    padding: 1rem 0;
  }
  .perspektif-row .perspektif-dek {
    display: none;
  }
  #sektor .shot-frame {
    display: none;
  }

  /* 6. SSS (#sss) yan güvence kutusundaki uzun açıklama cümlesini gizle, sadece rozetler ve CTA kalsın */
  .faq-section {
    margin-top: 2.25rem;
    padding-top: 2rem;
  }
  .faq-aside-box {
    margin-top: 1.15rem;
    padding: 1rem 1.1rem;
  }
  .faq-aside-note {
    display: none;
  }
}