/* ===== Page 2 base ===== */
.page2-title{ margin: 0 0 8px; }

/* -------- Bölüm 1: Atlas Trio (fan cards) -------- */
.atlas-trio{
  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(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-x: hidden;
}
.atlas-trio__grid{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 3vw, 28px);
  align-items: center;
}
.atlas-trio__text .bullets{ margin: 8px 0 0; padding-left: 18px; }
.atlas-fan{ position: relative; display: grid; place-items: center; min-height: 300px; }
.fan-card{
  position: absolute; width: min(92%, 360px); max-width: 350px;
  padding: 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,.08); box-shadow: var(--shadow-soft);
  transition: transform .25s ease, outline-color .2s ease, box-shadow .25s ease;
}
.fan-card:nth-child(1){ transform: rotate(-10deg) translate(-20px, -16px); }
.fan-card:nth-child(2){ transform: rotate(0deg) translate(6px, 6px); z-index: 2; }
.fan-card:nth-child(3){ transform: rotate(10deg) translate(28px, -10px); }
.fan-card img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.fan-card figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.fan-card:hover{ transform: translateY(-6px) scale(1.02); outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.45); }

@media (max-width: 980px){
  .atlas-trio__grid{ grid-template-columns: 1fr; }
  .atlas-fan{ min-height: unset; display: grid; gap: 12px; }
  .fan-card{ position: relative; transform: none !important; width: 100%; }
}

