/* ===== 1) Zafer Sarmalı ===== */
.kr-spiral__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.32); }
.spiral-board{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(108,59,255,.10), transparent 60%),
    radial-gradient(40% 40% at 60% 60%, rgba(17,199,112,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden; padding: 18px 14px;
}
.spiral-board::after{
  content:""; position:absolute; inset:14px; border-radius:18px;
  border: 2px dashed rgba(255,255,255,.12);
  mask: radial-gradient(120% 120% at 50% 50%, #000 56%, transparent 57%),
        linear-gradient(#000,#000);
  mask-composite: exclude;
  pointer-events:none;
}
.spiral-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-auto-rows: minmax(100px, auto);
}
.s-item{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:18px; padding:10px;
  box-shadow: var(--shadow-soft); transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
}
.s-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.s-item figure{ margin:0; }
.s-item img{ width:100%; height:auto; max-width:350px; }
.s-item p{ margin:6px 0 0; color:var(--atlas-dim); font-size:14px; }

/* ступенчатая «спираль» без абсолютов */
.s-item--a{ grid-column: 1 / span 4; grid-row: 1; }
.s-item--b{ grid-column: 5 / span 4; grid-row: 3; }
.s-item--c{ grid-column: 9 / span 4; grid-row: 5; }

@media (max-width: 920px){
  .spiral-grid{ grid-template-columns: 1fr; }
  .s-item--a, .s-item--b, .s-item--c{ grid-column:auto; grid-row:auto; }
}

/* ===== 2) Asılı Şerit ===== */
.kr-strap__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(17,199,112,.3); }
.strap-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 22px 14px 18px; overflow:hidden;
}
.strap-line{
  position:absolute; left:50%; top:0; bottom:0; width: 16px; transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(108,59,255,.20), rgba(17,199,112,.20)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 6px);
  border-radius: 999px;
  filter: drop-shadow(0 10px 24px rgba(108,59,255,.25));
}
.hcard{
  position: relative; z-index:1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:14px; padding:10px 12px;
  box-shadow: var(--shadow-soft); width:min(350px, 92%);
  transition: transform .22s, box-shadow .22s, filter .2s;
  margin: 14px 0;
}
.hcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.hcard::before{ /* «дырокол» сверху */
  content:""; position:absolute; left: 16px; right: 16px; top: -8px; height: 12px;
  background:
    radial-gradient(circle at 12px 6px, rgba(0,0,0,.35) 0 2px, transparent 2px 100%),
    radial-gradient(circle at calc(100% - 12px) 6px, rgba(0,0,0,.35) 0 2px, transparent 2px 100%),
    rgba(255,255,255,.25);
  border-radius: 2px;
  filter: blur(.3px);
}
.hcard.hcard--left{ margin-left: 0; margin-right: auto; }
.hcard.hcard--right{ margin-left: auto; margin-right: 0; }
.hcard figure{ margin:0; }
.hcard img{ width:100%; height:auto; max-width:350px; }
.hcard p{ margin:6px 0 0; color: var(--atlas-dim); font-size:14px; }

@media (max-width: 820px){
  .strap-line{ left: 22px; transform:none; width: 8px; }
  .hcard.hcard--left, .hcard.hcard--right{ margin-left: 42px; margin-right: 0; width:auto; }
}

