/* =========================================================
  JANTUNG KUAT - INDEX CSS
  FINDRSF STYLE MOBILE V22 - DOUBLE BEAT LUB-DUB
  Update utama:
  - Hero sekarang memakai ./img/brand/jantungkuat.png transparan.
  - Pulse tetap aktif pada PNG tanpa mengubah bentuk gambar.
  - Posisi dan spacing mobile dipertahankan seperti baseline referensi.
========================================================= */

:root {
  --teal: #00acaa;
  --teal-dark: #0a8684;
  --teal-deep: #0f766e;
  --teal-soft: #e5f7fb;
  --lime: #c3da3e;

  --page-bg: #f5f7fb;
  --cyan-halo: #e0f9ff;
  --lime-halo: #f3ffe1;

  --ink: #020617;
  --ink-2: #0f172a;
  --muted: #64748b;
  --line: #e9ecf7;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  background: var(--page-bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 104px;
  overflow-x: hidden;
  color: var(--ink-2);
  font-family:
    "Nunito",
    "Segoe UI",
    Arial,
    sans-serif;
  background:
    radial-gradient(circle at top left, var(--cyan-halo) 0, transparent 55%),
    radial-gradient(circle at bottom right, var(--lime-halo) 0, transparent 55%),
    var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.navbar {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 88px;
  padding: 0 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(148, 163, 184, .30);

  box-shadow:
    0 4px 12px rgba(15, 23, 42, .08),
    0 1px 0 rgba(148, 163, 184, .15);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


.navbarIdentity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal);
  text-decoration: none;
  user-select: none;
}

.brandImage {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 5px 8px rgba(0, 172, 170, .18))
    drop-shadow(0 2px 3px rgba(15, 23, 42, .08));
}

.brandMark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: linear-gradient(145deg, var(--teal) 0%, #16b7b3 100%);
  box-shadow:
    0 8px 18px rgba(0, 172, 170, .21),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}

.brandMark i {
  font-size: 21px;
}

.brandText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  margin-left: -2px;
  line-height: .88;
}

.brandText strong {
  display: block;
  font-size: 17px;
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.brandText strong:last-child {
  color: var(--lime);
}


.brandDivider {
  width: 1px;
  height: 38px;
  flex: 0 0 1px;
  display: block;
  margin-left: 14px;
  margin-right: 14px;
  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, .10) 0%,
    rgba(100, 116, 139, .48) 22%,
    rgba(100, 116, 139, .48) 78%,
    rgba(148, 163, 184, .10) 100%
  );
}

.innovationBrand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  transform: translateX(-3px);
}

.innovationLabel {
  display: block;
  color: #64748b;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .045em;
  white-space: nowrap;
}

.poltekkesLogo {
  display: block;
  width: auto;
  height: 28px;
  max-width: 124px;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow:
    0 8px 22px rgba(15, 23, 42, .04),
    0 0 0 1px rgba(255, 255, 255, .70);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.navLink {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .96rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.navLink:hover,
.navLink:focus-visible {
  color: var(--teal);
  background: var(--teal-soft);
}

.navLink.active,
.navLink[aria-current="page"] {
  color: var(--white);
  background: var(--teal);
  box-shadow:
    0 10px 22px rgba(0, 172, 170, .28),
    0 0 0 1px rgba(240, 253, 250, .70);
}

.hamburger {
  display: none;
  border: 0;
  padding: 7px 10px;
  color: var(--teal);
  background: transparent;
  cursor: pointer;
}

.hamburgerBox {
  position: relative;
  width: 32px;
  height: 22px;
  display: inline-block;
}

.hamburgerInner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 4px;
  margin-top: -2px;
  border-radius: 3px;
  background: var(--teal);
  transition: all .27s cubic-bezier(.68, -.06, .32, 1.42);
}

.hamburgerInner::before,
.hamburgerInner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 32px;
  height: 4px;
  border-radius: 3px;
  background: var(--teal);
  transition: all .27s cubic-bezier(.68, -.06, .32, 1.42);
}

