/* ---------- Video hero ----------
   final.mp4 kaynağı 720×1280 DİKEY (9:16). Masaüstünde bilinçli olarak cover ile
   kırpılır (kullanıcı kararı); mobilde doğal oranında tam oturur. Ses kanalı
   transcode'da tamamen silindi — kontrol/buton yok, muted+loop+playsinline.
   Metin ORTADA (kullanıcı isteğiyle sağdan merkeze taşındı); okunabilirlik
   merkezi bir vinyet (.hero-veil radial-gradient) ile sağlanır. */
.hero-video {
  position: relative;
  overflow: hidden;
  min-height: 100svh; /* laptop ekranlarda scroll atmadan tüm ekranı doldursun — 92svh bırakınca alt kısımda sonraki bölümün tepesi "boşluk" gibi görünüyordu */
  margin-top: calc(-1 * var(--nav-total-offset));
  display: flex;
  align-items: center;
}
.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-veil {
  position: absolute;
  inset: 0;
  --veil: 255, 246, 227; /* light: --color-bg ile aynı sıcak ton */
  background:
    radial-gradient(58% 60% at 50% 48%, rgba(var(--veil), .88) 0%, rgba(var(--veil), .62) 45%, rgba(var(--veil), .18) 74%, transparent 92%),
    linear-gradient(to top, rgba(var(--veil), .5), transparent 30%),
    linear-gradient(to bottom, rgba(var(--veil), .3), transparent 22%);
}
:root[data-theme="dark"] .hero-veil { --veil: 10, 24, 48; } /* dark: --color-bg gece mavisi */

.hero-video-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: calc(var(--nav-total-offset) + var(--space-6));
  padding-bottom: var(--space-7);
}
.hero-copy { max-width: 42rem; text-align: center; }
.hero-copy h1 { margin-bottom: var(--space-4); font-size: clamp(32px, 4.2vw, 54px); }
.hero-copy h1 .accent { color: var(--color-brand-coral); }
.hero-copy .lead { color: var(--color-ink); font-size: var(--text-sm); max-width: 42ch; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* Scroll ipucu — merkezi kompozisyonda "aşağıda daha fazlası var" sinyali yok
   olmasın diye eklendi (önceki turda 92svh→100svh yapılınca bir sonraki bölümün
   "peek"i kayboldu). Salt görsel: js gerektirmez, #hakkimizda'ya çapa linki. */
.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--color-ink-soft);
  opacity: .8;
  animation: heroScrollBounce 2.2s ease-in-out infinite;
}
.hero-scroll-cue svg { width: 20px; height: 20px; }
.hero-scroll-cue:hover { opacity: 1; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}
@media (max-width: 900px) {
  .hero-scroll-cue { display: none; } /* mobilde alan dar, buton/metin ile çakışmasın */
}

/* Kademeli metin girişi — preloader kalkınca .is-live eklenir (js/hero-video.js) */
.hero-video .hero-copy > * { opacity: 0; }
.hero-video.is-live .hero-copy > * { animation: heroRise .7s var(--ease-out) both; }
.hero-video.is-live .hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-video.is-live .hero-copy > *:nth-child(3) { animation-delay: .28s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video .hero-copy > *, .hero-video.is-live .hero-copy > * { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero-video { min-height: 86svh; align-items: flex-end; }
  .hero-video-inner { justify-content: center; padding-bottom: var(--space-7); }
  .hero-veil {
    background:
      linear-gradient(to top, rgba(var(--veil), .96) 0%, rgba(var(--veil), .72) 32%, rgba(var(--veil), .15) 58%, transparent 75%);
  }
}

/* ---------- Sarkan aksesuar dekorları ----------
   assets/a-*.png salıncak/aksesuar görselleri bölüm kenarlarından "ip" ile sarkar.
   Bağlantı noktası kasıtlı olarak görünmez: ip çizgisi (::before) section'ın üst
   kenarından dışarı taşar, parent'ın overflow:hidden'ı üstünü keser. Hover'da
   pendulum sallanma + sürekli çok hafif idle salınım. Salt dekor (aria-hidden),
   tıklamayı engellemez (pointer-events sadece img'de, o da link değil). */
.dangler {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--dx, 4%);
  z-index: 2;
  pointer-events: none;
  transform-origin: top center;
  animation: danglerIdle var(--sway-dur, 8s) ease-in-out infinite;
}
.dangler-right { left: auto; right: var(--dx, 4%); }
.dangler::before {
  content: "";
  display: block;
  width: 2px;
  height: var(--drop, 120px);
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--color-border-strong), var(--color-brand-coral));
  border-radius: 1px;
}
.dangler img {
  display: block;
  width: clamp(92px, 8.5vw, 148px);
  height: auto;
  margin: -6px auto 0;
  pointer-events: auto;
  filter: drop-shadow(0 10px 16px rgba(36, 22, 6, .2));
}
.dangler.is-swinging { animation: danglerSwing 1.8s ease-in-out; }
@keyframes danglerIdle {
  0%, 100% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
}
@keyframes danglerSwing {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(9deg); }
  45% { transform: rotate(-7deg); }
  70% { transform: rotate(4deg); }
  88% { transform: rotate(-2deg); }
  100% { transform: rotate(1.2deg); }
}
@media (max-width: 1100px), (pointer: coarse) {
  .dangler { display: none; } /* dar ekranda içerikle çakışır, dokunmatikte hover yok */
}
@media (prefers-reduced-motion: reduce) {
  .dangler, .dangler.is-swinging { animation: none; }
}

/* ---------- About / Why RopeKids ---------- */
.about-section { position: relative; overflow: hidden; }
.about-section > .wrap { position: relative; z-index: 1; }

