/* ====== Sayfa 1: Kavisli Hero Galeri (3 görsel) ====== */
.sa-hero-arc::before,
.sa-hero-arc::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 240px at 20% 10%, rgba(108,59,255,0.18), transparent 60%),
    radial-gradient(520px 220px at 80% 0%, rgba(17,199,112,0.18), transparent 60%);
  mix-blend-mode: screen;
}
.sa-hero-arc__copy h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px;
  text-shadow: 0 8px 40px rgba(108,59,255,0.35);
}
.sa-hero-arc__copy p { color: var(--atlas-dim); margin: 0 0 10px; max-width: 64ch; }

.sa-hero-arc__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 22px;
  margin-top: 26px;
  padding-bottom: 30px;
}

.orbit-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--atlas-border);
  border-radius: var(--radius-2xl);
  padding: 12px;
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.orbit-card:hover { transform: translateY(-4px) rotate3d(0.2, -0.1, 0, 6deg); box-shadow: var(--shadow-float); }
.orbit-card figcaption {
  margin-top: 8px; color: var(--atlas-dim); font-size: 14px;
  padding-left: 6px; border-left: 2px solid rgba(255,255,255,0.12);
}

.orbit-card--middle { translate: 0 -6px; }
.arc-line {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(980px, 92vw); height: auto; bottom: 0;
}
.arc-line path {
  fill: none; stroke: linear-gradient(red, blue); /* sadece yer tutucu */
 /* bazı tarayıcılar için gradient fallback'i devre dışı bırakacağız */
  stroke: rgba(255,255,255,0.12); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 8px 20px rgba(108,59,255,0.35));
}

/* Geniş ekranlarda 3’lü kavisli yerleşim */
@media (min-width: 860px) {
  .sa-hero-arc__gallery {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
  .orbit-card:nth-child(1) { justify-self: start; translate: 0 18px; }
  .orbit-card:nth-child(2) { justify-self: center; translate: 0 -12px; }
  .orbit-card:nth-child(3) { justify-self: end; translate: 0 18px; }
}

/* Reveal animleri */
.sa-hero-arc.reveal.is-visible .orbit-card { animation: floatY 4.6s ease-in-out infinite alternate; }
.sa-hero-arc.reveal.is-visible .orbit-card:nth-child(1){ animation-delay: .2s; }
.sa-hero-arc.reveal.is-visible .orbit-card:nth-child(2){ animation-delay: .6s; }
.sa-hero-arc.reveal.is-visible .orbit-card:nth-child(3){ animation-delay: .4s; }

@keyframes floatY {
  from { transform: translateY(0) rotate3d(0,0,0,0deg); }
  to   { transform: translateY(-6px) rotate3d(.15,-.08,0,4deg); }
}
/* ====== Bölüm 2: Harita Odakları ====== */
.sa-mapflow__grid{
  display:grid; gap:24px;
  grid-template-columns: 1fr;
}
.sa-mapflow__copy h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.35);
}
.sa-mapflow__track{
  position:relative; height:240px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--atlas-border);
  border-radius:20px;
  overflow:hidden;
}
.sa-mapflow__svg{
  position:absolute; inset:0; width:100%; height:100%;
  filter: drop-shadow(0 8px 20px rgba(108,59,255,.25));
}
.map-path{
  fill:none; stroke:rgba(255,255,255,.18); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; /* JS ile gerçek uzunluğa ayarlanacak */
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);
}

/* pin kartları */
.sa-mapflow__pins{
  display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.pin-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border);
  border-radius:18px; padding:14px;
  box-shadow:var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pin-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-float); }
.pin-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 18px currentColor; }
.dot--baku{ color: var(--atlas-violet); background: currentColor; }
.dot--sumgait{ color: var(--atlas-green); background: currentColor; }
.pin-card figcaption{ color:var(--atlas-dim); font-size:14px; margin-top:6px; padding-left:6px; border-left:2px solid rgba(255,255,255,.12); }