.hamburgerInner::before { top: -10px; }
.hamburgerInner::after { bottom: -10px; }

.hamburger.is-active .hamburgerInner { background: transparent; }
.hamburger.is-active .hamburgerInner::before { transform: translateY(10px) rotate(45deg); }
.hamburger.is-active .hamburgerInner::after { transform: translateY(-10px) rotate(-45deg); }

.navLogoMobile { display: none; }

.navOverlay {
  display: none;
  position: fixed;
  z-index: 900;
  inset: 0;
  background: rgba(15, 23, 42, .12);
}

.navOverlay.active { display: block; }

.headerSpacer { height: 88px; }

.heroSimple {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 88px);
  min-height: calc(100dvh - 88px);
  padding: clamp(54px, 7vh, 82px) 20px 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.heroInner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 72px);
  transform: translateY(30px);
}

.heroText {
  flex: 1 1 52%;
  color: var(--ink-2);
  opacity: 0;
  transform: translateX(-28px);
  filter: blur(18px);
  animation: heroFadeInLeft .9s cubic-bezier(.22, .61, .36, 1) .18s forwards;
}

.heroPill {
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-deep);
  background: rgba(0, 172, 170, .08);
  font-size: .92rem;
  font-weight: 700;
}

.heroPillDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .25);
}

.heroTitle {
  max-width: 560px;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.025em;
}

.heroTitle span { color: var(--teal); }

.heroSubtitle {
  max-width: 500px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 600;
}

.heroActions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.getStartedBtn {
  position: relative;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 13px;

  color: #ffffff;
  background:
    linear-gradient(
      180deg,
      #43c1bd 0%,
      #29b0ad 48%,
      #169d9a 100%
    );

  border: 3px solid rgba(255, 255, 255, .96);

  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 9px 18px rgba(15, 118, 116, .18),
    0 3px 7px rgba(15, 23, 42, .08),
    0 0 0 1px rgba(0, 172, 170, .12),
    inset 0 1px 0 rgba(255, 255, 255, .34);

  overflow: hidden;
  isolation: isolate;

  transition:
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.getStartedBtn::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12px;
  right: 12px;
  top: 4px;
  height: 42%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .30) 0%,
      rgba(255, 255, 255, .08) 68%,
      rgba(255, 255, 255, 0) 100%
    );
  pointer-events: none;
}

.ctaLeft,
.ctaArrow {
  position: relative;
  z-index: 1;
}

.ctaLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ctaHeart {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 1px 1px rgba(0, 86, 85, .10));
}

.ctaHeartImage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ctaLabel {
  color: #ffffff;
  font-size: 1.08em;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0, 86, 85, .10);
}

.ctaArrow {
  color: #ffffff;
  font-size: 1.08em;
  transition:
    transform .18s ease,
    opacity .18s ease;
}

.getStartedBtn:hover,
.getStartedBtn:focus-visible {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.035) saturate(1.02);

  box-shadow:
    0 12px 22px rgba(15, 118, 116, .22),
    0 4px 8px rgba(15, 23, 42, .08),
    0 0 0 1px rgba(0, 172, 170, .16),
    inset 0 1px 0 rgba(255, 255, 255, .40);
}

.getStartedBtn:hover .ctaArrow,
.getStartedBtn:focus-visible .ctaArrow {
  transform: translateX(3px);
  opacity: .98;
}

.getStartedBtn:focus-visible {
  outline: none;
}

.getStartedBtn:active,
.getStartedBtn.is-clicked {
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 5px 11px rgba(15, 118, 116, .16),
    0 2px 4px rgba(15, 23, 42, .07),
    0 0 0 1px rgba(0, 172, 170, .12),
    inset 0 2px 4px rgba(4, 99, 96, .12);
}

.heroNote {
  width: 100%;
  max-width: 430px;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  color: var(--muted);
  font-size: .80rem;
  line-height: 1.45;
}

