/* Section "bakis" — "Kimilerine göre; / Bizim için ise;" — crossed out, then turned to gold. */

.s-bakis {
  position: relative;
  background: var(--bg);
  --bk-ring: min(70svh, 620px); /* [hybrid] ring diameter; the statement is sized from it so it always stays inside the circle */
}
.s-bakis .bakis__track {
  height: 250vh;
}
.s-bakis .bakis__stage {
  display: flex;
  align-items: center;
  background:
    radial-gradient(52% 60% at 72% 52%, rgba(124, 13, 18, 0.09), transparent 72%),
    radial-gradient(40% 55% at 18% 50%, rgba(6, 4, 3, 0.6), transparent 75%);
}
.s-bakis .bakis__canvas,
.s-bakis .bakis__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.s-bakis .bakis__marks {
  overflow: visible;
}

/* ------------------------------------------------------------ grid */
.s-bakis .bakis__grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 42fr) 1px minmax(0, 58fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: calc(var(--nav-h) * 0.4);
}
.s-bakis .bakis__col {
  position: relative;
  min-width: 0;
}
.s-bakis .bakis__col--them {
  z-index: 1;
  display: grid;
  justify-items: start;
  padding-block: clamp(40px, 8vh, 96px);
}
.s-bakis .bakis__col--us {
  z-index: 3;
  isolation: isolate;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: clamp(40px, 8vh, 96px);
}
.s-bakis .bakis__divider {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 1px;
  height: min(58svh, 480px);
  background: linear-gradient(180deg, transparent, var(--line) 26%, rgba(231, 200, 120, 0.22) 50%, var(--line) 74%, transparent);
  transform-origin: 50% 50%;
  transform: scaleY(var(--d, 1));
}

/* ------------------------------------------------------------ labels */
.s-bakis .bakis__label {
  margin-bottom: clamp(18px, 2.2vw, 30px);
  color: var(--dim);
}
.s-bakis .bakis__label--them {
  color: color-mix(in srgb, var(--muted) calc(var(--k, 1) * 100%), var(--dim));
}
.s-bakis .bakis__label--us {
  color: color-mix(in srgb, var(--gold-bright) calc(var(--k, 1) * 100%), var(--dim));
  /* embers pass behind this label on their way in; a dark halo keeps it legible */
  text-shadow: 0 0 3px var(--bg), 0 0 10px var(--bg), 0 0 18px rgba(10, 8, 7, 0.9);
}
.s-bakis .bakis__label--us::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

/* ------------------------------------------------------------ the four views */
.s-bakis .bakis__list {
  list-style: none;
  display: grid;
  justify-items: start;
  gap: 0.08em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.36;
  color: var(--muted);
}
.s-bakis .bakis__item {
  position: relative;
  width: max-content;
  max-width: 100%;
}
/* ember → ash: --heat (0..0.7) warms and glows the glyphs while their embers leave,
   --ash (0..1) cools them to --dim (the dimmest AA text colour) — always at full opacity */