/* ====== Bölüm 3: Zafer Kroniği — ticker ====== */
.sa-ticker__head h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(17,199,112,.25);
}
.ticker-rail{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid var(--atlas-border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  margin-top:12px;
}
.ticker-track{
  display:flex; gap:14px; align-items:center;
  padding:14px; width:max-content;
  animation: ticker-move 22s linear infinite;
}
.ticker-rail.is-paused .ticker-track{ animation-play-state: paused; }
@keyframes ticker-move{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}
.ticker-item{
  display:block;
  min-width: 340px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--atlas-border);
  border-radius:16px; padding:10px;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.ticker-item:hover{
  transform: translateY(-3px);
  filter: saturate(1.15);
  box-shadow: var(--shadow-soft);
}
.ticker-item figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; }

/* ====== Bölüm 4: Zikzak Kulüp Rehberi ====== */
.sa-zigzag__head h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(255,122,26,.28);
}
.zig{ display:grid; gap:20px; }
.zig-item{
  display:grid; grid-template-columns: 350px 1fr; gap:16px;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:20px; padding:14px;
}
.zig-item--rev{ grid-template-columns: 1fr 350px; }
.zig-item--rev .zig-media{ order:2; }
.zig-item--rev .zig-copy{ order:1; }
.zig-copy h3{ margin:0 0 6px; font-size:20px; }
.chiplist{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:10px 0 0; list-style:none; }
.chiplist li{
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--atlas-border);
  font-size:13px; color:var(--atlas-dim);
}

/* ====== Medya Sorguları ====== */
@media (max-width: 980px){
  .sa-mapflow__pins{ grid-template-columns: 1fr; }
  .zig-item,
  .zig-item--rev{ grid-template-columns: 1fr; }
  .zig-item--rev .zig-media,
  .zig-item--rev .zig-copy{ order: initial; }
}
/* ===== Bölüm 5: Branş Halkası ===== */
.sa-ring__grid{ display:grid; gap:24px; }
.sa-ring__copy h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(108,59,255,.35);
}
.sa-ring__orbit{
  position:relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin: 12px auto 0;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.12);
  background:
    radial-gradient(220px 220px at 50% 50%, rgba(255,255,255,.02), transparent 70%);
}
.ring-badge{
  position:absolute;
  width: min(48%, 360px);
  left:50%; top:50%;
  translate:-50% -50%;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border);
  border-radius:18px;
  padding:10px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ring-badge:hover{ transform: translate(-50%,-50%) translateY(-4px); box-shadow: var(--shadow-float); }
.ring-badge figcaption{ margin-top:6px; color:var(--atlas-dim); font-size:14px; padding-left:6px; border-left:2px solid rgba(255,255,255,.12); }

/* 4 konum: üst, sağ, alt, sol */
.ring-badge:nth-child(1){ transform: translate(-50%,-50%) translateY(-42%); }
.ring-badge:nth-child(2){ transform: translate(-50%,-50%) translateX(42%); }
.ring-badge:nth-child(3){ transform: translate(-50%,-50%) translateY(42%); }
.ring-badge:nth-child(4){ transform: translate(-50%,-50%) translateX(-42%); }