/* ===== 3) Ödül Yörüngesi ===== */
.kr-orbit__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(255,122,26,.3); }
.orbit-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden; aspect-ratio: 16 / 9; min-height: 300px;
}
.orbit-ring{
  position:absolute; inset: 8% 10%;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.18);
  box-shadow: inset 0 0 32px rgba(108,59,255,.18);
}
.orbit-rotor{
  position:absolute; inset: 0;
  display:grid; place-items:center;
  animation: orbit-spin 26s linear infinite;
}
@keyframes orbit-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.orbit-stage:hover .orbit-rotor{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .orbit-rotor{ animation: none; }
}
.orb{
  position:absolute;
  transform: rotate(var(--ang,0deg)) translateX(34%) rotate(calc(-1 * var(--ang,0deg)));
  width: min(280px, 42vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.orb:hover{ filter:saturate(1.06); box-shadow: var(--shadow-float); }
.orb img{ width:100%; height:auto; max-width:350px; }
.orb figcaption{ margin-top:6px; color: var(--atlas-dim); font-size:14px; }

/* Мобайл — выключаем ротацию, показываем столбиком */
@media (max-width: 900px){
  .orbit-stage{ aspect-ratio: auto; padding: 14px; }
  .orbit-ring{ display:none; }
  .orbit-rotor{ position:relative; animation:none; display:grid; gap:12px; }
  .orb{ position:relative; transform:none; width: min(350px, 100%); }
}
/* === Zafer Sarmalı — compact desktop layout === */
@media (min-width: 980px){
  .kr-spiral .spiral-board{
    padding: 10px 10px;           /* меньше внутренний отступ */
    border-radius: 18px;
    overflow: hidden;
  }
  .kr-spiral .spiral-board::after{
    inset: 10px;                  /* тоньше и ближе к краю декоративный штрих */
    border-width: 1px;
  }

  .kr-spiral .spiral-grid{
    grid-template-columns: repeat(9, minmax(0, 1fr)); /* плотнее сетка */
    grid-auto-rows: minmax(0, auto);
    gap: 10px;                                       /* меньше зазоры */
  }

  .kr-spiral .s-item{
    width: 100%;
    max-width: 300px;              /* компактнее карточка */
    padding: 8px 9px;
  }
  .kr-spiral .s-item img{ max-width: 300px; }  /* ≤350px по ТЗ, делаем 300 */
  .kr-spiral .s-item figcaption{ font-size: 13px; }
  .kr-spiral .s-item p{ font-size: 13px; }

  /* Один ряд с мягкой «ступенькой» по вертикали */
  .kr-spiral .s-item--a{ grid-column: 1 / span 3; grid-row: 1; align-self: start; }
  .kr-spiral .s-item--b{ grid-column: 4 / span 3; grid-row: 1; align-self: center; }
  .kr-spiral .s-item--c{ grid-column: 7 / span 3; grid-row: 1; align-self: end; }
}

/* промежуточная ширина: 2 плотные колонки */
@media (min-width: 921px) and (max-width: 979px){
  .kr-spiral .spiral-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .kr-spiral .s-item{ max-width: 300px; padding: 8px; }
  .kr-spiral .s-item--a{ grid-column: 1 / span 3; grid-row: 1; }
  .kr-spiral .s-item--b{ grid-column: 4 / span 3; grid-row: 1; }
  .kr-spiral .s-item--c{ grid-column: 2 / span 3; grid-row: 2; }
}
/* ===== 4) Şerit Kronoloji ===== */
.kr-band__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.32); }
.band-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden; padding: 24px 16px;
}
.band-bg{
  position:absolute; inset:-20% -10%;
  background: linear-gradient(96deg, rgba(108,59,255,.22), rgba(17,199,112,.22));
  transform: rotate(-8deg);
  filter: blur(24px); opacity: .45;
  pointer-events:none;
}
.band-card{
  position: relative; z-index:1;
  width:min(350px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.band-card:hover{ transform: translateY(-4px); filter:saturate(1.06); box-shadow: var(--shadow-float); }
.band-card img{ width:100%; height:auto; max-width:350px; }
.band-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.band-stage{
  display:grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.band-card--start{ justify-self: start; }
.band-card--end  { justify-self: end; }

@media (max-width: 820px){
  .band-stage{ grid-template-columns: 1fr; }
  .band-card--start, .band-card--end{ justify-self: center; }
}

/* ===== 5) Yelpaze Kartları ===== */
.kr-fan__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(17,199,112,.30); }
.fan-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 18px 14px; display:grid; gap: 14px;
  grid-template-columns: 1fr auto 1fr; align-items: end;
}
.fan-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); width:min(350px,100%);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.fan-card:hover{ transform: translateY(-6px) rotate(0deg); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.fan-card img{ width:100%; height:auto; max-width:350px; }
.fan-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }
.fan-card--left { transform: rotate(-5deg); }
.fan-card--right{ transform: rotate(5deg); }

.fan-note{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--atlas-border); border-radius:14px; padding:12px 14px;
  box-shadow: var(--shadow-soft); text-align:center;
}
.fan-note h3{ margin:0 0 6px; font-size:18px; }
.fan-note p{ margin:0; color:var(--atlas-dim); }

