/* =========================================================
  SMART INTERACTIVE - INDEX CSS
  Lokasi: ./css/index.css

  BASELINE PWA LANDING:
  - Komposisi mengikuti karakter referensi mobile education app.
  - Desktop/laptop: hero website full-width, ilustrasi di kiri, konten + CTA di kanan; awan dekoratif kedua dipindahkan lebih tinggi dan lebih ke kiri agar tidak bertumpuk dengan bulatan coral.
  - Mobile memakai satu baseline posisi yang stabil.
  - Hero dan welcome content dipusatkan vertikal sebagai satu grup.
  - Ilustrasi jerapah memakai 1 file GIF transparan untuk efek berjalan.
  - Lengkungan dataran bumi pada layar HP dinaikkan 12px tanpa menggeser blok konten bawah.
  - Area bawah hero memakai lengkungan dataran bumi yang lebih rendah dan landai khusus mobile.
  - Tidak menggunakan offset/translate posisi manual.
  - Tidak ada override posisi V1/V2/V3/V4 yang saling menimpa.
  - Tidak memakai breakpoint berdasarkan tinggi layar.
  - Tombol Let's Go memakai varian Coral Glow dengan pulse ring lembut untuk menarik perhatian tanpa mengganggu.
  - Headline mobile diperbesar dan ditambahkan dukungan Diktisaintek di bawah CTA.
  - Warna focal kuning-orange dengan halo lembut untuk memperjelas ilustrasi.
  - Rounded besar, soft shadow, clean, playful.
  - Footer legal fixed pada desktop/tablet dan disembunyikan pada layar HP <=600px.
  - Brand Smart Interactive dan badge Kids Learning disembunyikan pada laptop/desktop.
========================================================= */

:root {
  --cream: #fff2dc;
  --cream-soft: #fff8ed;
  --yellow: #ffbb10;
  --yellow-deep: #ffad0a;
  --orange: #ff8b36;
  --coral: #ff6551;
  --peach: #fff0d9;
  --pink: #ff8fa7;
  --purple: #856cf4;
  --purple-soft: #f0ebff;
  --sky: #58b9f0;
  --sky-soft: #e7f5ff;
  --mint: #6dcea7;
  --mint-soft: #e8f8f0;
  --ink: #37343a;
  --ink-soft: #625d67;
  --muted: #a7a1ab;
  --white: #ffffff;
  --screen-radius: 34px;
  --soft-shadow:
    0 28px 60px rgba(174, 122, 58, .12),
    0 10px 24px rgba(134, 100, 70, .08);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family:
    "Nunito",
    ui-rounded,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .82), transparent 20%),
    radial-gradient(circle at 84% 14%, rgba(255, 224, 185, .42), transparent 23%),
    linear-gradient(135deg, #fff1db 0%, #fff4e3 52%, #fff0da 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

/* =========================================================
  PAGE STAGE
========================================================= */
.pwaLanding {
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(34px, env(safe-area-inset-top))
    28px
    max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pwaStage {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: minmax(0, 390px) minmax(0, 390px);
  gap: clamp(40px, 7vw, 84px);
  align-items: center;
  justify-content: center;
}

.appScreen {
  position: relative;
  width: 100%;
  height: min(820px, calc(100dvh - 92px));
  min-height: 690px;
  border-radius: var(--screen-radius);
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}

/* =========================================================
  WELCOME SCREEN
========================================================= */
.appScreen--welcome {
  padding:
    calc(28px + env(safe-area-inset-top))
    28px
    calc(26px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(270px, 1fr) auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 18%),
    linear-gradient(155deg, #ffc31b 0%, #ffb90f 58%, #ffad09 100%);
  isolation: isolate;
}

.appScreen--welcome::before,
.appScreen--welcome::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.appScreen--welcome::before {
  width: 220px;
  height: 220px;
  left: -110px;
  bottom: 25%;
  background: rgba(255,255,255,.07);
}

.appScreen--welcome::after {
  width: 190px;
  height: 190px;
  right: -110px;
  top: 22%;
  background: rgba(255,255,255,.09);
}


/* =========================================================
  MOBILE APP BADGE
  Default disembunyikan dan hanya diaktifkan pada HP.
========================================================= */
.mobileAppBadge {
  display: none;
}

.welcomeTop {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.appBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.appBrandMark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--orange);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(143, 85, 13, .12);
}

.appBrandMark i {
  font-size: 16px;
}

.appBrandText {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #fff;
}

.appBrandText strong {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .055em;
}

.appBrandText small {
  margin-top: 5px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .76;
}

.welcomeBadge {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 58, 7, .74);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* =========================================================
  WELCOME ILLUSTRATION
========================================================= */
.welcomeVisual {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 8px -8px 0;
}

.heroArtHalo {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.07) 54%, transparent 72%);
  filter: blur(.2px);
}