/* ===== Bölüm 6: Steps Timeline ===== */
.sa-steps__head h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(17,199,112,.28);
}
.steps{
  list-style:none; padding:0; margin:18px 0 0;
  position:relative;
}
.steps::before{
  content:""; position:absolute; left:18px; top:0; bottom:0;
  width:2px; background: linear-gradient(180deg, rgba(108,59,255,.6), rgba(17,199,112,.6));
  border-radius:2px;
}
.step{
  display:grid; grid-template-columns: 48px 1fr; gap:12px;
  padding:10px 0 18px;
}
.step__marker{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  color:#0b0e14;
  background: linear-gradient(90deg,var(--atlas-green),var(--atlas-violet));
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.step__content{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:16px; padding:12px;
}
.step__content h3{ margin:0 0 6px; font-size:20px; }
.step__content figcaption{ color:var(--atlas-dim); font-size:14px; margin-top:6px; }

/* ===== Bölüm 7: Mosaic ===== */
.sa-mosaic__head h2{
  font-size:clamp(24px,3vw,34px);
  margin:0 0 10px;
  text-shadow:0 8px 40px rgba(255,122,26,.28);
}
.mosaic{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.moz-card{
  grid-column: span 4;   /* базовая ширина */
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--atlas-border); border-radius:18px; padding:12px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.moz-card:hover{ transform: translateY(-4px); filter: saturate(1.1); box-shadow: var(--shadow-float); }
.moz-card header{ font-weight:700; margin-bottom:8px; }
.moz-card--tall{ grid-row: span 2; }
.moz-card--wide{ grid-column: span 6; }

@media (max-width: 980px){
  .sa-ring__orbit{ max-width: 520px; }
  .mosaic{ grid-template-columns: repeat(6, 1fr); }
  .moz-card{ grid-column: span 6; }
  .moz-card--wide{ grid-column: span 6; }
}
@media (max-width: 620px){
  .ring-badge{ width: 62%; }
  .ring-badge:nth-child(1){ transform: translate(-50%,-50%) translateY(-45%); }
  .ring-badge:nth-child(2){ transform: translate(-50%,-50%) translateX(45%); }
  .ring-badge:nth-child(3){ transform: translate(-50%,-50%) translateY(45%); }
  .ring-badge:nth-child(4){ transform: translate(-50%,-50%) translateX(-45%); }
  .mosaic{ grid-template-columns: repeat(2, 1fr); }
  .moz-card, .moz-card--wide{ grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce){
  .ring-badge, .moz-card{ transition: none; }
}
/* ===== Bölüm 5 (Yeni): Branş Şeritleri ===== */
.sa-lanes__grid{ display:grid; gap:22px; }
.sa-lanes__copy h2{
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(108,59,255,.35);
}

/* список лент */
.lanes{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.lane{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 14px;
  border: 1px solid var(--atlas-border);
  border-radius: 18px;

  /* наклонная лента + мягкий градиент */
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}

/* косой срез с помощью clip-path (с фоллбеком радиусов) */
.lane{ clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.lane--rev{ grid-template-columns: auto 1fr; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }

.lane:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter: saturate(1.06); }

.lane__body h3{ margin:0 0 6px; font-size:20px; }
.lane__body p{ margin:0 0 8px; color: var(--atlas-dim); }

/* «световая протяжка» при появлении */
.lane::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%);
}
.reveal.is-visible .lane::after{
  animation: lanes-wipe 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lanes-wipe{
  from{ transform: translateX(-120%); }
  to{   transform: translateX(120%); }
}

.lane__media img{ max-width: 330px; } /* глобально и так ≤350px, здесь чуть ниже */
.lane--rev .lane__media{ order: -1; }   /* медиa слева у рев-элементов */

/* адаптив */
@media (max-width: 980px){
  .lane,
  .lane--rev{
    grid-template-columns: 1fr;
    clip-path: none;            /* на узких экранах — без косых срезов */
  }
  .lane--rev .lane__media{ order: initial; }
  .lane__media img{ width: 100%; max-width: 350px; }
}
/* ===== Bölüm 8: Panorama Strip ===== */
.sa-panorama__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(108,59,255,.30);
}
.pan-strip{
  display: grid; grid-auto-flow: column; grid-auto-columns: 360px;
  gap: 14px; overflow-x: auto; padding: 10px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pan{
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-soft);
  position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}
.pan:hover{ transform: translateY(-3px); filter: saturate(1.08); box-shadow: var(--shadow-float); }
.pan figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

/* ===== Bölüm 9: Analiz Merdiveni ===== */
.sa-ladder__grid{
  display: grid; gap: 22px;
  grid-template-columns: 1fr 1fr;
}
.ladder-copy h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(17,199,112,.28);
}
.ladder-media{
  position: relative; min-height: 520px;
}
.ladder{
  position: absolute;
  width: min(360px, 90%); /* влезает в наши 350px по картинке */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.ladder:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--shadow-float); }
.ladder figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

.rung-1{ left: 0;    top: 0;    transform: rotate(-2deg); }
.rung-2{ left: 28%;  top: 32%;  transform: rotate(1.5deg); }
.rung-3{ right: 0;   bottom: 0; transform: rotate(-1deg); }

/* ===== Bölüm 10: Koç Panosu ===== */
.sa-coach__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(255,122,26,.28);
}
.coach-oval{
  position: relative;
  border: 1px solid var(--atlas-border);
  border-radius: 26px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 28px 14px 18px;
  overflow: hidden;
}
.coach-oval::before{
  content:""; position:absolute; inset: 12% 6% 8% 6%;
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 50% / 35%;
  filter: drop-shadow(0 8px 18px rgba(108,59,255,.25));
}
.coach{
  position: relative; z-index: 1;
  width: 240px; max-width: 90%;
  margin: 10px auto;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px; padding: 10px 10px 12px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.coach:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--shadow-float); }