@media (max-width: 900px){
  .fan-stage{ grid-template-columns: 1fr; }
  .fan-card--left, .fan-card--right{ transform:none; }
}

/* ===== 6) Çatal Zaman ===== */
.kr-fork__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(255,122,26,.30); }
.fork-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden; min-height: 320px;
}
.fork-svg{ position:absolute; inset:0; width:100%; height:100%; }
.fork-svg .stem,
.fork-svg .branch{
  fill:none;  stroke-width:4; stroke-linecap:round;
  stroke-dasharray: 680; stroke-dashoffset: 680;
  filter: drop-shadow(0 10px 24px rgba(108,59,255,.25));
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible .fork-svg .stem,
.reveal.is-visible .fork-svg .branch{ stroke-dashoffset: 0; }

.fork-card{
  position:absolute; width:min(340px, 88vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.fork-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.fork-card img{ width:100%; height:auto; max-width:350px; }
.fork-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.fork-card--l{ left: 6%; top: 12%; }
.fork-card--r{ right: 6%; top: 38%; }

@media (max-width: 900px){
  .fork-stage{ min-height: 460px; }
  .fork-card--l{ left: 50%; top: 10%; transform: translateX(-50%); }
  .fork-card--r{ left: 50%; top: auto; bottom: 10%; transform: translateX(-50%); }
}
/* ===== 6) Prizma Köprüsü ===== */
.kr-bridge__head h2{
  font-size: clamp(26px,3.2vw,38px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(255,122,26,.30);
}

.bridge-stage{
  border: 1px solid var(--atlas-border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px) 1fr;
  gap: 14px;
  align-items: center;
}

.bridge-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
  width: min(350px, 100%);
}
.bridge-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter: saturate(1.06); }
.bridge-card img{ width: 100%; height: auto; max-width: 350px; }
.bridge-card figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

/* центральная «призматическая» полоса */
.bridge-core{
  height: 140px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--atlas-border);
  background:
    repeating-linear-gradient(-14deg, rgba(108,59,255,.20) 0 10px, transparent 10px 22px),
    repeating-linear-gradient( 14deg, rgba(17,199,112,.20) 0 10px, transparent 10px 22px),
    radial-gradient(120% 80% at 50% 50%, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 32px rgba(108,59,255,.22);
}

/* бегущий указатель по мосту */
.bridge-glider{
  position: absolute;
  left: -6%;
  top: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #fff, var(--atlas-orange));
  box-shadow: 0 0 26px var(--atlas-orange);
  animation: gliderRun 3.6s ease-in-out infinite;
}
@keyframes gliderRun{
  0%{ left: -6%; }
  50%{ left: 50%; }
  100%{ left: 106%; }
}

/* адаптив: в столбик на узких экранах */
@media (max-width: 900px){
  .bridge-stage{
    grid-template-columns: 1fr;
  }
  .bridge-core{ order: 2; height: 120px; }
  .bridge-card--l{ order: 1; }
  .bridge-card--r{ order: 3; }
}
/* ===== 7) Şerit Mozaik ===== */
.kr-mosaic__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.32); }
.mosaic-board{
  border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px; overflow:hidden;
}
.mosaic-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .mosaic-grid{ grid-template-columns: 1fr; } }

.mosaic-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:18px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
  position: relative; overflow:hidden;
}
.mosaic-card:hover{ transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.mosaic-card::after{ /* скользящий «блик» */
  content:""; position:absolute; inset:-20% -40%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: shine 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{ 0%{ transform: translateX(-60%);} 100%{ transform: translateX(60%);} }
.mosaic-card figure{ margin:0; }
.mosaic-card img{ width:100%; height:auto; max-width:350px; }
.mosaic-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.mosaic-card--a{ transform: rotate(-4deg); }
.mosaic-card--b{ transform: rotate(3deg);  }
.mosaic-card--c{ transform: rotate(-2.5deg); }

/* ===== 8) Skor Altimetre ===== */
.kr-alt__grid{ display:grid; gap:18px; grid-template-columns: 120px 1fr; align-items: start; }
@media (max-width: 820px){ .kr-alt__grid{ grid-template-columns: 1fr; } }

.alt-gauge{
  display:grid; gap:8px; justify-items:center;
  padding:10px 6px; border:1px solid var(--atlas-border); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.gauge-rail{
  position: relative; width: 28px; height: 180px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); overflow:hidden;
}
.gauge-fill{
  position:absolute; left:0; bottom:0; right:0; height:0%;
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-green));
  box-shadow: inset 0 0 20px rgba(108,59,255,.25);
  transition: height 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible .gauge-fill{ height: 78%; } /* целевое значение */
.gauge-cap{
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--atlas-orange));
  box-shadow: 0 0 18px var(--atlas-orange);
}
.gauge-note{ margin:0; font-size:13px; color:var(--atlas-dim); }