.welcomeIllustration {
  position: relative;
  z-index: 3;
  width: min(100%, 320px);
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 22px 18px rgba(111, 66, 8, .14));
  transform: translateZ(0);
  backface-visibility: hidden;
}

.decorDot,
.decorCloud {
  position: absolute;
  z-index: 1;
}

.decorDot {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.decorDot--sky {
  width: 19px;
  height: 19px;
  left: 4%;
  top: 25%;
  background: #66cfeb;
}

.decorDot--coral {
  width: 43px;
  height: 43px;
  right: 2%;
  top: 24%;
  background: #ff6374;
}

.decorDot--purple {
  width: 31px;
  height: 31px;
  right: 7%;
  bottom: 17%;
  background: #8b70f8;
}

.decorDot--mint {
  width: 15px;
  height: 15px;
  left: 11%;
  bottom: 20%;
  background: #ec6c38;
}

.decorCloud {
  width: 48px;
  height: 24px;
}

.decorCloud i {
  position: absolute;
  bottom: 0;
  display: block;
  background: rgba(255,255,255,.90);
  border-radius: 999px 999px 5px 5px;
}

.decorCloud i:nth-child(1) {
  width: 24px;
  height: 13px;
  left: 0;
}

.decorCloud i:nth-child(2) {
  width: 22px;
  height: 20px;
  left: 13px;
}

.decorCloud i:nth-child(3) {
  width: 24px;
  height: 11px;
  left: 25px;
}

.decorCloud--one {
  left: 12%;
  top: 30%;
  transform: scale(.78);
}

.decorCloud--two {
  right: 3%;
  bottom: 25%;
  transform: scale(.92);
}


.decorSparkle {
  display: none;
}

/* =========================================================
  WELCOME COPY + ACTION
========================================================= */
.welcomeContent {
  position: relative;
  z-index: 4;
  text-align: center;
}

.welcomeEyebrow {
  margin: 0 0 8px;
  color: rgba(88, 55, 10, .62);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.welcomeContent h1 {
  margin: 0 auto;
  max-width: 310px;
  color: #3e332b;
  font-size: clamp(27px, 2.6vw, 34px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.045em;
}

.welcomeContent h1 span {
  color: #fff;
  text-shadow: 0 4px 16px rgba(128, 70, 8, .10);
}


.welcomeActions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.welcomeButton {
  position: relative;
  width: min(100%, 236px);
  min-height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  overflow: visible;
  isolation: isolate;

  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;

  background:
    linear-gradient(
      180deg,
      #ffb08b 0%,
      #ff8a70 40%,
      #ff6968 72%,
      #ff5362 100%
    );

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

  box-shadow:
    0 0 8px rgba(255,255,255,.68),
    0 0 18px rgba(255, 103, 92, .28),
    inset 0 1px 0 rgba(255,255,255,.64);

  text-shadow:
    0 1px 2px rgba(135, 48, 47, .26);

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

.welcomeButton::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 11px;
  right: 11px;
  top: 5px;
  height: 44%;
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,239,229,.22) 66%,
      rgba(255,255,255,0) 100%
    );

  pointer-events: none;
}

.welcomeButton::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.74);
  box-shadow:
    0 0 0 1px rgba(255, 103, 92, .14),
    0 0 18px rgba(255, 103, 92, .16);
  opacity: 0;
  pointer-events: none;
  animation: welcomeButtonPulseRing 2.45s cubic-bezier(.22,.61,.36,1) infinite;
}

.welcomeButton i {
  font-size: 12px;
  transition: transform .18s ease;
  animation: welcomeButtonArrowPulse 2.45s ease-in-out infinite;
}

.welcomeButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.04);
  box-shadow:
    0 0 10px rgba(255,255,255,.78),
    0 0 24px rgba(255, 91, 86, .38),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.welcomeButton:hover::after,