/* ---------- Blob fotoğraflar ----------
   Organik "blob" siluet: 8 değerli border-radius hilesi (SVG clip-path'e gerek yok,
   geniş tarayıcı desteği). Farklı blob'lar için farklı oranlar → her biri biraz
   farklı bir "damla" hissi verir, ama aynı ailede duruyorlar (homojen). Tüm site
   genelinde tekrar kullanılabilir bir motif — yalnızca About'a özel değil. */
.about-blob {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: blobFloat var(--blob-dur, 8s) ease-in-out infinite;
  animation-delay: var(--blob-delay, 0s);
}
.about-blob img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.about-blob:hover img { transform: scale(1.08); }
.blob-1 { border-radius: 63% 37% 54% 46% / 43% 65% 35% 57%; }
.blob-2 { border-radius: 42% 58% 68% 32% / 55% 45% 55% 45%; }
.blob-3 { border-radius: 58% 42% 39% 61% / 62% 44% 56% 38%; }
.blob-4 { border-radius: 48% 52% 34% 66% / 60% 38% 62% 40%; }
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.6deg); }
}
@media (prefers-reduced-motion: reduce) { .about-blob { animation: none; } }

/* Başlığın yanındaki büyük "hero" blob */
.about-blob-hero { flex-shrink: 0; width: clamp(170px, 17vw, 280px); aspect-ratio: 4 / 5; --blob-dur: 9s; }

/* Why listesi arasındaki küçük blob şeridi — fotolar tek bir grid'de toplanmak yerine
   metnin ortasına serpiştirilmiş oluyor (kullanıcı isteği: "hepsi bir yerde değil"). */
.about-blob-row { display: flex; justify-content: center; align-items: center; gap: clamp(var(--space-4), 4vw, var(--space-8)); margin: var(--space-7) 0; flex-wrap: wrap; }
.about-blob-row .about-blob { width: clamp(110px, 13vw, 180px); aspect-ratio: 1 / 1; }
.about-blob-row .about-blob:nth-child(1) { --blob-dur: 7.5s; }
.about-blob-row .about-blob:nth-child(2) { --blob-dur: 8.5s; --blob-delay: .6s; transform: translateY(-16px); }
.about-blob-row .about-blob:nth-child(3) { --blob-dur: 7s; --blob-delay: 1.1s; }

.why-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-7);
}
.why-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border);
}
.why-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-brand-orange);
  flex-shrink: 0;
}
.why-item h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.why-item p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-xs); }

@media (max-width: 900px) {
  .why-list { grid-template-columns: 1fr; }
  .about-blob-row .about-blob:nth-child(3) { display: none; }
  .about-blob-row .about-blob { width: clamp(100px, 26vw, 140px); }
}

/* ---------- Bölüm arka plan fotoğrafları: sağlı-sollu, dört kenardan fade ----------
   Dikdörtgen bir blok yerine, iki kenardan (sol/sağ) içeri sızıp merkeze doğru VE
   üstten/alttan da eriyen iki ayrı fotoğraf. Foto artık section'ın üst/alt sınırına
   değmiyor (top/bottom: 14%) — böylece her section'ın kendi fotoğrafı kendi içinde
   belirgin bir boşlukla çevrili duruyor, bir sonraki section'ın fotoğrafıyla asla
   yan yana/bitişik görünmüyor (iki mask katmanı: yatay + dikey, mask-composite ile
   kesişimi alınıyor — tek bir radial-gradient'in aksine üst/alt fade'i bağımsız
   kontrol edilebiliyor). */
.section-photo { position: relative; overflow: hidden; }
.section-photo::before, .section-photo::after {
  content: "";
  position: absolute; top: 14%; bottom: 14%;
  width: 38%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: .17;
  filter: saturate(.62) sepia(.22); /* marka tonu: turuncu/sarıya çekilmiş duotone hissi */
  pointer-events: none;
  transform: translateY(var(--ph-shift, 0px));
  will-change: transform;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.section-photo::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 88%), linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 30%, transparent 88%), linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}
.section-photo::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, transparent 88%), linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, black 30%, transparent 88%), linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}
:root[data-theme="dark"] .section-photo::before,
:root[data-theme="dark"] .section-photo::after { opacity: .16; filter: saturate(.55) sepia(.12) brightness(.9); }
.section-photo > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .section-photo::before, .section-photo::after { width: 62%; opacity: .09; }
}

/* ---------- Hakkımızda başlığı ----------
   Diğer section-head'ler (Teknoloji, Süreç) kicker+h2 solda / paragraf sağda kalır;
   Hakkımızda'da metin bloğu (kicker+h2+p alt alta, kullanıcı isteğiyle önceki turda
   böyle taşındı) SOLDA, sağında yüzen bir "hero blob" fotoğraf duruyor. */
.about-head { display: flex; align-items: center; gap: var(--space-7); }
.about-head-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.about-head-text h2 { margin-top: var(--space-2); }
.about-head-text p { max-width: 62ch; margin-top: var(--space-3); }
@media (max-width: 900px) {
  .about-head { flex-direction: column; }
  .about-blob-hero { order: -1; width: clamp(160px, 44vw, 220px); }
}

/* ---------- Rope Tech: foto çerçevesine hafif yüzme animasyonu ----------
   Diğer tüm .tech-* düzen kuralları aşağıda (satır ~700 ve ~1020) katmanlı
   olarak tanımlı; burada yalnızca hiçbir yerde tekrarlanmayan animasyon kalıyor. */
.tech-photo-frame { animation: blobFloat 8.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tech-photo-frame { animation: none; } }

/* ---------- Süreç: ip-timeline ----------
   6 adım, JS'in adım konumlarına göre ürettiği kıvrımlı SVG "ip" üzerinde düğümler.
   Dolgu path'i pathLength=1 + stroke-dashoffset ile scroll'a bağlı örülür
   (js/home-sections.js). Adım kartları zigzag (tek sırada sol, çiftte sağ). */