/* -------- Bölüm 2: Atölye Basamakları -------- */
.atlas-steps{
  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% 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);
}
.steps3{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2.6vw, 18px); }
.s3{
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.s3-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.s3-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.s3-txt h3{ margin: 0 0 4px; }
@media (max-width: 700px){
  .s3{ grid-template-columns: 1fr; }
}

/* -------- Bölüm 3: Çay Halkası -------- */
.atlas-circle{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.circle{ position: relative; width: min(540px, 92%); aspect-ratio: 1/1; margin: 0 auto; }
.circle-ring{
  position: absolute; inset: 0; border-radius: 50%;
  outline: 1px dashed rgba(255,255,255,.1);
  animation: cspin 24s linear infinite;
}
@keyframes cspin{ to{ transform: rotate(360deg); } }

.citem{
  --base: 0deg; --r: 40%;
  position: absolute; left: 50%; top: 50%; transform-origin: center center;
  transform: rotate(var(--base)) translateY(calc(-1 * var(--r)));
}
.c1{ --base: 330deg; } .c2{ --base: 90deg; } .c3{ --base: 210deg; }

.citem img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.citem figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

/* keep cards upright while ring spins */
.atlas-circle .citem .p2-tilt{ transform: rotate(calc(-1 * var(--base))) translateY(0); }

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

@media (max-width: 560px){
  .circle{ width: min(420px, 92%); }
  .citem{ --r: 37%; }
}
/* Отступ под фикс-хеддер для контента страницы 2 */
.page2-main{
  padding-top: calc(var(--header-h) + 12px);
}
@supports (padding: max(0px)){
  .page2-main{
    padding-top: calc(var(--header-h) + max(12px, env(safe-area-inset-top)));
  }
}
/* --- Bring hovered figure to front (fan, steps, circle) --- */
@media (hover:hover){
  .atlas-fan .fan-card,
  .steps3 .s3-fig,
  .atlas-circle .citem{
    position: relative;
    z-index: 1;
    transition: z-index 0s, transform .25s ease, box-shadow .25s ease, outline-color .2s ease;
  }

  /* hovered element goes on top */
  .atlas-fan .fan-card:hover,
  .steps3 .s3-fig:hover,
  .atlas-circle .citem:hover{
    z-index: 9;
    transform: translateY(-6px) scale(1.03);
    outline-color: rgba(255,179,0,.45);
    box-shadow: 0 22px 58px rgba(0,0,0,.55);
  }

  /* optional: softly dim non-hovered siblings (supported in modern browsers) */
  .atlas-fan:has(.fan-card:hover) .fan-card:not(:hover),
  .steps3:has(.s3-fig:hover) .s3-fig:not(:hover),
  .atlas-circle:has(.citem:hover) .citem:not(:hover){
    filter: brightness(.92);
  }
}
/* -------- Bölüm 3 (NEW): Tea Flip Deck -------- */
.tea-flip{
  --card-h: 300px;
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.flip-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2.6vw, 18px); place-items: center;
}
.flip-card{
  width: min(100%, 360px); max-width: 350px; height: var(--card-h);
  margin: 0; padding: 0; border: none;
  perspective: 1200px; position: relative;
  border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.flip-inner{
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .6s ease;
}
.flip-card:hover .flip-inner{ transform: rotateY(180deg); }
.flip-card.is-flipped .flip-inner{ transform: rotateY(180deg); }

.flip-front, .flip-back{
  position: absolute; inset: 0; border-radius: 16px; padding: 10px;
  display: grid; align-content: center; justify-items: center;
  backface-visibility: hidden;
}
.flip-front img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.flip-front figcaption{ font-size: 12px; color: var(--muted); padding-top: 6px; }

.flip-back{
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, rgba(255,179,0,.08), rgba(14,107,168,.06));
}
.flip-back h3{ margin: 0 0 6px; }
.flip-back ul{ margin: 0; padding-left: 18px; }

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

@media (max-width: 560px){
  .tea-flip{ --card-h: 280px; }
  .flip-grid{ grid-template-columns: 1fr; }
}
/* -------- Bölüm 4: Atelier Diptych -------- */
.atelier-diptych{
  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);
}
.diptych-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2.6vw, 18px);
}
.dip{
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.dip img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.dip figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.dip:hover{ transform: translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }

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

/* -------- Bölüm 5: Snap Tasting (horizontal snap, safe) -------- */
.snap-tasting{
  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% 14%, 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);
}
.snap-rail{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px);
  gap: 12px; padding-bottom: 6px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;     /* iOS smooth */
  scrollbar-width: none;
}
.snap-rail::-webkit-scrollbar{ display: none; }
.snap-card{
  scroll-snap-align: center; position: relative;
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.snap-card img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.snap-card figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.snap-note{ max-width: 78ch; margin-top: 8px; }

@media (min-width: 981px){
  .snap-rail{ grid-auto-columns: 280px; }
}

/* -------- Bölüm 6: Sauce Triad -------- */
.sauce-triad{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.triad{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2.6vw, 18px); align-items: start;
}
.cup{
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.cup img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.cup figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.cup:hover{ transform: translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.triad-note{ max-width: 78ch; margin-top: 8px; }

@media (max-width: 980px){
  .triad{ grid-template-columns: 1fr; }
}
/* ===== Bölüm 4: Zigzag Trail ===== */
.zigzag-trail{
  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);
  position: relative;
}
.trail{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.step{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:16px;
}
.step.left .step-media{ order:1; } .step.left .step-text{ order:2; text-align:left; }
.step.right .step-media{ order:2; } .step.right .step-text{ order:1; text-align:right; }

.step-media{
  padding:10px; border-radius:999px; width:min(100%, 360px); margin:0 auto;
  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); overflow:hidden;
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
  clip-path: circle(48% at 50% 50%);
}
.step-media img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.step-media figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
.step-media:hover{ transform: translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.step-text h3{ margin:0 0 4px; }
.step-text p{ margin:0; color:#efe9e6; }

.trail-spine{
  position:absolute; left:50%; top:12px; bottom:12px; width:3px; transform:translateX(-50%);
  background: linear-gradient(180deg, var(--saffron-500), var(--pomegranate-500));
  opacity:.28; border-radius:2px;
}

@media (max-width: 980px){
  .step{ grid-template-columns: 1fr; }
  .step.right .step-text{ text-align:left; }
}

/* ===== Bölüm 5: Recipe Tabs ===== */
.recipe-tabs{
  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% 14%, 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);
}
.tablist{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.tab{
  padding:8px 12px; border-radius:999px; font-weight:800; cursor:pointer; border:0;
  color:#14110f; background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  outline:1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, outline-color .2s ease, box-shadow .25s ease;
}
.tab[aria-selected="true"]{
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  outline-color: rgba(255,179,0,.35);
}
.panel{ display:grid; grid-template-columns: auto 1fr; gap:14px; }
.panel[hidden]{ display:none; }
.panel-fig img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.panel-fig figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
@media (max-width: 800px){
  .panel{ grid-template-columns: 1fr; }
}

/* ===== Bölüm 6: Flavor Equation ===== */
.flavor-equation{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow:hidden;
}
.equation{
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items:center; gap:12px;
  justify-items:center;
}
.eq{
  padding:10px; border-radius:16px; outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.eq img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.eq figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }

.op{
  font-weight:900; font-size: clamp(24px, 5vw, 40px); line-height:1;
  padding:6px 10px; border-radius:12px; color:#14110f;
  background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.op.eq{
  background: linear-gradient(90deg, var(--tile-700), var(--saffron-500));
  animation: eqPulse 2.8s ease-in-out infinite;
}
@keyframes eqPulse{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.2); }
}

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

@media (max-width: 900px){
  .equation{ grid-template-columns: 1fr; }
  .op{ order: 2; }
  .eq-a{ order:1; } .eq-b{ order:3; } .eq-c{ order:5; }
  .op.plus{ order:2; } .op.eq{ order:4; }
}
/* -------- Bölüm 7: Scent Compass -------- */
.scent-compass{
  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);
  overflow: hidden;
}
.compass-wrap{
  position: relative; max-width: 980px; margin: 0 auto;
  display: grid; place-items: center; min-height: 360px;
}
.compass-face{
  position: absolute; width: min(520px, 90%); aspect-ratio: 1/1; border-radius: 50%;
  outline: 1px dashed rgba(255,255,255,.12);
}
.compass-face .tick{
  position: absolute; left: 50%; top: 50%; width: 3px; height: 36%;
  transform-origin: 50% 100%; background: linear-gradient(180deg, var(--saffron-500), var(--pomegranate-500));
  opacity: .28; border-radius: 3px;
}
.tick.t1{ transform: translate(-50%, -100%) rotate(0deg); }
.tick.t2{ transform: translate(-50%, -100%) rotate(120deg); }
.tick.t3{ transform: translate(-50%, -100%) rotate(240deg); }

.node{
  position: absolute; width: min(92%, 360px); max-width: 350px;
  padding: 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); box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease, z-index 0s;
}
.node img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.node figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.node:hover{ z-index: 3; transform: translateY(-6px); outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.45); }