.welcomeButton:focus-visible::after,
.welcomeButton:active::after,
.welcomeButton.is-clicked::after {
  animation-play-state: paused;
  opacity: .26;
}

.welcomeButton:hover i,
.welcomeButton:focus-visible i,
.welcomeButton:active i,
.welcomeButton.is-clicked i {
  animation-play-state: paused;
}

.welcomeButton:hover i {
  transform: translateX(3px);
}

.welcomeButton:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.34),
    0 0 12px rgba(255,255,255,.82),
    0 0 26px rgba(255, 91, 86, .44),
    inset 0 1px 0 rgba(255,255,255,.76);
}

.welcomeButton:active,
.welcomeButton.is-clicked {
  transform: scale(.985);
  box-shadow:
    0 0 6px rgba(255,255,255,.56),
    inset 0 2px 5px rgba(166, 52, 49, .16);
}

.welcomeSecondary {
  color: rgba(72, 52, 31, .62);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
}

.welcomeSecondary strong {
  color: #70461d;
  font-weight: 900;
}

/* =========================================================
  LET'S GO - ATTENTION PULSE
  Pulse ring berada di luar tombol agar CTA terlihat hidup.
  Jarak pulse dibuat sama pada keempat sisi tombol.
  Ekspansi memakai spread shadow dalam pixel agar kanan, kiri,
  atas, dan bawah tetap konsisten.
========================================================= */
@keyframes welcomeButtonPulseRing {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0 0 rgba(255,255,255,.34),
      0 0 14px rgba(255, 103, 92, .12);
  }

  18% {
    opacity: .52;
  }

  54% {
    opacity: .18;
    box-shadow:
      0 0 0 7px rgba(255,255,255,.12),
      0 0 22px rgba(255, 103, 92, .18);
  }

  72%,
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 12px rgba(255,255,255,0),
      0 0 28px rgba(255, 103, 92, 0);
  }
}

@keyframes welcomeButtonArrowPulse {
  0%,
  58%,
  100% {
    transform: translateX(0);
  }

  68% {
    transform: translateX(3px);
  }

  76% {
    transform: translateX(0);
  }
}

/* =========================================================
  SUPPORT PARTNER
  Ditampilkan pada landing mobile.
========================================================= */
.supportPartner {
  display: none;
}

/* =========================================================
  PREVIEW SCREEN
========================================================= */
.appScreen--preview {
  padding: 31px 28px 86px;
  background: rgba(255,255,255,.97);
}

.previewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.previewHeader small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.previewHeader h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.035em;
}

.previewProfile {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #ff7c32;
  background: linear-gradient(145deg, #fff8e8, #ffe5b5);
  box-shadow: 0 10px 20px rgba(142, 105, 63, .10);
}

.previewProfile i {
  font-size: 20px;
}

.highlightCard {
  position: relative;
  min-height: 176px;
  margin-top: 28px;
  padding: 23px 142px 22px 23px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #ffae07 0%, #ff9b0d 100%);
}

.highlightCopy {
  position: relative;
  z-index: 3;
}

.highlightQuote {
  display: block;
  height: 17px;
  font-size: 28px;
  line-height: .8;
  font-weight: 900;
  opacity: .95;
}

.highlightCopy small {
  display: block;
  margin: 5px 0 2px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .76;
}

.highlightCopy h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.17;
  font-weight: 900;
  letter-spacing: -.025em;
}

.highlightCopy a {
  min-height: 31px;
  margin-top: 13px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ec8812;
  font-size: 8.5px;
  font-weight: 900;
  text-decoration: none;
  background: #fff;
}

.highlightVisual {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: end center;
}

.highlightVisual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 16px rgba(114, 61, 4, .12));
}