.process-section { position: relative; overflow: hidden; }
.process-section > .wrap { position: relative; z-index: 1; }
.rope-timeline { position: relative; }
.rope-line {
  position: absolute;
  left: 50%; top: 0;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.rope-path-bg { stroke: var(--color-border); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 8; }
.rope-path-fill { stroke: var(--color-brand-coral); stroke-width: 4; stroke-linecap: round; }
.rope-steps { list-style: none; margin: 0; padding: 0; }
.rope-step {
  position: relative;
  width: calc(50% - 76px);
  min-height: 150px;
  padding: var(--space-2) 0 var(--space-6);
}
.rope-step:nth-child(even) { margin-left: calc(50% + 76px); }
.rope-knot {
  position: absolute;
  top: var(--space-3);
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
  border: 4px solid var(--color-brand-coral);
  box-shadow: 0 0 0 4px var(--color-bg), var(--shadow-sm);
  z-index: 2;
}
.rope-knot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rope-step:nth-child(odd) .rope-knot { right: -64px; } /* ipin sol tepe noktasına yakın */
.rope-step:nth-child(even) .rope-knot { left: -64px; }
.rope-step-body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.rope-step:nth-child(odd) .rope-step-body { text-align: right; }
.rope-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-brand-coral);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.rope-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.rope-step p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-xs); }
@media (max-width: 900px) {
  .rope-line { left: 12px; transform: none; }
  .rope-step, .rope-step:nth-child(even) { width: auto; margin-left: 44px; }
  .rope-step:nth-child(odd) .rope-step-body { text-align: left; }
  .rope-step:nth-child(odd) .rope-knot, .rope-step:nth-child(even) .rope-knot { left: -58px; right: auto; width: 40px; height: 40px; }
}

/* ---------- Keşfet: canlı mini-konfigüratör ---------- */
.kesfet-section { position: relative; overflow: hidden; }
.kesfet-section > .wrap { position: relative; z-index: 1; }
.mini-config {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  background:
    radial-gradient(70% 90% at 85% 15%, rgba(254, 192, 26, .12), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-md);
}
.mc-intro h2 { margin: var(--space-2) 0 var(--space-3); font-size: clamp(24px, 2.6vw, 34px); }
.mc-intro p { margin: 0 0 var(--space-5); color: var(--color-ink-soft); max-width: 44ch; }
.mc-sliders { display: flex; flex-direction: column; gap: var(--space-5); }
.mc-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }
.mc-label b { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mc-slider input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none; -webkit-appearance: none;
  border-radius: 3px;
  background: linear-gradient(to right, var(--color-brand-yellow), var(--color-brand-coral));
  outline: none;
  cursor: pointer;
}
.mc-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 4px solid var(--color-brand-coral);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.mc-slider input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 4px solid var(--color-brand-coral);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.mc-result {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.mc-result-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-coral); }
.mc-model {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.05;
  color: var(--color-ink);
  margin: var(--space-1) 0 var(--space-3);
}
.mc-model.mc-flash { animation: mcFlash .45s var(--ease-out); }
@keyframes mcFlash {
  0% { opacity: .3; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
.mc-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.mc-stats span { display: flex; flex-direction: column; }
.mc-stats i { font-style: normal; font-weight: 800; font-size: var(--text-sm); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mc-stats em { font-style: normal; font-size: 11px; color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.mc-note { margin: 0 0 var(--space-4); font-size: 12px; color: var(--color-ink-faint); }
.mc-result .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .mini-config { grid-template-columns: 1fr; padding: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .tech-spot::after { animation: none; }
  .mc-model.mc-flash { animation: none; }
}

/* ---------- Referanslarımız (ana sayfa, footer üstü) ----------
   JS ile sürüklenebilir + otomatik kayan track (js'de partners-drag ile yönetilir).
   Logolar her zaman renkli; sadece kenarlarda yumuşak fade var. Başlık bilinçli olarak
   global h2'den küçük — bu bölüm daha "minimal" bir vitrin gibi durmalı. */
#referanslarimiz h2 { font-size: clamp(20px, 2.2vw, 28px); }
.partners-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.partners-fade.is-dragging { cursor: grabbing; }
.partners-fade .carousel-track { animation: none; }
.partners-fade .ref-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.partners-fade .ref-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partners-fade img { -webkit-user-drag: none; }

/* ---------- 2026 editorial homepage flow ----------
   Burrito Madre referansından alınan ilke: büyük fotoğraf blokları, kısa metin,
   asimetrik kart ritmi ve güçlü renk alanları. Görsel dil RopeKids'e özgüdür;
   navbar, hero ve footer bu katmandan etkilenmez. */
.editorial-flow,
.tech-editorial,
.process-section,
.config-editorial,
.references-showcase {
  position: relative;
  overflow: hidden;
}

.editorial-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: end;
  gap: clamp(var(--space-5), 5vw, var(--space-8));
  margin-bottom: clamp(var(--space-6), 6vw, var(--space-8));
}
.editorial-heading h2 {
  max-width: 18ch;
  margin-top: var(--space-2);
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: .98;
  letter-spacing: -.035em;
}
.editorial-heading > p {
  max-width: 48ch;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* Hakkımızda: büyük hikâye + dört fotoğraflı deneyim vitrini. */
.about-section {
  background:
    radial-gradient(circle at 88% 14%, rgba(254, 192, 26, .24), transparent 25%),
    radial-gradient(circle at 8% 82%, rgba(255, 122, 69, .13), transparent 22%),
    var(--color-bg);
}
:root[data-theme="dark"] .about-section {
  background:
    radial-gradient(circle at 88% 14%, rgba(254, 192, 26, .10), transparent 26%),
    radial-gradient(circle at 8% 82%, rgba(255, 122, 69, .09), transparent 23%),
    var(--color-bg);
}
.about-section > .wrap { position: relative; z-index: 1; }
.story-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(var(--space-6), 7vw, var(--space-9));
  min-height: min(680px, 78svh);
}
.story-copy h2 {
  max-width: 11ch;
  margin: var(--space-3) 0 var(--space-5);
  font-size: clamp(42px, 6.3vw, 80px);
  line-height: .92;
  letter-spacing: -.045em;
}
.story-copy p {
  max-width: 58ch;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(15px, 1.35vw, 18px);
}
.story-visual {
  position: relative;
  z-index: 0;
  aspect-ratio: 1.16 / 1;
  margin: 0;
}
.story-visual::before {
  content: "";
  position: absolute;
  inset: 7% -4% -5% 9%;
  z-index: -1;
  border-radius: 50% 24% 44% 20% / 34% 42% 30% 48%;
  background: linear-gradient(145deg, var(--color-brand-yellow), var(--color-brand-coral));
  transform: rotate(3deg);
}
.story-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 44% 18% 38% 15% / 30% 40% 23% 46%;
  box-shadow: var(--shadow-lg);
}
.story-orbit {
  position: absolute;
  right: -4%;
  bottom: 6%;
  width: clamp(82px, 10vw, 132px);
  aspect-ratio: 1;
  border: 18px solid var(--color-bg);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--color-brand-coral), 0 0 0 2px var(--color-brand-coral);
  pointer-events: none;
}

.news-strip { position: relative; overflow-x: clip; margin: clamp(var(--space-8), 11vw, 168px) 0 clamp(var(--space-8), 10vw, 152px); }
.news-strip::before {
  position: absolute;
  top: 54px;
  right: 0;
  width: min(45vw, 640px);
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-yellow) 30%, transparent), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}
.news-strip-head { position: relative; z-index: 1; margin-bottom: clamp(var(--space-4), 2.5vw, var(--space-5)); }
.news-strip-head h2 { max-width: 15ch; margin: var(--space-1) 0 0; font-size: clamp(40px, 5.2vw, 76px); line-height: .91; letter-spacing: -.055em; }

