/* ========== PAGE 1: ROOT — BÖLÜM 1 Tasarımı ========== */
.saffron-hero{
  position: relative;
  overflow: clip;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-deep);
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(14,107,168,.25), transparent 70%),
    radial-gradient(600px 380px at 20% 20%, rgba(255,179,0,.22), transparent 65%),
    linear-gradient(180deg, rgba(42,38,37,.85), rgba(20,17,15,.95));
}
.saffron-hero__bg .spice-dust,
.saffron-hero__bg .tile-grid{
  position:absolute; inset:0; pointer-events:none;
}
.saffron-hero__bg .spice-dust::before,
.saffron-hero__bg .spice-dust::after{
  content:""; position:absolute; filter: blur(14px);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,179,0,.25), transparent 60%);
  animation: drift 18s ease-in-out infinite;
}
.saffron-hero__bg .spice-dust::after{
  left:auto; right:10%; top:40%;
  background: radial-gradient(circle at 60% 50%, rgba(215,38,61,.22), transparent 60%);
  animation-duration: 24s;
}
@keyframes drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(6vw,2vh,0) scale(1.08); }
}
.saffron-hero__bg .tile-grid{
  --sz: 42px;
  background-image:
    conic-gradient(from 45deg, rgba(255,179,0,.08) 0 25%, transparent 0 100%),
    conic-gradient(from -45deg, rgba(14,107,168,.08) 0 25%, transparent 0 100%);
  background-size: var(--sz) var(--sz), var(--sz) var(--sz);
  mask-image: radial-gradient(600px 420px at 50% 40%, #000 0 55%, transparent 70%);
  opacity:.7;
}

/* İçerik iskeleti */
.saffron-hero__content{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  z-index: 1;
}

.saffron-title{
  font-family: "Saffron Serif", serif;
  font-size: clamp(24px, 4.4vw, 44px);
  line-height: 1.15;
  letter-spacing:.2px;
  color:#fff;
  text-shadow: 0 4px 30px rgba(255,179,0,.25);
}
.saffron-subtitle{
  margin: 10px 0 22px;
  color: var(--sand-200);
  max-width: 72ch;
}

/* Arched gallery — kart olmayan, kemerli çerçeveler */
.saffron-arch-gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: end;
  margin: 18px 0 18px;
}
.arch-card{
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  padding: clamp(8px,1.8vw,12px);
  border-radius: 28px 28px 10px 10px / 28px 28px 10px 10px; /* kemer hissi */
  outline: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  transform-origin: center bottom;
  transition: transform .25s ease, outline-color .25s ease, box-shadow .25s ease;
}
.arch-card img{
  border-radius: 22px 22px 8px 8px;
  outline: 1px solid rgba(255,255,255,.08);
}
.arch-card figcaption{
  font-size: 13px; color: var(--muted);
  padding: 8px 6px 2px; text-align:center;
}