.coach img{ border-radius: 999px; max-width: 220px; }
.coach h3{ margin: 8px 0 4px; font-size: 18px; }
.coach p{ margin: 0; color: var(--atlas-dim); }

/* Раскладка по овалу на широких экранах */
@media (min-width: 980px){
  .coach-oval{ min-height: 420px; }
  .coach:nth-child(1){ position:absolute; left: 6%;  top: 18%; }
  .coach:nth-child(2){ position:absolute; left: 28%; top: 58%; }
  .coach:nth-child(3){ position:absolute; right: 28%; top: 16%; }
  .coach:nth-child(4){ position:absolute; right: 6%;  top: 54%; }
}

/* Адаптивы */
@media (max-width: 980px){
  .sa-ladder__grid{ grid-template-columns: 1fr; }
  .ladder-media{ min-height: 0; display: grid; gap: 12px; }
  .ladder{ position: relative; width: 100%; transform: none !important; }
  .rung-1, .rung-2, .rung-3{ left:auto; right:auto; top:auto; bottom:auto; }
}
/* ===== Bölüm 9: Analiz Merdiveni (FIX — без перекрытий) ===== */
.sa-ladder__grid{
  display: grid; gap: 22px;
  grid-template-columns: 1fr 1fr;
}

.ladder-copy h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(17,199,112,.28);
}

/* Контейнер с гридом вместо абсолютного позиционирования */
.ladder-media{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: start;
}

/* Карточки ступеней */
.ladder{
  display: block;
  width: 100%;
  max-width: 350px;               /* соблюдаем лимит из ТЗ */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
  position: relative; z-index: 1; /* на всякий случай */
}
.ladder:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--shadow-float); }
.ladder img{ width: 100%; height: auto; }
.ladder figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

/* Ступени — «лестница» без наложений (≥1100px) */
.rung-1{ grid-column: 1 / span 5;  }
.rung-2{ grid-column: 5 / span 5;  margin-top: 20px; }
.rung-3{ grid-column: 9 / span 4;  margin-top: 40px; }

/* Средние экраны — подстраиваем шаг */
@media (max-width: 1100px){
  .ladder-media{ grid-template-columns: repeat(8, 1fr); }
  .rung-1{ grid-column: 1 / span 5; }
  .rung-2{ grid-column: 3 / span 5; margin-top: 16px; }
  .rung-3{ grid-column: 5 / span 4; margin-top: 32px; }
}

/* Мобильные — просто столбиком */
@media (max-width: 980px){
  .sa-ladder__grid{ grid-template-columns: 1fr; }
  .ladder-media{
    grid-template-columns: 1fr;
  }
  .rung-1, .rung-2, .rung-3{
    grid-column: auto;
    margin-top: 0;
  }
}
/* ===== Bölüm 11: Hex grid ===== */
.sa-hex__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(108,59,255,.30);
}
.hex-grid{
  --col: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col), 1fr));
  gap: 18px;
  justify-items: center;
}
.hex{
  position: relative;
  padding: 10px;
  border: 1px solid var(--atlas-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
  overflow: hidden;
}
.hex img{
  width: 100%; height: auto; max-width: 350px;
  /* шестигранная маска */
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.hex:hover{ transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--shadow-float); }
.hex figcaption{ margin-top: 8px; color: var(--atlas-dim); font-size: 14px; text-align: center; }

/* ===== Bölüm 12: Podyum üçlüsü ===== */
.sa-podium__copy h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(17,199,112,.28);
}
.pods{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.pod{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pod:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float); filter: saturate(1.06); }
.pod header{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 8px;
  font-weight: 700; color: #0b0e14;
  background: linear-gradient(90deg, var(--atlas-green), var(--atlas-violet));
}
.pod--gold   { transform: translateY(-18px); }
.pod--silver { transform: translateY(-6px); }
.pod--bronze { transform: translateY(0); }
.pod figcaption{ margin-top: 6px; color: var(--atlas-dim); font-size: 14px; }