.news-feed-bleed {
  width: 100%;
  margin-left: 0;
  overflow: clip;
}
/* Yan yana kaydırılabilir, SOLDAN başlayan BÜYÜK gazete/görsel-haber blokları:
   ilk blok başlığın hizasında (sol gutter) başlar, sağa doğru kaydırılır. */
.news-feed {
  --news-block: min(1120px, 92vw);
  --news-card-height: clamp(580px, 44vw, 660px);
  --news-gutter: max(var(--space-5), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
  display: flex;
  align-items: stretch;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: grab;
  padding: 4px var(--space-5) clamp(var(--space-4), 2vw, var(--space-5)) var(--news-gutter);
  scroll-padding-left: var(--news-gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-coral) transparent;
}
.news-feed.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.news-feed::-webkit-scrollbar { height: 8px; }
.news-feed::-webkit-scrollbar-thumb { background: var(--color-brand-coral); border-radius: var(--radius-pill); }
/* Gazete kartı: hafif dikdörtgen (az yuvarlak), belirgin ink çerçevesi. */
.news-item {
  position: relative;
  flex: 0 0 var(--news-block);
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  align-items: stretch;
  height: var(--news-card-height);
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-brand-orange) 42%, var(--color-surface));
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  scroll-snap-align: start;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.news-item:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(36, 22, 6, .2); }
.news-media {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 0;
  cursor: zoom-in;
}
.news-media::before {
  position: absolute;
  inset: -18px;
  z-index: 0;
  content: "";
  background: center / cover no-repeat var(--news-stage-image, var(--color-surface-alt));
  filter: blur(22px) saturate(1.08);
  opacity: .58;
  transform: scale(1.08);
}
/* Büyüteç ipucu: hover'da köşede "büyüt" rozeti */
.news-media::after {
  content: "";
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  width: 42px; height: 42px;
  background: rgba(20, 14, 6, .58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  pointer-events: none;
}
.news-media:hover::after, .news-media:focus-visible::after { opacity: 1; transform: scale(1); }
.news-media:focus-visible { outline: 3px solid var(--color-brand-coral); outline-offset: -3px; }
.news-media > img { display: block; position: relative; z-index: 1; width: 100%; max-width: 100%; height: 100%; object-fit: contain; padding: 0; filter: none; }
/* Kartlar eşit yükseklikte. Görseller kırpılmaz; kalan alan koyu fotoğraf sahnesiyle
   dolar, bu sayede beyaz boşluk oluşmaz. */
.news-media--lviv { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; height: 100%; padding: 0; background: var(--color-surface-alt); }
.news-media--lviv > img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 0; filter: none; }
.news-media--lviv > img:nth-child(3) { grid-column: 1 / -1; }
/* Şirket karesi iki eşit bölüme ayrılır; iki fotoğraf da tam görünür. */
.news-media--company { display: grid; grid-template-rows: 1fr 1fr; height: 100%; padding: 0; background: var(--color-surface-alt); }
.news-media--company .news-media-cell { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.news-media--company .news-media-cell > img { display: block; position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; padding: 0; border-radius: 0; filter: none; }
.news-item-copy { align-self: stretch; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: clamp(var(--space-5), 3.4vw, var(--space-8)); }
.news-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand-coral); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.news-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e23744;
  animation: newsDotPulse 1.6s ease-out infinite;
}
@keyframes newsDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 55, 68, .5); }
  70% { box-shadow: 0 0 0 7px rgba(226, 55, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 55, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .news-eyebrow::before { animation: none; }
}
.news-item h3 { position: relative; max-width: 20ch; min-height: calc(2.12em + var(--space-3)); margin: var(--space-3) 0 var(--space-4); padding-bottom: var(--space-3); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.06; letter-spacing: -.025em; }
/* Başlık altı editoryal ayraç: kısa kalın kırmızı çizgi */
.news-item h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #e23744, var(--color-brand-orange));
}
.news-item p { margin: 0; color: var(--color-ink-soft); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.62; }
.news-item-body { display: none; }

