/* =========================================================
   VALMETO / home.css
   Sadece sayfaya özel layout, hero, dekoratif detaylar.
   Renk, tipografi, radius, shadow, transition → style.css token'ları.
========================================================= */

/* =========================================================
   HEADER OVERLAY (sadece home'da header şeffaf üstte durur)
========================================================= */

.page-home .site-header {
  position: absolute;
}

.page-home .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: linear-gradient(
    180deg,
    rgba(8, 23, 44, 0.52),
    transparent 84%
  );

  opacity: 1;
  visibility: visible;
  pointer-events: none;

  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.page-home .site-header.is-solid::after {
  opacity: 0;
  visibility: hidden;
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--gradient-navy);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-fallback .hero__video {
  display: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(8, 23, 44, 0.92) 0%,
      rgba(8, 23, 44, 0.76) 42%,
      rgba(8, 23, 44, 0.38) 100%
    ),
    radial-gradient(
      circle at 16% 38%,
      rgba(211, 155, 91, 0.16),
      transparent 28%
    );
}

.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 2;

  background: repeating-linear-gradient(
    -14deg,
    rgba(247, 245, 242, 0.026) 0,
    rgba(247, 245, 242, 0.026) 1px,
    transparent 1px,
    transparent 14px
  );

  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
  padding-block: calc(var(--header-height-desktop) + 3rem) clamp(4rem, 9vw, 7rem);
  text-align: center;
}

.hero h1 {
  max-width: 980px;
  margin: 0 auto 1.35rem;
  color: var(--color-light);
  text-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.hero p {
  max-width: 780px;
  margin: 0 auto;
  color: rgba(247, 245, 242, 0.86);
  font-size: var(--fs-body-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: var(--space-xl);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  text-align: center;
}

.hero-trust li {
  position: relative;
  padding-left: 1.1rem;
  color: rgba(247, 245, 242, 0.86);
  font-size: var(--fs-small);
  font-weight: 700;
}

.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 6px rgba(211, 155, 91, 0.55);
}

.hero__scroll {
  position: absolute;
  left: 0;
  bottom: clamp(2rem, 5vw, 4rem);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  color: rgba(247, 245, 242, 0.72);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition: color var(--transition-fast);
}

.hero__scroll:hover {
  color: var(--color-light);
}

/* =========================================================
   INTRO ABOUT
========================================================= */

.page-home .intro-about {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at top left, rgba(215, 181, 122, 0.14), transparent 38%),
    radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.55), transparent 55%),
    var(--gradient-navy);

  color: var(--color-light);
}

.intro-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.intro-about__content {
  max-width: var(--container-narrow);
}

.page-home .intro-about h2 {
  max-width: 900px;
  margin: 0 0 1.25rem;
  color: var(--color-light);
}

.page-home .intro-about p {
  max-width: var(--container-narrow);
  margin: 0;
  color: rgba(247, 245, 242, 0.84);
  font-size: var(--fs-body-lg);
}

.page-home .intro-about .section-eyebrow {
  color: var(--color-gold-light);
}

.page-home .intro-about .section-eyebrow::before {
  background: var(--color-gold-light);
}

.intro-about__media {
  display: flex;
  justify-content: center;
}

.intro-about__panel {
  width: 100%;
  max-width: var(--container-narrow);
  min-height: clamp(340px, 34vw, 520px);

  overflow: hidden;

  border-radius: var(--radius-xl);
  border: 1px solid rgba(215, 181, 122, 0.22);

  background: rgba(247, 245, 242, 0.04);

  box-shadow: var(--shadow-3);
}

.intro-about__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   OFFER CATEGORIES
========================================================= */

.offer-categories {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(195, 155, 91, 0.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(8, 23, 44, 0.74), transparent 52%),
    var(--gradient-navy);
  color: var(--color-light);
}

.offer-categories::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -14deg,
      rgba(247, 245, 242, 0.022) 0,
      rgba(247, 245, 242, 0.022) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(
      180deg,
      rgba(8, 23, 44, 0.10) 0%,
      rgba(8, 23, 44, 0.34) 100%
    );
  pointer-events: none;
}

.offer-categories > .container {
  position: relative;
  z-index: 2;
}

.offer-categories .section-heading {
  max-width: 840px;
}

.offer-categories .section-heading h2 {
  color: var(--color-light);
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.offer-categories .section-heading p {
  color: rgba(247, 245, 242, 0.78);
}

.offer-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-gap);
  align-items: stretch;
}

/* =========================================================
   WHY VALMETO / REASONS
========================================================= */

.reasons {
  position: relative;
  overflow: hidden;
  color: var(--color-light);
  background:
    radial-gradient(circle at 8% 10%, rgba(215, 181, 122, 0.12), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(247, 245, 242, 0.06), transparent 30%),
    var(--gradient-navy);
}

