/* ========================================
   Home Hero / Real-photo Carousel
======================================== */

.home-hero {
  min-height:
    760px;

  position:
    relative;

  display:
    grid;

  align-items:
    end;

  overflow:
    hidden;

  background:
    var(--navy);

  touch-action:
    pan-y;
}


/* ========================================
   Slider Track
======================================== */

.hero-slider-track {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  display:
    flex;

  width:
    100%;

  height:
    100%;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform
    880ms
    cubic-bezier(.22, 1, .36, 1);

  will-change:
    transform;
}


/* ========================================
   Individual Slide
======================================== */

.hero-slide {
  position:
    relative;

  flex:
    0 0 100%;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;
}


.hero-slide img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(1.015);
}


/* ========================================
   Hero Overlay
======================================== */

.hero-shade {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(6, 43, 92, .97) 0%,
      rgba(6, 43, 92, .82) 42%,
      rgba(6, 43, 92, .26) 78%,
      rgba(6, 43, 92, .12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(6, 43, 92, .72),
      transparent 58%
    );
}


/* ========================================
   Hero Content
======================================== */

.hero-copy {
  position:
    relative;

  z-index:
    3;

  padding-bottom:
    104px;

  pointer-events:
    none;
}


.hero-copy > * {
  pointer-events:
    auto;
}


.hero-copy h1 {
  max-width:
    950px;

  color:
    white;
}


.hero-lead {
  max-width:
    660px;

  margin-top:
    1.5rem;

  color:
    rgba(255, 255, 255, .78);

  font-size:
    1.12rem;
}


/* ========================================
   Hero Buttons
======================================== */

.hero-actions {
  display:
    flex;

  gap:
    .8rem;

  margin-top:
    2rem;
}


/* ========================================
   Hidden Hero Arrows
======================================== */

.hero-arrow {
  display:
    none;
}


/* ========================================
   Hero Dots
======================================== */

.hero-dots {
  position:
    absolute;

  z-index:
    5;

  left:
    50%;

  bottom:
    30px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  transform:
    translateX(-50%);
}


.hero-dots button {
  width:
    8px;

  height:
    8px;

  padding:
    0;

  border-radius:
    999px;

  border:
    1px solid
    rgba(255, 255, 255, .75);

  background:
    rgba(255, 255, 255, .34);

  cursor:
    pointer;

  transition:
    width .28s ease,
    background .28s ease,
    border-color .28s ease,
    transform .28s ease;
}


.hero-dots button:hover {
  transform:
    scale(1.15);
}


.hero-dots button.is-active {
  width:
    30px;

  background:
    #fff;

  border-color:
    #fff;
}


/* ========================================
   Core Solutions
======================================== */

.solution-cards {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1.25rem;

  align-items:
    stretch;
}


/* ========================================
   Solution Card
======================================== */

.solution-card {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  height:
    100%;

  border-radius:
    var(--radius-md);

  overflow:
    hidden;

  background:
    white;

  border:
    1px solid var(--line);

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

  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease,
    border-color .35s ease;
}


.solution-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow);

  border-color:
    rgba(18, 97, 168, .25);
}


/* ========================================
   Solution Image
======================================== */

.solution-card img {
  width:
    100%;

  height:
    250px;

  object-fit:
    cover;

  object-position:
    center;

  flex-shrink:
    0;

  transition:
    transform
    700ms
    cubic-bezier(.2, .8, .2, 1);
}


.solution-card:hover img {
  transform:
    scale(1.035);
}


/* ========================================
   Solution Content
======================================== */

.solution-card > div {
  display:
    flex;

  flex-direction:
    column;

  flex:
    1;

  padding:
    1.45rem;
}


/* Number */

.solution-card span {
  font-family:
    var(--font-heading);

  font-weight:
    800;

  color:
    var(--ocean);
}


/* Heading */

.solution-card h3 {
  margin:
    .55rem 0;

  font-size:
    1.4rem;

  min-height:
    2.7em;
}


