/* =========================
   ABOUT PAGE
   about.css
   layout.css ortak header/footer yapısını yönetir
========================= */

/* =========================
   RESET + TOKENS
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --about-orange: #f15a25;
  --about-orange-soft: #fff1ea;

  --about-yellow: #fdb818;

  --about-green: #80c343;
  --about-green-soft: #f2fae8;

  --about-pink: #c01d79;
  --about-pink-soft: #fde8f3;

  --about-blue: #325eab;
  --about-indigo: #4957a6;
  --about-indigo-soft: #edf0fb;

  --about-text: #1f2430;
  --about-text-muted: #626b78;

  --about-bg-soft: #fffaf6;

  --about-shadow-card: 0 16px 38px rgba(73, 87, 166, 0.1);
  --about-shadow-gallery: 0 22px 58px rgba(3, 4, 4, 0.08);

  --jd-wave-h: 12rem;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body.about-page {
  margin: 0;
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: var(--about-text);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 14%, rgba(128, 195, 67, 0.1), transparent 18%),
    radial-gradient(
      circle at 88% 16%,
      rgba(253, 184, 24, 0.12),
      transparent 18%
    ),
    radial-gradient(
      circle at 12% 78%,
      rgba(192, 29, 121, 0.08),
      transparent 18%
    ),
    radial-gradient(
      circle at 86% 82%,
      rgba(50, 94, 171, 0.08),
      transparent 18%
    ),
    linear-gradient(180deg, #ffffff 0%, var(--about-bg-soft) 100%);
}

img,
picture,
video,
svg {
  max-width: 100%;
  display: block;
}

/* =========================
   ACTIVE NAV
========================= */
.layout-nav__link[href="about.html"],
.layout-nav__link[aria-current="page"] {
  color: var(--about-indigo);
}

.layout-nav__link[href="about.html"]::after {
  background: linear-gradient(
    90deg,
    var(--about-orange),
    var(--about-yellow),
    var(--about-green),
    var(--about-blue),
    var(--about-pink)
  );
}

/* =========================
   CONTAINER
========================= */
.jd-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

/* =========================
   WAVE SYSTEM
========================= */
.jd-wave-section {
  position: relative;
  overflow: hidden;
}

.jd-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--jd-wave-h);
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}

.jd-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jd-wave--bottom {
  bottom: -1px;
}

.jd-wave-section > *:not(.jd-wave) {
  position: relative;
  z-index: 2;
}

/* =========================
   HERO
========================= */
.about-hero {
  position: relative;
  min-height: calc(82vh - var(--header-h, 8.8rem));
  overflow: hidden;
  background: #ffffff;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/logo/LOGO.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(72vw, 86rem) auto;
  opacity: 1;
  filter: none;
}

.about-hero .jd-wave path {
  fill: #ffffff !important;
}

/* =========================
   CONTENT SECTIONS
========================= */
.about-section {
  position: relative;
  padding: 8rem 0;
  text-align: center;
  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(128, 195, 67, 0.08),
      transparent 18%
    ),
    radial-gradient(
      circle at 92% 22%,
      rgba(253, 184, 24, 0.08),
      transparent 18%
    ),
    linear-gradient(180deg, #ffffff 0%, var(--about-bg-soft) 100%);
}

.about-section.jd-has-wave-bottom {
  padding-bottom: calc(7rem + var(--jd-wave-h));
}

.about-section__inner {
  position: relative;
  max-width: 92rem;
  margin: 0 auto;
  padding: 4.6rem 4.2rem;
  border-radius: 3rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(241, 90, 37, 0.06), transparent 28%),
    radial-gradient(
      circle at 100% 0%,
      rgba(73, 87, 166, 0.06),
      transparent 28%
    ),
    linear-gradient(180deg, #ffffff 0%, rgba(255, 250, 246, 0.96) 100%);
  border: 1px solid rgba(73, 87, 166, 0.1);
  box-shadow: var(--about-shadow-card);
}

.about-section__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 0.6rem solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
        90deg,
        var(--about-orange),
        var(--about-yellow),
        var(--about-green),
        var(--about-blue),
        var(--about-pink)
      )
      border-box;
  -webkit-mask:
    linear-gradient(#000000 0 0) padding-box,
    linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000000 0 0) padding-box,
    linear-gradient(#000000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.about-section h2 {
  position: relative;
  width: fit-content;
  margin: 0 auto 3rem;
  font-size: clamp(3.2rem, 3.2vw, 4.4rem);
  line-height: 1.15;
  letter-spacing: -0.04rem;
  color: var(--about-text);
}

.about-section h2::after {
  content: "";
  display: block;
  width: 7.2rem;
  height: 0.5rem;
  margin: 1.4rem auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--about-orange),
    var(--about-yellow),
    var(--about-green),
    var(--about-blue),
    var(--about-pink)
  );
}

.about-section p {
  max-width: 72rem;
  margin: 0 auto 2rem;
  font-size: 1.8rem;
  line-height: 1.78;
  color: var(--about-text-muted);
}

