/* ===============================
   HAKKIMIZDA — COMMON TYPOGRAPHY
   =============================== */

.sp-about-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  margin-bottom: 10px;
}

.sp-about-title {
  font-family: "SolePointDisplay", system-ui, sans-serif;
  font-size: clamp(26px, 2.8vw + 16px, 34px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--sp-text-main);
}

.sp-about-subtitle {
  font-family: "SolePointDisplay", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw + 14px, 28px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--sp-text-main);
}

.sp-about-intro {
  font-size: 14px;
  line-height: 1.8;
}

/* Общий лимит ширины изображений для этой страницы */
.sp-about-hero-figure img,
.sp-about-design-figure img,
.sp-about-routes-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 1 — RİTİM & HİKÂYE HERO
   =============================== */

.sp-about-hero {
  border-radius: 32px;
  padding: 26px 26px 24px;
  background:
    radial-gradient(circle at top left, #ffe6d3 0, transparent 58%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: center;
}

.sp-about-hero-copy {
  max-width: 640px;
}

.sp-about-hero-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sp-about-hero-figure {
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 14px 30px rgba(138, 93, 56, 0.18);
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out,
    border-color 0.25s ease-out;
}

.sp-about-hero-figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(138, 93, 56, 0.26);
  border-color: rgba(255, 106, 60, 0.75);
}

.sp-about-hero-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 2 — TASARIM RİTMİ MASASI
   =============================== */

.sp-about-design {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff4e7 45%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-design-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.sp-about-design-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-about-design-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-design-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 3 — İSTANBUL ROTALARI PANOSU
   =============================== */

.sp-about-routes {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-routes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.sp-about-routes-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-about-routes-grid::before {
  content: "";
  position: absolute;
  inset: 6px 18px auto 18px;
  height: 2px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 106, 60, 0.5) 0,
      rgba(255, 106, 60, 0.5) 14px,
      rgba(255, 106, 60, 0.12) 14px,
      rgba(255, 106, 60, 0.12) 28px
    );
  opacity: 0.7;
  pointer-events: none;
}

.sp-about-routes-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-routes-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   RESPONSIVE — HAKKIMIZDA 1–3
   =============================== */

@media (max-width: 1024px) {
  .sp-about-hero-layout,
  .sp-about-design-layout,
  .sp-about-routes-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sp-about-hero,
  .sp-about-design,
  .sp-about-routes {
    padding-inline: 18px;
  }

  .sp-about-design-gallery,
  .sp-about-routes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .sp-about-hero,
  .sp-about-design,
  .sp-about-routes {
    padding-inline: 14px;
  }
}
/* Дополнительный лимит ширины для новых блоков */

.sp-about-team-figure img,
.sp-about-craft-figure img,
.sp-about-notes-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 4 — STÜDYO EKİBİ RİTMİ
   =============================== */

.sp-about-team {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at top right, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.sp-about-team-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-about-team-grid::before {
  content: "";
  position: absolute;
  inset: 6px 18px auto 18px;
  height: 2px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 106, 60, 0.45) 0,
      rgba(255, 106, 60, 0.45) 14px,
      rgba(255, 106, 60, 0.12) 14px,
      rgba(255, 106, 60, 0.12) 28px
    );
  opacity: 0.8;
  pointer-events: none;
}

.sp-about-team-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-team-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 5 — MALZEME KATMANLARI MASASI
   =============================== */

.sp-about-craft {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff4e7 45%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-craft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.sp-about-craft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-about-craft-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-craft-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 6 — GÜNLÜK NOT DEFTERİ SAYFALARI
   =============================== */

.sp-about-notes {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-notes-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-notes-list {
  margin-top: 12px;
  border-radius: 18px;
  padding: 10px 12px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 106, 60, 0.08) 0,
      rgba(255, 106, 60, 0.08) 24px,
      transparent 24px,
      transparent 48px
    ),
    #fffdf9;
  border: 1px dashed rgba(138, 93, 56, 0.4);
}