.alt-cards{ display:grid; gap:14px; align-content:start; }
.alt-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:18px; padding:10px;
  box-shadow: var(--shadow-soft); transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
}
.alt-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.alt-card img{ width:100%; height:auto; max-width:350px; }
.alt-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* ===== 9) Zigzag Katlama ===== */
.kr-fold__head h2{
  font-size: clamp(26px,3.2vw,38px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(108,59,255,.32);
}

.fold-stage{
  border: 1px solid var(--atlas-border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  perspective: 1000px;             /* 3D перспектива для гармошки */
  position: relative;
  overflow: hidden;
}

/* мягкий пробегающий блик по всей сцене — для уникальности */
.fold-stage::after{
  content:""; position:absolute; inset:-30% -60%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.25) 50%, transparent 55%);
  transform: translateX(-60%);
  animation: foldShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes foldShine{ from{ transform: translateX(-60%);} to{ transform: translateX(60%);} }

.fold-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  width: min(350px, 100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .22s, filter .22s;
  transform-style: preserve-3d;
}
.fold-panel:hover{ box-shadow: var(--shadow-float); filter: saturate(1.06); }

.fold-panel figure{ margin: 0; }
.fold-panel img{ width: 100%; height: auto; max-width: 350px; }
.fold-panel figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

/* исходные углы — ощущение «гармошки» */
.fold-panel--a{ transform: rotateY(-10deg); transform-origin: left center; }
.fold-panel--b{ transform: rotateY(0deg); }
.fold-panel--c{ transform: rotateY(10deg);  transform-origin: right center; }

/* выпрямление «страницы» при наведении */
.fold-panel--a:hover{ transform: rotateY(-2deg) translateY(-4px); }
.fold-panel--b:hover{ transform: translateY(-4px); }
.fold-panel--c:hover{ transform: rotateY(2deg) translateY(-4px); }

@media (max-width: 980px){
  .fold-stage{ grid-template-columns: 1fr; }
  .fold-panel,
  .fold-panel--a,
  .fold-panel--b,
  .fold-panel--c{ transform: none; }  /* на мобилке без 3D-наклона */
}
/* ===== 10) Zaman Omurgası ===== */
.kr-spine__grid{
  display:grid; gap:16px;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto auto auto;
  align-items:start;
}
.spine-copy h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px; text-shadow:0 8px 40px rgba(108,59,255,.32);}
.spine-rail{
  grid-row: 1 / span 4;
  border:1px solid var(--atlas-border); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  position:relative; padding:10px; display:grid; place-items:center;
}
.spine-rail::before{
  content:""; width:6px; height:100%;
  border-radius:999px;
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-green));
  box-shadow: inset 0 0 20px rgba(108,59,255,.25);
}
.spine-pulse{
  position:absolute; left:50%; width:14px; height:14px; border-radius:50%;
  transform: translateX(-50%); top: 10%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--atlas-orange));
  box-shadow: 0 0 18px var(--atlas-orange);
  animation: spineRun 2.2s ease-in-out infinite;
}
@keyframes spineRun{
  0%{ top: 8%; } 50%{ top: 88%; } 100%{ top: 8%; }
}

.spine-card, .spine-note{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
}
.spine-card:hover, .spine-note:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.spine-card img{ width:100%; height:auto; max-width:350px; }
.spine-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.step-a{ grid-column: 2; grid-row: 2; }
.step-b{ grid-column: 2; grid-row: 3; }
.step-c{ grid-column: 2; grid-row: 4; }