/* =========================================================
  QUICK MENU
========================================================= */
.quickMenu {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quickMenuItem {
  min-width: 0;
  min-height: 92px;
  padding: 12px 7px 10px;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .18s ease;
}

.quickMenuItem:hover {
  transform: translateY(-3px);
}

.quickMenuItem span {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.quickMenuItem strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quickMenuItem--peach {
  color: #f17131;
  background: #fff3df;
}

.quickMenuItem--peach span {
  background: #ff8b39;
}

.quickMenuItem--sky {
  color: #429edb;
  background: var(--sky-soft);
}

.quickMenuItem--sky span {
  background: #58b8ee;
}

.quickMenuItem--purple {
  color: #7760e8;
  background: var(--purple-soft);
}

.quickMenuItem--purple span {
  background: #846cf4;
}

.quickMenuItem--mint {
  color: #48ac83;
  background: var(--mint-soft);
}

.quickMenuItem--mint span {
  background: #6acba5;
}

/* =========================================================
  RECOMMENDATIONS
========================================================= */
.recommendSection {
  margin-top: 30px;
}

.sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sectionHeading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.025em;
}

.sectionHeading a {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.recommendList {
  margin-top: 13px;
  display: grid;
  gap: 11px;
}

.recommendCard {
  min-height: 72px;
  padding: 11px 12px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  text-decoration: none;
  background: #fff8e9;
  border: 1px solid rgba(234, 218, 190, .48);
  transition: transform .18s ease, box-shadow .18s ease;
}

.recommendCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(128, 95, 61, .07);
}

.recommendIcon {
  width: 47px;
  height: 47px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
}

.recommendIcon--orange {
  background: #ffae0b;
}

.recommendIcon--purple {
  background: #8b72f5;
}

.recommendText {
  min-width: 0;
}

.recommendText strong,
.recommendText small {
  display: block;
}

.recommendText strong {
  color: #464148;
  font-size: 10.5px;
  font-weight: 900;
}

.recommendText small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8.2px;
  line-height: 1.35;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendArrow {
  color: #bbb5be;
  font-size: 9px;
}

/* =========================================================
  PREVIEW BOTTOM NAV
========================================================= */
.previewBottomNav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  padding: 0 27px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(221, 216, 225, .44);
  box-shadow: 0 -10px 24px rgba(122, 98, 81, .05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.previewBottomNav a {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #d4d6df;
  font-size: 14px;
  text-decoration: none;
}

.previewBottomNav a.is-active {
  color: #fff;
  background: #ffb20d;
  box-shadow: 0 8px 18px rgba(255, 172, 7, .23);
}



/* =========================================================
  SITE FOOTER
  Referensi:
  - Full width abu-abu muda.
  - Copyright di sisi kiri.
  - Syarat & Ketentuan + Kebijakan Privasi di sisi kanan.
  - Divider vertikal tipis.
  - Selalu berada di bawah viewport.
========================================================= */
.siteFooter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 100%;
  min-height: 52px;
  background: #f1f3f6;
  border-top: 1px solid #dde1e6;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.siteFooterInner {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.siteFooterCopyright {
  margin: 0;
  color: #747b89;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
}

.siteFooterLinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.siteFooterLinks a {
  color: #666d7a;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}

.siteFooterLinks a:hover {
  color: #3f4652;
}

.siteFooterLinks a:focus-visible {
  outline: 2px solid rgba(92, 101, 116, .26);
  outline-offset: 4px;
  border-radius: 4px;
}

.siteFooterDivider {
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  display: block;
  background: #c9ced6;
}

/* =========================================================
  DESKTOP / LAPTOP LANDING - FULL WIDTH WEBSITE
  - Tidak memakai card/wrapper besar.
  - Hero menjadi section website full-width.
  - Ilustrasi di kiri, konten + CTA di kanan.
  - Konten tetap dibatasi max-width agar rapi di layar lebar.
  - Layout tablet/mobile <= 920px tidak disentuh.
========================================================= */
@media (min-width: 921px) {
  body {
    background: #ffba12;
  }

  .pwaLanding {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 52px);
    min-height: calc(100dvh - 52px);
    padding: 0 0 52px;
    display: block;
    background:
      radial-gradient(circle at 28% 44%, rgba(255, 245, 201, .30), transparent 28%),
      radial-gradient(circle at 86% 30%, rgba(255, 228, 143, .18), transparent 24%),
      linear-gradient(180deg, #ffc82d 0%, #ffbd18 58%, #ffb20c 100%);
  }

  .pwaStage {
    width: 100%;
    max-width: none;
    display: block;
  }

  .appScreen--preview {
    display: none;
  }

  .appScreen--welcome {
    width: 100%;
    min-height: calc(100vh - 52px);
    min-height: calc(100dvh - 52px);
    height: auto;
    padding: 108px max(48px, calc((100vw - 1180px) / 2)) 70px;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(390px, 500px);
    grid-template-rows: 1fr;
    column-gap: clamp(56px, 7vw, 110px);
    align-items: center;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 44%, rgba(255, 246, 205, .30), transparent 28%),
      radial-gradient(circle at 88% 28%, rgba(255, 232, 154, .18), transparent 25%),
      linear-gradient(180deg, #ffc82d 0%, #ffbd18 58%, #ffb20c 100%);
  }

  .appScreen--welcome::before {
    width: 320px;
    height: 320px;
    left: -150px;
    bottom: 8%;
    background: rgba(255, 236, 163, .14);
    z-index: 0;
  }

  .appScreen--welcome::after {
    width: 290px;
    height: 290px;
    right: -120px;
    top: 18%;
    background: rgba(255, 236, 163, .12);
    z-index: 0;
  }

  .welcomeTop {
    display: none;
  }

  .welcomeVisual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 520px;
    margin: 0;
    display: grid;
    place-items: center;
  }

  .heroArtHalo {
    width: min(84%, 500px);
  }

  .welcomeIllustration {
    width: min(100%, 500px);
    max-height: 610px;
    object-position: center;
  }

  .decorDot--sky {
    left: 7%;
    top: 25%;
  }

  .decorDot--coral {
    right: 4%;
    top: 22%;
  }

  .decorDot--purple {
    right: 8%;
    bottom: 15%;
  }

  .decorDot--mint {
    left: 12%;
    bottom: 17%;
  }

  .decorCloud--one {
    left: 10%;
    top: 34%;
  }

  .decorCloud--two {
    right: 18%;
    top: 10%;
    bottom: auto;
  }

  .welcomeContent {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0;
    text-align: left;
    align-self: center;
  }

  .welcomeEyebrow {
    margin: 0 0 18px;
    color: #a5520f;
    font-size: 12px;
    letter-spacing: .07em;
  }

  .welcomeContent h1 {
    margin: 0;
    max-width: 500px;
    color: #542b0f;
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.03;
    letter-spacing: -.045em;
  }

  .welcomeContent h1 span {
    color: #ff5f52;
  }

  .welcomeActions {
    margin-top: 30px;
    align-items: flex-start;
    gap: 12px;
  }

  .welcomeButton {
    width: 270px;
    min-height: 66px;
    padding: 0 28px;
    font-size: 19px;
  }

  .welcomeButton i {
    font-size: 17px;
  }

  .welcomeSecondary {
    font-size: 11px;
  }

  .supportPartner {
    margin: 24px 0 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .supportPartnerLabel {
    color: rgba(78, 48, 22, .76);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .supportPartnerLogo {
    width: auto;
    height: 34px;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
  }

}

/* =========================================================
  TABLET / SMALL DESKTOP
========================================================= */
@media (max-width: 920px) {
  .pwaLanding {
    padding: 0;
    display: block;
  }

  .pwaStage {
    width: 100%;
    display: block;
  }

  .appScreen--preview {
    display: none;
  }

  .appScreen--welcome {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
}

/* =========================================================
  MOBILE PWA - REFERENCE IMPLEMENTATION
  Target visual:
  - Ilustrasi besar di bagian atas/tengah.
  - Badge singkat "Belajar • Bermain • Bertumbuh".
  - Headline 3 baris dengan aksen coral.
  - Tombol Let's Go 3D.
  - Hero + konten dipusatkan vertikal sebagai satu grup.
  - Tetap ringan dan responsif.
========================================================= */
@media (max-width: 600px) {
  .appScreen--welcome {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding:
      calc(78px + env(safe-area-inset-top))
      18px
      calc(34px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    row-gap: 6px;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 244, 193, .40), transparent 30%),
      radial-gradient(circle at 8% 42%, rgba(255, 230, 139, .20), transparent 20%),
      radial-gradient(circle at 96% 30%, rgba(255, 231, 148, .18), transparent 23%),
      linear-gradient(180deg, #ffc82d 0%, #ffbd18 58%, #ffb20c 100%);
    isolation: isolate;
    overflow: hidden;
  }

  .appScreen--welcome::before {
    width: 210px;
    height: 210px;
    left: -118px;
    top: 30%;
    bottom: auto;
    background: rgba(255, 232, 148, .18);
    z-index: 0;
  }

  .appScreen--welcome::after {
    width: 200px;
    height: 200px;
    right: -116px;
    top: 17%;
    background: rgba(255, 232, 148, .15);
    z-index: 0;
  }

  .welcomeTop {
    display: none;
  }

  /* =====================================================
    MOBILE APP BADGE - TOP LEFT
  ===================================================== */
  .mobileAppBadge {
    position: absolute;
    z-index: 8;
    top: calc(18px + env(safe-area-inset-top));
    left: 18px;
    min-height: 54px;
    padding: 7px 13px 7px 9px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #4f3216;
    background:
      linear-gradient(
        145deg,
        rgba(255, 244, 201, .74),
        rgba(255, 224, 126, .58)
      );
    border: 1px solid rgba(255, 248, 220, .42);
    box-shadow:
      0 10px 22px rgba(148, 85, 9, .09),
      inset 0 1px 0 rgba(255,255,255,.38);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .mobileAppBadgeIcon {
    width: 34px;
    height: 40px;
    flex: 0 0 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #422b15;
    background: rgba(255,255,255,.24);
    border: 1.5px solid rgba(76, 47, 17, .28);
  }

  .mobileAppBadgeIcon i {
    font-size: 20px;
  }

  .mobileAppBadgeText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: .92;
  }

  .mobileAppBadgeText strong,
  .mobileAppBadgeText small {
    display: block;
    color: inherit;
  }

  .mobileAppBadgeText strong {
    font-size: 11.5px;
    font-weight: 900;
  }

  .mobileAppBadgeText small {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 900;
  }

  /* =====================================================
    MOBILE TEXT COLOR THEMES
    Default aktif: cocoaCoral.
    Untuk mencoba varian lain cukup ganti class pada:
    .appScreen--welcome

    cocoaCoral = paling hangat dan kontras
    berry       = lebih manis / playful
    navyCoral   = lebih modern / tegas
  ===================================================== */

  /* VARIAN A - COCOA + CORAL (DEFAULT / REKOMENDASI) */
  .mobileTextTheme--cocoaCoral .welcomeEyebrow {
    color: #c85c0c;
  }

  .mobileTextTheme--cocoaCoral .welcomeContent h1 {
    color: #542b0f;
    text-shadow: 0 1px 0 rgba(255,255,255,.12);
  }

  .mobileTextTheme--cocoaCoral .welcomeContent h1 span {
    color: #ff5a60;
  }


  /* VARIAN B - BERRY */
  .mobileTextTheme--berry .welcomeEyebrow {
    color: #b85516;
  }

  .mobileTextTheme--berry .welcomeContent h1 {
    color: #4d2c45;
  }

  .mobileTextTheme--berry .welcomeContent h1 span {
    color: #ed577f;
  }


  /* VARIAN C - NAVY + CORAL */
  .mobileTextTheme--navyCoral .welcomeEyebrow {
    color: #b85b12;
  }

  .mobileTextTheme--navyCoral .welcomeContent h1 {
    color: #283b59;
  }

  .mobileTextTheme--navyCoral .welcomeContent h1 span {
    color: #ff6271;
  }


  /* =====================================================
    HERO VISUAL
  ===================================================== */
  .welcomeVisual {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0 30px;
    display: grid;
    place-items: center;
    align-self: center;
    overflow: visible;
  }

  .heroArtHalo {
    display: block;
    position: absolute;
    z-index: 1;
    width: min(92vw, 390px);
    height: min(92vw, 390px);
    border-radius: 50%;
    background:
      radial-gradient(
        circle,
        rgba(255, 248, 213, .72) 0%,
        rgba(255, 242, 193, .30) 52%,
        rgba(255, 242, 193, 0) 74%
      );
    pointer-events: none;
  }

  .welcomeIllustration {
    position: relative;
    z-index: 4;
    width: min(86vw, 350px);
    max-width: 100%;
    max-height: min(50svh, 520px);
    object-fit: contain;
    object-position: center;
    filter:
      drop-shadow(0 16px 14px rgba(117, 67, 8, .08))
      drop-shadow(0 24px 26px rgba(133, 78, 9, .05));
  }

  .welcomeVisual::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -32px;
    width: min(136vw, 600px);
    height: 78px;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0 / 72% 72% 0 0;
    background:
      linear-gradient(
        180deg,
        rgba(255, 222, 126, .98) 0%,
        rgba(255, 204, 67, .98) 46%,
        rgba(255, 184, 24, 1) 100%
      );
    box-shadow:
      inset 0 7px 14px rgba(255,255,255,.13),
      0 -2px 0 rgba(255, 238, 183, .26),
      0 9px 18px rgba(153, 92, 13, .06);
    z-index: 1;
    pointer-events: none;
  }

  .welcomeVisual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: min(74vw, 290px);
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(144, 84, 10, .08);
    filter: blur(8px);
    z-index: 2;
    pointer-events: none;
  }

  /* =====================================================
    DECORATION
  ===================================================== */
  .decorDot,
  .decorCloud,
  .decorSparkle {
    position: absolute;
    z-index: 2;
  }

  .decorDot--sky {
    width: 16px;
    height: 16px;
    left: 10%;
    top: 24%;
    background: #29b8ea;
  }

  .decorDot--coral {
    width: 36px;
    height: 36px;
    right: 8%;
    top: 21%;
    background: #ff6684;
  }

  .decorDot--purple,
  .decorDot--mint,
  .decorCloud--two {
    display: none;
  }

  .decorCloud--one {
    left: 15%;
    top: 34%;
    transform: scale(.68);
  }

  .decorCloud i {
    background: rgba(255,255,255,.94);
  }

  .decorSparkle {
    display: block;
    color: rgba(255,255,255,.96);
    font-size: 24px;
    line-height: 1;
    text-shadow: 0 5px 12px rgba(173, 108, 10, .08);
  }

  .decorSparkle--one {
    right: 24%;
    top: 9%;
  }

  .decorSparkle--two {
    left: 13%;
    bottom: 24%;
    font-size: 20px;
  }

  /* =====================================================
    CONTENT
  ===================================================== */
  .welcomeContent {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 430px;
    margin: -22px auto 0;
    padding: 0 8px;
    text-align: center;
    align-self: center;
  }

  .welcomeEyebrow {
    width: max-content;
    max-width: 100%;
    min-height: 38px;
    margin: 0 auto 14px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d66d0c;
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: none;
    background: rgba(255, 246, 211, .72);
    border: 1px solid rgba(255, 251, 232, .48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .welcomeContent h1 {
    margin: 0 auto;
    max-width: 390px;
    color: #6d3709;
    font-size: clamp(25px, 6.8vw, 32px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.035em;
  }

  .welcomeContent h1 span {
    color: #ff5f52;
    font-size: 1em;
    text-shadow: none;
  }


  .welcomeSecondary {
    display: none;
  }

  .welcomeActions {
    position: relative;
    margin-top: 16px;
    padding: 10px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    isolation: isolate;
  }

  .welcomeActions::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(92vw, 360px);
    height: 118px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
      radial-gradient(
        ellipse at center,
        rgba(255, 250, 226, .94) 0%,
        rgba(255, 236, 201, .70) 36%,
        rgba(255, 203, 174, .30) 64%,
        rgba(255, 165, 132, 0) 100%
      );
    filter: blur(5px);
    pointer-events: none;
  }

  .supportPartner {
    margin: 16px auto 0;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .supportPartnerLabel {
    flex: 0 0 auto;
    color: #5c3515;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .supportPartnerLogo {
    width: auto;
    height: 28px;
    max-width: min(42vw, 150px);
    object-fit: contain;
    object-position: center;
  }

  /* =====================================================
    LET'S GO BUTTON - CLEAN 3D
    - Efek 3D berasal dari face + contact shadow.
    - Shadow dibuat rapat, tidak menyebar berlebihan.
    - Highlight atas dibuat halus.
    - Pressed state terasa seperti tombol benar-benar ditekan.
  ===================================================== */
  .welcomeButton {
    position: relative;
    width: min(100%, 238px);
    min-height: 64px;
    padding: 0 24px;
    border-radius: 999px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    justify-items: center;
    gap: 5px;

    overflow: visible;
    isolation: isolate;

    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .005em;
    text-decoration: none;

    background:
      linear-gradient(
        180deg,
        #ffb28e 0%,
        #ff8b72 38%,
        #ff696a 70%,
        #ff5363 100%
      );

    border:
      4px solid rgba(255,255,255,.98);

    box-shadow:
      0 0 9px rgba(255,255,255,.78),
      0 0 20px rgba(255, 101, 92, .34),
      inset 0 1px 0 rgba(255,255,255,.72);

    text-shadow:
      0 1px 2px rgba(131, 46, 45, .28);

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

  .welcomeButton::before {
    content: "";
    position: absolute;
    z-index: -1;

    left: 13px;
    right: 13px;
    top: 6px;
    height: 23px;

    border-radius: 999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.58) 0%,
        rgba(255,239,232,.24) 66%,
        rgba(255,255,255,0) 100%
      );

    pointer-events: none;
  }

  .welcomeButton::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    display: block;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.78);
    box-shadow:
      0 0 0 1px rgba(255, 103, 92, .16),
      0 0 20px rgba(255, 103, 92, .18);
    opacity: 0;
    pointer-events: none;
    animation: welcomeButtonPulseRing 2.45s cubic-bezier(.22,.61,.36,1) infinite;
  }

  .welcomeButton span,
  .welcomeButton i {
    position: relative;
    z-index: 2;
  }

  .welcomeButton span {
    justify-self: end;
    padding-right: 8px;
    white-space: nowrap;
  }

  .welcomeButton i {
    display: inline-block;
    justify-self: center;

    font-size: 20px;

    transition:
      transform .16s ease;

    animation:
      welcomeButtonArrowPulse 2.45s ease-in-out infinite;
  }

  .welcomeButton:hover {
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
      0 0 12px rgba(255,255,255,.86),
      0 0 24px rgba(255, 91, 86, .42),
      inset 0 1px 0 rgba(255,255,255,.76);
  }

  .welcomeButton:hover i {
    transform: translateX(3px);
  }

  .welcomeButton:active,
  .welcomeButton.is-clicked {
    transform: scale(.985);
    box-shadow:
      0 0 7px rgba(255,255,255,.64),
      inset 0 2px 5px rgba(164, 52, 52, .18);
  }
}

/* =========================================================
  EXTRA SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
  .mobileAppBadge {
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
    min-height: 49px;
    padding: 6px 11px 6px 8px;
    border-radius: 12px;
  }

  .mobileAppBadgeIcon {
    width: 31px;
    height: 36px;
    flex-basis: 31px;
    border-radius: 7px;
  }

  .mobileAppBadgeIcon i {
    font-size: 18px;
  }

  .mobileAppBadgeText strong,
  .mobileAppBadgeText small {
    font-size: 10.5px;
  }
}

@media (max-width: 360px) {
  .appScreen--welcome {
    padding-left: 12px;
    padding-right: 12px;
  }

  .welcomeVisual {
    padding-bottom: 26px;
  }

  .welcomeVisual::before {
    bottom: -36px;
    width: min(140vw, 490px);
    height: 72px;
  }

  .welcomeVisual::after {
    bottom: -18px;
    width: min(70vw, 240px);
  }

  .welcomeIllustration {
    width: min(82vw, 285px);
    max-height: 46svh;
  }

  .welcomeEyebrow {
    font-size: 10.8px;
  }

  .welcomeContent h1 {
    max-width: 330px;
    font-size: 22px;
  }

  .supportPartner {
    margin-top: 13px;
    gap: 8px;
  }

  .supportPartnerLabel {
    font-size: 10.5px;
  }

  .supportPartnerLogo {
    height: 24px;
    max-width: 132px;
  }


  .welcomeButton {
    width: 205px;
    min-height: 52px;
    font-size: 17px;
  }
}


@media (min-width: 601px) and (max-width: 920px) {
  .pwaLanding {
    padding-bottom: 68px;
  }

  .appScreen--welcome {
    min-height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
  }

  .siteFooter {
    min-height: 68px;
  }

  .siteFooterInner {
    min-height: 68px;
    padding: 8px 18px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .siteFooterCopyright {
    font-size: 10px;
    white-space: normal;
  }

  .siteFooterLinks {
    justify-content: center;
    gap: 10px;
  }

  .siteFooterLinks a {
    font-size: 10px;
  }

  .siteFooterDivider {
    height: 14px;
  }
}

@media (max-width: 600px) {
  .siteFooter {
    display: none;
  }
}

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

  .welcomeButton::after,
  .welcomeButton i {
    animation: none !important;
  }
}