.sp-about-note-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(138, 93, 56, 0.2);
}

.sp-about-note-line:last-child {
  border-bottom: none;
}

.sp-about-note-time {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
}

.sp-about-note-text {
  margin: 0;
  font-size: 12px;
}

.sp-about-notes-images {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-about-notes-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-notes-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   RESPONSIVE — HAKKIMIZDA 4–6
   =============================== */

@media (max-width: 1024px) {
  .sp-about-team-layout,
  .sp-about-craft-layout,
  .sp-about-notes-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sp-about-team,
  .sp-about-craft,
  .sp-about-notes-shell {
    padding-inline: 18px;
  }

  .sp-about-team-grid,
  .sp-about-craft-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .sp-about-team,
  .sp-about-craft,
  .sp-about-notes-shell {
    padding-inline: 14px;
  }
}
/* Лимит ширины для новых изображений */

.sp-about-sound-figure img,
.sp-about-voices-figure img,
.sp-about-manifest-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 7 — ŞEHİR SES DALGALARI DUVARI
   =============================== */

.sp-about-sound {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at top left, #ffe6d3 0, transparent 60%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-sound-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.sp-about-sound-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "big small"
    "big small";
  gap: 10px;
}

.sp-about-sound-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-sound-figure--big {
  grid-area: big;
}

.sp-about-sound-figure--small {
  grid-area: small;
  align-self: end;
}

.sp-about-sound-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 8 — MÜŞTERİ SESLERİ KÖŞESİ
   =============================== */

.sp-about-voices {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff4e7 45%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-voices-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-voices-notes {
  margin-top: 10px;
  border-radius: 16px;
  padding: 10px 12px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 106, 60, 0.08) 0,
      rgba(255, 106, 60, 0.08) 22px,
      transparent 22px,
      transparent 44px
    ),
    #fffdf9;
  border: 1px dashed rgba(138, 93, 56, 0.4);
}

.sp-about-voice-line {
  margin: 0 0 4px;
  font-size: 12px;
}

.sp-about-voice-line:last-child {
  margin-bottom: 0;
}

.sp-about-voices-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-about-voices-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
  transform-origin: center;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out,
    border-color 0.25s ease-out;
}

.sp-about-voices-figure--top {
  transform: translateX(-4px) rotate(-1.2deg);
}

.sp-about-voices-figure--middle {
  transform: translateX(2px) rotate(0.6deg);
}

.sp-about-voices-figure--bottom {
  transform: translateX(-2px) rotate(-0.4deg);
}

.sp-about-voices-figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(138, 93, 56, 0.26);
  border-color: rgba(255, 106, 60, 0.75);
}

.sp-about-voices-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 9 — RİTİM AFİŞLERİ ŞERİDİ
   =============================== */

.sp-about-manifest {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-manifest-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-manifest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.sp-about-manifest-strip {
  position: relative;
  padding: 8px 10px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 106, 60, 0.08) 0,
      rgba(255, 106, 60, 0.08) 28px,
      transparent 28px,
      transparent 56px
    ),
    #fffdf9;
  border: 1px dashed rgba(138, 93, 56, 0.4);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.sp-about-manifest-figure {
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(138, 93, 56, 0.18);
  box-shadow: 0 10px 20px rgba(138, 93, 56, 0.18);
}

.sp-about-manifest-figure--map {
  transform-origin: left center;
}

.sp-about-manifest-figure--door {
  transform-origin: right center;
}

.sp-about-manifest-figure img {
  display: block;
}

/* ===============================
   RESPONSIVE — SECTIONS 7–9
   =============================== */

@media (max-width: 1024px) {
  .sp-about-sound-layout,
  .sp-about-voices-layout,
  .sp-about-manifest-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-about-manifest-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sp-about-sound,
  .sp-about-voices,
  .sp-about-manifest-shell {
    padding-inline: 18px;
  }

  .sp-about-sound-mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "big"
      "small";
  }
}

