/* ==========================================================================
   Hikâye şeridi + giriş bloğu — Hakkımızda sayfası
   (referans: fairmont.com/en/our-story.html, 1440px'te ölçüldü)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ortalanmış giriş — sayfanın manifestosu
   Referans ölçüsü: 48/56 · -0.96px büyük harf serif başlık, altında 24px
   boşlukla 18/26 · 0.18px açıklama; ikisi de ortalı ve 1006px'i geçmiyor.
   -------------------------------------------------------------------------- */
.story-intro {
  max-width: 1006px;
  margin-inline: auto;
  text-align: center;
}

.story-intro__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.875rem, 2.2vw + 1.275rem, 2.875rem);   /* 30 → 46px */
  line-height: 1.167;                              /* 48 → 56 */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-heading);
}

.story-intro__lead {
  margin-top: 1.5rem;                              /* 24px */
  font-size: clamp(0.875rem, 0.4vw + 0.775rem, 1rem);/* 14 → 16px */
  line-height: 1.445;                              /* 18 → 26 */
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

/* --------------------------------------------------------------------------
   Hikâye şeridi — solda fotoğraf, sağda gri panel

   Referans ölçüsü: 1312 genişlik iki eşit yarıya bölünür (656+656), yükseklik
   605px. Panel #F7F7F7 zeminde 32px/96px dolgulu; bölüm başlığı italik serif
   32/40, oklar ve sayaç sağ altta.
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(460px, 42vw, 605px);
  }
}

.story__media {
  position: relative;
  overflow: hidden;
  background: var(--c-gray-200);
  aspect-ratio: 13 / 12;
}

@media (min-width: 900px) {
  .story__media { aspect-ratio: auto; }
}

/* Kareler üst üste durur; etkin olan görünür. */
.story__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.story__slide[data-active] { opacity: 1; }

/* Betik yoksa ilk kare görünür kalsın */
.story__slide:first-child { opacity: 1; }
.js .story__slide:first-child:not([data-active]) { opacity: 0; }

.story__slide picture,
.story__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 2rem) clamp(1.5rem, 7.3vw, 6rem);
  background: var(--c-mist);
}

.story__chapter[hidden] { display: none; }

.story__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1vw + 1.315rem, 1.875rem);  /* 24 → 30px */
  line-height: 1.25;                                   /* 32 → 40 */
  letter-spacing: -0.02em;
  color: var(--fg-heading);
}

.story__text {
  margin-top: 1.5rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

/* --- Oklar + sayaç, panelin sağ altında ---------------------------------- */
.story__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .story__controls {
    position: absolute;
    inset-inline-end: clamp(1.5rem, 7.3vw, 6rem);
    inset-block-end: 2rem;
    margin-top: 0;
  }
}

.story__arrow {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;                   /* 40px */
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.3);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.story__arrow--next { background: var(--c-black); }

.story__arrow:hover:not([disabled]),
.story__arrow:focus-visible { background: var(--c-ink); }

.story__arrow[disabled] {
  background: var(--c-gray-300);
  color: var(--c-gray-500);
  cursor: default;
}

.story__icon { width: 1.125rem; height: 1.125rem; }
.story__icon--prev { transform: scaleX(-1); }

.story__counter {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}