/* Section "durus" (#hakkimizda) — "Nesillere Aktarılan Üretim". Normal document
 * flow, no sticky track. Scoped under .s-durus. */

.s-durus {
  background: var(--bg);
  overflow: clip;
}

/* ---------------------------------------------------------------- plate */
.s-durus__plate {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../assets/arka/g7-aslan.jpg");
  background-image: image-set(url("../../assets/arka/g7-aslan.avif") type("image/avif"), url("../../assets/arka/g7-aslan.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 88% 85%;
  opacity: 0.15;
  filter: saturate(0.75) brightness(0.72);
  /* radial vignette ∩ vertical fade so the plate never ends in a hard edge at the section bottom */
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 82% 78%, #000 32%, transparent 78%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 68%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 78% 72% at 82% 78%, #000 32%, transparent 78%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 68%, transparent 96%);
  mask-composite: intersect;
  transition: opacity 0.6s var(--ease-out);
  will-change: transform;
}

.s-durus__wrap {
  position: relative;
  z-index: 1;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* ---------------------------------------------------------------- intro */
.s-durus__intro {
  display: grid;
  gap: 22px;
  max-width: none;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.s-durus__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.s-durus__lineA {
  display: inline-block;
  max-width: 100%;
  text-wrap: balance;
  color: var(--ink);
}
.s-durus__lineA .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), color 0.6s var(--ease-out) 0s;
  transition-delay: calc(var(--i) * 55ms), calc(var(--i) * 55ms), 0s;
}
.s-durus__heading.is-risen .s-durus__lineA .split-word {
  opacity: 1;
  transform: none;
}
.s-durus__heading.is-dim .s-durus__lineA .split-word {
  color: var(--muted);
}
.s-durus__lineB-wrap {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.s-durus__heading.is-b-in .s-durus__lineB-wrap {
  opacity: 1;
  transform: none;
}
.s-durus__lineB {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-bright);
}
.s-durus__underline {
  position: absolute;
  left: 0;
  bottom: -0.32em;
  overflow: visible;
  display: block;
}
.s-durus__underline-path,
.s-durus__underline-back {
  fill: none;
  stroke-linecap: round;
}
.s-durus__underline-path {
  stroke: var(--gold-bright);
  stroke-width: 2.4;
}
.s-durus__underline-back {
  stroke: var(--gold-deep);
  stroke-width: 5;
  opacity: 0.35;
}

.s-durus__sub {
  max-width: 46ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.s-durus__intro.is-sub-in .s-durus__sub {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- grid */
.s-durus__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.s-durus__about {
  display: grid;
  gap: 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.s-durus__about.is-in {
  opacity: 1;
  transform: none;
}
.s-durus__about-eyebrow {
  margin-bottom: 2px;
}
.s-durus__about-p {
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.75;
  max-width: 56ch;
}

.s-durus__values {
  position: relative;
  padding-left: clamp(26px, 3vw, 40px);
}
.s-durus__thread {
  position: absolute;
  left: 0;
  top: 0.5em;
  overflow: visible;
  display: block;
}
.s-durus__thread-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.s-durus__spark {
  fill: var(--gold-bright);
  filter: drop-shadow(0 0 5px var(--gold-bright)) drop-shadow(0 0 10px rgba(231, 200, 120, 0.55));
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
html.reduced-motion .s-durus__spark {
  display: none;
}

.s-durus__value-list {
  list-style: none;
  display: grid;
  gap: clamp(26px, 3.4vw, 40px);
}
.s-durus__value {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.8vw, 22px);
}
.s-durus__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  transition: color 0.45s var(--ease-out);
  min-width: 1.6em;
  position: relative;
}
.s-durus__value-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.15;
  color: var(--dim);
  text-wrap: balance;
  transition: color 0.45s var(--ease-out);
}
.s-durus__value.is-lit .s-durus__num {
  color: var(--gold-bright);
  animation: durus-ring-pulse 0.7s var(--ease-out);
}
.s-durus__value.is-lit .s-durus__value-text {
  color: var(--ink);
}
@keyframes durus-ring-pulse {
  0% {
    text-shadow: 0 0 0 rgba(231, 200, 120, 0);
  }
  35% {
    text-shadow: 0 0 12px rgba(231, 200, 120, 0.9);
  }
  100% {
    text-shadow: 0 0 0 rgba(231, 200, 120, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-durus__value.is-lit .s-durus__num {
    animation: none;
  }
}

/* ---------------------------------------------------------------- reduced motion */
html.reduced-motion .s-durus__plate {
  transform: none !important;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .s-durus__plate {
    inset: 0;
    background-position: 78% 78%;
  }
  .s-durus__grid {
    grid-template-columns: 1fr;
    gap: clamp(44px, 9vw, 64px);
  }
  .s-durus__values {
    padding-left: 24px;
  }
}
@media (max-width: 520px) {
  .s-durus__value {
    gap: 12px;
  }
  .s-durus__value-text {
    font-size: clamp(26px, 8vw, 36px);
  }
}