/* Hikayemiz sayfası (Views/Story/Index.cshtml). Stiller .ts-story altında. */
.ts-story {
  --red: #b4221c;
  --cream: #fff8f0;
  --ink: #1d1d1b;
  --display: 'Please Display', 'Archivo Black', sans-serif;
  --gutter: clamp(20px, 7.5vw, 145px);
}

.ts-story .story-inner {
  padding: 0 var(--gutter);
}

/* Tasarımdaki dar (condensed) metin yazısı */
.ts-story .story-text {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 75%;
  font-weight: 500;
  font-size: clamp(16px, 1.35vw, 25px);
  line-height: 1.35;
}

.ts-story .story-text p {
  margin: 0 0 1.25em;
}

.ts-story .story-text p:last-child {
  margin-bottom: 0;
}

/* ---------- Giriş ---------- */
.ts-story .story-intro {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(48px, 8vw, 150px) 0 clamp(56px, 8vw, 150px);
}

.ts-story .story-headline {
  margin: 0 0 clamp(24px, 2.6vw, 48px);
  font-family: var(--display);
  font-weight: 900;
  color: var(--red);
  font-size: clamp(34px, 4.2vw, 80px);
  line-height: 1.12;
  letter-spacing: 0.5px;
}

.ts-story .story-intro .story-text {
  max-width: 48em;
}

/* ---------- Biz Kimiz? ---------- */
.ts-story .story-who-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  background: var(--cream);
}

.ts-story .story-title {
  margin: 0 0 clamp(20px, 2.2vw, 36px);
  font-family: var(--display);
  font-weight: 900;
  color: var(--red);
  font-size: clamp(32px, 3.6vw, 68px);
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Kedi kırmızı bandın üst kenarına yaslanır */
.ts-story .story-cat {
  display: block;
  width: clamp(140px, 28vw, 540px);
  height: auto;
  margin-bottom: -1px;
}

.ts-story .story-band {
  background: var(--red);
  color: var(--cream);
  padding: clamp(40px, 5.5vw, 100px) 0 clamp(48px, 6vw, 110px);
}

.ts-story .story-band .story-text {
  max-width: 1400px;
}

.ts-story .story-goal {
  margin-top: clamp(40px, 5vw, 96px) !important;
}

/* ---------- Doku şeridi ---------- */
.ts-story .story-textures {
  display: grid;
  grid-template-columns: 478fr 504fr 424fr 514fr;
  /* minmax(0, ...) olmadan satırlar görsellerin doğal yüksekliğine uzayıp alttaki footer'ın üstüne taşar */
  grid-template-rows: minmax(0, 1fr);
  height: clamp(240px, 40vw, 770px);
}

.ts-story .story-textures img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 640px) {
  .ts-story .story-textures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 120vw;
  }
}