/* Pixel-Perfect Hero Section for Bozai Project (Proportional Scaling Version) */

.hero-pixel-perfect {
  /* This outer wrapper will contain the aspect-ratio locked inner container */
  position: relative;
  width: 100%;
  height: 100vh; /* 保证哪怕在手机上，也是居中显示这个等比例缩小的区域 */
  background-color: #f4f5f7; /* Matching the edges of the image */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-aspect-container {
  /* The container width is dynamically calculated based on viewport, capped at 1536x1024 */
  --hero-w: min(100vw, 150vh, 1536px);
  
  position: relative;
  width: var(--hero-w);
  height: calc(var(--hero-w) * 0.666667); /* 1.5 Aspect Ratio */
  background-image: url('hero_clean_bg.png');
  background-size: 100% 100%; /* Force exact mapping */
  background-position: center;
  background-repeat: no-repeat;
}

/* Header */
.hero-header {
  position: absolute;
  left: 4.8177%; /* 74px / 1536px */
  right: 4.2318%; /* (1536 - 1471) / 1536 */
  top: 5.7617%; /* 59px / 1024px */
  height: 4.1992%; /* 43px / 1024px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.hero-logo-container {
  display: flex;
  align-items: baseline;
  gap: calc(17 * var(--hero-w) / 1536);
}

.hero-logo-main {
  font-size: calc(34 * var(--hero-w) / 1536);
  font-weight: 900;
  letter-spacing: calc(-0.5 * var(--hero-w) / 1536);
  color: #1d1e20;
  line-height: 1;
}

.hero-logo-sub {
  font-size: calc(21 * var(--hero-w) / 1536);
  font-weight: 400;
  color: #1d1e20;
  letter-spacing: calc(0.5 * var(--hero-w) / 1536);
  line-height: 1;
}

.hero-nav-links {
  display: flex;
  align-items: center;
}

.hero-nav-link {
  font-size: calc(15 * var(--hero-w) / 1536);
  font-weight: 500;
  color: #1d1e20;
  transition: opacity 0.2s;
  letter-spacing: calc(0.5 * var(--hero-w) / 1536);
  margin-right: calc(32 * var(--hero-w) / 1536);
  text-decoration: none;
}

.hero-nav-link:hover {
  opacity: 0.7;
}

/* Language Switcher inside the hero */
.hero-lang-switch {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--hero-w) / 1536);
  margin-right: calc(28 * var(--hero-w) / 1536);
  padding-left: calc(16 * var(--hero-w) / 1536);
  border-left: 1px solid rgba(29,30,32,0.2);
}

.hero-lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: calc(14 * var(--hero-w) / 1536);
  font-weight: 700;
  color: #8c8f94;
  transition: color 0.2s;
}

.hero-lang-btn.active {
  color: #1d1e20;
}

.hero-lang-btn:hover {
  color: #1d1e20;
}

.hero-lang-sep {
  color: #c0c2c5;
  font-size: calc(12 * var(--hero-w) / 1536);
}

.hero-btn-contact {
  background-color: #1d1e20;
  color: #ffffff;
  font-size: calc(14 * var(--hero-w) / 1536);
  font-weight: 500;
  width: calc(97 * var(--hero-w) / 1536);
  height: calc(39 * var(--hero-w) / 1536);
  border-radius: 9999px;
  transition: opacity 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: calc(0.5 * var(--hero-w) / 1536);
  text-decoration: none;
}