/* адаптив для подиума */
@media (max-width: 860px){
  .pods{ grid-template-columns: 1fr; }
  .pod--gold, .pod--silver, .pod--bronze{ transform: none; }
}

/* ===== Bölüm 13: Polaroid ===== */
.sa-polaroid__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(255,122,26,.28);
}
.polaroids{
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pol{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 14px;
  padding: 12px 12px 16px;
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--rot, -3deg));
  transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.pol:nth-child(1){ --rot: -4.5deg; }
.pol:nth-child(2){ --rot: 3.5deg; }
.pol:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-float); filter: saturate(1.08); }
.pol figcaption{ margin-top: 8px; color: var(--atlas-dim); font-size: 14px; text-align: center; }

@media (max-width: 620px){
  .polaroids{ grid-template-columns: 1fr; }
  .pol{ --rot: 0deg; }
}
/* ===== Bölüm 14: Spine şerit ===== */
.sa-spine__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(108,59,255,.30);
}
.spine{
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 8px;
}
.spine__line{
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-green));
  border-radius: 2px;
  filter: drop-shadow(0 8px 20px rgba(108,59,255,.25));
}
.spine-card{
  position: relative;
  width: min(680px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--atlas-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  margin-left: 0; margin-right: auto;  /* слева от оси */
}
.spine-card--right{
  margin-left: auto; margin-right: 0;  /* справа от оси */
}
.spine-card h3{ margin: 0 0 6px; font-size: 20px; }
.spine-card p{ margin: 0; color: var(--atlas-dim); }
.spine-card::before{
  content:""; position:absolute; top: 16px;
  width: 12px; height: 12px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--atlas-orange));
  box-shadow: 0 0 20px var(--atlas-orange);
  /* «пины» к оси */
  left: 100%; transform: translateX(8px);
}
.spine-card--right::before{
  left: auto; right: 100%; transform: translateX(-8px);
}

@media (max-width: 820px){
  .spine__line{ left: 22px; transform: none; }
  .spine-card, .spine-card--right{
    margin: 0 0 0 42px; width: auto;
  }
  .spine-card::before,
  .spine-card--right::before{ left: 14px; right: auto; transform: none; }
}

/* ===== Bölüm 15: FAQ akordeon ===== */
.sa-faq__head h2{
  font-size: clamp(24px,3vw,34px);
  margin: 0 0 10px;
  text-shadow: 0 8px 40px rgba(17,199,112,.28);
}
.faq{ display: grid; gap: 12px; margin-top: 8px; }
.faq-item{
  border: 1px solid var(--atlas-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{ font-weight: 700; }
.faq-item summary::after{
  content: "+";
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color:#0b0e14;
  background: linear-gradient(90deg, var(--atlas-green), var(--atlas-violet));
}
.faq-item[open] summary::after{ content: "–"; }

.faq__panel{
  display: grid;
  grid-template-rows: 0fr;     /* магия плавного раскрытия */
  transition: grid-template-rows .28s ease;
}
.faq-item[open] .faq__panel{ grid-template-rows: 1fr; }

.faq__panel > *{
  overflow: hidden;
  padding: 0 16px 14px;
  color: var(--atlas-dim);
}
/* контейнер — отдельный стек слоёв */
.spine{
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 8px;
  isolation: isolate;            /* добавлено: свой стек для z-index */
}

/* линия — под карточками */
.spine__line{
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-green));
  border-radius: 2px;
  filter: drop-shadow(0 8px 20px rgba(108,59,255,.25));
  z-index: 0;                    /* добавлено: линия снизу */
  pointer-events: none;          /* чтобы не перехватывала клики */
}

/* карточки — над линией + более плотный фон, чтобы ось не «просвечивала» */
.spine-card{
  position: relative; z-index: 1;     /* добавлено */
  width: min(680px, 92vw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(9,12,18,.92);                 /* добавлено: непрозрачная подложка */
  border: 1px solid var(--atlas-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  margin-left: 0; margin-right: auto;
}

/* правая карточка — аналогично */
.spine-card--right{
  margin-left: auto; margin-right: 0;
}

/* мобильная адаптация — без изменений, но оставлю для контекста */
@media (max-width: 820px){
  .spine__line{ left: 22px; transform: none; }
  .spine-card, .spine-card--right{
    margin: 0 0 0 42px; width: auto;
  }
}