.s-bakis .bakis__phrase {
  --heat: 0;
  --ash: 0;
  white-space: nowrap;
  color: color-mix(in srgb, #f3b866 calc(var(--heat) * 80%), color-mix(in srgb, var(--dim) calc(var(--ash) * 100%), var(--muted)));
  text-shadow:
    0 0 calc(var(--heat) * 16px) rgba(216, 35, 42, calc(var(--heat) * 1)),
    0 0 calc(var(--heat) * 5px) rgba(231, 200, 120, calc(var(--heat) * 1));
}
.s-bakis .bakis__strike {
  position: absolute;
  left: 0;
  top: 50%;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
  --g: 0;
  filter: drop-shadow(0 0 3px color-mix(in srgb, rgba(231, 200, 120, 0.45) calc(var(--g) * 100%), rgba(216, 35, 42, 0.5)));
}
.s-bakis .bakis__stop--a {
  stop-color: var(--red);
}
.s-bakis .bakis__stop--b {
  stop-color: var(--crimson);
}
.s-bakis .bakis__stop--c {
  stop-color: var(--gold-bright);
}
.s-bakis .bakis__ink--gold {
  fill: var(--gold-bright);
  opacity: 0;
}
.s-bakis .bakis__nib {
  fill: #fff1cf;
  opacity: 0;
}
.s-bakis.is-measuring .bakis__item {
  transform: none !important;
}

/* ------------------------------------------------------------ the ring the strikes build */
.s-bakis .bakis__guide {
  fill: none;
  stroke: rgba(231, 200, 120, 0.3);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0;
}
.s-bakis .bakis__arc,
.s-bakis .bakis__arc-halo,
.s-bakis .bakis__throw,
.s-bakis .bakis__throw-halo {
  fill: none;
  stroke-linecap: round;
  visibility: hidden;
}
.s-bakis .bakis__arc {
  stroke: var(--gold-bright);
  stroke-width: 1.6;
}
.s-bakis .bakis__arc-halo {
  stroke: var(--gold);
  stroke-width: 8;
  stroke-opacity: 0.12;
}
.s-bakis .bakis__throw {
  stroke: #ffe9b8;
  stroke-width: 1.6;
}
.s-bakis .bakis__throw-halo {
  stroke: var(--gold);
  stroke-width: 7;
  stroke-opacity: 0.22;
}
.s-bakis .bakis__spark {
  opacity: 0;
}
.s-bakis .bakis__spark-core {
  fill: #fff4d8;
}
.s-bakis .bakis__spark-halo {
  fill: var(--gold-bright);
  opacity: 0.28;
}
.s-bakis .bakis__ticks {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0;
}

/* ------------------------------------------------------------ statement */
.s-bakis .bakis__title {
  /* [hybrid] never bigger than before, and never wider than the ring allows: the longest line "referans noktası…" used to touch (0.98) or leave (1.11 at 1280×720) the circle */
  font-size: min(calc(var(--bk-ring) * 0.088), clamp(34px, 4.6vw, 64px));
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gold-bright);
  text-shadow: 0 0 50px rgba(179, 21, 27, 0.4);
  max-width: 8.7em; /* [hybrid] always the same three lines: Stratejik ve / kreatif bir / referans noktası… */
}
.s-bakis .bakis__w {
  opacity: 0;
}
.s-bakis .bakis__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: var(--bk-ring);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  pointer-events: none;
}
.s-bakis .bakis__ring-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 150px 14px rgba(179, 21, 27, 0.17), inset 0 0 110px rgba(231, 200, 120, 0.07);
  opacity: 0;
}

/* ------------------------------------------------------------ ≥1100px: stay clear of the rail */
@media (min-width: 1100px) {
  .s-bakis .bakis__col--us {
    padding-right: 12px;
  }
}

/* ------------------------------------------------------------ mobile: stacked */
@media (max-width: 759px) {
  .s-bakis .bakis__track {
    height: 240vh;
  }
  .s-bakis .bakis__stage {
    align-items: stretch;
    background: radial-gradient(90% 40% at 50% 70%, rgba(124, 13, 18, 0.1), transparent 75%);
  }
  .s-bakis .bakis__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 1px minmax(0, 1fr);
    row-gap: 0;
    padding-top: var(--nav-h);
    padding-bottom: clamp(24px, 6svh, 56px);
    height: 100%;
  }
  .s-bakis .bakis__col {
    align-self: center;
    justify-self: stretch;
    display: grid;
    justify-items: center;
    text-align: center;
  }
  .s-bakis .bakis__col--us {
    padding-block: 0;
  }
  .s-bakis .bakis__label--them::after {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
  }
  .s-bakis .bakis__list {
    justify-items: center;
  }
  .s-bakis .bakis__divider {
    width: min(62%, 240px);
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent, var(--line) 30%, rgba(231, 200, 120, 0.22) 50%, var(--line) 70%, transparent);
    transform: scaleX(var(--d, 1));
  }
  .s-bakis {
    --bk-ring: min(80vw, 316px);
  }
  .s-bakis .bakis__title {
    font-size: min(calc(var(--bk-ring) * 0.088), clamp(28px, 7.6vw, 32px));
    max-width: 8.7em;
  }
  .s-bakis .bakis__ring {
    width: var(--bk-ring);
  }
  /* the stage clips overflow: keep the glow inside it (no hard edge at the section's exit) */
  .s-bakis .bakis__ring-glow {
    box-shadow: 0 0 70px 6px rgba(179, 21, 27, 0.16), inset 0 0 60px rgba(231, 200, 120, 0.07);
  }
}

/* ------------------------------------------------------------ reduced motion: final composition, in flow */
html.reduced-motion .s-bakis .bakis__track {
  height: auto;
}
html.reduced-motion .s-bakis .bakis__stage {
  position: relative;
  height: auto;
  overflow: visible;
  padding: var(--section-pad) 0;
}
html.reduced-motion .s-bakis .bakis__canvas {
  display: none;
}
html.reduced-motion .s-bakis .bakis__grid {
  padding-top: 0;
}
@media (max-width: 759px) {
  html.reduced-motion .s-bakis .bakis__grid {
    height: auto;
    padding-bottom: 0;
    grid-template-rows: auto auto auto;
    row-gap: clamp(56px, 12vw, 80px);
  }
  html.reduced-motion .s-bakis .bakis__col--us {
    padding-block: clamp(48px, 14vw, 72px);
  }
}