/* =========================================================
   ETALASE STUDIO: stylesheet (section di bawah hero)
   CSS untuk layar pertama (warna, font, dasar, tombol, header, hero)
   ada di <style id="css-layar-pertama"> di index.html.
   File ini dimuat tanpa memblokir tampilan pertama.
   ========================================================= */
/* Tombol "lihat lainnya" dan ikon plus yang berputar */
.more-btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 4px; background:none; border:0; cursor:pointer; font-weight:700; font-size:1rem; color:var(--fg)}
.more-btn--sm{min-height:44px; font-size:.9375rem}
.more__icon{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); flex:none; transition:transform .35s var(--ease)}
.more__icon svg{width:16px; height:16px}
.more-btn[aria-expanded="true"] .more__icon, details[open] > summary .more__icon{transform:rotate(45deg)}
.more-btn .when-open, .more-btn[aria-expanded="true"] .when-closed{display:none}
.more-btn[aria-expanded="true"] .when-open{display:inline}
@media (max-width:1023.98px){
  [data-collapse="3"].is-collapsed > li:nth-child(n+4),
  [data-collapse="4"].is-collapsed > li:nth-child(n+5){display:none}
}

/* ---------- Muncul saat scroll: fade + geser 16 px, sekali saja (kelas is-in dari js/main.js) ----------
   Hanya disembunyikan di html.motion. Tanpa JS, kalau skrip gagal (class motion dicabut setelah 4 detik),
   atau di prefers-reduced-motion, semuanya langsung tampil. Pakai properti translate (bukan transform)
   supaya tidak bentrok dengan efek hover. */
.motion [data-reveal], .motion [data-reveal-group] > *{opacity:0; translate:0 16px; transition:opacity .7s var(--ease-out) var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s)}
.motion [data-reveal].is-in, .motion [data-reveal-group] > .is-in{opacity:1; translate:none}
/* Baris yang digeser ke samping di HP (galeri): kartunya langsung tampil, tidak menunggu digeser masuk */
@media (max-width:1023.98px){ .motion .demo-grid > *{opacity:1; translate:none} }

