/* ===========================================================================
   YEDİPERA — Shell, section rhythm, section themes
   =========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}

.section--light {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(196, 167, 119, 0.06) 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(11, 28, 51, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #f8f9fb 0%, #ffffff 48%, #f4f6f9 100%);
  color: var(--text-body);
}

.section--muted {
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
    linear-gradient(165deg, #eef1f5 0%, #f2f4f7 55%, #e8ecf1 100%);
  color: var(--text-body);
}

.section--dark {
  background: var(--navy);
  color: var(--text-on-dark);
}

.section--ink {
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(30, 72, 120, 0.45) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 100%, rgba(196, 167, 119, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #0a1f3a 0%, #071423 55%, #040d18 100%);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--white);
}

/* A hairline seam between consecutive light sections keeps the architectural
   grid legible without a heavy divider. */
.section--light + .section--muted,
.section--muted + .section--light {
  border-top: 1px solid var(--rule-soft);
}

/* --- Section headers ----------------------------------------------------- */

.sectionhead {
  display: flex;
  flex-direction: column;
  gap: var(--stack-3);
  margin-bottom: var(--stack-6);
  max-width: 62rem;
}

.sectionhead__note {
  max-width: var(--measure);
  color: var(--text-muted);
}

.section--dark .sectionhead__note {
  color: var(--text-on-dark-muted);
}

.sectionhead--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  column-gap: var(--gutter);
  row-gap: var(--stack-3);
}

.sectionhead--split > div {
  display: flex;
  flex-direction: column;
  gap: var(--stack-3);
}

.sectionhead--split .sectionhead__note {
  padding-bottom: 0.4rem;
  border-top: 1px solid var(--rule);
  padding-top: var(--stack-3);
}

.section--dark .sectionhead--split .sectionhead__note {
  border-top-color: var(--rule-light);
}

.sectionhead--center {
  align-items: center;
  text-align: center;
  max-width: none;
}

@media (max-width: 900px) {
  .sectionhead--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .sectionhead--split .sectionhead__note {
    max-width: 40rem;
  }
}

/* --- Shared geometric motif --------------------------------------------- */

.motif {
  width: auto;
  color: var(--rule-strong);
  overflow: visible;
}

.motif--seven {
  height: clamp(120px, 15vw, 210px);
}