:root {
  --navy: #0F3366;
  --navy-2: #0B2750;
  --biru: #3466C2;
  --biru-muda: #DCE6F7;
  --kuning: #FBDD62;
  --kuning-2: #FDF1C2;
  --krem: #FAFAF5;
  --teks: #0F3366;
  --teks-2: #46597A;
  --garis: rgba(15, 51, 102, .1);
  --merah: #C2392E;
  --mulus: cubic-bezier(.16, 1, .3, 1);
  --pegas: cubic-bezier(.34, 1.56, .64, 1);
  --r-besar: 36px;
  --r: 22px;
  --sisi: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--teks);
  background: var(--krem);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; line-height: 1.02; font-weight: 800; }
h2 { font-size: clamp(2.1rem, 6vw, 4.4rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--biru); outline-offset: 3px; border-radius: 8px; }

.lewati { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 99; }
.lewati:focus { left: 8px; }

.label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--biru); margin-bottom: 14px; }
.label-terang { color: var(--kuning); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--teks-2); max-width: 34em; }
.lead-terang { color: rgba(255, 255, 255, .78); }
.kecil { font-size: .88rem; color: var(--teks-2); }

/* tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff; font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--mulus), background .25s, box-shadow .25s;
}
.tombol:active { transform: scale(.97); }
.tombol-garis { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.tombol-kecil { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.tombol-penuh { width: 100%; margin-top: 8px; }
@media (hover: hover) {
  .tombol:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(15, 51, 102, .55); }
  .tombol-garis:hover { background: var(--navy); color: #fff; }
}

/* header */
.atas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--sisi);
  background: rgba(250, 250, 245, .78);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--garis);
}
.merek { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.atas nav { display: none; gap: 28px; font-size: .95rem; font-weight: 600; }
.atas nav a { text-decoration: none; color: var(--teks-2); transition: color .2s; }
.atas nav a:hover { color: var(--navy); }
@media (min-width: 860px) { .atas nav { display: flex; } }

/* hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center;
  padding: clamp(28px, 6vw, 72px) var(--sisi) clamp(48px, 8vw, 110px);
  max-width: 1320px; margin: 0 auto;
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pil {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px; background: var(--kuning-2);
  font-size: .9rem; font-weight: 700; margin-bottom: 22px;
}
.titik { width: 9px; height: 9px; border-radius: 50%; background: #2FA35B; box-shadow: 0 0 0 0 rgba(47, 163, 91, .5); animation: denyut 2.2s infinite; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 5.6rem); line-height: .95; margin-bottom: 22px; }
.sorot { position: relative; display: inline-block; color: var(--biru); }
.sorot::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .26em; z-index: -1;
  background: var(--kuning); border-radius: 6px; transform-origin: left; animation: sapu 1.1s .5s var(--mulus) both;
}
.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 14px; }
.hero-teks > * { animation: naik .8s var(--mulus) both; }
.hero-teks > *:nth-child(2) { animation-delay: .08s; }
.hero-teks > *:nth-child(3) { animation-delay: .16s; }
.hero-teks > *:nth-child(4) { animation-delay: .24s; }
.hero-teks > *:nth-child(5) { animation-delay: .32s; }

/* mesin cuci */
.mesin-wadah { position: relative; width: min(100%, 440px); margin: 0 auto; animation: muncul-mesin 1s .2s var(--pegas) both; }
.mesin { width: 100%; height: auto; animation: getar .32s linear infinite; filter: drop-shadow(0 30px 40px rgba(15, 51, 102, .16)); }
.drum { transform-origin: 200px 278px; transform-box: view-box; animation: putar var(--durasi, 2.4s) linear infinite; }
.air { animation: ombak 2.2s ease-in-out infinite alternate; }
.busa circle { transform-box: fill-box; transform-origin: center; animation: busa 1.6s ease-in-out infinite alternate; }
.busa circle:nth-child(2n) { animation-delay: -.8s; }
.lampu { fill: #C5D5EE; }
.l1 { animation: kedip 1.4s infinite; }
.l2 { animation: kedip 1.4s .7s infinite; }
.layar { fill: var(--kuning); font: 700 15px "Plus Jakarta Sans", sans-serif; letter-spacing: .05em; }
.kenop { transform-box: fill-box; transform-origin: center; animation: kenop 6s var(--mulus) infinite; }
.kilau {
  position: absolute; width: 28px; aspect-ratio: 1; background: var(--biru);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: kilau 2.6s ease-in-out infinite;
}
.k1 { top: 2%; left: -2%; }
.k2 { top: 26%; right: -4%; width: 38px; background: var(--kuning); animation-delay: -1s; }
.k3 { bottom: 12%; left: -6%; width: 20px; animation-delay: -1.8s; }
.gelembung-wadah { position: absolute; inset: 0; pointer-events: none; }
.gelembung {
  position: absolute; bottom: 30%; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 18%, rgba(255, 255, 255, .25) 20%, rgba(52, 102, 194, .18) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(52, 102, 194, .35);
  animation: gelembung var(--t, 6s) linear forwards;
  pointer-events: auto; cursor: pointer;
}
.gelembung.pecah { animation: pecah .3s ease-out forwards; }

/* sortir */
.sortir { background: #fff; border-radius: var(--r-besar) var(--r-besar) 0 0; position: relative; }
.sortir-lekat {
  position: sticky; top: 56px; min-height: calc(100svh - 56px);
  display: grid; align-content: center; gap: clamp(20px, 4vw, 40px);
  padding: 40px var(--sisi); max-width: 1100px; margin: 0 auto;
}
.sortir { height: 260svh; }
.sortir-kepala { text-align: center; }
.panggung-svg { width: 100%; max-width: 760px; margin: 0 auto; overflow: visible; }
.ket { fill: var(--navy); font: 800 22px "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; }
.baju { will-change: transform; }
.langkah {
  list-style: none; margin: 0; padding: 0 var(--sisi) clamp(60px, 10vw, 120px);
  display: grid; gap: 16px; max-width: 1100px; margin-inline: auto;
  position: relative; background: #fff;
}
@media (min-width: 760px) { .langkah { grid-template-columns: repeat(3, 1fr); } }
.langkah li { padding: 28px; border-radius: var(--r); background: var(--krem); border: 1px solid var(--garis); }
.nomor {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--kuning); font-weight: 800; margin-bottom: 18px;
}
.langkah h3 { margin-bottom: 8px; }
.langkah p { color: var(--teks-2); }

/* layanan */
.layanan { padding: clamp(70px, 11vw, 140px) var(--sisi); max-width: 1180px; margin: 0 auto; }
.judul-blok { margin-bottom: clamp(28px, 5vw, 56px); max-width: 720px; }
.bento { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .kartu-besar { grid-row: span 2; }
  .kartu-lebar { grid-column: span 2; }
}
.kartu {
  padding: clamp(24px, 3vw, 36px); border-radius: var(--r-besar);
  background: #fff; border: 1px solid var(--garis);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .4s var(--mulus), box-shadow .4s var(--mulus);
}
.kartu p { color: var(--teks-2); }
.kartu.kuning { background: var(--kuning); border-color: transparent; justify-content: flex-end; min-height: 280px; }
.kartu.kuning p { color: var(--navy); }
.kartu.navy { background: var(--navy); color: #fff; border-color: transparent; }
.kartu-besar h3 { font-size: clamp(2rem, 4vw, 3rem); }
.ikon { width: 56px; height: 56px; color: var(--biru); margin-bottom: auto; padding-bottom: 8px; }
.kuning .ikon { color: var(--navy); width: 88px; height: 88px; }
.navy .ikon { color: var(--kuning); }
.kartu.tampil .ikon { animation: goyang .9s .3s var(--pegas); }
@media (hover: hover) {
  .kartu:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(15, 51, 102, .35); }
  .kartu:hover .ikon { animation: goyang .9s var(--pegas); }
}
.cip { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cip li { padding: 6px 12px; border-radius: 999px; background: var(--krem); font-size: .9rem; font-weight: 600; }
.navy .cip li { background: rgba(255, 255, 255, .1); }
.catatan { margin-top: 24px; color: var(--teks-2); }
.catatan a { font-weight: 700; color: var(--biru); }

/* antar jemput */
.jemput {
  position: relative; overflow: hidden;
  margin: 0 clamp(0px, 2vw, 24px); border-radius: var(--r-besar);
  background: var(--navy); color: #fff;
  padding: clamp(60px, 10vw, 120px) var(--sisi);
}
.jemput-isi { max-width: 1100px; margin: 0 auto; display: grid; gap: 40px; }
@media (min-width: 900px) { .jemput-isi { grid-template-columns: 1fr 1fr; align-items: end; } }
.jemput h2 { margin-bottom: 18px; }
.rute { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rute li { display: flex; gap: 18px; padding: 22px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.rute span { font-weight: 800; color: var(--kuning); font-size: 1.1rem; }
.rute h3 { margin-bottom: 4px; }
.rute p { color: rgba(255, 255, 255, .72); }
.motor { position: absolute; width: 160px; bottom: 18px; left: -180px; opacity: .9; animation: motor 9s linear infinite; }

/* form */
.order { padding: clamp(70px, 11vw, 140px) var(--sisi); }
.order-kartu {
  max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 48px);
  background: #fff; border-radius: var(--r-besar); border: 1px solid var(--garis);
  box-shadow: 0 40px 80px -50px rgba(15, 51, 102, .45);
}
.order-logo { margin-bottom: 18px; animation: putar-pelan 14s linear infinite; }
.order h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.order .lead { margin-bottom: 26px; }
label { display: block; font-weight: 700; font-size: .95rem; margin: 16px 0 6px; }
input, textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--teks);
  padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(15, 51, 102, .18); background: var(--krem);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, textarea:focus { outline: none; border-color: var(--biru); background: #fff; box-shadow: 0 0 0 4px rgba(52, 102, 194, .15); }
[aria-invalid="true"] { border-color: var(--merah); }
.oke { border-color: #2FA35B; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232FA35B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px top 15px; background-size: 20px; padding-right: 44px; }
.galat { color: var(--merah); font-size: .88rem; min-height: 1.3em; margin-top: 4px; }
.order .kecil { margin-top: 14px; text-align: center; }

/* footer */
.kaki { padding: 60px var(--sisi) 110px; border-top: 1px solid var(--garis); }
.kaki-isi { max-width: 1100px; margin: 0 auto; display: grid; gap: 32px; }
@media (min-width: 760px) { .kaki-isi { grid-template-columns: 1.2fr 1fr 1fr; } }
.kaki h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--biru); margin-bottom: 10px; }
.kaki p { color: var(--teks-2); margin-bottom: 6px; }
.kaki a { text-decoration: none; font-weight: 600; color: var(--navy); }
.kaki a:hover { text-decoration: underline; }
.kaki-tag { margin-top: 14px; font-weight: 700; color: var(--navy) !important; }
.hak { max-width: 1100px; margin: 40px auto 0; font-size: .85rem; color: var(--teks-2); }

/* tombol WA melayang */
.wa-melayang {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 14px 30px -10px rgba(15, 51, 102, .5);
  animation: denyut-wa 4s 3s infinite;
  transition: transform .25s var(--mulus);
}
.wa-melayang:active { transform: scale(.94); }

/* muncul saat scroll */
.muncul { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--mulus), transform .7s var(--mulus); }
.muncul.tampil { opacity: 1; transform: none; }
.bento .muncul:nth-child(2), .langkah .muncul:nth-child(2), .rute .muncul:nth-child(2) { transition-delay: .07s; }
.bento .muncul:nth-child(3), .langkah .muncul:nth-child(3), .rute .muncul:nth-child(3) { transition-delay: .14s; }
.bento .muncul:nth-child(4) { transition-delay: .21s; }

@keyframes putar { to { transform: rotate(360deg); } }
@keyframes putar-pelan { to { transform: rotate(360deg); } }
@keyframes getar { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.5px); } 75% { transform: translate(-.6px, .5px); } }
@keyframes ombak { from { transform: translate(-30px, 4px); } to { transform: translate(10px, -6px); } }
@keyframes busa { from { transform: scale(.8); } to { transform: scale(1.15); } }
@keyframes kedip { 0%, 100% { fill: #C5D5EE; } 50% { fill: #2FA35B; } }
@keyframes kenop { 0%, 80% { transform: rotate(0); } 90% { transform: rotate(60deg); } 100% { transform: rotate(0); } }
@keyframes kilau { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes gelembung { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--x, 0px), -360px) scale(1); opacity: 0; } }
@keyframes pecah { to { transform: scale(1.8); opacity: 0; } }
@keyframes naik { from { opacity: 0; transform: translateY(24px); } }
@keyframes sapu { from { transform: scaleX(0); } }
@keyframes muncul-mesin { from { opacity: 0; transform: translateY(40px) scale(.92); } }
@keyframes denyut { 70% { box-shadow: 0 0 0 10px rgba(47, 163, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 163, 91, 0); } }
@keyframes denyut-wa { 0%, 88%, 100% { transform: scale(1); } 92% { transform: scale(1.12); } 96% { transform: scale(.98); } }
@keyframes goyang { 0% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
@keyframes motor { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 360px)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .muncul { opacity: 1; transform: none; }
  .sortir { height: auto; }
  .sortir-lekat { position: static; min-height: 0; }
  .gelembung-wadah { display: none; }
}