@media (max-width: 480px) {
  .sp-about-sound,
  .sp-about-voices,
  .sp-about-manifest-shell {
    padding-inline: 14px;
  }
}
/* Лимит ширины для новых изображений */

.sp-about-timeline-figure img,
.sp-about-lab-figure img,
.sp-about-rituals-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 10 — MARKA ZAMAN ÇİZELGESİ
   =============================== */

.sp-about-timeline {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at top left, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-timeline-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-about-timeline-track {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-about-timeline-track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #ff6a3c, #ffb45c, #36b9a2);
  opacity: 0.9;
}

.sp-about-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
}

.sp-about-timeline-step::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 106, 60, 0.6);
}

.sp-about-timeline-year {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
}

.sp-about-timeline-text strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: var(--sp-text-main);
}

.sp-about-timeline-text p {
  margin: 0;
  font-size: 12px;
}

.sp-about-timeline-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.sp-about-timeline-figure {
  margin: 0;
  padding: 8px 10px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-timeline-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 11 — KONFOR LABORATUVARI NOTLARI
   =============================== */

.sp-about-lab {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff4e7 45%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-lab-checks {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sp-about-lab-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-main);
}

.sp-about-lab-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
}

.sp-about-lab-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-about-lab-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-lab-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 12 — MAĞAZA İÇİ RİTÜELLER
   =============================== */

.sp-about-rituals {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-rituals-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-rituals-columns {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sp-about-rituals-title {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-main);
}

.sp-about-rituals-text {
  margin: 0;
  font-size: 12px;
}

.sp-about-rituals-photos {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-about-rituals-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-rituals-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   RESPONSIVE — SECTIONS 10–12
   =============================== */

@media (max-width: 1024px) {
  .sp-about-lab-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-about-rituals-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sp-about-timeline,
  .sp-about-lab,
  .sp-about-rituals-shell {
    padding-inline: 18px;
  }

  .sp-about-lab-checks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .sp-about-timeline,
  .sp-about-lab,
  .sp-about-rituals-shell {
    padding-inline: 14px;
  }
}
/* Лимит ширины для новых изображений */

.sp-about-escape-figure img,
.sp-about-night-figure img,
.sp-about-care-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 13 — ŞEHİR DIŞI İLHAM ROTALARI
   =============================== */

.sp-about-escape {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-escape-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-escape-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-about-escape-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #fff4e7;
  color: #7b5a3a;
  border: 1px solid rgba(138, 93, 56, 0.4);
  opacity: 0.8;
}

.sp-about-escape-photos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sp-about-escape-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-escape-figure--top {
  transform-origin: left top;
  transform: translateX(-4px) rotate(-0.8deg);
}

.sp-about-escape-figure--bottom {
  transform-origin: right bottom;
  transform: translateX(4px) rotate(0.8deg);
}

.sp-about-escape-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 14 — GECE IŞIKLARI VE VİTRİN DENEYLERİ
   =============================== */

.sp-about-night {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-night-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff0e3 42%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-night-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.sp-about-night-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sp-about-night-figure {
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  background: #1e1724;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 32px rgba(10, 0, 40, 0.6);
}

.sp-about-night-figure--left {
  transform-origin: left center;
}

.sp-about-night-figure--right {
  transform-origin: right center;
}

.sp-about-night-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: #f5e9ff;
}

/* ===============================
   SECTION 15 — BAKIM VE ÖMÜR DİYALOĞU
   =============================== */

.sp-about-care {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at top left, #ffe6d3 0, transparent 60%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-care-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-care-list {
  margin: 10px 0 0;
  padding-left: 16px;
  font-size: 12px;
}

.sp-about-care-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-about-care-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-care-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   RESPONSIVE — SECTIONS 13–15
   =============================== */

@media (max-width: 1024px) {
  .sp-about-escape-layout,
  .sp-about-night-layout,
  .sp-about-care-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sp-about-escape,
  .sp-about-night-shell,
  .sp-about-care {
    padding-inline: 18px;
  }

  .sp-about-escape-figure--top,
  .sp-about-escape-figure--bottom {
    transform: none;
  }
}

@media (max-width: 480px) {
  .sp-about-escape,
  .sp-about-night-shell,
  .sp-about-care {
    padding-inline: 14px;
  }
}
/* Лимит ширины для новых изображений */

.sp-about-future-figure img,
.sp-about-community-figure img,
.sp-about-closingstory-figure img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SECTION 16 — GELECEK ROTALARI VE ARAŞTIRMALAR
   =============================== */

.sp-about-future {
  border-radius: 30px;
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at top left, #ffe6d3 0, transparent 60%),
    var(--sp-surface-soft);
  border: 1px solid var(--sp-border-soft);
}

.sp-about-future-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sp-about-future-notes {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.sp-about-future-note {
  padding: 8px 10px;
  border-radius: 16px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.18);
  box-shadow: 0 10px 20px rgba(138, 93, 56, 0.12);
}

.sp-about-future-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-main);
}