/* "Spot" giriş cümlesi (lead): büyük, koyu, display font + sol renk şeridi.
   Hem tam metinli kartların ilk paragrafı hem IAAPA kartlarının özet paragrafı. */
.news-item-body > p:first-child,
.news-item-copy > p {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.32;
  letter-spacing: -.01em;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-brand-coral);
}

/* Drop cap: makale gövdesinin (2. paragraf) ilk harfi büyük ve renkli */
.news-item-body > p:nth-child(2)::first-letter {
  float: left;
  margin: .06em .1em -.04em 0;
  color: var(--color-brand-coral);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2em;
  line-height: .78;
}

/* Kapanış cümlesi: koyu ve vurgulu */
.news-item-body > p:last-child:not(:first-child) { color: var(--color-ink); font-weight: 700; }
.news-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
/* IAAPA başlıkları farklı uzunlukta olsa da kategori, özet ve CTA aynı ritimde kalır. */
.news-item--iaapa .news-item-copy {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: start;
}
.news-item--iaapa .news-actions { align-self: end; margin-top: 0; }
.news-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.news-text-link:hover { color: var(--color-brand-coral); }
.news-text-link--quote {
  justify-content: center;
  padding: 0 22px;
  color: var(--color-ink);
  background: linear-gradient(135deg, var(--color-brand-yellow), var(--color-brand-orange));
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.news-text-link--quote:hover {
  color: var(--color-ink);
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.news-text-link--quote:active { transform: translateY(0); }
.news-text-link--quote:focus-visible { outline: 3px solid var(--color-brand-yellow); outline-offset: 3px; }

/* Detay görünümü: görsel ve haber metni birlikte açılır; iç kaydırma sayfaya taşmaz. */
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 8, 4, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.news-lightbox.open { opacity: 1; pointer-events: auto; }
.news-lightbox-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  width: min(1160px, 94vw);
  max-height: min(780px, 90dvh);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .52);
  transform: translateY(12px) scale(.98);
  transition: transform var(--duration-base) var(--ease-out);
}
.news-lightbox.open .news-lightbox-inner { transform: none; }
.news-lightbox-gallery {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: 100%;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.news-lightbox-gallery::before {
  position: absolute;
  inset: -24px;
  z-index: 0;
  content: "";
  background: center / cover no-repeat var(--news-stage-image, var(--color-surface-alt));
  filter: blur(26px) saturate(1.1);
  opacity: .62;
  transform: scale(1.1);
}
.news-lightbox-gallery--single { display: grid; place-items: center; }
.news-lightbox-gallery img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 86dvh;
  object-fit: contain;
  background: transparent;
}
.news-lightbox-gallery--single img { max-height: min(740px, 86dvh); }
.news-lightbox-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}
.news-lightbox-copy h2, .news-lightbox-copy h3 { max-width: 17ch; margin: var(--space-3) 0 var(--space-4); font-size: clamp(30px, 3.5vw, 50px); line-height: 1; letter-spacing: -.04em; }
.news-lightbox-copy p { margin: 0 0 var(--space-3); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; }
.news-lightbox-copy .news-item-body { display: flex; flex-direction: column; gap: .8em; }
.news-lightbox-copy .news-item-body > p:last-child { margin-bottom: 0; }
.news-lightbox-copy .news-actions { margin-top: var(--space-4); }
.news-lightbox-close {
  position: absolute;
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--color-ink);
  background: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.news-lightbox-close svg { width: 22px; height: 22px; }
.news-lightbox-close:focus-visible { outline: 3px solid var(--color-brand-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .news-lightbox, .news-lightbox-inner, .news-text-link--quote { transition: none; }
}


/* Rope Technology: renk alanı içinde ürün görseli ve her zaman açık özellikler. */
.tech-editorial {
  margin: var(--space-6) var(--space-3);
  border-radius: clamp(34px, 6vw, 84px);
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, .32), transparent 26%),
    linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-yellow));
}
:root[data-theme="dark"] .tech-editorial {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 122, 69, .14), transparent 28%),
    linear-gradient(145deg, var(--color-surface-alt), var(--color-brand-navy-deep));
  border: 1px solid var(--color-border);
}
.tech-editorial > .wrap { position: relative; z-index: 1; }
.tech-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: stretch;
}
.tech-diagram {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 520px;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-md);
}
.tech-callouts {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 88%;
  gap: var(--space-4);
}
.tech-callouts-left { align-items: flex-end; text-align: right; }
.tech-callouts-right { align-items: flex-start; text-align: left; }
.tech-callout { display: flex; align-items: center; gap: var(--space-2); max-width: 205px; }
.tc-label b { display: block; color: var(--color-ink); font-size: 12px; font-weight: 850; line-height: 1.25; }
.tc-label small { display: block; margin-top: 4px; color: var(--color-ink-soft); font-size: 11px; line-height: 1.38; }
.tc-arrow { flex: 0 0 32px; height: 2px; background: var(--color-brand-coral); position: relative; }
.tc-arrow::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; transform: translateY(-50%); }
.tc-arrow-right::after { right: -1px; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--color-brand-coral); }
.tc-arrow-left::after { left: -1px; border-width: 4px 6px 4px 0; border-color: transparent var(--color-brand-coral) transparent transparent; }
.tech-photo-frame {
  width: clamp(210px, 20vw, 290px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 46% 20% 42% 18% / 34% 42% 25% 44%;
  box-shadow: var(--shadow-lg);
}
.tech-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tech-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-md);
}
.tech-side h3 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.tech-specs { margin: 0 0 var(--space-5); }
.tech-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-border-strong); }
.tech-specs dt { color: var(--color-ink-soft); font-size: 12px; font-weight: 700; }
.tech-specs dd { max-width: 58%; margin: 0; color: var(--color-ink); font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tech-specs dd small { color: var(--color-ink-faint); font-weight: 600; }
.tech-certs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.tech-cert { padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.tech-warranty { margin: 0 auto; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-brand-coral); border-radius: var(--radius-md); background: var(--color-surface-alt); color: var(--color-ink); font-size: 12px; font-weight: 700; }

/* Süreç: küçük ikonlar yerine büyük, hikâye anlatan fotoğraf kartları. */
.process-section { background: var(--color-bg); }
.process-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: start;
  margin: 0;
  padding: 0 0 var(--space-7);
  list-style: none;
}
.process-card {
  overflow: hidden;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: clamp(20px, 2.5vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.process-card:nth-child(3n + 2) { transform: translateY(var(--space-6)); }
.process-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.process-card:nth-child(3n + 2):hover { transform: translateY(calc(var(--space-6) - 7px)); }
.process-card figure { overflow: hidden; aspect-ratio: 16 / 10; margin: 0; background: var(--color-surface-alt); }
.process-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s var(--ease-out); }
.process-card:hover img { transform: scale(1.06); }
.process-card-copy { position: relative; min-height: 170px; padding: var(--space-5); }
.process-card-copy > b {
  position: absolute;
  top: -31px;
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  border: 6px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-brand-coral);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
}
.process-card h3 { margin: 0 0 var(--space-2); padding-right: var(--space-6); font-size: var(--text-md); }
.process-card p { margin: 0; color: var(--color-ink-soft); font-size: 13px; }