/* Hover + focus states (tilt ekibi JS ile de destekleniyor) */
.arch-card:hover,
.arch-card:focus-within{
  transform: translateY(-4px) rotate(-0.6deg);
  outline-color: rgba(255,179,0,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* Metin bloğu */
.saffron-hero__text{
  margin-top: clamp(16px, 3vw, 28px);
  max-width: 78ch;
  color: #efe9e6;
}
.saffron-hero__text .accent{
  color: var(--saffron-300);
  text-shadow: 0 0 14px rgba(255,179,0,.25);
}

/* Tiltable sınıfı — küçük 3D izlenimi */
.tiltable{
  will-change: transform;
  transform-style: preserve-3d;
}

/* Медиа: адаптив полностью под телефон/планшет */
@media (max-width: 1024px){
  .saffron-arch-gallery{ gap: 16px; }
}
@media (max-width: 860px){
  .saffron-arch-gallery{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .saffron-hero{ border-radius: var(--radius-xl); }
  .saffron-arch-gallery{
    grid-template-columns: 1fr; 
  }
}

/* Доп. защита от переполнения изображений (включая нестандартные кейсы) */
.saffron-arch-gallery img{
  width: 100%;
  max-width: 350px; /* требование */
  margin-left: auto; margin-right: auto;
}
/* ========== SAFFRON SPLIT: solda metin, sağda tek sütun katman ========== */
.saffron-split{ background: linear-gradient(180deg, rgba(42,38,37,.88), rgba(20,17,15,.96)); }
.saffron-split__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.saffron-split__text{ min-width: 0; }
.saffron-cta{ display:flex; gap:12px; margin-top:16px; }
.cta-link{
  display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.2px;
  color:#14110f; background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  padding:10px 16px; border-radius: 999px; box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.cta-link:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.35); filter: saturate(1.05); }
.cta-link.cta-secondary{
  color:#fff; background: linear-gradient(90deg, rgba(14,107,168,.85), rgba(255,179,0,.55));
}

/* Sağdaki istif: tek sütun, üst üste bindirmeli ve yumuşak paralaks */
.saffron-stack{
  position: relative;
  padding: 10px 8px 10px 18px;
  border-left: 2px dashed rgba(255,255,255,.08);
}
.stack-card{
  --lift: 10px;
  position: relative;
  margin: clamp(10px, 2.2vw, 16px) 0;
  padding: 10px;
  border-radius: 22px;
  outline: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  box-shadow: var(--shadow-soft);
  transform-origin: center;
  transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease, filter .25s ease;
}
.stack-card::before{
  /* küçük ipek şerit */
  content:""; position:absolute; left:-14px; top: 14px; bottom: 14px; width: 6px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,179,0,.8), rgba(215,38,61,.8), rgba(14,107,168,.8));
  filter: blur(0.2px); opacity:.75;
}
.stack-card img{
  display:block; width: 100%; max-width: 350px; margin: 0 auto;
  border-radius: 16px; outline: 1px solid rgba(255,255,255,.08);
}
.stack-card figcaption{
  font-size: 13px; color: var(--muted); text-align:center; padding-top: 8px;
}

/* doğal katman hissi için hafif ofset (index ile) */
.stack-card{ transform: translateY(calc(var(--i, 0) * 2px)) rotate(calc(var(--i, 0) * -0.25deg)); }
.stack-card:hover{
  transform: translateY(calc(-1 * var(--lift))) scale(1.015);
  outline-color: rgba(255,179,0,.45);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  filter: saturate(1.03);
}

/* "Çay buharı" — sadece samovar kartında */
.stack-card--steam::after{
  content:""; position:absolute; left: 52%; top: 8%;
  width: 46px; height: 110px; pointer-events:none;
  background: radial-gradient(40px 18px at 50% 10%, rgba(255,255,255,.26), transparent 60%),
              radial-gradient(40px 18px at 50% 50%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(40px 18px at 50% 90%, rgba(255,255,255,.12), transparent 60%);
  filter: blur(6px);
  animation: steamRise 3.6s ease-in-out infinite;
  opacity:.65;
}
@keyframes steamRise{
  0%   { transform: translate(-50%, 6px) scale(0.9); opacity:.0; }
  20%  { opacity:.6; }
  50%  { transform: translate(-50%, -8px) scale(1); opacity:.45; }
  100% { transform: translate(-50%, -22px) scale(1.05); opacity:0; }
}

/* Responsive */
@media (max-width: 980px){
  .saffron-split__grid{ grid-template-columns: 1fr; }
  .saffron-stack{ margin-top: 8px; border-left: 0; border-top: 2px dashed rgba(255,255,255,.08); padding-left: 8px; }
}
/* ==== Fix for Section 1 indexes: no inline styles; set with nth-child */
.saffron-stack .stack-card:nth-child(1){ --i: 0; }
.saffron-stack .stack-card:nth-child(2){ --i: 1; }
.saffron-stack .stack-card:nth-child(3){ --i: 2; }

/* ==== Shared section head spacing */
.section-head{ margin-bottom: clamp(10px, 2.4vw, 18px); }

/* ====================== BÖLÜM 2 — SAFFRON RIBBON ====================== */
.saffron-ribbon{
  position: relative;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(255,179,0,.14), transparent 60%),
    radial-gradient(600px 300px at 88% 12%, rgba(14,107,168,.14), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.9), rgba(20,17,15,.96));
  box-shadow: var(--shadow-deep);
  overflow: clip;
}
.ribbon-wrap{ position: relative; }
.ribbon-line{
  position: absolute; inset: 0 0 auto 0; height: 120px;
  background:
    radial-gradient(56px 56px at 8% 60%, rgba(255,179,0,.6), transparent 70%),
    radial-gradient(56px 56px at 32% 40%, rgba(215,38,61,.5), transparent 70%),
    radial-gradient(56px 56px at 56% 65%, rgba(14,107,168,.5), transparent 70%),
    radial-gradient(56px 56px at 80% 42%, rgba(255,179,0,.5), transparent 70%);
  filter: blur(40px);
  opacity:.35;
  pointer-events: none;
}
.ribbon-list{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: clamp(16px, 4vw, 28px);
  overflow-x: auto; padding: 16px 4px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ribbon-item{ scroll-snap-align: start; }
.ribbon-tag{
  position: relative;
  padding: 10px;
  border-radius: 24px 24px 12px 12px;
  background: linear-gradient(180deg, rgba(255,179,0,.1), rgba(14,107,168,.08));
  outline: 1px dashed rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, outline-color .25s ease, box-shadow .25s ease;
}
.ribbon-tag img{
  max-width: 350px; width: 100%; display:block; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.08);
}
.ribbon-tag figcaption{
  font-size: 13px; color: var(--muted); text-align:center; padding-top: 8px;
}
.ribbon-tag:hover{
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  outline-color: rgba(255,179,0,.45);
}
.ribbon-text{ margin-top: 8px; max-width: 78ch; }

/* ====================== BÖLÜM 3 — STONE STEPS ====================== */
.stone-steps{
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(14,107,168,.14), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.94), rgba(20,17,15,.98));
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-deep);
}
.steps-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2.6vw, 24px);
}
.step{
  display: grid; align-items: start;
  grid-template-columns: auto 1fr auto;
  gap: clamp(12px, 2.2vw, 18px);
  position: relative;
  padding: 12px 8px;
  border-radius: 18px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,179,0,.05), rgba(255,255,255,.02));
}
.step::before{
  /* taş yolu */
  content:""; position:absolute; left: 32px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 70%);
}
.step-badge{
  width: 28px; height: 28px; border-radius: 50%;
  display:grid; place-items:center; font-weight:800; font-size: 14px;
  color:#14110f;
  background: radial-gradient(circle at 50% 35%, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.step-content{ min-width: 0; }
.step-title{ margin: 0 0 4px; font-weight: 800; }
.step-fig img{
  max-width: 350px; width: 100%; border-radius: 14px; outline:1px solid rgba(255,255,255,.08);
}
.step-fig figcaption{
  font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px;
}
.step:hover{ outline-color: rgba(255,179,0,.35); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* responsive */
@media (max-width: 860px){
  .step{ grid-template-columns: auto 1fr; }
  .step .step-fig{ grid-column: 1 / -1; }
}

/* ====================== BÖLÜM 4 — COASTLINE POSTCARDS ====================== */
.coast-postcards{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 16%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.postcards-grid{
  display: grid; gap: clamp(16px, 2.6vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.postcard{
  position: relative;
  transform: rotate(-0.8deg);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: 16px;
  outline: 1px dashed rgba(255,255,255,.1);
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .25s ease, outline-color .25s ease;
}
.postcard:nth-child(2){ transform: rotate(0.6deg); }
.postcard:nth-child(3){ transform: rotate(-0.3deg); }

.postcard figure img{
  width: 100%; max-width: 350px; margin: 0 auto; border-radius: 12px;
  outline: 1px solid rgba(255,255,255,.08);
}
.postcard figcaption{
  font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px;
}
.card-text{ margin: 8px 6px 0; color: #efe9e6; font-size: 15px; }
.postcard::after{
  /* iğne */
  content:""; position:absolute; top: 8px; left: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.1));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: pinPulse 2.8s ease-in-out infinite;
}
@keyframes pinPulse{
  0%,100%{ transform: scale(1); opacity: .8; }
  50%    { transform: scale(1.12); opacity: 1; }
}
.postcard:hover{
  transform: translateY(-6px) rotate(0deg);
  outline-color: rgba(255,179,0,.35);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

@media (max-width: 980px){
  .postcards-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .postcards-grid{ grid-template-columns: 1fr; }
}
/* ====================== BÖLÜM 5 — FLAVOR COMPASS ====================== */
.flavor-compass{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 18% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 82% 10%, rgba(14,107,168,.12), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.9), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.compass-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 4vw, 40px); align-items: center;
}
.dial{
  position: relative; width: min(480px, 90%); aspect-ratio: 1/1;
  margin: 0 auto; filter: drop-shadow(0 14px 40px rgba(0,0,0,.35));
}
.dial-ring{
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255,179,0,.18), rgba(215,38,61,.18), rgba(14,107,168,.18), rgba(255,179,0,.18));
  mask: radial-gradient(circle at 50% 50%, transparent 42%, #000 43%, #000 57%, transparent 58%);
  animation: dialSpin 28s linear infinite;
}
@keyframes dialSpin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
.dial-needle{
  position: absolute; left: 50%; top: 50%; width: 2px; height: 36%;
  background: linear-gradient(180deg, var(--saffron-500), var(--pomegranate-500));
  transform-origin: bottom center; transform: translate(-50%, -100%) rotate(8deg);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.dial-points{
  list-style:none; margin:0; padding:0;
  display:grid; gap: 14px;
}
.dial-item figure{
  padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.08);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-soft);
}
.dial-item img{
  max-width: 350px; width: 100%; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
}
.dial-item figcaption{ font-size: 13px; color: var(--muted); text-align:center; padding-top: 6px; }
.dial-item figure:hover{
  transform: translateY(-4px) rotate(-0.4deg);
  outline-color: rgba(255,179,0,.4);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
.compass-text{ grid-column: 1 / -1; max-width: 78ch; margin-top: 4px; }

@media (max-width: 980px){
  .compass-wrap{ grid-template-columns: 1fr; }
}

/* ====================== BÖLÜM 6 — FILMSTRIP DOVGA ====================== */
.filmstrip-dovga{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 12% 0%, rgba(255,179,0,.1), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(215,38,61,.09), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.strip-rail{
  position: relative; overflow: hidden; border-radius: 18px;
  outline: 1px solid rgba(255,255,255,.06);
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.02) 22px 24px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.strip{
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  gap: clamp(16px, 3vw, 24px); padding: 16px;
  will-change: transform;
}
.frame{
  padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  outline: 1px dashed rgba(255,255,255,.1);
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease;
}
.frame img{
  width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
}
.frame figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.frame:hover{ transform: translateY(-4px) rotate(-0.4deg); outline-color: rgba(255,179,0,.35); }
.strip-note{ margin-top: 8px; max-width: 78ch; }

/* ====================== BÖLÜM 7 — MARKET TRIFOLD ====================== */
.market-trifold{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 15% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 85% 16%, rgba(14,107,168,.1), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.trifold{
  perspective: 1000px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 20px);
}
.panel{
  position: relative; transform-style: preserve-3d;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 16px; outline: 1px solid rgba(255,255,255,.06);
  padding: 10px; transition: transform .28s ease, box-shadow .28s ease, outline-color .2s ease;
  box-shadow: var(--shadow-soft);
}
.panel figure img{
  width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
}
.panel figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.panel-text{ margin-top: 8px; color: #efe9e6; font-size: 15px; }

/* katlama hissi */
.panel-left{ transform-origin: left center; }
.panel-center{ transform-origin: center center; }
.panel-right{ transform-origin: right center; }
.panel:hover, .panel:focus-within{
  transform: rotateY(var(--panel-tilt, 0deg)) translateY(-4px);
  outline-color: rgba(255,179,0,.35);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.trifold-note{ margin-top: 8px; max-width: 78ch; }

/* Responsive */
@media (max-width: 980px){
  .trifold{ grid-template-columns: 1fr; }
  .panel-left, .panel-right{ transform-origin: center center; }
}
/* ====================== BÖLÜM 8 — SAFFRON CONSTELLATIONS ====================== */
.saffron-constellations{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 10%, rgba(14,107,168,.12), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.9), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.timeline{ position: relative; }
.timeline-line{
  position: absolute; left: 0; right: 0; top: 58px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500), var(--tile-700));
  filter: blur(.2px);
  animation: flow 10s linear infinite;
}
@keyframes flow{
  0%{ background-position: 0 0; background-size: 300% 100%; }
  100%{ background-position: 300% 0; }
}
.timeline-list{
  list-style: none; margin: 0; padding: 0; 
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.6vw, 20px); position: relative; z-index: 1;
}
.node{ position: relative; padding-top: 26px; }
.node::before{
  content:""; position: absolute; left: 50%; top: 44px; width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, #fff, rgba(255,255,255,.1));
  box-shadow: 0 0 16px rgba(255,179,0,.55), 0 0 28px rgba(215,38,61,.35);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: translateX(-50%) scale(1); opacity: .9; }
  50%{ transform: translateX(-50%) scale(1.12); opacity: 1; }
}
.node-card{
  padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.node-card img{
  width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
}
.node-card figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.node-card:hover{ transform: translateY(-4px) rotate(-0.4deg); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.node-text{ margin-top: 6px; font-size: 15px; color: #efe9e6; }

@media (max-width: 980px){
  .timeline-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .timeline-list{ grid-template-columns: 1fr; }
  .timeline-line{ top: 32px; }
  .node::before{ top: 20px; }
}

/* ====================== BÖLÜM 9 — STEAM COLUMNS ====================== */
.steam-columns{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 16% 0%, rgba(255,179,0,.1), transparent 60%),
    radial-gradient(600px 320px at 84% 12%, rgba(215,38,61,.1), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: clip;
}
.columns{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 22px);
}
.column{ position: relative; padding-top: 24px; }
.plume{
  position: absolute; left: 50%; top: 0; width: 84px; height: 160px; transform: translateX(-50%);
  background:
    radial-gradient(40px 18px at 50% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(40px 18px at 50% 50%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(40px 18px at 50% 90%, rgba(255,255,255,.10), transparent 60%);
  filter: blur(6px); opacity: .55;
  animation: steamWave 3.2s ease-in-out infinite;
}
@keyframes steamWave{
  0%{ transform: translate(-50%, 8px) scale(0.9); opacity:.0; }
  25%{ opacity:.5; }
  50%{ transform: translate(-50%, -10px) scale(1); opacity:.35; }
  100%{ transform: translate(-50%, -22px) scale(1.05); opacity:0; }
}
.bubble{
  position: relative; margin: 0 auto; padding: 10px; width: min(100%, 360px);
  border-radius: 999px; outline: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  box-shadow: var(--shadow-soft);
  animation: floatY 5.2s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}
.bubble img{
  width: 100%; max-width: 350px; border-radius: 999px; outline: 1px solid rgba(255,255,255,.08);
}
.bubble figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.col-text{ margin-top: 8px; font-size: 15px; color: #efe9e6; text-align:center; }

@media (max-width: 980px){
  .columns{ grid-template-columns: 1fr; }
  .bubble{ width: min(100%, 380px); }
}

/* ====================== BÖLÜM 10 — PAIRING RHOMBUS MATRIX ====================== */
.pairing-matrix{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.matrix{
  --tile-size: 230px;
  display: grid; grid-template-columns: repeat(2, var(--tile-size)); gap: 18px;
  justify-content: center;
}
.tile{
  position: relative; width: var(--tile-size); height: var(--tile-size);
  border-radius: 16px; outline: 1px dashed rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transform: rotate(45deg);
  transition: transform .28s ease, box-shadow .28s ease, outline-color .2s ease;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.tile img{
  position: absolute; inset: 0; margin: auto; width: 100%; max-width: 350px; height: 100%;
  object-fit: cover; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
  transform: rotate(-45deg) scale(1.08);
}
.tile-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(20,17,15,0), rgba(20,17,15,.85));
  transform: rotate(-45deg);
  padding: 12px; text-align: center; font-size: 14px; color: #efe9e6;
}
.tile:hover, .tile:focus-within{
  transform: rotate(0deg) translateY(-4px);
  outline-color: rgba(255,179,0,.35);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
.matrix-note{ margin-top: 10px; max-width: 78ch; }

@media (max-width: 980px){
  .matrix{ --tile-size: 200px; }
}
@media (max-width: 560px){
  .matrix{ --tile-size: 160px; gap: 12px; }
}
/* ====================== BÖLÜM 11 — SPICE ORBIT ====================== */
.spice-orbit{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 18% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 82% 10%, rgba(14,107,168,.12), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.9), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.orbit{ position: relative; max-width: 980px; margin: 0 auto; }
.orbit-core{
  position: relative; z-index: 2;
  max-width: 60ch; margin: 0 auto; text-align: center;
  padding: 12px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06);
}
.orbit-ring{
  position: relative; width: min(520px, 80vw); aspect-ratio: 1/1; margin: 18px auto 0;
  border-radius: 50%;
  outline: 1px dashed rgba(255,255,255,.10);
  animation: orbitSpin 22s linear infinite;
}
.orbit-ring:hover{ animation-play-state: paused; }
@keyframes orbitSpin{ to{ transform: rotate(360deg); } }

.orbit-item{
  position: absolute; left: 50%; top: 50%;
  transform-origin: center -40%;
}
.orbit-item:nth-child(1){ transform: rotate(22deg) translateY(-40%) rotate(-22deg); }
.orbit-item:nth-child(2){ transform: rotate(210deg) translateY(-40%) rotate(-210deg); }

.orbit-fig{
  padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  outline: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.orbit-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.orbit-fig figcaption{ font-size: 12px; color: var(--muted); text-align: center; padding-top: 6px; }
.orbit-fig:hover{ transform: translateY(-4px) rotate(-0.4deg); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }

.orbit-decor{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40px 40px at 18% 35%, rgba(255,179,0,.18), transparent 60%),
    radial-gradient(40px 40px at 72% 68%, rgba(215,38,61,.18), transparent 60%);
  filter: blur(20px); opacity: .5;
}

@media (max-width: 560px){
  .orbit-core{ text-align: left; }
}

/* ====================== BÖLÜM 12 — STONE LEDGER ====================== */
.stone-ledger{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 14% 0%, rgba(255,179,0,.10), transparent 60%),
    radial-gradient(600px 320px at 86% 12%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.ledger{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 3vw, 28px);
  align-items: start; max-width: var(--maxw); margin: 0 auto;
}
.ledger-page{
  padding: 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06);
}
.ledger-title{ margin: 2px 0 8px; }
.ledger-notes{ margin: 0 0 8px; padding-left: 18px; }
.ledger-notes li{ margin-bottom: 6px; }
.ledger-text{ color: #efe9e6; max-width: 70ch; }

.stamp{
  padding: 10px; border-radius: 16px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  outline: 1px dashed rgba(255,255,255,.12); box-shadow: var(--shadow-soft);
}
.stamp img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.stamp figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

.tape-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tape{
  position: relative; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06);
}
.tape::before, .tape::after{
  content:""; position: absolute; top: -6px; width: 28px; height: 8px;
  background: linear-gradient(180deg, rgba(255,179,0,.65), rgba(215,38,61,.65));
  border-radius: 2px; filter: blur(.3px); opacity: .85;
}
.tape::before{ left: 10px; transform: rotate(-4deg); }
.tape::after{ right: 10px; transform: rotate(3deg); }

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

/* ====================== BÖLÜM 13 — SILK ROUTE MAP ====================== */
.silk-map{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: clip;
}
.map-wrap{
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(12px, 3vw, 24px);
  align-items: start;
}
.map-contours{
  position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px),
    radial-gradient(600px 320px at 30% 40%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 70% 60%, rgba(215,38,61,.10), transparent 60%);
  filter: blur(.2px);
}
.waypoint{
  position: relative; padding: 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-soft);
}
.pin{
  position: absolute; left: 12px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, rgba(255,255,255,.1));
  box-shadow: 0 0 16px rgba(255,179,0,.55), 0 0 28px rgba(215,38,61,.35);
  animation: pinPulse 2.8s ease-in-out infinite;
}
.wp-title{ margin: 0 0 6px 0; padding-left: 22px; }
.wp-text{ margin: 0; color: #efe9e6; }
.wp-fig{ margin-top: 6px; padding: 10px; border-radius: 14px; outline: 1px dashed rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06)); }
.wp-fig img{ width: 100%; max-width: 350px; border-radius: 10px; outline: 1px solid rgba(255,255,255,.08); }
.wp-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

@media (max-width: 980px){
  .map-wrap{ grid-template-columns: 1fr; }
}
/* ---------- FIX: Spice Orbit (upright cards + nicer spacing) ---------- */
@property --orbit-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.spice-orbit .orbit{ position: relative; max-width: 980px; margin: 0 auto; }
.spice-orbit .orbit-core{ position: relative; z-index: 2; }

.spice-orbit .orbit-ring{
  --orbit-angle: 0deg;
  width: min(520px, 80vw); aspect-ratio: 1/1; margin: 18px auto 0; border-radius: 50%;
  outline: 1px dashed rgba(255,255,255,.10);
  transform: rotate(var(--orbit-angle));
  animation: orbitAngle 26s linear infinite;
}
@keyframes orbitAngle { to { --orbit-angle: 360deg; } }
@media (prefers-reduced-motion: reduce){
  .spice-orbit .orbit-ring{ animation: none; }
}

/* точки-спутники */
.spice-orbit .orbit-ring::before,
.spice-orbit .orbit-ring::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:#fff; opacity:.7; box-shadow:0 0 12px rgba(255,179,0,.6);
  transform: translate(-50%,-50%) rotate(var(--orbit-angle)) translateY(-44%);
}
.spice-orbit .orbit-ring::after{
  box-shadow:0 0 12px rgba(14,107,168,.6);
  transform: translate(-50%,-50%) rotate(calc(var(--orbit-angle) + 180deg)) translateY(-44%);
}

/* элементы на орбите: родитель — вращение по окружности, ребёнок — контр-поворот */
.spice-orbit .orbit-item{
  --base: 0deg; --radius: 44%;
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
  /* вращаем вокруг центра и уводим на радиус */
  transform: rotate(calc(var(--orbit-angle) + var(--base))) translateY(calc(-1 * var(--radius)));
}
.spice-orbit .orbit-item:nth-child(1){ --base: 335deg; } /* разносим дальше */
.spice-orbit .orbit-item:nth-child(2){ --base: 155deg; }

/* контр-поворот, чтобы карточки всегда были ровными; ховер добавляем через переменные */
.spice-orbit .orbit-fig{
  --hover-ty: 0px; --hover-r: 0deg;
  padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
  outline: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-soft);
  /* вычитаем общий угол + базовый, затем применяем ховер-сдвиг/наклон */
  transform: rotate(calc(-1 * (var(--orbit-angle) + var(--base)))) translateY(var(--hover-ty)) rotate(var(--hover-r));
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.spice-orbit .orbit-fig img{
  width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08);
}
.spice-orbit .orbit-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.spice-orbit .orbit-fig:hover{
  --hover-ty: -4px; --hover-r: -0.4deg;
  outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
/* ====================== BÖLÜM 14 — SAFFRON LEXICON ====================== */
.saffron-lexicon{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.lexi-wrap{
  display: grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lexi-item{
  padding: 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.lexi-item::after{
  content:""; position:absolute; inset: -40% -40% auto auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,179,0,.18), transparent 60%);
  filter: blur(18px); opacity:.35; pointer-events:none;
}
.chip{
  display:inline-block; font-weight:800; letter-spacing:.2px; margin: 0 0 6px;
  padding: 6px 10px; border-radius: 999px; color:#14110f;
  background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  position: relative;
}
.chip::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-2px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, rgba(255,255,255,.6), transparent);
  opacity:.45; transition: width .25s ease;
}
.lexi-def{ margin: 0; color: #efe9e6; }
.lexi-note{ margin-top: 8px; max-width: 78ch; }

@media (max-width: 980px){
  .lexi-wrap{ grid-template-columns: 1fr; }
}

/* ====================== BÖLÜM 15 — HEAT & TIME LANES ====================== */
.heat-lanes{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 12% 0%, rgba(255,179,0,.10), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.lanes{ display: grid; gap: 12px; }
.lane{
  position: relative; padding: 12px 12px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.lane::before{
  /* dalga dolgusu */
  content:""; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 16px, rgba(255,255,255,.02) 16px 32px),
    linear-gradient(180deg, rgba(255,179,0,.12), rgba(14,107,168,.10));
  transition: width 1.6s ease;
  opacity:.6; pointer-events:none;
}
.lane.is-on::before{ width: var(--pct, 60%); }
.lane-title{ margin:0 0 4px; font-weight:800; }
.lane-text{ margin:0; color:#efe9e6; }

/* yüzdeler için yardımcı sınıflar */
.p-40{ --pct: 40%; }
.p-55{ --pct: 55%; }
.p-60{ --pct: 60%; }
.p-80{ --pct: 80%; }

/* renk aksanları */
.lane-slow{ outline-color: rgba(255,179,0,.16); }
.lane-mid{ outline-color: rgba(14,107,168,.16); }
.lane-hot{ outline-color: rgba(215,38,61,.16); }
.lane-rest{ outline-color: rgba(255,255,255,.12); }

/* ====================== BÖLÜM 16 — STONE MANIFESTO ====================== */
.stone-manifesto{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(600px 320px at 16% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 84% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.manifest{
  counter-reset: rule;
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rule{
  counter-increment: rule; position: relative; padding: 12px 12px 12px 40px;
  border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06); color:#efe9e6;
}
.rule::before{
  content: counter(rule);
  position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
  display:grid; place-items:center; font-weight:800; font-size: 13px; color:#14110f;
  background: radial-gradient(circle at 50% 35%, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

@media (max-width: 980px){
  .manifest{ grid-template-columns: 1fr; }
}
/* Manifest: hide default <ol> numbers to avoid duplication */
.manifest{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* На всякий случай для браузеров с упрямыми маркерами */
.manifest > li::marker{ content: ""; }
/* ===== Fix: Pairing Rhombus Matrix mobile overflow ===== */
.pairing-matrix .matrix{ justify-content: center; } /* центрируем сетку */
.pairing-matrix .tile{
  --mScale: 1;
  transform: rotate(45deg) scale(var(--mScale));
}
.pairing-matrix .tile:hover,
.pairing-matrix .tile:focus-within{
  transform: rotate(0deg) translateY(-4px) scale(var(--mScale));
}

/* ≤560px — прячем выступающие углы, уменьшаем ромбы, зазор — меньше */
@media (max-width: 560px){
  .pairing-matrix{
    overflow: hidden !important;          /* локально перекрываем общий "visible" */
    border-radius: var(--radius-xl);
  }
  .pairing-matrix .matrix{
    --tile-size: clamp(120px, 42vw, 150px);
    gap: clamp(8px, 2.8vw, 12px);
  }
  .pairing-matrix .tile{ --mScale: .90; }
}

/* очень узкие — ещё компактнее */
@media (max-width: 380px){
  .pairing-matrix .matrix{ --tile-size: clamp(108px, 40vw, 136px); }
  .pairing-matrix .tile{ --mScale: .84; }
}

/* на крайний случай (браузеры с субпиксельной прокруткой) — вырубим лишний скролл */
@media (max-width: 560px){
  .pairing-matrix .matrix{ overflow: hidden; }
}
/* Индекс карточек без инлайнов */
.stack-card { --i: 0; }
.stack-card.i-0 { --i: 0; }
.stack-card.i-1 { --i: 1; }
.stack-card.i-2 { --i: 2; }

/* если у тебя есть расчёты через var(--i), всё продолжит работать;
   пример позиционирования/слоя (оставь свой, если уже есть): */
.stack-card {
  position: relative;
  z-index: calc(10 + var(--i));
  transform: translateY(calc(var(--i) * -6px)) rotate(calc(var(--i) * 2deg));
  transition: transform .2s ease, box-shadow .25s ease;
}
.stack-card:hover { transform: translateY(calc(var(--i) * -6px - 4px)) rotate(calc(var(--i) * 2deg)); }