.heroNoteContent {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 22px 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.heroNote i {
  width: 22px;
  display: grid;
  place-items: center;
  color: #2aa7e8;
  font-size: 1.05rem;
  line-height: 1;
}

.heroNoteDivider {
  width: 1px;
  height: 30px;
  display: block;
  background: rgba(148, 163, 184, .52);
  border-radius: 999px;
}

.heroNoteText {
  display: block;
  max-width: 330px;
  color: #73869d;
  text-align: left;
  font-weight: 600;
}

.heroMedia {
  flex: 1 1 48%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(32px);
  filter: blur(18px);
  animation: heroFadeInUpBlur .95s cubic-bezier(.22, .61, .36, 1) .32s forwards;
}

.heroHeartVisual {
  position: relative;
  width: 250px;
  height: 290px;
  display: grid;
  place-items: center;
}

.heroHeartImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 16px 14px rgba(15, 23, 42, .12))
    drop-shadow(0 3px 3px rgba(15, 23, 42, .09));
  transform-origin: center;
  will-change: transform;
}

.sectionAnchor {
  position: absolute;
  bottom: 0;
}

.footerFade {
  position: fixed;
  z-index: 11999;
  left: 0;
  right: 0;
  bottom: 48px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(245, 247, 251, 1) 0,
    rgba(245, 247, 251, .98) 45px,
    rgba(245, 247, 251, .86) 95px,
    rgba(245, 247, 251, 0) 140px);
}

.footerImage {
  position: fixed;
  z-index: 12000;
  left: 0;
  right: 0;
  bottom: 48px;
  width: 100%;
  pointer-events: none;
}

.footerImage img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
}

.footerCopyright {
  position: fixed;
  z-index: 12001;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 48px;
  padding: 4px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--teal);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 -2px 12px rgba(224, 229, 236, .24);
}

.footerText {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.2;
}