/* Mini konfigüratör: güçlü CTA renk alanı + yaşayan model görseli. */
.config-editorial {
  margin: var(--space-6) var(--space-3);
  border-radius: clamp(34px, 6vw, 84px);
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 255, 255, .36), transparent 24%),
    linear-gradient(145deg, var(--color-brand-yellow), var(--color-brand-orange));
}
:root[data-theme="dark"] .config-editorial {
  background:
    radial-gradient(circle at 76% 22%, rgba(254, 192, 26, .10), transparent 25%),
    linear-gradient(145deg, var(--color-surface-alt), var(--color-brand-navy-deep));
  border: 1px solid var(--color-border);
}
.config-editorial > .wrap { position: relative; z-index: 1; }
.mini-config {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  align-items: stretch;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mc-intro { display: flex; flex-direction: column; }
.mc-intro h2 { max-width: 12ch; margin: var(--space-2) 0 var(--space-4); font-size: clamp(38px, 5vw, 64px); line-height: .95; letter-spacing: -.04em; }
.mc-intro > p { max-width: 42ch; margin: 0 0 var(--space-5); color: var(--color-ink-soft); font-size: var(--text-sm); }
.mc-sliders { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.mc-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 700; }
.mc-label b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.mc-slider input[type="range"] { width: 100%; min-height: 34px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.mc-slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--color-brand-yellow), var(--color-brand-coral)); }
.mc-slider input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; appearance: none; -webkit-appearance: none; border: 4px solid var(--color-brand-coral); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mc-slider input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--color-brand-yellow), var(--color-brand-coral)); }
.mc-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 4px solid var(--color-brand-coral); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mc-model-picker { display: block; }
.mc-slider-ends { display: flex; justify-content: space-between; margin-top: 2px; color: var(--color-ink-faint); font-size: 11px; font-weight: 700; }
.mc-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mc-dimensions > span { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.mc-dimensions small { color: var(--color-ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mc-dimensions b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.mc-result {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 460px;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: clamp(26px, 3.5vw, 42px);
  box-shadow: var(--shadow-lg);
}
.mc-result-visual { position: relative; display: grid; place-items: center; min-height: 330px; }
.mc-result-visual img {
  position: relative;
  z-index: 1;
  width: min(100%, 410px);
  max-height: 350px;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(36, 22, 6, .18));
  animation: modelFloat 5.5s ease-in-out infinite;
}
@keyframes modelFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.mc-result-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.mc-result-label { color: var(--color-brand-coral); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mc-model { margin: var(--space-1) 0 var(--space-3); color: var(--color-ink); font-family: var(--font-display); font-size: clamp(42px, 4.6vw, 64px); line-height: 1; }
.mc-model.mc-flash { animation: mcFlash .45s var(--ease-out); }
.mc-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.mc-stats span { display: flex; flex-direction: column; }
.mc-stats i { color: var(--color-ink); font-size: var(--text-sm); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-stats em { color: var(--color-ink-faint); font-size: 11px; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.mc-note { margin: 0 0 var(--space-4); color: var(--color-ink-faint); font-size: 12px; }
.mc-result .btn { align-self: flex-start; }

/* Referanslar: akışı sakinleştiren son vitrin. */
.references-showcase {
  background:
    linear-gradient(to bottom, transparent, rgba(254, 192, 26, .06) 24%, transparent 72%),
    var(--color-bg);
}
#referanslarimiz h2 { font-size: clamp(24px, 3vw, 38px); }
.references-showcase .section-head { margin-bottom: var(--space-5); }
#instagram .section-head { margin-bottom: var(--space-5); }
.instagram-embed { min-height: 420px; }
.partners-fade { -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); cursor: grab; touch-action: pan-y; user-select: none; }
.partners-fade.is-dragging { cursor: grabbing; }
.partners-fade .carousel-track { animation: none; }
.partners-fade .ref-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.partners-fade .ref-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partners-fade img { -webkit-user-drag: none; }

@media (max-width: 1180px) {
  .dangler { display: none; }
  .story-split { grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr); min-height: 600px; }
  .tech-stage { grid-template-columns: 1fr; }
  .tech-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
  .tech-side h3, .tech-warranty { grid-column: 1 / -1; }
  .mini-config { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: var(--space-6); }
  .mc-result { grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr); }
}

@media (max-width: 900px) {
  .editorial-heading { grid-template-columns: 1fr; align-items: start; gap: var(--space-4); }
  .editorial-heading h2 { max-width: 14ch; }
  .story-split { grid-template-columns: 1fr; min-height: 0; gap: var(--space-7); }
  .story-copy h2 { max-width: 13ch; }
  .story-visual { width: min(100%, 680px); justify-self: center; }
  .news-feed { --news-card-height: clamp(640px, 128vw, 760px); }
  .news-item { grid-template-columns: 1fr; grid-template-rows: 1.05fr .95fr; min-height: 0; }
  .news-item .news-media { aspect-ratio: auto; height: 100%; }
  .news-item h3 { font-size: clamp(26px, 4.6vw, 36px); }
  .tech-editorial, .config-editorial { margin-inline: var(--space-2); }
  .tech-diagram { min-height: 470px; }
  .tech-side { display: flex; }
  .process-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-card:nth-child(3n + 2), .process-card:nth-child(3n + 2):hover { transform: none; }
  .mini-config { grid-template-columns: 1fr; }
  .mc-intro h2 { max-width: 14ch; }
  .mc-result { grid-template-columns: minmax(0, 1fr) minmax(230px, .85fr); }
  .news-lightbox { padding: var(--space-3); }
  .news-lightbox-inner { grid-template-columns: 1fr; max-height: 92dvh; }
  .news-lightbox-gallery { min-height: 0; }
  .news-lightbox-gallery--single img { max-height: 58dvh; }
  .news-lightbox-copy { min-height: 0; padding: var(--space-5); }
}

@media (max-width: 640px) {
  .editorial-heading h2, .story-copy h2, .mc-intro h2 { font-size: clamp(32px, 10.5vw, 46px); }
  .story-split { gap: var(--space-6); }
  .story-visual { aspect-ratio: 1 / 1.08; }
  .story-orbit { right: -2%; border-width: 12px; }
  .news-strip { margin-block: var(--space-7); }
  .news-feed {
    --news-block: min(88vw, 360px);
    --news-card-height: 650px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--news-gutter);
  }
  .news-item { scroll-snap-stop: always; }
  .news-actions { width: 100%; }
  .news-text-link--quote { width: 100%; min-height: 48px; }
  .news-item .news-media { aspect-ratio: auto; height: 100%; }
  .news-media > img { padding: 0; }
  .process-gallery {
    display: flex;
    gap: var(--space-4);
    width: calc(100% + var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    padding-right: var(--space-5);
    padding-bottom: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--color-brand-coral) transparent;
  }
  .process-card {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
    transform: none !important;
    margin-top: 0 !important;
  }
  .tech-editorial, .config-editorial { margin-inline: var(--space-1); border-radius: 30px; }
  .tech-diagram { grid-template-columns: 1fr; min-height: 0; padding: var(--space-4); }
  .tech-photo-frame { order: -1; width: min(72vw, 270px); justify-self: center; }
  .tech-callouts { height: auto; flex-flow: row wrap; justify-content: center; }
  .tech-callouts-left, .tech-callouts-right { align-items: stretch; text-align: left; }
  .tech-callout { flex: 1 1 130px; max-width: none; align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); }
  .tc-arrow { display: none; }
  .tech-side { padding: var(--space-5); }
  .tech-specs > div { align-items: flex-start; }
  .process-card-copy { min-height: 166px; }
  .mc-result { grid-template-columns: 1fr; min-height: 0; }
  .mc-result-visual { min-height: 230px; }
  .mc-result-visual img { max-height: 250px; }
  .mc-result-copy { padding: 0 var(--space-2) var(--space-2); }
  .references-showcase .section-head { gap: var(--space-3); }
}