/* Description */

.solution-card p {
  margin-top:
    .2rem;

  display:
    -webkit-box;

  -webkit-line-clamp:
    3;

  line-clamp:
    3;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;
}


/* ========================================
   Read More
======================================== */

.solution-card b {
  display:
    inline-flex;

  align-items:
    center;

  margin-top:
    auto;

  padding-top:
    1.4rem;

  color:
    var(--blue);

  font-family:
    var(--font-heading);

  font-size:
    .85rem;

  font-weight:
    800;

  transition:
    color .25s ease,
    transform .25s ease;
}


.solution-card:hover b {
  color:
    var(--ocean);

  transform:
    translateX(3px);
}


/* ========================================
   CTA
======================================== */

.cta-section {
  padding-top:
    0;
}


/* ========================================
   Tablet / Mobile Navigation Breakpoint
======================================== */

@media (max-width: 900px) {

  /*
   * PENTING:
   *
   * Hamburger sudah aktif di 900px,
   * jadi Hero juga harus berubah
   * di breakpoint yang sama.
   */

  .home-hero {
    min-height:
      max(760px, 100svh);

    align-items:
      start;
  }


  .hero-copy {
    /*
     * Header sekitar 76px.
     * Berikan safe area yang cukup.
     */
    padding-top:
      126px;

    padding-bottom:
      92px;
  }


  .hero-copy .eyebrow {
    margin-bottom:
      0.85rem;

    font-size:
      0.72rem;

    line-height:
      1.4;
  }


  .hero-copy h1 {
    max-width:
      780px;

    font-size:
      clamp(
        3rem,
        7.5vw,
        4.5rem
      );

    line-height:
      1.03;

    letter-spacing:
      -0.045em;

    overflow-wrap:
      break-word;
  }


  .hero-lead {
    max-width:
      680px;

    margin-top:
      1.3rem;

    font-size:
      1.05rem;

    line-height:
      1.55;
  }


  .hero-actions {
    margin-top:
      1.7rem;
  }


  /* ========================================
     Solutions on Tablet
  ======================================== */

  .solution-cards {
    grid-template-columns:
      1fr;
  }


  .solution-card {
    display:
      grid;

    grid-template-columns:
      minmax(260px, .9fr)
      1fr;
  }


  .solution-card img {
    width:
      100%;

    height:
      100%;

    min-height:
      260px;

    object-fit:
      cover;
  }


  .solution-card h3 {
    min-height:
      0;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 640px) {

  .home-hero {
    min-height:
      max(760px, 100svh);

    align-items:
      start;
  }


  .hero-copy {
    padding-top:
      112px;

    padding-bottom:
      86px;
  }


  .hero-copy .eyebrow {
    margin-bottom:
      0.8rem;

    font-size:
      0.66rem;

    letter-spacing:
      0.08em;
  }


  .hero-copy h1 {
    max-width:
      100%;

    font-size:
      clamp(
        2.35rem,
        10vw,
        3.25rem
      );

    line-height:
      1.04;

    letter-spacing:
      -0.04em;
  }


  .hero-lead {
    max-width:
      100%;

    margin-top:
      1.2rem;

    font-size:
      1rem;

    line-height:
      1.55;
  }


  /* CTA buttons */

  .hero-actions {
    width:
      100%;

    margin-top:
      1.5rem;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      .75rem;
  }


  .hero-actions .btn {
    width:
      100%;

    min-height:
      52px;
  }


  /* Dots */

  .hero-dots {
    bottom:
      22px;
  }


  /* ========================================
     Mobile Solution Cards
  ======================================== */

  .solution-card {
    display:
      flex;

    flex-direction:
      column;
  }


  .solution-card img {
    width:
      100%;

    height:
      220px;

    min-height:
      0;
  }


  .solution-card h3 {
    min-height:
      0;
  }


  .solution-card b {
    margin-top:
      auto;

    padding-top:
      1.25rem;
  }

}


/* ========================================
   Small Mobile
======================================== */

@media (max-width: 420px) {

  .home-hero {
    min-height:
      max(730px, 100svh);
  }


  .hero-copy {
    padding-top:
      104px;

    padding-bottom:
      78px;
  }


  .hero-copy h1 {
    font-size:
      clamp(
        2.15rem,
        10.5vw,
        2.75rem
      );

    line-height:
      1.04;
  }


  .hero-lead {
    font-size:
      0.95rem;
  }


  .hero-actions {
    margin-top:
      1.3rem;
  }


  .hero-dots {
    bottom:
      18px;
  }

}


/* ========================================
   Reduced Motion
======================================== */

@media (prefers-reduced-motion: reduce) {

  .hero-slider-track {
    transition:
      none;
  }


  .solution-card,
  .solution-card img,
  .solution-card b,
  .hero-dots button {
    transition:
      none;
  }

}

/* ========================================
   FINAL RESPONSIVE HERO FIX
   CGP Mobile / Tablet
======================================== */

@media (max-width: 900px) {

  .home-hero {
    min-height: max(760px, 100svh);

    align-items: start;
  }


  .hero-copy {
    padding-top: 126px;
    padding-bottom: 92px;
  }


  .hero-copy .eyebrow {
    margin-bottom: 0.85rem;

    font-size: 0.72rem;
    line-height: 1.4;
  }


  .hero-copy h1 {
    max-width: 780px;

    font-size:
      clamp(
        3rem,
        7.5vw,
        4.5rem
      );

    line-height: 1.03;

    letter-spacing: -0.045em;

    overflow-wrap: break-word;
  }


  .hero-lead {
    max-width: 680px;

    margin-top: 1.3rem;

    font-size: 1.05rem;

    line-height: 1.55;
  }


  .hero-actions {
    margin-top: 1.7rem;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 640px) {

  .home-hero {
    min-height: max(760px, 100svh);

    align-items: start;
  }


  .hero-copy {
    padding-top: 112px;
    padding-bottom: 86px;
  }


  .hero-copy .eyebrow {
    margin-bottom: 0.8rem;

    font-size: 0.66rem;

    letter-spacing: 0.08em;

    line-height: 1.4;
  }


  .hero-copy h1 {
    max-width: 100%;

    font-size:
      clamp(
        2.35rem,
        10vw,
        3.25rem
      );

    line-height: 1.04;

    letter-spacing: -0.04em;

    overflow-wrap: break-word;
  }


  .hero-lead {
    max-width: 100%;

    margin-top: 1.2rem;

    font-size: 1rem;

    line-height: 1.55;
  }


  .hero-actions {
    width: 100%;

    margin-top: 1.5rem;

    flex-direction: column;

    align-items: stretch;

    gap: 0.75rem;
  }


  .hero-actions .btn {
    width: 100%;

    min-height: 52px;
  }


  .hero-dots {
    bottom: 22px;
  }


  .solution-card {
    display: flex;

    flex-direction: column;
  }


  .solution-card img {
    width: 100%;

    height: 220px;

    min-height: 0;
  }


  .solution-card h3 {
    min-height: 0;
  }


  .solution-card b {
    margin-top: auto;

    padding-top: 1.25rem;
  }

}


/* ========================================
   Small Mobile
======================================== */

@media (max-width: 420px) {

  .home-hero {
    min-height: max(730px, 100svh);

    align-items: start;
  }


  .hero-copy {
    padding-top: 104px;
    padding-bottom: 78px;
  }


  .hero-copy h1 {
    font-size:
      clamp(
        2.15rem,
        10.5vw,
        2.75rem
      );

    line-height: 1.04;
  }


  .hero-lead {
    font-size: 0.95rem;
  }


  .hero-actions {
    margin-top: 1.3rem;
  }


  .hero-dots {
    bottom: 18px;
  }

}