.footerCopyrightInner {
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footerLegal {
  display: none;
}

.footerLegal a {
  color: inherit;
  text-decoration: none;
}

.footerLegalDivider {
  opacity: .62;
}

@keyframes pulseSmooth {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.038); }
  14%  { transform: scale(1); }
  21%  { transform: scale(1.026); }
  27%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.pulseSmooth {
  animation: pulseSmooth 1.72s cubic-bezier(.36, .08, .34, .98) infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes heroFadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-28px);
    filter: blur(18px);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes heroFadeInUpBlur {
  0% {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(18px);
  }
  65% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 900px) {
  .navbarIdentity {
    gap: 0;
  }

  .brand {
    gap: 5px;
  }

  .brandText {
    margin-left: -2px;
  }

  .brandDivider {
    height: 34px;
    margin-left: 11px;
    margin-right: 11px;
  }

  .innovationLabel {
    font-size: 7.5px;
  }

  .poltekkesLogo {
    height: 25px;
    max-width: 108px;
  }


  .navbar {
    height: 76px;
    padding: 0 13px;
    border-radius: 0 0 14px 14px;
  }

  .brandMark {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  .brandImage {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  .brandText strong {
    font-size: 15px;
  }

  .headerSpacer {
    height: 76px;
  }

  .heroSimple {
    min-height: calc(100dvh - 76px);
    padding: 36px 16px 140px;
  }

  .heroInner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .heroMedia {
    order: 0;
    min-height: 280px;
    margin-bottom: 6px;
  }

  .heroText {
    order: 1;
    max-width: 560px;
    margin: 0 auto;
  }

  .heroPill {
    margin-left: auto;
    margin-right: auto;
  }

  .heroTitle,
  .heroSubtitle,
  .heroNote {
    margin-left: auto;
    margin-right: auto;
  }

  .heroActions {
    align-items: center;
  }
}

@media (max-width: 800px) {
  .hamburger {
    display: block;
    position: relative;
    z-index: 12001;
  }

  .navLinks {
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    border-radius: 0;
    background: var(--white);
    box-shadow: 0 0 40px rgba(25, 118, 210, .24);
    transform: translate3d(-100vw, 0, 0);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  }

  .navLinks.active { transform: translate3d(0, 0, 0); }

  .navLogoMobile {
    width: 100%;
    min-height: 94px;
    padding: 19px 22px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1.5px solid var(--line);
  }

  .brandMark--menu {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .brandImage--menu {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
.brandText--menu strong {
    font-size: 15px;
    line-height: .95;
  }

  .navLink {
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 0;
    border-bottom: 1.5px solid var(--line);
    justify-content: flex-start;
    color: #475569;
    background: transparent;
    font-size: 1rem;
  }

  .navLink.active,
  .navLink[aria-current="page"] {
    color: var(--teal);
    background: rgba(0, 172, 170, .06);
    box-shadow: none;
    border-left: 4px solid var(--teal);
  }
}

@media (max-width: 600px) {
  .navbarIdentity {
    max-width: calc(100% - 52px);
    gap: 0;
  }

  .brand {
    gap: 4px;
  }

  .brandText {
    gap: 0;
    margin-left: -2px;
  }

  .brandText strong {
    font-size: 11.5px;
    line-height: .92;
  }

  .brandDivider {
    height: 30px;
    margin-left: 9px;
    margin-right: 10px;
  }

  .innovationBrand {
    gap: 2px;
  }

  .innovationLabel {
    font-size: 6.6px;
    letter-spacing: .035em;
  }

  .poltekkesLogo {
    height: 20px;
    max-width: 76px;
  }


  .heroHeartVisual {
    width: 228px;
    height: 248px;
    margin-top: 2px;
  }


  body { padding-bottom: 104px; }

  .navbar {
    height: 66px;
    padding: 0 5px;
  }

  .brand {
    margin-left: 8px;
    gap: 4px;
  }

  .brandMark {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    border-radius: 12px;
  }

  .brandImage {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    filter:
      drop-shadow(0 4px 7px rgba(0, 172, 170, .17))
      drop-shadow(0 1px 2px rgba(15, 23, 42, .07));
  }

  .brandMark i { font-size: 17px; }
.brandText strong { font-size: 11.5px; line-height: .92; }

  .hamburger { margin-right: 8px; }

  .headerSpacer { height: 66px; }

  .heroSimple {
    min-height: calc(100svh - 66px);
    padding: 14px 16px 118px;
    justify-content: flex-start;
  }

  .heroInner {
    gap: 0;
  }

  .heroMedia {
    min-height: 258px;
    margin-bottom: 10px;
    align-items: flex-start;
  }
.heroPill {
    margin-bottom: 10px;
    padding: 5px 11px;
    font-size: .75rem;
  }

  .heroPillDot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .24);
  }

  .heroTitle {
    max-width: 360px;
    margin-bottom: 10px;
    font-size: clamp(1.46rem, 6.7vw, 1.78rem);
    line-height: 1.15;
  }

  .heroSubtitle {
    max-width: 355px;
    margin-bottom: 15px;
    font-size: .79rem;
    line-height: 1.55;
  }

  .getStartedBtn {
    width: 228px;
    min-height: 48px;
    padding: 0 16px;
    gap: 9px;
    border-width: 3px;
    font-size: .86rem;
  }

  .ctaLeft {
    gap: 8px;
  }

  .ctaHeart {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .ctaLabel {
    font-size: 1em;
    white-space: nowrap;
    margin-left: 5px;
  }

  .ctaArrow {
    margin-left: auto;
    font-size: 1.04em;
  }

  .heroNote {
    width: min(100%, 330px);
    max-width: 330px;
    margin-top: 14px;
    font-size: .59rem;
    line-height: 1.40;
    justify-content: center;
  }

  .heroNoteContent {
    width: min(100%, 292px);
    max-width: 292px;
    padding-left: 14px;
    padding-right: 14px;
    grid-template-columns: 20px 1px minmax(0, 1fr);
    column-gap: 10px;
  }

  .heroNote i {
    width: 20px;
    font-size: 1rem;
  }

  .heroNoteDivider {
    height: 28px;
    background: rgba(148, 163, 184, .48);
  }

  .heroNoteText {
    max-width: 224px;
    text-align: left;
    color: #72839a;
    font-weight: 600;
  }

  .footerFade {
    bottom: 44px;
    height: 86px;
    background: linear-gradient(to top,
      rgba(245, 247, 251, 1) 0,
      rgba(245, 247, 251, .97) 30px,
      rgba(245, 247, 251, .80) 60px,
      rgba(245, 247, 251, 0) 86px);
  }

  .footerImage { bottom: 44px; }

  .footerImage img {
    width: 100%;
    height: 54px;
    object-fit: cover;
    object-position: center bottom;
  }

  .footerCopyright {
    min-height: 44px;
    height: 44px;
    padding: 4px 0 10px;
    font-size: .75rem;
  }

  .footerCopyrightInner {
    min-height: 44px;
    justify-content: center;
  }

  .footerLegal {
    display: none;
  }
}

@media (max-width: 380px) {
  .heroHeartVisual {
    width: 208px;
    height: 226px;
    margin-top: 0;
  }


  .heroSimple { padding-top: 10px; }

  .heroMedia {
    min-height: 228px;
    margin-bottom: 8px;
  }
.heroTitle { font-size: 1.4rem; }
  .heroSubtitle { font-size: .74rem; }
}

@media (max-width: 600px) and (max-height: 740px) {
  .heroHeartVisual {
    width: 194px;
    height: 210px;
    margin-top: -2px;
  }


  .heroSimple {
    padding-top: 6px;
    padding-bottom: 106px;
  }

  .heroMedia {
    min-height: 214px;
    margin-bottom: 6px;
  }
.heroPill { margin-bottom: 6px; }
  .heroTitle { margin-bottom: 7px; }
  .heroSubtitle { margin-bottom: 10px; }

  .footerFade {
    height: 70px;
    background: linear-gradient(to top,
      rgba(245, 247, 251, 1) 0,
      rgba(245, 247, 251, .96) 26px,
      rgba(245, 247, 251, .76) 50px,
      rgba(245, 247, 251, 0) 70px);
  }
}



/* =========================================================
  V24 - LAPTOP / DESKTOP HERO + FOOTER LEGAL
  Mobile <=900px dikunci dan tidak diubah.

  Hero desktop tidak lagi dipusatkan vertikal berdasarkan
  tinggi viewport. Posisi mengikuti jarak tetap dari navbar,
  sehingga tetap stabil pada laptop dengan tinggi layar berbeda.
========================================================= */
@media (min-width: 901px) {
  .heroSimple {
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);

    /* 88px navbar + 118px = sekitar 206px dari paling atas layar */
    padding-top: 118px;
    padding-right: 20px;
    padding-bottom: 155px;
    padding-left: 20px;

    justify-content: flex-start;
  }

  .heroInner {
    /* Hapus offset lama +30px ke bawah khusus desktop */
    transform: none;

    /* Tetap center horizontal, tetapi posisi vertikal di-anchor dari atas */
    margin: 0 auto;
  }

  .heroMedia {
    min-height: 430px;
  }

  .heroHeartVisual {
    width: 360px;
    height: 418px;
  }

  .footerCopyright {
    padding: 0;
  }

  .footerCopyrightInner {
    min-height: 48px;
    padding: 0 42px;
    justify-content: space-between;
    gap: 28px;
  }

  .footerText {
    justify-content: flex-start;
    white-space: nowrap;
  }

  .footerLegal {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: rgba(255, 255, 255, .94);
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .footerLegal a {
    transition: opacity .16s ease;
  }

  .footerLegal a:hover,
  .footerLegal a:focus-visible {
    opacity: .74;
  }

  .footerLegal a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .42);
    outline-offset: 4px;
    border-radius: 4px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .heroText,
  .heroMedia {
    opacity: 1;
    transform: none;
    filter: none;
  }
}