.hero-btn-contact:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Main Content Area (Hero Text & CTA Button Flow) */
.hero-text-section {
  position: absolute;
  left: 4.9479%; /* 76px / 1536px */
  top: 34.375%; /* 352px / 1024px */
  width: 55%;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.hero-title {
  font-size: calc(76 * var(--hero-w) / 1536);
  font-weight: 700;
  letter-spacing: calc(8 * var(--hero-w) / 1536);
  line-height: 1;
  color: #1d1e20;
  margin-bottom: calc(38 * var(--hero-w) / 1536);
  white-space: nowrap;
}

.hero-subtitle {
  font-size: calc(22 * var(--hero-w) / 1536);
  font-weight: 400;
  color: #8c8f94;
  letter-spacing: calc(4 * var(--hero-w) / 1536);
  line-height: 1;
  margin-bottom: calc(78 * var(--hero-w) / 1536);
  white-space: nowrap;
}

/* Longer Latin-language headlines need their own desktop rhythm. */
@media (min-width: 769px) {
  html[lang="en"] .hero-text-section,
  html[lang="tr-TR"] .hero-text-section {
    width: 46%;
  }

  html[lang="en"] .hero-title,
  html[lang="tr-TR"] .hero-title {
    max-width: 100%;
    font-size: calc(58 * var(--hero-w) / 1536);
    letter-spacing: calc(2 * var(--hero-w) / 1536);
    line-height: 1.08;
    margin-bottom: calc(28 * var(--hero-w) / 1536);
    white-space: normal;
    text-wrap: balance;
  }

  html[lang="en"] .hero-subtitle,
  html[lang="tr-TR"] .hero-subtitle {
    max-width: 92%;
    font-size: calc(19 * var(--hero-w) / 1536);
    letter-spacing: calc(1.4 * var(--hero-w) / 1536);
    line-height: 1.45;
    margin-bottom: calc(52 * var(--hero-w) / 1536);
    white-space: normal;
    text-wrap: balance;
  }
}

/* Hero Button CTA */
.hero-cta {
  margin-left: -2px;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--hero-w) / 1536);
  background-color: #1d1e20;
  color: #ffffff;
  font-size: calc(16 * var(--hero-w) / 1536);
  font-weight: 500;
  width: calc(188 * var(--hero-w) / 1536);
  height: calc(49 * var(--hero-w) / 1536);
  border-radius: 9999px;
  letter-spacing: calc(1 * var(--hero-w) / 1536);
  transition: opacity 0.2s, transform 0.2s;
  padding-left: calc(8 * var(--hero-w) / 1536);
  text-decoration: none;
}

.btn-more:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.arrow-icon {
  font-family: monospace;
  font-weight: 400;
  font-size: calc(14 * var(--hero-w) / 1536);
  margin-left: calc(2 * var(--hero-w) / 1536);
}

/* Mobile composition: copy first, product artwork second. */
@media (max-width: 768px) {
  .hero-pixel-perfect {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    align-items: stretch;
    justify-content: stretch;
  }

  .hero-aspect-container {
    --hero-w: 100vw;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto auto minmax(330px, 1fr);
    background-size: auto 54%;
    background-position: 66% 100%;
  }

  .hero-header {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: max(20px, env(safe-area-inset-top)) 20px 14px;
  }

  .hero-logo-container {
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  .hero-logo-main {
    font-size: 26px;
    letter-spacing: -0.4px;
  }

  .hero-logo-sub {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
  }

  .hero-nav-links {
    min-width: 0;
    gap: 10px;
  }

  .hero-nav-link {
    display: none;
  }

  .hero-lang-switch {
    gap: 4px;
    margin-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .hero-lang-btn {
    min-width: 22px;
    min-height: 36px;
    padding: 0 2px;
    font-size: 12px;
  }

  .hero-lang-sep {
    font-size: 10px;
  }

  .hero-btn-contact {
    width: auto;
    min-width: 76px;
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .hero-text-section {
    position: relative;
    inset: auto;
    width: 100%;
    padding: clamp(34px, 8svh, 64px) 24px 24px;
    z-index: 5;
  }

  .hero-title {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(40px, 12vw, 52px);
    line-height: 1.08;
    letter-spacing: 0.08em;
    white-space: normal;
  }

  .hero-subtitle {
    max-width: 22rem;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.12em;
    white-space: normal;
  }

  .hero-cta {
    margin-left: 0;
  }

  .btn-more {
    width: 154px;
    height: 46px;
    gap: 10px;
    padding-left: 6px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .arrow-icon {
    font-size: 13px;
    margin-left: 0;
  }
}

@media (max-width: 370px) {
  .hero-header {
    padding-inline: 16px;
  }

  .hero-lang-sep {
    display: none;
  }

  .hero-text-section {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn-contact,
  .btn-more {
    transition: none;
  }
}