@media (max-width: 860px){
  .kr-spine__grid{ grid-template-columns: 1fr; }
  .spine-rail{ order: 2; height: 160px; }
  .step-a, .step-b, .step-c{ grid-column:auto; }
}

/* ===== 11) Kaydırmalı Rozet Şeridi ===== */
.kr-snap__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px; text-shadow:0 8px 40px rgba(17,199,112,.30);}
.snap-rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding:12px; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.snap-rail::-webkit-scrollbar{ height: 8px; }
.snap-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius: 999px; }
.snap-card{
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(320px, 86vw); flex: 0 0 auto;
}
.snap-card:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--shadow-float); }
.snap-card img{ width:100%; height:auto; max-width:320px; }
.snap-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* ===== 12) Kemer Kubbeler ===== */
.kr-arch__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px; text-shadow:0 8px 40px rgba(255,122,26,.30);}
.arch-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:18px 14px 20px; display:grid; gap:14px;
  grid-template-columns: 1fr auto 1fr; align-items:end;
}
.arch-svg{ position:absolute; inset:0; width:100%; height:100%; }
.arch-line{
  fill:none; stroke-width:4; stroke-linecap:round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  filter: drop-shadow(0 10px 24px rgba(108,59,255,.25));
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible .arch-line{ stroke-dashoffset: 0; }

.arch-card, .arch-note{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); width:min(350px,100%);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.arch-card:hover, .arch-note:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.arch-card img{ width:100%; height:auto; max-width:350px; }
.arch-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.arch-card--l{ justify-self:start; }
.arch-card--r{ justify-self:end; }
.arch-note{ align-self:start; transform: translateY(-10px); }

@media (max-width: 900px){
  .arch-stage{ grid-template-columns: 1fr; }
  .arch-note{ transform:none; }
  .arch-card--l, .arch-card--r{ justify-self:center; }
}
/* ===== 13) Halo Kronometre ===== */
.kr-halo__grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr auto 1fr; align-items:center;
}
.halo-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
}
.halo-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.halo-card img{ width:100%; height:auto; max-width:350px; }
.halo-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.halo-core{
  border:1px solid var(--atlas-border); border-radius:18px; padding:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  display:grid; place-items:center; gap:8px; width:min(360px, 84vw);
}
.halo-svg{ width:220px; height:220px; display:block; }
.ring-bg{
  fill:none; stroke: rgba(255,255,255,.15); stroke-width:8;
}
.ring-fg{
  fill:none; stroke-width:8; stroke-linecap:round;
  stroke-dasharray: 565; stroke-dashoffset: 565;
  filter: drop-shadow(0 10px 24px rgba(108,59,255,.25));
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible .ring-fg{ stroke-dashoffset: 140; } /* «прогресс» кольца */

.halo-note{ margin:0; color:var(--atlas-dim); font-size:14px; }
@media (max-width: 900px){
  .kr-halo__grid{ grid-template-columns: 1fr; }
}

/* ===== 14) Çekmece Bantları ===== */
.kr-drawer__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px; text-shadow:0 8px 40px rgba(17,199,112,.30);}
.drawer-stack{ display:grid; gap:12px; }
.drawer{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:14px;
  padding:10px; box-shadow: var(--shadow-soft);
  transform: translateX(0); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .22s, filter .22s;
  width:min(350px,100%);
}
.drawer:hover{ transform: translateX(8px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.drawer--top{ justify-self:start; }
.drawer--mid{ justify-self:center; text-align:center; width:min(520px, 100%); }
.drawer--bot{ justify-self:end; }
.drawer h3{ margin:0 0 6px; font-size:18px; }
.drawer p{ margin:0; color:var(--atlas-dim); }
.drawer img{ width:100%; height:auto; max-width:350px; }
.drawer figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* ===== 15) Basamaklı Yörünge ===== */
.kr-steps__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px; text-shadow:0 8px 40px rgba(255,122,26,.30);}
.steps-stage{
  position:relative; border:1px solid var(--atlas-border); border-radius:22px;
  background:
    repeating-linear-gradient( -12deg, rgba(108,59,255,.12) 0 10px, transparent 10px 22px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px; display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr);
  min-height: 220px;
}
.step-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); width:min(350px,100%);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.step-card:hover{ transform: translate(6px,-6px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.step-card img{ width:100%; height:auto; max-width:350px; }
.step-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* разные «уровни» по сетке */
.step-card--a{ grid-column: 2 / span 4; align-self:end; }
.step-card--b{ grid-column: 7 / span 4; align-self:start; }

@media (max-width: 920px){
  .steps-stage{ grid-template-columns: 1fr; }
  .step-card--a, .step-card--b{ grid-column:auto; }
}

/* ===== 16) Petek Dizilimi ===== */
.kr-hive__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.32); }
.hive-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(6, 1fr);
  align-items:center; justify-items:center;
  border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px;
}
.hex-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s, filter .2s;
  width:min(350px,100%);
  position:relative; overflow:hidden;
}
.hex-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.hex-card img{
  width:100%; height:auto; max-width:350px;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}