/* позиционирование трёх узлов по кругу */
.n1{ transform: translate(-50%, -50%) rotate(0deg);    --deg: 0deg; }
.n2{ transform: translate(-50%, -50%) rotate(120deg);  --deg: 120deg; }
.n3{ transform: translate(-50%, -50%) rotate(240deg);  --deg: 240deg; }
.n1, .n2, .n3{
  left: 50%; top: 50%;
  /* выносим по радиусу и возвращаем наклон, чтобы карточки были ровные */
  transform: translate(-50%, -50%) rotate(var(--deg)) translateY(-44%) rotate(calc(-1 * var(--deg)));
}

.compass-note{ max-width: 78ch; margin-top: 8px; }
@media (max-width: 560px){
  .compass-wrap{ min-height: 320px; }
  .compass-face{ width: min(420px, 92%); }
}

/* -------- Bölüm 8: Recipe Accordion -------- */
.recipe-accordion{
  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% 16%, 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);
}
.acc{ display: grid; gap: 10px; }
.acc-btn{
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 0; cursor: pointer;
  font-weight: 800; color: #14110f;
  background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.acc-panel{
  overflow: hidden; max-height: 0; transition: max-height .35s ease, opacity .25s ease;
  opacity: 0; padding: 0 6px;
}
.acc-panel[hidden]{ display: block; } /* чтобы анимация работала, скрываем только ARIA'й */
.acc-panel.is-open{
  opacity: 1; padding-top: 8px; padding-bottom: 6px;
}
.acc-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.acc-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

/* -------- Bölüm 9: Sticky Showcase -------- */
.sticky-showcase{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.sticky-grid{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
}
.sticky-fig{
  position: sticky; top: calc(var(--header-h) + 14px);
  padding: 10px; border-radius: 16px; outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.sticky-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.sticky-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

.sticky-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.s-step{ padding: 12px; border-radius: 14px; outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.s-step.is-on{ outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 44px rgba(0,0,0,.45); }

@media (max-width: 900px){
  .sticky-grid{ grid-template-columns: 1fr; }
}
/* -------- Bölüm 10: Story Grid -------- */
.story-grid{
  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);
}
.sg-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 2.6vw, 18px);
}
.sg-cell{
  padding: 12px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.sg-txt{ grid-column: span 2; }
.sg-img{ grid-column: span 2; text-align:center; }
.sg-img img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.sg-img figcaption{ font-size: 12px; color: var(--muted); padding-top: 6px; }
.sg-quote{
  grid-column: span 2; font-style: italic; color:#efe9e6;
  position: relative; padding-left: 40px;
}
.sg-quote::before{
  content:"“"; position:absolute; left:12px; top:6px; font-size:36px; line-height:1; opacity:.35;
}
@media (max-width: 980px){
  .sg-txt, .sg-img, .sg-quote{ grid-column: span 6; }
}

/* -------- Bölüm 11: Spotlight Single -------- */
.spotlight-single{
  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% 14%, 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);
  overflow: hidden;
}
.spot{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
}
.spot-fig{
  position: relative; padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(140px 140px at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: box-shadow .25s ease, outline-color .2s ease;
}
.spot-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.spot-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }
.spot-fig:hover{ outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.45); }