.about-section p:last-child {
  margin-bottom: 0;
}

.about-section .jd-wave path {
  fill: #fffaf6 !important;
}

/* =========================
   FOUNDERS / ABOUT STORY
========================= */
.about-founders {
  padding-bottom: 16rem;
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(241, 90, 37, 0.07),
      transparent 18%
    ),
    radial-gradient(
      circle at 90% 18%,
      rgba(192, 29, 121, 0.07),
      transparent 18%
    ),
    radial-gradient(
      circle at 50% 90%,
      rgba(253, 184, 24, 0.08),
      transparent 20%
    ),
    linear-gradient(180deg, #ffffff 0%, var(--about-bg-soft) 100%);
}

.about-founders .about-section__inner {
  max-width: 96rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(192, 29, 121, 0.07), transparent 28%),
    radial-gradient(
      circle at 100% 0%,
      rgba(241, 90, 37, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #ffffff 0%, #fff5ee 100%);
  border-color: rgba(241, 90, 37, 0.14);
}

.about-founders h2::after {
  background: linear-gradient(
    90deg,
    var(--about-orange),
    var(--about-pink),
    var(--about-indigo)
  );
}

.about-gallery {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.about-gallery img {
  width: 100%;
  height: 32rem;
  object-fit: cover;
  border-radius: 2.4rem;
  border: 0.6rem solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--about-shadow-gallery);
  filter: none !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.about-gallery img:nth-child(1) {
  background: linear-gradient(180deg, var(--about-orange-soft), #fff7f2);
  border-color: rgba(241, 90, 37, 0.18);
}

.about-gallery img:nth-child(2) {
  background: linear-gradient(180deg, var(--about-indigo-soft), #f7f8fe);
  border-color: rgba(73, 87, 166, 0.18);
}

.about-gallery img:nth-child(3) {
  background: linear-gradient(180deg, var(--about-green-soft), #f8fcf2);
  border-color: rgba(128, 195, 67, 0.18);
}

.about-gallery img:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(3, 4, 4, 0.12);
  filter: none !important;
}

.about-founders .jd-wave {
  height: 10rem;
}

.about-founders .jd-wave path {
  fill: #ffffff !important;
}

/* =========================
   FOOTER WHITE SUPPORT
========================= */
body.about-page .layout-footer {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  border-top: 0;
  box-shadow: 0 -8px 24px rgba(3, 4, 4, 0.035);
}

body.about-page .layout-footer::before,
body.about-page .layout-footer::after {
  display: none !important;
  content: none !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }

  .about-hero {
    min-height: 68vh;
  }

  .about-section {
    padding: 6.8rem 0;
  }

  .about-section.jd-has-wave-bottom {
    padding-bottom: calc(6rem + var(--jd-wave-h));
  }

  .about-section__inner {
    padding: 3.8rem 3.2rem;
  }

  .about-gallery {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .about-gallery img {
    height: 30rem;
  }
}

@media (max-width: 44em) {
  :root {
    --jd-wave-h: 9rem;
  }

  .about-hero {
    min-height: 64vh;
  }

  .about-section {
    padding: 6rem 0;
  }

  .about-section.jd-has-wave-bottom {
    padding-bottom: calc(5.6rem + var(--jd-wave-h));
  }

  .about-section__inner {
    padding: 3.2rem 2.4rem;
    border-radius: 2.4rem;
  }

  .about-section h2 {
    font-size: 3.4rem;
  }

  .about-section p {
    font-size: 1.65rem;
  }

  .about-founders {
    padding-bottom: 12rem;
  }

  .about-gallery img {
    height: 26rem;
    border-radius: 2rem;
  }
}

@media (max-width: 34em) {
  .jd-container {
    padding: 0 2rem;
  }

  .about-hero::after {
    background-size: 92vw auto;
  }

  .about-gallery img {
    height: 24rem;
  }
}
/* =========================
   ABOUT PAGE MOBILE SPACING FIX
   Mobilde kart iç boşluklarını rahatlat
========================= */
@media (max-width: 600px) {
  .about-section {
    padding: 6.4rem 0;
  }

  .about-section.jd-has-wave-bottom {
    padding-bottom: calc(6.4rem + var(--jd-wave-h));
  }

  .about-section__inner {
    width: calc(100% - 3.2rem);
    padding: 4.8rem 2.4rem 3.6rem;
    border-radius: 2.6rem;
  }

  .about-section h2 {
    margin-bottom: 3.2rem;
    font-size: clamp(3rem, 8vw, 3.8rem);
    line-height: 1.16;
  }

  .about-section h2::after {
    margin-top: 1.6rem;
    margin-bottom: 0.4rem;
  }

  .about-section p {
    font-size: 1.65rem;
    line-height: 1.82;
  }

  .about-section p + p {
    margin-top: 2.2rem;
  }

  .about-founders {
    padding-top: 5.6rem;
    padding-bottom: 12rem;
  }
}