.reasons::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -14deg,
    rgba(247, 245, 242, 0.025) 0,
    rgba(247, 245, 242, 0.025) 1px,
    transparent 1px,
    transparent 11px
  );
  opacity: 0.38;
  pointer-events: none;
}

/* Dekoratif kayık panel — sadece home'a özel görsel detay */
.reasons::after {
  content: "";
  position: absolute;
  right: -9%;
  top: 9%;
  width: min(42vw, 520px);
  height: min(58%, 360px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(215, 181, 122, 0.14);
  background:
    linear-gradient(135deg, rgba(247, 245, 242, 0.10), rgba(247, 245, 242, 0.02)),
    linear-gradient(135deg, rgba(215, 181, 122, 0.12), transparent 52%);
  transform: rotate(-8deg);
  pointer-events: none;
}

.reasons > .container {
  position: relative;
  z-index: 1;
}

.reasons__heading {
  max-width: 760px;
}

.reasons .section-eyebrow {
  color: var(--color-gold-light);
}

.reasons .section-eyebrow::before {
  background: var(--color-gold-light);
}

.reasons__heading h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--color-light);
  text-wrap: balance;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.reasons__heading p {
  max-width: 760px;
  margin-top: var(--space-md);
  color: rgba(247, 245, 242, 0.78);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
}

/* ---- About Value Card: home'a özel koyu kart varyantı ---- */

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-gap);
}

.about-value-card {
  min-height: 280px;
  padding: var(--space-card-pad);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);

  background: linear-gradient(180deg, var(--color-white) 0%, #f9fafc 100%);
  color: var(--color-navy);

  box-shadow: var(--shadow-2);

  transition:
    transform var(--transition-base) var(--ease-premium),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.about-value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(211, 155, 91, 0.38);
  box-shadow: var(--shadow-3);
}

.value-icon {
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(211, 155, 91, 0.22);
  background: rgba(211, 155, 91, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(58%)
    sepia(47%)
    saturate(960%)
    hue-rotate(346deg)
    brightness(92%)
    contrast(90%);
}

.about-value-card h3 {
  margin: 0 0 0.75rem;
  color: var(--color-navy);
}

.about-value-card p {
  margin: 0;
  color: var(--color-text-muted-on-white);
  font-size: var(--fs-body);
  line-height: 1.68;
}

.value-tags {
  display: block;
  margin-top: auto;
  padding-top: var(--space-lg);
  color: var(--color-gold-dark);
  font-size: var(--fs-small);
  font-weight: 850;
  line-height: 1.45;
}

/* =========================================================
   HOME INDUSTRIES
========================================================= */

.industry-grid--home {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-gap);
}

.industry-grid--home .industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  min-height: 250px;
  padding: var(--space-card-pad);
}

.industry-grid--home .industry-card a {
  margin-top: auto;
  padding-top: var(--space-sm);
  color: var(--color-gold-dark);
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.industry-grid--home .industry-card a:hover {
  color: var(--color-navy);
}

.industry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(211, 155, 91, 0.12);
}

.industry-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.industry-grid--home .industry-card h3 {
  font-size: 1.3rem;
  line-height: 1.15;
}

.industry-grid--home .industry-card p {
  min-height: 48px;
}

/* =========================================================
   FINAL CTA (navy zemin + beyaz kart + sol hizalı buton)
========================================================= */

.page-home .section--soft {
  background: var(--gradient-navy);
  color: var(--color-light);
}

.page-home .cta-banner .hero__actions {
  justify-content: flex-start;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .offer-categories__grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .industry-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .intro-about__grid {
    grid-template-columns: 1fr;
  }

  .intro-about__panel {
    max-width: none;
    min-height: 360px;
  }
}

@media (max-width: 900px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .reasons::after {
    display: none;
  }

  .about-value-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 92vh;
  }

  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 23, 44, 0.92) 0%,
      rgba(8, 23, 44, 0.78) 54%,
      rgba(8, 23, 44, 0.55) 100%
    );
  }

  .hero h1 {
    margin: 0 0 1.35rem;
  }

  .hero p {
    margin: 0;
  }

  .hero-trust {
    display: grid;
    gap: 0.65rem;
  }

  .page-home .intro-about h2 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .page-home .intro-about p {
    font-size: var(--fs-body);
  }

  .intro-about__panel {
    min-height: 260px;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 720px) {
  .category-card__media-shell {
    width: min(210px, 100%);
    height: 210px;
  }

  .category-card__media img {
    max-width: 210px;
  }
}

@media (max-width: 640px) {
  .reasons__heading h2 {
    max-width: 100%;
  }

  .about-value-card {
    padding: 1.45rem;
    border-radius: var(--radius-md);
  }

  .value-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
  }

  .value-icon img {
    width: 27px;
    height: 27px;
  }

  .industry-grid--home {
    grid-template-columns: 1fr;
  }
}