/* =========================================================
   NEDEN DJS SAYFASI
   ========================================================= */

/* üst bölüm */
.why-hero { position: relative; background: var(--c-dark-green); color: #fff; }
.why-hero .path-background { min-height: 100%; }
.why-hero__inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem;
  padding: 11rem var(--grid-margin) 8rem; width: 100%;
}
.why-hero__label { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; color: var(--c-lime); }
.why-hero__title { max-width: 15ch; font-size: max(2.75rem, min(5.729vw, 146.67px)); font-weight: 400; line-height: .95; letter-spacing: min(-.057vw, -1.4667px); }
.why-hero__text { max-width: 40ch; color: rgba(255, 255, 255, .7); }

.why-label { margin-bottom: 1.25rem; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; color: var(--c-dark-gray); }

/* nedenler */
.why-reasons { padding: 6rem var(--grid-margin) 5rem; }
.why-reasons__head { margin-bottom: 3rem; }
.why-reasons__head .title-h2 { max-width: 20ch; }
.why-reasons__media { display: none; }
.why-reasons__list { display: flex; flex-direction: column; gap: 3.5rem; }
.why-reason { display: flex; flex-direction: column; gap: 1rem; }
.why-reason__media { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .75rem; border-radius: 1.25rem; background: #000; }
.why-reason__media video, .why-reason__media img { width: 100%; height: 100%; object-fit: cover; }
.why-reason__media.is-product, .why-media.is-product { background: var(--c-dirty-white); }
.why-reason__media.is-product img, .why-media.is-product img { object-fit: contain; padding: 12%; }
.why-reason__num { font-family: var(--font-mono); font-weight: 600; color: var(--c-lime); }
.why-reason__title { font-size: clamp(1.75rem, 2.6vw, 2.75rem); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
.why-reason__text { max-width: 46ch; color: var(--c-dark-gray); }

/* nasıl çalışıyoruz */
.why-process { padding: 2rem var(--grid-margin) 7rem; }
.why-process__head { margin-bottom: 3.5rem; }
.why-process__head .title-h2 { max-width: 16ch; }
.why-process__steps { display: grid; grid-template-columns: 1fr; gap: .75rem; counter-reset: step; }
.why-step { position: relative; display: flex; flex-direction: column; gap: .875rem; padding: 1.75rem 1.5rem 2rem; border-radius: 1.25rem; background: var(--c-dirty-white); }
.why-step__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.5rem; border-radius: 50%; background: var(--c-lime); color: var(--c-dark-green); font-family: var(--font-mono); font-weight: 600; }
.why-step__title { font-size: clamp(1.375rem, 1.6vw, 1.75rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.why-step__text { color: var(--c-dark-gray); }

@media (min-width: 768px) {
  .why-process__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .why-hero__inner { padding: 15rem var(--grid-margin) 10rem; }

  .why-reasons { padding-top: 8rem; padding-bottom: 8rem; }
  .why-reasons__head { margin-bottom: 5rem; }
  .why-reasons__body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); align-items: start; }
  .why-reasons__media { display: block; grid-column: 1 / span 6; position: sticky; top: 7.5rem; }
  .why-reasons__frame { position: relative; overflow: hidden; height: calc(100svh - 10rem); max-height: 46rem; border-radius: 1.5rem; background: #000; }
  .why-media { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease-out), transform 1.2s cubic-bezier(.19, 1, .22, 1); }
  .why-media.is-active { opacity: 1; transform: scale(1); }
  .why-media video, .why-media img { width: 100%; height: 100%; object-fit: cover; }
  .why-reasons__counter { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 1; padding: .5rem .875rem; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-family: var(--font-mono); font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .why-media.is-product ~ .why-reasons__counter { background: rgba(15, 38, 92, .8); }

  .why-reasons__list { grid-column: 8 / span 5; gap: 0; }
  .why-reason { justify-content: center; min-height: 70svh; padding: 2rem 0; border-top: 1px solid rgba(15, 38, 92, .12); opacity: .25; transition: opacity .5s var(--ease-out); }
  .why-reason:last-child { min-height: 60svh; }
  .why-reason.is-active { opacity: 1; }
  .why-reason__media { display: none; }

  .why-process { padding-top: 2rem; padding-bottom: 9rem; }
  .why-process__steps { grid-template-columns: repeat(4, 1fr); }
  .why-step { min-height: 20rem; }
  .why-step:not(:last-child)::after {
    content: ""; position: absolute; top: 3.125rem; left: calc(1.5rem + 2.75rem + .75rem); right: -.75rem;
    height: 1px; background: linear-gradient(90deg, rgba(0, 156, 180, .6), rgba(0, 156, 180, 0));
  }
}