@media (pointer: coarse) {
  .dangler { display: none; }
  .process-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .process-card:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dangler,
  .dangler.is-swinging,
  .mc-result-visual img,
  .mc-model.mc-flash { animation: none; }
  .process-card,
  .process-card img { transition: none; }
}

/* ---------- Homepage density pass: centered tech, compact process flow ---------- */
/* Rope Tech: the rope remains the visual centre; the facts become scannable cards
   instead of a dense two-column definition list. */
.tech-editorial {
  padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}
.tech-editorial > .wrap {
  display: grid;
  align-content: center;
}
.tech-editorial .editorial-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(var(--space-5), 4vw, var(--space-7));
}
.tech-editorial .editorial-heading > div { display: flex; flex-direction: column; align-items: center; }
.tech-editorial .editorial-heading h2 { max-width: 22ch; }
.tech-editorial .editorial-heading > p { max-width: 58ch; }
.tech-stage {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-lg);
}
.tech-diagram {
  grid-template-columns: minmax(145px, .82fr) minmax(280px, 1.3fr) minmax(145px, .82fr);
  min-height: clamp(420px, 37vw, 500px);
  padding: clamp(var(--space-4), 2.5vw, var(--space-6));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tech-callouts {
  height: auto;
  justify-content: center;
  gap: var(--space-3);
}
.tech-callout { max-width: 194px; }
.tc-label {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-sm);
}
.tc-label b { font-size: 13px; }
.tc-label small { font-size: 12px; line-height: 1.42; }
.tech-photo-frame {
  width: clamp(360px, 42vw, 610px);
  aspect-ratio: 4 / 3;
  border-radius: clamp(20px, 2.5vw, 32px);
  animation: none;
}
.tech-side {
  justify-content: center;
  padding: clamp(var(--space-5), 2.6vw, var(--space-6));
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}
.tech-side h3 { margin-bottom: var(--space-3); text-align: center; }
.tech-warranty { text-align: center; }
.tech-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.tech-specs > div {
  min-height: 86px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  text-align: center;
}
.tech-specs dt {
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tech-specs dd {
  max-width: none;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}
.tech-certs { margin-bottom: var(--space-3); }
.tech-warranty { line-height: 1.45; }

/* Süreç: six large cards become a compact image-led 3x2 flow. */
.process-section { padding-top: clamp(var(--space-7), 7vw, var(--space-9)); }
.process-section .editorial-heading { margin-bottom: clamp(var(--space-5), 4vw, var(--space-7)); }
.process-gallery {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  padding-bottom: var(--space-5);
}
.process-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  min-height: 124px;
  overflow: visible;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}