/* ---------- Section umum ---------- */
/* Dua section Porselen berurutan (Galeri > Layanan, Kenapa > FAQ): dipisah garis tipis selebar konten */
.t-porselen + .t-porselen{padding-top:0}
.t-porselen + .t-porselen::before{content:""; display:block; width:calc(100% - var(--gutter) * 2); max-width:var(--maxw); height:1px; margin:0 auto var(--sec-pad); background:var(--line)}
.sec-head{max-width:820px}
.sec-head h2{font-size:var(--fs-h2); font-weight:720; line-height:1; letter-spacing:-.028em}
.sec-lead{margin-top:clamp(14px, .6rem + .6vw, 22px); font-size:var(--fs-lead); line-height:1.55; color:var(--fg-2); max-width:34em}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .sec-lead{margin-inline:auto}
.sec-cta{margin-top:32px}
.pill{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px 0 10px; border-radius:999px; background:#fff; color:var(--tinta); font-size:.9375rem; font-weight:700; box-shadow:0 0 0 1px rgba(29,17,23,.08)}
.pill svg{width:18px; height:18px; color:var(--merah)}
.pill--dark{background:rgba(255,255,255,.08); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.pill--dark svg{color:var(--sorot)}

/* Screenshot di dalam HP: strip status bar + gambar penuh (tidak terpotong) */
.phone--shot .phone__screen, .phone--stage .phone__screen{display:flex; flex-direction:column; background:var(--sb, #fff)}
.phone--shot .phone__screen::before, .phone--stage .phone__screen::before{content:""; flex:none; height:5.28%; background:var(--sb, #fff)}
.phone--shot img, .phone--stage img{width:100%; height:auto; flex:none}
.work--dark .phone{--sb:#0B0B0E}

/* Penanda (marker) di atas screenshot */
.mk{position:absolute; z-index:4; left:var(--x); top:var(--y); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--sorot); box-shadow:0 0 0 3px #fff, 0 0 0 8px rgba(255,196,61,.32), 0 6px 14px rgba(34,9,26,.35); pointer-events:none}
.phone--shot .phone__screen > .mk{top:calc(5.28% + (var(--y) * .9472))}
.phone__marks{position:absolute; inset:6px; inset:2.8cqw; z-index:7; pointer-events:none}
.phone__marks .mk{top:calc(5.28% + (var(--y) * .9472))}
.mk__label{position:absolute; top:50%; left:calc(100% + 14px); white-space:nowrap; padding:7px 12px; border-radius:999px; background:var(--tinta); color:#fff; font:700 14px/1.1 var(--font); letter-spacing:.01em; transform:translateY(-50%); box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.mk--left .mk__label{left:auto; right:calc(100% + 14px)}

/* =========================================================
   ETALASE BERJALAN: pita ramping berisi contoh desain (bukan klien asli)
   ========================================================= */
.band{--mq-w:104px; --mq-item:124px; --mq-gap:14px; --mq-dur:46s; padding-block:24px 26px; overflow:clip}
.band__head{display:flex; align-items:center; gap:10px}
.band__title{flex:1; font-size:1.375rem; font-weight:620; line-height:1.1; letter-spacing:-.015em}
.band__toggle{display:none}
.js .band__toggle{display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid var(--line); background:none; color:var(--fg); cursor:pointer; transition:border-color .2s, background-color .2s}
.band__toggle svg{grid-area:1/1; width:18px; height:18px}
.band__toggle .i-play, .band__toggle[aria-pressed="true"] .i-pause{display:none}
.band__toggle[aria-pressed="true"] .i-play{display:block}
.band__link{display:inline-flex; align-items:center; gap:6px; flex:none; min-height:44px; font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; text-decoration-color:var(--accent)}
.band__link svg{width:18px; height:18px; color:var(--accent); transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .band__toggle:hover{border-color:var(--fg)}
  .band__link:hover svg{transform:translateY(2px)}
}
.marquee{position:relative; margin-top:16px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.marquee__rail{display:flex; width:max-content; padding-block:8px 4px; animation:marquee var(--mq-dur) linear infinite}
.marquee__list{display:flex; gap:var(--mq-gap); padding-right:var(--mq-gap)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Berhenti: kursor di atasnya, disentuh (is-held), fokus keyboard (bukan fokus sisa ketukan), tombol jeda (is-paused), di luar layar (is-off) */
@media (hover:hover){ .marquee:hover .marquee__rail{animation-play-state:paused} }
.marquee:has(.mq:focus-visible) .marquee__rail, .marquee.is-held .marquee__rail, .marquee.is-paused .marquee__rail, .marquee.is-off .marquee__rail{animation-play-state:paused}
.mq{display:grid; justify-items:center; gap:10px; width:var(--mq-item); text-decoration:none; color:var(--fg)}
.mq__phone{width:var(--mq-w); transition:transform .45s var(--ease-out)}
.mq__name{font-size:1rem; font-weight:600; line-height:1.25; text-align:center; text-wrap:balance; color:var(--fg-2); transition:color .2s}
@media (hover:hover){
  .mq:hover .mq__phone{transform:translateY(-6px)}
  .mq:hover .mq__name{color:var(--fg)}
}
.mq:focus-visible{outline-offset:4px}
/* Tanpa gerak: daftar bisa digeser manual, salinan dan tombol jeda disembunyikan */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none; scroll-snap-type:x mandatory; scrollbar-width:none}
  .marquee__rail{animation:none; padding-inline:var(--gutter)}
  .marquee__list[aria-hidden]{display:none}
  .mq{scroll-snap-align:start}
  .js .band__toggle{display:none}
}

/* =========================================================
   HASIL KERJA / STUDI KASUS
   ========================================================= */
.work{padding-block:var(--sec-pad)}
.work .sec-head{margin-bottom:var(--head-gap)}
.case__head{max-width:760px; margin-bottom:28px}
.case__name{margin-top:16px; font-size:clamp(3rem, 1.9rem + 5vw, 5.75rem); font-weight:760; line-height:.92; letter-spacing:-.035em}
.case__lead{margin-top:14px; font-size:var(--fs-lead); line-height:1.5; color:var(--fg-2); max-width:30em}
.story__stage{display:none}

/* HP: fitur jadi kartu yang bisa digeser */
.story__steps{display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 18px; scroll-padding-inline:var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch}
.story__steps::-webkit-scrollbar{display:none}
.story__step{flex:0 0 min(80%, 330px); scroll-snap-align:start; padding:12px 12px 22px; border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.work--dark .story__step{box-shadow:inset 0 0 0 1px var(--line)}
.story__shot{display:flex; justify-content:center; padding:20px 0 18px; margin-bottom:16px; border-radius:16px; background:var(--porselen)}
.work--dark .story__shot{background:rgba(255,255,255,.05)}
.story__shot .phone{width:52%}
.story__step h4{padding-inline:8px; font-size:1.375rem; font-weight:680; line-height:1.12; letter-spacing:-.015em}
.story__step p{padding-inline:8px; margin-top:8px; font-size:1rem; line-height:1.55; color:var(--fg-2)}
.story__dots{display:flex; justify-content:center; gap:8px; margin-top:2px}
.story__dots i{width:8px; height:8px; border-radius:50%; background:var(--fg); opacity:.2; transition:opacity .3s, transform .3s var(--ease)}
.story__dots i.is-on{opacity:1; background:var(--accent); transform:scale(1.25)}

.case__foot{margin-top:32px}
.case__cta{display:grid; gap:6px; max-width:420px}
.case__note{margin-top:10px; font-size:1rem; color:var(--fg-2); max-width:34em}

/* "Lihat detail" */
details.more{margin-top:20px; border-top:1px solid var(--line)}
details.more > summary{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; list-style:none; cursor:pointer; font-weight:700; font-size:1.0625rem}
details.more > summary::-webkit-details-marker{display:none}
.more__body{padding:4px 0 12px}
.ps{display:grid; gap:12px}
.ps p{padding:16px 18px; border-radius:16px; background:var(--soft); font-size:1rem}
.ps p b{display:block; margin-bottom:4px; font-size:.9375rem; color:var(--accent)}
.more__body h5{margin:24px 0 10px; font-size:1.0625rem; font-weight:700}
.ticks{display:grid; gap:10px}
.ticks li{position:relative; padding-left:26px; font-size:1rem; color:var(--fg-2)}
.ticks li::before{content:""; position:absolute; left:2px; top:.5em; width:12px; height:12px; border-radius:50%; background:var(--sorot); box-shadow:0 0 0 3px rgba(255,196,61,.25)}
.spec{margin-top:24px; display:grid; gap:0}
.spec div{display:grid; grid-template-columns:minmax(110px, 34%) 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.spec dt{font-weight:700; font-size:.9375rem}
.spec dd{font-size:.9375rem; color:var(--fg-2)}
.fit{margin-top:20px; padding:16px 18px; border-radius:16px; border:1.5px dashed var(--line); font-size:1rem}

/* ---------- Panggung desktop: laptop + HP ---------- */
.laptop{position:relative; width:100%}
.laptop__lid{position:relative; padding:2.3% 2.3% 3%; border-radius:3% 3% 0 0 / 4.6% 4.6% 0 0; background:#0B0B0E; box-shadow:inset 0 0 0 1.5px #2C2C33, 0 0 0 1.5px #C4C3C9}
.laptop__cam{position:absolute; top:.95%; left:0; right:0; width:.8%; aspect-ratio:1; margin-inline:auto; border-radius:50%; background:#20232B; box-shadow:inset 0 0 0 1px #3C404B}
.laptop__screen{position:relative; aspect-ratio:16/10; overflow:hidden; background:#fff; container-type:inline-size}
.laptop__screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.laptop__base{position:relative; height:0; padding-bottom:3.6%; margin:0 -7%; border-radius:0 0 14px 14px / 0 0 70% 70%; background:linear-gradient(180deg, #F6F5F8 0%, #DAD8DE 40%, #A9A7AF 100%); box-shadow:inset 0 1px 0 #fff}
.laptop__base::before{content:""; position:absolute; top:0; left:0; right:0; width:15%; height:36%; margin-inline:auto; border-radius:0 0 10px 10px; background:linear-gradient(180deg, #BDBBC2, #E3E2E6)}

/* =========================================================
   CONTOH DESAIN (galeri demo)
   ========================================================= */
.demo{padding-block:var(--sec-pad)}
.demo-filter{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--head-gap)}
.chip{display:inline-flex; align-items:center; gap:7px; flex:none; min-height:44px; padding:0 10px 0 14px; border-radius:999px; border:1.5px solid var(--line); background:transparent; font-weight:700; font-size:1rem; cursor:pointer; color:var(--fg); transition:background-color .25s, border-color .25s, color .25s, transform .3s var(--ease-out)}
.chip__n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:rgba(29,17,23,.07); font-size:.875rem; font-weight:700; transition:background-color .25s}
.chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:#fff}
.chip[aria-pressed="true"] .chip__n{background:rgba(255,255,255,.18)}
.chip:active{transform:scale(.96)}
@media (hover:hover){ .chip:hover{border-color:var(--fg)} }
.demo-grid{display:flex; gap:16px; margin:24px calc(var(--gutter) * -1) 0; padding:4px var(--gutter) 12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none}
.demo-grid::-webkit-scrollbar{display:none}
.demo-card{position:relative; flex:0 0 min(74%, 290px); scroll-snap-align:start} /* relative: teks sr-only di kartu yang tergeser tidak melebarkan halaman di HP */
.demo-card__link{display:block; text-decoration:none; color:inherit}
/* Jendela etalase melengkung + mockup HP yang sama dengan bagian lain; di desktop HP-nya naik saat kursor masuk */
.demo-card__window{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:999px 999px 22px 22px / 46% 46% 22px 22px; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(29,17,23,.06); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)}
.demo-card__phone{position:absolute; left:19%; top:15%; width:62%; transition:translate .9s var(--ease-out)}
.demo-card__body{display:grid; gap:4px; padding:16px 4px 0}
.demo-card__industri{font-size:1rem; font-weight:700; color:var(--merah)}
.demo-card__name{font-family:var(--font-display); font-size:1.5rem; font-weight:680; line-height:1.1; letter-spacing:-.015em}
.demo-card__desc{font-size:1rem; color:var(--fg-2)}
.demo-card__cta{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--merah)}
.demo-card__cta svg{width:18px; height:18px; color:var(--merah); transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .demo-card__link:hover .demo-card__window{transform:translateY(-6px); box-shadow:inset 0 0 0 1px rgba(29,17,23,.06), var(--shadow-card)}
  .demo-card__link:hover .demo-card__phone{translate:0 -14%}
  .demo-card__link:hover .demo-card__cta svg{transform:translate(2px, -2px)}
}
.demo-card__link:active .demo-card__window{transform:scale(.985)}
/* Filter beranimasi (View Transitions): hanya kartu yang bergerak, halaman lain diam */
::view-transition-old(root), ::view-transition-new(root){animation:none}
::view-transition-group(*){animation-duration:.5s; animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* =========================================================
   TESTIMONI & DIPERCAYA OLEH (disiapkan, masih disembunyikan)
   ========================================================= */
.trust{padding:40px 0; border-block:1px solid var(--line)}
.trust__title{font-family:var(--font); font-size:.9375rem; font-weight:700; color:var(--fg-2); text-align:center}
.trust__logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 40px; margin-top:20px}
.trust__logos img{height:40px; width:auto; filter:grayscale(1); opacity:.75}
.testi-sec{padding-block:var(--sec-pad)}
.testis{display:grid; gap:16px; margin-top:40px}
.testi{padding:28px; border-radius:24px; background:var(--soft)}
.testi blockquote p{font-family:var(--font-display); font-size:1.375rem; line-height:1.35}
.testi figcaption{display:grid; margin-top:18px; font-size:1rem}
.testi figcaption span{color:var(--fg-2)}

/* =========================================================
   LAYANAN
   ========================================================= */
.services{padding-block:var(--sec-pad)}
.services__cta{margin-top:24px}
.services__cta p{font-size:1.0625rem; margin-bottom:14px; max-width:28em}
.svc-wrap{margin-top:var(--head-gap)}
.svc-list{border-top:1.5px solid var(--fg)}
.svc{position:relative; padding:26px 0 24px; border-bottom:1px solid var(--line)}
.svc h3{font-size:var(--fs-h3); font-weight:680; line-height:1.05; letter-spacing:-.022em}
.svc p{margin-top:10px; color:var(--fg-2)}
.svc__fit{font-size:1rem}
.svc__self{font-weight:700; color:var(--tinta)}
.svc__ex{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font-weight:700; color:var(--merah); text-decoration:none}
.svc__ex svg{width:18px; height:18px; transition:transform .25s var(--ease)}
@media (hover:hover){ .svc__ex:hover svg{transform:translateX(4px)} }
.svc-wrap .more-btn{margin-top:8px}

/* =========================================================
   HARGA: label harga tergantung
   ========================================================= */
.pricing{padding-block:var(--sec-pad); overflow:clip}
.tags{position:relative; display:grid; gap:28px; margin:var(--head-gap) auto 0; max-width:440px}
.tags__rail{display:none}
.tag{position:relative; transform-origin:50% 0; filter:drop-shadow(0 22px 26px rgba(70,0,24,.34))}
.tag__card{--cut:34px; position:relative; padding:52px 22px 22px; background:#FFFFFF; color:var(--tinta); clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut)); border-radius:0 0 6px 6px}
.tag__hole{position:absolute; top:16px; left:0; right:0; width:18px; height:18px; margin-inline:auto; border-radius:50%; background:var(--merah); box-shadow:inset 0 2px 3px rgba(0,0,0,.35), 0 0 0 4px #F2D58C, 0 0 0 5px rgba(0,0,0,.08)}
.tag__ribbon{position:absolute; top:14px; right:14px; padding:5px 12px; border-radius:999px; background:var(--sorot); color:var(--tinta); font-size:1rem; font-weight:800}
.tag__name{font-size:1.875rem; font-weight:700; letter-spacing:-.022em}
.tag__for{margin-top:4px; color:var(--tinta-2); font-size:1rem}
.tag__price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:18px}
.tag__price span{font-size:1rem; font-weight:700; color:var(--tinta-2)}
.tag__price b{font-family:var(--font-display); font-size:clamp(2.5rem, 2.1rem + 1.2vw, 3.125rem); font-weight:760; letter-spacing:-.035em; line-height:1}
.tag__meta{margin-top:10px; font-size:1rem; font-weight:700; color:var(--merah)}
.tag__list{display:grid; gap:10px; margin:18px 0 6px; padding-top:18px; border-top:1.5px dashed rgba(29,17,23,.16)}
.tag__list li{position:relative; padding-left:28px; font-size:1rem; line-height:1.45}
.tag__list li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%; background:var(--merah-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6164F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center/12px no-repeat}
.tag .btn{margin-top:14px}
.tag--rec .tag__card{background:var(--beludru); color:#FFFFFF}
.tag--rec .tag__for, .tag--rec .tag__price span{color:rgba(255,255,255,.76)}
.tag--rec .tag__meta{color:var(--sorot)}
.tag--rec .tag__list{border-top-color:rgba(255,255,255,.2)}
.tag--rec .tag__list li::before{background-color:rgba(255,196,61,.18); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC43D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E")}
.tag.tag--rec .more-btn{color:#fff}
.tag.tag--rec .more__icon{border-color:rgba(255,255,255,.3)}
.tag--rec .tag__hole{background:var(--merah)}
.tag .more-btn{color:var(--tinta)}
.tag .more__icon{border-color:rgba(29,17,23,.16)}
.tag--rec .tag__card :focus-visible{outline-color:var(--sorot)}
.tag__card :focus-visible{outline-color:var(--tinta)}

/* Label berayun dari titik gantungnya (class is-sway dari js/main.js): sekali saat muncul, dan pelan saat kursor masuk (is-small). Desktop saja. */
@keyframes sway{0%{transform:rotate(var(--sw, 4deg))} 28%{transform:rotate(calc(var(--sw, 4deg) * -.55))} 52%{transform:rotate(calc(var(--sw, 4deg) * .28))} 74%{transform:rotate(calc(var(--sw, 4deg) * -.1))} 100%{transform:none}}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .tag.is-sway{animation:sway 1.7s cubic-bezier(.33,.9,.5,1) both}
  .tag.is-sway.is-small{--sw:2.2deg; animation-duration:1.3s}
}

/* Paket perawatan: blok tenang di bawah label harga */
.care{max-width:1000px; margin:calc(var(--sec-pad) * .8) auto 0}
.care__head{text-align:center}
.care__title{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)}
.care__lead{margin-top:10px; font-size:1.0625rem; font-weight:700}
.care__grid{display:grid; gap:18px; max-width:440px; margin:28px auto 0}
.care__card{position:relative; display:flex; flex-direction:column; padding:24px 22px 22px; border-radius:var(--r-card); background:rgba(70,0,24,.2); border:1.5px solid rgba(255,255,255,.3)}
.care__card--hemat{border:2px solid var(--sorot)}
.care__badge{position:absolute; top:20px; right:20px; padding:5px 12px; border-radius:999px; background:var(--sorot); color:var(--tinta); font-size:1rem; font-weight:800}
.care__name{font-size:1.625rem; font-weight:700; letter-spacing:-.02em}
.care__price{display:flex; align-items:baseline; gap:2px; margin-top:12px}
.care__price b{font-family:var(--font-display); font-size:2.25rem; font-weight:760; letter-spacing:-.03em; line-height:1}
.care__price span{font-size:1rem; font-weight:700}
.care__alt{margin-top:6px; font-size:1rem}
.care__list{display:grid; gap:10px; margin:18px 0 20px; padding-top:18px; border-top:1.5px dashed rgba(255,255,255,.3)}
.care__list li{position:relative; padding-left:28px; font-size:1rem; line-height:1.45}
.care__list li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center/12px no-repeat}
.care__card .btn{margin-top:auto}
.care__note{margin-top:22px; text-align:center; font-size:1rem}

.terms{display:grid; gap:20px; margin:calc(var(--sec-pad) * .6) auto 0; max-width:1000px; padding-top:28px; border-top:1px solid var(--line)}
.terms a{text-decoration-thickness:1.5px; text-underline-offset:3px}
.terms li{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start}
.terms svg{width:26px; height:26px; margin-top:1px; color:var(--sorot)}
.terms p{font-size:1rem; color:#fff}
.terms b{display:block; font-size:1.0625rem}
.custom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; max-width:1000px; margin:36px auto 0; padding:16px 16px 16px 22px; border-radius:var(--r-card); background:#FFFFFF; color:var(--tinta)}
.custom p{font-weight:700; font-size:1.0625rem}
.custom :focus-visible{outline-color:var(--tinta)}

/* =========================================================
   CARA KERJA
   ========================================================= */
.how{padding-block:var(--sec-pad); overflow:clip}
.how__rail{position:relative; margin-top:var(--head-gap)}
/* Garis penghubung langkah: HP vertikal, desktop horizontal. Terisi mengikuti scroll dengan CSS
   scroll-driven animation; browser yang belum mendukung (dan reduced motion) langsung garis penuh. */
.how__track{position:absolute; left:25px; top:30px; bottom:30px; width:2px; background:rgba(255,255,255,.14)}
.how__fill{position:absolute; inset:0; background:linear-gradient(180deg, var(--sorot), #FF9A5C); transform-origin:top}
@keyframes how-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes how-fill-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .how__fill{animation:how-fill-y linear both; animation-timeline:view(); animation-range:entry 30% cover 70%}
  }
}
.how__steps{position:relative; display:grid; gap:32px}
.how__step{display:grid; grid-template-columns:52px 1fr; column-gap:16px; align-items:start}
.how__num{position:relative; grid-row:span 2; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--beludru); color:var(--sorot); font-family:var(--font-display); font-size:1.75rem; font-weight:700; line-height:1; box-shadow:inset 0 0 0 1.5px rgba(255,196,61,.5)}
.how__step h3{font-size:1.5rem; font-weight:700; letter-spacing:-.018em; margin-top:10px}
.how__step p{margin-top:8px; color:var(--fg-2); font-size:1.0625rem}
.how__cta{margin-top:var(--head-gap)}

/* =========================================================
   KENAPA PILIH
   ========================================================= */
.why{padding-block:var(--sec-pad)}
.socials{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.social{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; font-weight:700; font-size:.9375rem}
.social svg{width:20px; height:20px}
@media (hover:hover){ .social:hover{border-color:var(--fg)} }
.reasons{display:grid; gap:28px; margin-top:var(--head-gap)}
.reason{padding-top:20px; border-top:1.5px solid var(--fg)}
.reason h3{font-size:var(--fs-h3); font-weight:680; line-height:1.05; letter-spacing:-.022em}
.reason p{margin-top:10px; color:var(--fg-2)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding-block:var(--sec-pad)}
.faq__head .btn{margin-top:24px}
.faq__list{margin-top:var(--head-gap); border-top:1.5px solid var(--fg)}
.qa{border-bottom:1px solid var(--line)}
.qa > summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:16px 0; list-style:none; cursor:pointer; font-family:var(--font-display); font-weight:620; font-size:1.3125rem; line-height:1.25; letter-spacing:-.012em}
@media (hover:hover){ .qa > summary:hover .more__icon, details.more > summary:hover .more__icon{border-color:var(--fg)} }
.qa > summary::-webkit-details-marker{display:none}
.qa[open] > summary .more__icon{background:var(--sorot); border-color:var(--sorot); color:var(--tinta)}
.qa__a{padding:0 44px 22px 0; color:var(--fg-2)}
.qa__a p + p{margin-top:10px}
/* Buka-tutup halus tanpa JS (::details-content); browser lama langsung buka/tutup */
details{interpolate-size:allow-keywords}
details::details-content{block-size:0; overflow:clip; transition:block-size .45s var(--ease-out), content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){ details::details-content{transition:none} }

/* =========================================================
   PENUTUP + FOOTER
   ========================================================= */
.closing{padding-block:var(--sec-pad) 40px; overflow:clip}
.closing__window{position:relative; max-width:980px; margin-inline:auto; padding:112px 16px 48px; text-align:center; border-radius:220px 220px 32px 32px; background:radial-gradient(90% 60% at 50% 0%, rgba(214,22,79,.45) 0%, rgba(214,22,79,.08) 55%, rgba(214,22,79,0) 100%); box-shadow:inset 0 0 0 1.5px rgba(255,107,147,.45), 0 0 80px -20px rgba(214,22,79,.45); overflow:hidden}
.closing__beam{position:absolute; top:0; left:50%; width:120%; height:100%; margin-left:-60%; clip-path:polygon(45% 0, 55% 0, 100% 100%, 0 100%); background:linear-gradient(180deg, rgba(255,226,160,.28), rgba(255,226,160,0) 80%); filter:blur(8px); pointer-events:none}
.closing__window::before{content:""; position:absolute; top:22px; left:0; right:0; width:70px; height:10px; margin-inline:auto; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, #FFF4D6, #FFC43D 55%, transparent 72%); box-shadow:0 0 40px 14px rgba(255,196,61,.4)}
.closing h2{position:relative; font-size:clamp(2.375rem, 1.3rem + 4.6vw, 5.75rem); font-weight:760; line-height:.98; letter-spacing:-.034em; margin-inline:auto}
/* Lampu etalase menyala sekali saat judul penutup masuk layar */
@keyframes lamp-on{0%{opacity:0} 20%{opacity:.8} 32%{opacity:.15} 55%{opacity:1} 68%{opacity:.6} 100%{opacity:1}}
.motion .closing__window:has(h2.is-in) .closing__beam{animation:lamp-on 1.1s linear both}
.closing__sub{position:relative; margin:20px auto 0; font-size:var(--fs-lead); color:var(--fg-2); max-width:30em}
.closing__cta{position:relative; display:grid; gap:12px; margin:32px auto 0; max-width:360px}
.closing__cta .btn{padding-inline:1em}
.footer{padding:40px 0 calc(20px + env(safe-area-inset-bottom)); overflow:clip}
.footer__grid{display:grid; gap:28px; padding-top:32px; border-top:1px solid var(--line)}
.footer__desc{color:var(--fg-2); font-size:1rem; max-width:30em}
.footer__links{display:flex; flex-wrap:wrap; gap:8px}
.footer__links a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-size:1rem; font-weight:600}
.footer__links svg{width:18px; height:18px}
@media (hover:hover){ .footer__links a:hover{border-color:#fff} }
.footer__copy{margin-top:28px; font-size:1rem; color:var(--fg-2)}
/* Wordmark selebar konten: ukuran mengikuti lebar kolom (container query) */
.footer__mark{container-type:inline-size; margin-top:clamp(28px, 2rem + 3vw, 72px)}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:calc(17.2cqi - 6px); line-height:.8; letter-spacing:-.04em; white-space:nowrap; overflow:hidden; padding-bottom:.06em; color:var(--merah)}

/* ---------- WhatsApp menempel ---------- */
.wa-bar{position:fixed; z-index:70; left:0; right:0; bottom:0; padding:10px max(var(--gutter), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background:rgba(255,255,255,.97); box-shadow:0 -1px 0 rgba(29,17,23,.08), 0 -12px 30px -18px rgba(34,9,26,.35); transform:translateY(115%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s}
.show-bar .wa-bar{transform:none; visibility:visible; transition:transform .35s var(--ease), visibility 0s}
.menu-open .wa-bar{transform:translateY(115%); visibility:hidden}
.wa-bar .btn{min-height:54px}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:640px){
  .demo-filter{gap:8px}
  .chip{padding:0 12px 0 18px}
  .band{--mq-w:118px; --mq-item:140px; --mq-gap:22px; --mq-dur:52s}
  .case__cta{grid-template-columns:auto auto; justify-content:start; align-items:center; gap:14px 24px; max-width:none}
  .closing__cta{grid-template-columns:auto auto; justify-content:center; max-width:none}
  .reasons{grid-template-columns:1fr 1fr; gap:40px 32px}
  .terms{grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
  .care__grid{grid-template-columns:1fr 1fr; gap:24px; max-width:none}
  .story__step{flex-basis:320px}
  .demo-card{flex-basis:270px}
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:1024px){
  .band{--mq-w:150px; --mq-item:178px; --mq-gap:30px; --mq-dur:64s; padding-block:40px 46px}
  .band__title{font-size:1.75rem}
  .band__head{gap:16px}
  .marquee{margin-top:26px}


  .story{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px}
  .story__main{grid-column:1; grid-row:1}
  .case__head{margin-bottom:8px}
  .story__stage{display:block; grid-column:2; grid-row:1; align-self:start; position:sticky; top:calc(var(--header-h) + 28px)}
  .story__steps{display:block; overflow:visible; margin:0; padding:0; scroll-snap-type:none}
  .story__step{min-height:60svh; display:flex; flex-direction:column; justify-content:center; padding:0 0 0 28px; border-radius:0; background:none; box-shadow:none; position:relative; transition:opacity .45s var(--ease)}
  .story__step::before{content:""; position:absolute; left:0; top:calc(50% - 60px); width:3px; height:120px; border-radius:3px; background:var(--line)}
  .story__step::after{content:""; position:absolute; left:0; top:calc(50% - 60px); width:3px; height:120px; border-radius:3px; background:var(--sorot); box-shadow:0 0 18px rgba(255,196,61,.7); transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease)}
  .story__step.is-active::after{transform:none}
  .work--dark .story__step{box-shadow:none}
  /* Langkah yang tidak aktif diredupkan, tapi kontrasnya tetap lolos WCAG AA (judul besar >= 3:1, paragraf >= 4.5:1) */
  .js .story__step h4{opacity:.5; transition:opacity .45s var(--ease)}
  .js .story__step p{opacity:.86; transition:opacity .45s var(--ease)}
  .js .story__step.is-active h4, .js .story__step.is-active p{opacity:1}
  .story__step h4{padding:0; font-size:clamp(1.9rem, 1.2rem + 1.2vw, 2.5rem); max-width:13em}
  .story__step p{padding:0; margin-top:14px; font-size:1.1875rem; max-width:26em}
  .story__shot, .story__dots{display:none}
  .case__foot{margin-top:8px; padding-left:28px}
  .case__cta{grid-template-columns:auto; justify-items:start; gap:8px}
  .btn, .link-ext{white-space:nowrap}

  .showcase{position:relative; width:100%; max-width:720px; margin-left:auto; padding:8% 9% 12% 7%; border-radius:32px; isolation:isolate; overflow:hidden}
  .showcase--light{background:#FFFFFF; box-shadow:var(--shadow-card)}
  .showcase--dark{background:#2E0D24; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .showcase__light{position:absolute; z-index:-1; top:-30%; left:18%; width:64%; aspect-ratio:1; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,211,110,.42), rgba(255,211,110,0) 70%)}
  .showcase--dark .showcase__light{background:radial-gradient(50% 50% at 50% 50%, rgba(255,196,61,.28), rgba(255,196,61,0) 70%)}
  .showcase__rig{position:relative}
  .showcase .laptop{width:86%}
  .showcase .laptop::after{content:""; position:absolute; left:-6%; right:-6%; bottom:-7%; height:12%; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(34,9,26,.35), transparent 70%); z-index:-1}
  .showcase--dark .laptop::after{background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 70%)}
  .phone--stage{position:absolute; right:-4%; bottom:-8%; width:24%}
  .showcase [data-steps]{opacity:0}
  .showcase [data-steps].is-on{opacity:1}
  .laptop__screen img, .phone--stage img{transition:opacity .5s var(--ease)}
  .phone--stage img{position:absolute; left:0; right:0; top:5.28%}
  .showcase .mk{transform:scale(.4); transition:opacity .35s var(--ease), transform .5s cubic-bezier(.3,1.6,.5,1)}
  .showcase .mk.is-on{transform:none}
  .showcase .mk::before{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--sorot); opacity:0}
  .showcase .mk.is-on::before{animation:ping 2s cubic-bezier(.2,.7,.3,1) .5s 2}
  .showcase__progress{position:absolute; left:0; right:0; bottom:5%; display:flex; justify-content:center; gap:8px}
  .showcase__progress i{width:28px; height:4px; border-radius:4px; background:currentColor; opacity:.18; transform-origin:left}
  .showcase__progress i.is-on{opacity:1; background:var(--sorot)}
  .showcase--light .showcase__progress{color:var(--tinta)}
  .showcase--dark .showcase__progress{color:#fff}

  .demo-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:48px 24px; margin:32px 0 0; padding:0; overflow:visible}
  .demo-card{flex:none}

  .testis{grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}

  .services__grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:80px; align-items:start}
  .services__head{position:sticky; top:calc(var(--header-h) + 36px)}
  .svc-wrap{margin-top:0}
  .svc{padding:34px 20px 32px 16px; isolation:isolate}
  .svc::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:4px; background:#FFFFFF; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out)}
  .svc:hover::before{transform:none}

  .tags{grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px; max-width:1180px; margin-top:72px; padding-top:40px; align-items:start}
  .tags__rail{display:block; position:absolute; top:0; left:-3%; right:-3%; height:8px; border-radius:8px; background:linear-gradient(180deg, #FFE39B 0%, #E9B13A 55%, #B98217 100%); box-shadow:0 4px 8px rgba(70,0,24,.3)}
  .tags__rail::before, .tags__rail::after{content:""; position:absolute; top:-6px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFE7A8, #C8901F); box-shadow:0 3px 6px rgba(70,0,24,.3)}
  .tags__rail::before{left:-6px} .tags__rail::after{right:-6px}
  .tag{padding-top:36px}
  .tag::before{content:""; position:absolute; z-index:-1; top:-40px; left:0; right:0; width:2px; height:100px; margin-inline:auto; background:linear-gradient(180deg, #F7DB91, #C8962C)}
  .tag:nth-child(2){rotate:-1.2deg; --sw:5deg} .tag:nth-child(3){--sw:-4deg} .tag:nth-child(4){rotate:1deg; --sw:4.5deg}
  .tag--rec{margin-top:26px}
  .tag--rec::before{top:-66px; height:128px}
  .tag__card{padding:56px 30px 30px}
  .tag__name{font-size:2rem}
  .care__card{padding:28px 28px 26px}

  .how__track{top:31px; bottom:auto; left:32px; right:calc(25% - 32px + 16px); width:auto; height:2px}
  .how__fill{background:linear-gradient(90deg, var(--sorot), #FF9A5C); transform-origin:left}
  @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .how__fill{animation-name:how-fill-x; animation-range:entry 40% cover 60%} } }
  .how__steps{position:relative; z-index:1; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px}
  .how__step{display:block}
  .how__num{width:64px; height:64px; font-size:2rem}
  .how__step h3{margin-top:28px; font-size:1.625rem}

  .why__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:80px; align-items:start}
  .why__head{position:sticky; top:calc(var(--header-h) + 36px)}
  .reasons{margin-top:0; gap:56px 40px}
  .reason{padding-top:24px}

  .faq__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; align-items:start}
  .faq__head{position:sticky; top:calc(var(--header-h) + 36px)}
  .faq__list{margin-top:0}
  .qa > summary{font-size:1.5rem; min-height:80px}

  .closing__window{padding:170px 48px 88px; border-radius:490px 490px 40px 40px}
  .closing h2{max-width:15ch}
  .closing__window::before{top:30px; width:110px; height:14px}
  .closing__cta{margin-top:40px}
  .closing__cta .btn{padding-inline:1.7em}
  .footer{padding-top:48px}
  .footer__grid{grid-template-columns:1fr auto; align-items:end}

  .wa-bar{display:none}
}
@media (min-width:1280px){
  .story{gap:72px}
}
@keyframes ping{0%{transform:scale(1); opacity:.9} 80%,100%{transform:scale(2.3); opacity:0}}