.hex-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* треугольная раскладка на десктопе */
.hex-card--a{ grid-column: 2 / span 2; }
.hex-card--b{ grid-column: 4 / span 2; }
.hex-card--c{ grid-column: 3 / span 2; transform: translateY(10px); }
@media (max-width: 960px){
  .hive-grid{ grid-template-columns: 1fr; }
  .hex-card--c{ transform:none; }
}

/* ===== 17) Sarkaç Sayaç ===== */
.kr-pend__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(17,199,112,.30); }
.pend-stage{
  display:grid; gap:14px; grid-template-columns: 1fr 120px 1fr; align-items:center;
  border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px; overflow:hidden;
}
.pend-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); width:min(350px,100%);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.pend-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.pend-card img{ width:100%; height:auto; max-width:350px; }
.pend-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

.pend-line{
  height: 200px; border-radius:12px; position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border);
  transform-origin: top center; animation: swing 2.8s ease-in-out infinite;
}
.pend-bob{
  position:absolute; bottom: 8px; left:50%; transform: translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--atlas-orange));
  box-shadow: 0 0 18px var(--atlas-orange);
}
@keyframes swing{
  0%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } 100%{ transform: rotate(-4deg); }
}

.pend-card--l{ align-self:flex-end; }
.pend-card--r{ align-self:flex-start; }

@media (max-width: 880px){
  .pend-stage{ grid-template-columns: 1fr; }
  .pend-card--l, .pend-card--r{ align-self:auto; }
  .pend-line{ height: 140px; animation: none; } /* на мобилке без качания */
}

/* ===== 18) Kule Şeridi ===== */
.kr-tower__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px;
  text-shadow:0 8px 40px rgba(255,122,26,.30); }
.tower-grid{
  position:relative; display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto;
  border:1px solid var(--atlas-border); border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px; overflow:hidden;
}
.tower-trace{
  position:absolute; left:50%; top:6%; bottom:6%; width:6px; transform: translateX(-50%);
  border-radius:999px;
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-green));
  filter: drop-shadow(0 10px 24px rgba(108,59,255,.25));
  opacity:.6;
}
.tower-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:10px;
  box-shadow: var(--shadow-soft); width:min(350px,100%);
  transition: transform .22s, box-shadow .22s, filter .2s;
}
.tower-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter:saturate(1.06); }
.tower-card img{ width:100%; height:auto; max-width:350px; }
.tower-card figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* Зигзаг по сетке */
.tower-card--top{ grid-column: 2 / span 4; align-self:start; }
.tower-card--mid{ grid-column: 5 / span 4; align-self:center; justify-self:center; }
.tower-card--bot{ grid-column: 8 / span 4; align-self:end; justify-self:end; }

@media (max-width: 960px){
  .tower-grid{ grid-template-columns: 1fr; }
  .tower-card--top, .tower-card--mid, .tower-card--bot{ grid-column:auto; justify-self:center; }
  .tower-trace{ display:none; }
}
/* По порядку элементов */
.orbit-stage .orb:nth-child(1){ --ang: 20deg; }
.orbit-stage .orb:nth-child(2){ --ang: 140deg; }
.orbit-stage .orb:nth-child(3){ --ang: 260deg; }
/* Орбитальные карточки: угол через класс вместо inline */
.orb--ang-10 { --ang: 10deg; }

/* На всякий случай: если где-то нет класса — угол по умолчанию 0 */
.orb { --ang: 0deg; }