.spot-hints{ margin: 0; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 900px){
  .spot{ grid-template-columns: 1fr; }
}

/* -------- Bölüm 12: Split Compare (left/right emphasis) -------- */
.split-compare{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.sc-controls{
  display: inline-flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.sc-btn{
  padding: 8px 12px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800;
  color: #14110f; background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  outline: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .16s ease, outline-color .2s ease, box-shadow .25s ease, filter .2s ease;
}
.sc-btn.is-on{ outline-color: rgba(255,179,0,.35); }
.sc-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
.sc-left, .sc-right{
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .25s ease, outline-color .2s ease, filter .2s ease;
}
.sc-left img, .sc-right img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.sc-left figcaption, .sc-right figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }

/* emphasis states */
.split-compare.is-left  .sc-left{  transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,.45); outline-color: rgba(255,179,0,.35); }
.split-compare.is-left  .sc-right{ filter: brightness(.92); }
.split-compare.is-right .sc-right{ transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,.45); outline-color: rgba(255,179,0,.35); }
.split-compare.is-right .sc-left{  filter: brightness(.92); }

@media (max-width: 900px){
  .sc-grid{ grid-template-columns: 1fr; }
}
/* -------- Bölüm 13: Edge Note -------- */
.edge-note{
  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);
}
.edge-grid{
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start;
}
.edge-scale{
  position: relative; width: 46px; height: 100%; min-height: 220px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center;
}
.edge-meter{
  --h: 0%;
  position: absolute; bottom: 10px; left: 10px; right: 10px; height: var(--h); border-radius: 999px;
  background: linear-gradient(180deg, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 8px 22px rgba(0,0,0,.35) inset;
  transition: height .9s ease;
}
.edge-scale.on .edge-meter{ --h: 78%; }

.edge-marks{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; z-index: 1;
  font-size: 11px; color: #efe9e6; text-align: center;
}

.edge-text{
  padding: 12px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.edge-fig{
  padding: 10px; border-radius: 16px; text-align: center;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.edge-fig img{ width: 100%; max-width: 350px; border-radius: 12px; outline: 1px solid rgba(255,255,255,.08); }
.edge-fig figcaption{ font-size: 12px; color: var(--muted); padding-top: 6px; }

@media (max-width: 900px){
  .edge-grid{ grid-template-columns: 1fr; }
  .edge-scale{ order:3; width: 100%; height: 80px; border-radius: 12px; }
  .edge-meter{ left: 10px; right: auto; width: var(--h); height: calc(100% - 20px); top: 10px; bottom: 10px; border-radius: 10px; transition: width .9s ease; }
  .edge-scale.on .edge-meter{ --h: 85%; }
  .edge-marks{ grid-auto-flow: column; justify-content: space-between; width: calc(100% - 20px); position: relative; }
}

/* -------- Bölüm 14: Fold Card -------- */
.fold-card{
  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% 14%, 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);
  overflow: hidden;
}
.fold-wrap{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
.fold-fig{
  position: relative; padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.fold-fig::after{
  content:""; position: absolute; right: 10px; top: 10px; width: 42px; height: 42px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.15)),
    linear-gradient(135deg, var(--saffron-500), var(--pomegranate-500));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 12px; filter: brightness(1.05);
  transition: transform .25s ease, filter .25s ease;
}
.fold-fig:hover::after{ transform: translateY(-2px); filter: brightness(1.2); }
.fold-fig img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.fold-fig figcaption{ font-size: 12px; color: var(--muted); text-align:center; padding-top: 6px; }

.fold-text{
  padding: 12px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}

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

/* -------- Bölüm 15: Perforated Card -------- */
.perforated-card{
  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(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.perf-wrap{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  position: relative;
}
.perf-wrap::before{
  /* delikli kenar — perforaj */
  content:""; position: absolute; left: calc(50% - 1px); top: 8px; bottom: 8px; width: 2px;
  background:
    radial-gradient(circle 3px at 50% 6px, rgba(255,255,255,.65) 98%, transparent 101%) repeat-y;
  background-size: 2px 16px;
  opacity:.5;
}
.perf-fig{
  padding: 10px; border-radius: 16px;
  outline: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.perf-fig img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.perf-fig figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }

.perf-notes{
  margin: 0; padding-left: 18px; display: grid; gap: 6px;
}
@media (max-width: 900px){
  .perf-wrap{ grid-template-columns: 1fr; }
  .perf-wrap::before{ display: none; }
}
/* === Fix: keep notes strictly to the right of the dotted divider (Bölüm 15) === */
@media (min-width: 901px){
  .perforated-card .perf-wrap{
    display: grid;
    grid-template-columns: minmax(0, auto) 2px 1fr; /* fig | divider | notes */
    column-gap: clamp(16px, 3vw, 28px);
    align-items: start;
  }

  /* turn the divider into a real grid column */
  .perforated-card .perf-wrap::before{
    content: "";
    position: static;              /* override previous absolute */
    display: block;
    grid-column: 2;                /* middle column */
    justify-self: center;
    align-self: stretch;
    width: 2px;

    /* perforation dots */
    background:
      radial-gradient(circle 3px at 50% 6px, rgba(255,255,255,.65) 98%, transparent 101%) repeat-y;
    background-size: 2px 16px;
    opacity: .5;
  }

  /* explicit columns for children */
  .perforated-card .perf-fig   { grid-column: 1; }
  .perforated-card .perf-notes { grid-column: 3; padding-left: 0; } /* текст строго справа */
}

/* safety: on narrow screens линия скрывается как раньше */
@media (max-width: 900px){
  .perforated-card .perf-wrap::before{ display: none; }
}