.sp-about-future-note p {
  margin: 0;
  font-size: 12px;
}

.sp-about-future-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-about-future-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-future-figure--wall {
  transform-origin: left top;
  transform: translateX(-3px) rotate(-0.6deg);
}

.sp-about-future-figure--proto {
  transform-origin: right bottom;
  transform: translateX(3px) rotate(0.6deg);
}

.sp-about-future-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 17 — TOPLULUK VE ATÖLYE GÜNLERİ
   =============================== */

.sp-about-community {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-community-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    linear-gradient(135deg, #ffffff 0, #fff4e7 45%, #ffffff 100%);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.sp-about-community-points {
  margin-top: 10px;
  font-size: 12px;
}

.sp-about-community-points p {
  margin: 0 0 4px;
}

.sp-about-community-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sp-about-community-figure {
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-community-figure--run {
  transform-origin: left center;
}

.sp-about-community-figure--workshop {
  transform-origin: right center;
}

.sp-about-community-figure figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--sp-text-muted);
}

/* ===============================
   SECTION 18 — HİKÂYE YOLUNUN KAPANIŞ ADIMI
   =============================== */

.sp-about-closingstory {
  border-radius: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.sp-about-closingstory-shell {
  border-radius: 32px;
  padding: 24px 26px 24px;
  background:
    radial-gradient(circle at bottom right, #ffe6d3 0, transparent 60%),
    var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
  box-shadow: var(--sp-shadow-soft);
}

.sp-about-closingstory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.sp-about-closingstory-cta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-about-closingstory-cta .sp-btn {
  white-space: normal;
}

.sp-about-closingstory-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.sp-about-closingstory-figure {
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid rgba(138, 93, 56, 0.22);
  box-shadow: 0 12px 24px rgba(138, 93, 56, 0.16);
}

.sp-about-closingstory-figure--sign {
  transform-origin: center;
  transform: translateY(0);
}

.sp-about-closingstory-figure--logo {
  transform-origin: center;
  transform: translateY(-4px);
}

/* ===============================
   RESPONSIVE — SECTIONS 16–18
   =============================== */

@media (max-width: 1024px) {
  .sp-about-future-layout,
  .sp-about-community-layout,
  .sp-about-closingstory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-about-closingstory-strip {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .sp-about-future,
  .sp-about-community-shell,
  .sp-about-closingstory-shell {
    padding-inline: 18px;
  }

  .sp-about-future-figure--wall,
  .sp-about-future-figure--proto {
    transform: none;
  }

  .sp-about-closingstory-cta {
    flex-direction: column;
  }

  .sp-about-closingstory-cta .sp-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sp-about-future,
  .sp-about-community-shell,
  .sp-about-closingstory-shell {
    padding-inline: 14px;
  }
}