.process-card:nth-child(3n + 2),
.process-card:nth-child(3n + 2):hover { transform: none; }
.process-card:hover { transform: translateY(-4px); }
.process-card figure {
  width: 76px;
  height: 76px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-brand-yellow), var(--color-brand-orange));
}
.process-card:nth-child(3n + 2) figure { background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-coral)); }
.process-card:nth-child(3n + 3) figure { background: linear-gradient(135deg, var(--color-brand-coral), var(--color-brand-yellow)); }
.process-icon { width: 32px; height: 32px; color: var(--color-ink); }
.process-card-copy {
  min-height: 0;
  padding: 0 0 0 var(--space-3);
}
.process-card-copy > b {
  top: -10px;
  right: -8px;
  width: 34px;
  border-width: 3px;
  font-size: 15px;
}
.process-card h3 {
  margin: 0 0 5px;
  padding-right: var(--space-4);
  font-size: 15px;
  line-height: 1.18;
}
.process-card p { font-size: 12px; line-height: 1.45; }
.process-card:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: calc(-1 * var(--space-6));
  width: var(--space-6);
  height: 2px;
  background: var(--color-border-strong);
}
.process-card:not(:nth-child(3n))::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 4px);
  right: calc(-1 * var(--space-6));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--color-brand-coral);
}
/* The configurator should read as a balanced, self-contained invitation instead of
   placing its result against the lower edge of a tall colour field. */
.config-editorial {
  padding-block: clamp(var(--space-5), 4.5vw, var(--space-7));
}
.config-editorial > .wrap {
  display: grid;
  align-content: center;
}
.mini-config { min-height: 0; }
.mc-result {
  min-height: clamp(390px, 31vw, 430px);
}
.mc-result-visual { min-height: 280px; }

@media (min-width: 1181px) {
  /* The full-width diagram needs room for the rope core and both callout
     rails. The technical facts deliberately sit below it to prevent overlap. */
  .tech-stage {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tech-diagram {
    grid-template-columns: minmax(160px, .72fr) minmax(440px, 1.8fr) minmax(160px, .72fr);
    min-height: 480px;
  }
  .tech-photo-frame { width: clamp(440px, 42vw, 610px); }
  .tech-specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 var(--space-4);
  }
  .tech-specs > div {
    min-height: 96px;
    padding: 12px;
  }
  .tech-specs dt { font-size: 12px; }
  .tech-specs dd { font-size: 14px; }
  .tech-cert { padding: 7px 10px; font-size: 11px; }
}

@media (max-width: 1180px) {
  .tech-diagram {
    grid-template-columns: minmax(145px, .75fr) minmax(360px, 1.5fr) minmax(145px, .75fr);
    min-height: 460px;
  }
  .tech-photo-frame { width: clamp(360px, 48vw, 520px); }
}

@media (max-width: 900px) {
  .tech-editorial,
  .config-editorial { padding-block: var(--space-6); }
  .tech-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .tech-photo-frame {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 680px);
    justify-self: center;
  }
  .tech-callouts-left { grid-column: 1; grid-row: 2; }
  .tech-callouts-right { grid-column: 2; grid-row: 2; }
  .tech-callouts {
    flex-flow: row wrap;
    align-items: stretch;
  }
  .tech-callouts-left,
  .tech-callouts-right { align-items: stretch; text-align: left; }
  .tech-callout {
    flex: 1 1 100%;
    max-width: none;
    align-items: stretch;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .tc-label { width: 100%; }
  .tc-arrow { display: none; }
  .tech-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-card:not(:nth-child(3n))::after,
  .process-card:not(:nth-child(3n))::before { display: none; }
  .process-card:not(:nth-child(2n))::after,
  .process-card:not(:nth-child(2n))::before { display: block; }
  .process-card:not(:nth-child(2n))::after {
    top: 50%;
    right: calc(-1 * var(--space-6));
    width: var(--space-6);
    height: 2px;
  }
  .process-card:not(:nth-child(2n))::before {
    top: calc(50% - 4px);
    right: calc(-1 * var(--space-6));
  }
  .mc-result { min-height: 0; }
}

@media (max-width: 640px) {
  .tech-editorial,
  .config-editorial { padding-block: var(--space-5); }
  .tech-diagram { grid-template-columns: 1fr; }
  .tech-photo-frame {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
  .tech-callouts-left,
  .tech-callouts-right { grid-column: auto; grid-row: auto; }
  .tech-callout { flex-basis: 100%; }
  .tech-specs { grid-template-columns: 1fr; }
  .tech-specs > div { min-height: 0; }

  .process-gallery {
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    margin: 0;
    padding: 0 0 var(--space-4);
    overflow: visible;
    gap: var(--space-4);
  }
  .process-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 104px;
    padding: var(--space-3);
  }
  .process-card figure { width: 64px; height: 64px; }
  .process-card-copy { padding-left: var(--space-3); }
  .process-card h3 { font-size: 15px; }
  .process-card p { font-size: 12px; }
  .process-card:not(:nth-child(2n))::after,
  .process-card:not(:nth-child(2n))::before { display: none; }
  .process-card:not(:last-child)::after {
    display: block;
    top: 100%;
    right: auto;
    left: 44px;
    width: 2px;
    height: var(--space-4);
  }
  .process-card:not(:last-child)::before { display: none; }
  .mc-result-visual { min-height: 230px; }
}