/* Proporsi tampilan utama mengacu pada artwork 787 × 785 px. */
:root{--u:calc(100vw / 787);--orange:#ff6028;--blue:#0051ed}
body{background:#fff;overflow-x:hidden}
.reference-view{min-height:0;overflow:visible;background:linear-gradient(135deg,#004fe9 0%,#0642b0 43%,#062554 90%);color:#fff;padding-bottom:calc(22 * var(--u))}
.hero-art{position:absolute;left:51.7%;top:calc(15 * var(--u));width:47.4%;height:auto;max-width:none;opacity:1;mask-image:linear-gradient(to bottom,#000 60%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 96%)}
.topbar{position:relative;height:calc(25 * var(--u));padding:0 calc(17 * var(--u));gap:calc(9 * var(--u));font-size:calc(6 * var(--u))}
.brand img{width:calc(51 * var(--u));height:auto}
.top-divider{height:calc(7 * var(--u))}
.service-link,.login-link,.order-link{font-size:calc(6 * var(--u))}
.account-links{gap:calc(7 * var(--u))}
.order-link{padding:calc(2 * var(--u)) calc(7 * var(--u))}
.nav-row{position:absolute;top:calc(32 * var(--u));left:0;width:100%;height:calc(28 * var(--u));padding:0;gap:0;flex-wrap:nowrap;align-items:center}
.guest{position:absolute;left:calc(17 * var(--u));top:calc(3 * var(--u));width:calc(50 * var(--u));flex:0 0 calc(50 * var(--u));font-size:calc(6 * var(--u));line-height:calc(8 * var(--u));gap:calc(5 * var(--u))}
.guest svg{width:calc(16 * var(--u));height:calc(20 * var(--u))}
.nav-pill{position:absolute;left:35%;right:35%;top:50%;transform:translateY(-50%);height:calc(20 * var(--u));padding:0;gap:calc(10 * var(--u));margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-item{font-size:calc(6.5 * var(--u));line-height:calc(12 * var(--u));padding:calc(3 * var(--u)) calc(4 * var(--u));color:#fff;font-weight:700;transition:color .18s ease,transform .2s ease;transform-origin:center}
.nav-pill .nav-item.active{color:#fff}
.dropdown-menu{top:calc(22 * var(--u));left:-16px;right:auto;max-height:min(70dvh,570px);overflow-y:auto;overscroll-behavior:contain;z-index:8}
.nav-dropdown:nth-of-type(2) .dropdown-menu{left:-16px;right:auto}
.cart-button{position:absolute;right:calc(17 * var(--u));top:0;width:calc(29 * var(--u));height:calc(28 * var(--u));flex:0 0 calc(29 * var(--u));padding:0;margin:0;color:var(--orange)}
.cart-button svg{width:calc(27 * var(--u));height:calc(27 * var(--u))}
.cart-badge{top:calc(-4 * var(--u));right:calc(-2 * var(--u));width:calc(17 * var(--u));height:calc(17 * var(--u));font-size:calc(6 * var(--u))}
.hero{height:calc(236 * var(--u));position:relative}
.hero-copy{position:absolute;top:calc(55 * var(--u));left:calc(21 * var(--u));width:55%;z-index:1}
.hero-copy h1{font-size:calc(25 * var(--u));line-height:calc(30 * var(--u));font-weight:400;letter-spacing:calc(-.75 * var(--u));margin:0;color:#fff}
.trusted{max-width:none;font-size:calc(9 * var(--u));line-height:calc(12 * var(--u));margin:calc(20 * var(--u)) 0 calc(7 * var(--u))}
.build-button{position:relative;isolation:isolate;overflow:visible;min-width:0;width:calc(89 * var(--u));height:calc(24 * var(--u));padding:calc(2 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u)) calc(7 * var(--u));gap:calc(5 * var(--u));margin:0;font-size:calc(10 * var(--u));border-radius:calc(30 * var(--u));white-space:nowrap;transform:none;background:var(--orange)}
.build-button>.button-label{position:relative;z-index:1;font:inherit;white-space:nowrap}
.build-button>.button-arrow{position:relative;z-index:2;flex:0 0 calc(20 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));background:transparent;transform:none;transition:transform .25s ease}
.build-button>.button-arrow:before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--blue)}
.build-button svg{position:relative;width:calc(13 * var(--u));height:calc(13 * var(--u));z-index:1}
.build-button:hover{transform:none}
.build-button:focus-visible>.button-arrow,.build-button:active>.button-arrow,.build-button.is-touched>.button-arrow{transform:scale(1.6)}
.collaboration{font-size:calc(9 * var(--u));line-height:calc(12 * var(--u));margin:calc(9 * var(--u)) 0 0}
.template-strip{height:calc(111 * var(--u));isolation:isolate}
.template-scroller{position:absolute;top:0;left:0;width:100%;height:calc(111 * var(--u));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:auto}
.template-scroller::-webkit-scrollbar{display:none}
.template-track{position:relative;left:0;top:0;gap:0;padding:0;margin-left:calc(-38 * var(--u));width:max-content}
.template-set{display:flex;flex-shrink:0;gap:calc(14 * var(--u));padding-right:calc(14 * var(--u))}
.template-tile{width:calc(112 * var(--u));height:calc(111 * var(--u));flex:0 0 calc(112 * var(--u));padding:0;border-radius:calc(6 * var(--u));background:#fff;overflow:hidden;cursor:pointer}
.template-tile.empty-slot{cursor:default}
.template-tile.empty-slot:hover{transform:none;box-shadow:none}
.template-tile>img{display:block;width:100%;height:100%;object-fit:cover}
.template-tile>span{opacity:1;font-size:clamp(9px,calc(5.5 * var(--u)),14px);line-height:1.3;bottom:calc(5 * var(--u));left:calc(7 * var(--u));right:calc(7 * var(--u));padding:0;color:#161616;background:none;text-align:left}
.templates-label{top:calc(29 * var(--u));width:calc(201 * var(--u));height:calc(52 * var(--u));font-size:calc(11 * var(--u));border-radius:calc(32 * var(--u));background:#656969bd;backdrop-filter:none;translate:-50% 0;transform:none}
.image-preview{height:190px;background:#f4f5f7}
.image-preview>img{width:100%;height:100%;object-fit:contain}
.template-detail .image-preview{height:300px}
.brand-overview{color:#111;background:white;padding-top:calc(16 * var(--u));position:relative}
.feature-placeholders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(13 * var(--u));padding:0 calc(11 * var(--u))}
.feature-placeholders>div{height:calc(197 * var(--u));background:#0051ed;border-radius:calc(18 * var(--u))}
.brand-numbers{padding-top:calc(29 * var(--u));text-align:center}
.brand-numbers h2{font-size:calc(13 * var(--u));font-weight:400;line-height:calc(18 * var(--u));margin:0}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr 1fr;gap:calc(20 * var(--u));margin:calc(23 * var(--u)) auto 0;width:78%;color:#111}
.stats-grid>div{display:flex;flex-direction:column;align-items:center}
.stats-grid dd{order:-1;color:var(--blue);font-size:calc(30 * var(--u));line-height:calc(37 * var(--u));font-weight:700;margin:0;white-space:nowrap;letter-spacing:calc(-1 * var(--u))}
.stats-grid dd svg{width:calc(16 * var(--u));height:calc(16 * var(--u));vertical-align:calc(3 * var(--u));margin-left:calc(-2 * var(--u))}
.stat-counter-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stat-odometer{display:inline-flex;align-items:baseline;vertical-align:baseline;font-variant-numeric:tabular-nums;line-height:1}
.stat-digit{display:inline-block;width:1ch;height:1em;overflow:hidden;vertical-align:baseline}
.stat-digit-reel{display:block;will-change:transform}
.stat-digit-reel>span{display:block;height:1em;line-height:1;text-align:center}
.stat-digit[hidden],.stat-separator[hidden]{display:none}
.counter-complete .stat-digit-reel{will-change:auto}
.rating-star{transform-origin:center;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.counter-complete .rating-star{animation:rating-pop .7s cubic-bezier(.16,1,.3,1) both}
@keyframes rating-pop{0%{transform:scale(.6) rotate(-20deg);opacity:.4}65%{transform:scale(1.18) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@media(min-width:600px) and (prefers-reduced-motion:no-preference){
 .feature-placeholders.motion-ready>div{opacity:0;transform:translateY(36px) scale(.95);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);transition-delay:0ms}
 .feature-placeholders.motion-ready>div.is-revealed{opacity:1;transform:translateY(0) scale(1);transition-delay:var(--reveal-delay,0ms)}
}
@media(prefers-reduced-motion:reduce){
 .counter-complete .rating-star{animation:none}
}
.stats-grid dt{font-size:calc(8 * var(--u));line-height:calc(12 * var(--u));margin-top:calc(5 * var(--u));font-weight:400;white-space:nowrap}
.brand-tagline{font-size:calc(13 * var(--u));line-height:calc(18 * var(--u));margin:calc(25 * var(--u)) 0 0}
.brand-footer{display:block;padding:0 calc(17 * var(--u)) calc(5 * var(--u));margin:0;background:#fff;color:#111;font-size:calc(6 * var(--u));line-height:calc(12 * var(--u))}
.brand-footer>a{margin:0;font-size:inherit;display:inline-flex;align-items:center;gap:calc(3 * var(--u))}
.brand-footer>a>span{font-size:calc(10 * var(--u))}
.support-fab{position:fixed;inset:auto max(12px,calc(14 * var(--u))) max(12px,calc(10 * var(--u))) auto;z-index:20;width:clamp(38px,calc(30 * var(--u)),54px);height:clamp(38px,calc(30 * var(--u)),54px);margin:0;background:var(--orange);color:#fff}
.support-fab svg{width:57%;height:57%}
.nav-pill .nav-item:focus-visible,.nav-pill .nav-item:active,.nav-pill .nav-item.is-touched{color:var(--orange);transform:scale(1.12)}
.guest{transition:color .2s ease}
.guest:focus-visible,.guest:active,.guest.is-touched{color:var(--orange)}
.cart-button{transition:transform .2s ease}
.cart-button:focus-visible,.cart-button:active,.cart-button.is-touched{transform:scale(1.14)}
@media(hover:hover){.nav-pill .nav-item:hover{color:var(--orange);transform:scale(1.12)}.guest:hover{color:var(--orange)}.cart-button:hover{transform:scale(1.14)}.build-button:hover>.button-arrow{transform:scale(1.6)}}
@media(max-width:599px){
 :root{--u:1px}
 .reference-view{padding-bottom:20px}
 .topbar{height:auto;min-height:42px;padding:12px 16px;gap:8px 10px;flex-wrap:wrap}.brand img{width:78px}.top-divider{height:10px}
 .service-link,.login-link,.order-link{font-size:10px}.account-links{gap:7px;order:1}.order-link{padding:3px 7px}
 .nav-pill{position:relative;left:auto;right:auto;top:auto;transform:none;order:2;flex-basis:100%;height:32px;padding:0;gap:6px;margin:0;border-radius:0}
 .nav-item{font-size:13px;line-height:24px;padding:4px 2px}
 .dropdown-menu{top:38px;min-width:200px;left:-20px}.nav-dropdown:nth-of-type(2) .dropdown-menu{left:auto;right:-35px}
 .nav-row{position:relative;top:auto;height:50px;padding:0}.guest{left:17px;top:3px;font-size:11px;line-height:14px;width:70px;gap:7px}.guest svg{width:24px;height:29px}
 .cart-button{right:19px;top:2px;width:40px;height:34px}.cart-button svg{width:34px;height:34px}.cart-badge{top:-5px;right:-3px;width:23px;height:23px;font-size:9px}
 .hero{height:370px}.hero-copy{top:18px;left:20px;width:calc(100% - 40px)}
 .hero-copy h1{font-size:27px;line-height:33px;letter-spacing:-.8px;max-width:470px}.hero-linebreak{display:none}
 .trusted{font-size:11px;line-height:16px;margin:20px 0 10px;max-width:155px}
 .build-button{width:126px;height:34px;padding:3px 5px 3px 12px;font-size:13px;gap:8px;border-radius:30px}.build-button>.button-arrow{flex-basis:28px;width:28px;height:28px}.build-button svg{width:18px;height:18px}
 .collaboration{font-size:10px;line-height:14px;margin:12px 0 0;max-width:145px}
 .hero-art{left:auto;right:0;top:300px;width:59%;max-width:340px;mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%)}
 .template-strip{height:112px}.template-scroller{height:112px;top:0}.template-track{margin-left:-38px;padding:0}.template-set{gap:14px;padding-right:14px}.template-tile{width:112px;height:112px;flex-basis:112px;border-radius:6px;padding:0}.template-tile>span{font-size:10px}
 .templates-label{width:201px;height:52px;top:30px;font-size:11px;border-radius:32px}
 .brand-overview{padding-top:14px}.feature-placeholders{padding:0 12px;gap:9px}.feature-placeholders>div{height:clamp(105px,25vw,150px);border-radius:13px}
 .brand-numbers{padding:28px 15px 0}.brand-numbers h2{font-size:13px;line-height:19px}
 .stats-grid{width:100%;grid-template-columns:1fr 1fr;gap:23px 16px;margin-top:24px}.stats-grid dd{font-size:31px;line-height:38px;letter-spacing:-1px}.stats-grid dt{font-size:10px;line-height:15px;white-space:normal;margin-top:4px}.stats-grid dd svg{width:17px;height:17px;vertical-align:3px;margin-left:-2px}
 .brand-tagline{font-size:13px;line-height:20px;margin:27px 0 15px}.brand-footer{font-size:8px;line-height:14px;padding:0 16px 26px}.brand-footer>a{gap:3px}.brand-footer>a>span{font-size:12px}
 .support-fab{width:48px;height:48px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));left:auto;top:auto}
}

/* Hero outline for the light pass after cursor assembly. */
.hero-copy h1{position:relative}
.hero-word{display:inline-block}
.hero-title-sweep{position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.7px #d9f7ff;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #8edfff);opacity:0;mask-image:linear-gradient(90deg,transparent 44%,#000 49%,#000 51%,transparent 56%);-webkit-mask-image:linear-gradient(90deg,transparent 44%,#000 49%,#000 51%,transparent 56%);mask-size:300% 100%;-webkit-mask-size:300% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
@keyframes hero-edge-sweep{0%{opacity:0;mask-position:100% 0;-webkit-mask-position:100% 0}8%{opacity:1}88%{opacity:1;mask-position:0% 0;-webkit-mask-position:0% 0}100%{opacity:0;mask-position:0% 0;-webkit-mask-position:0% 0}}

/* Only the tag panel is a drag target; the photo and pin never move. */
.hero{pointer-events:none}
.hero-copy{pointer-events:auto}
.hero-body,#hero-tag-shadow,#hero-hangtag>use:not(.hangtag-hit-area),#hero-hangtag>ellipse,.hangtag-logo,.hangtag-cord{pointer-events:none}
#hero-hangtag{pointer-events:none;outline:none;user-select:none;-webkit-user-select:none;touch-action:none}
.hangtag-cord{fill:none;stroke:#1558a8;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hangtag-hit-area{pointer-events:all;cursor:grab;touch-action:none}
#hero-hangtag.is-dragging .hangtag-hit-area{cursor:grabbing}
#hero-hangtag:focus-visible:not(.pointer-focus) .hangtag-hit-area{stroke:#ffb58e;stroke-width:2;stroke-dasharray:5 4}

/* An invisible page-fixed grid is revealed only inside the pointer's soft mask. */
.cursor-light-surface{isolation:isolate}
.cursor-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease}
.cursor-light.is-active{opacity:1}
.cursor-light-orb{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.22) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle clamp(180px,18vw,280px) at var(--grid-x,-1000px) var(--grid-y,-1000px),#000 0%,rgba(0,0,0,.78) 30%,rgba(0,0,0,.28) 64%,transparent 100%);-webkit-mask-image:radial-gradient(circle clamp(180px,18vw,280px) at var(--grid-x,-1000px) var(--grid-y,-1000px),#000 0%,rgba(0,0,0,.78) 30%,rgba(0,0,0,.28) 64%,transparent 100%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){.cursor-light{transition:none}.cursor-light-orb{will-change:auto}.brand-overview.overview-motion-ready:before{will-change:auto}}
@media(hover:none) and (pointer:coarse){.cursor-light{display:none}}

#home-page{position:relative;background:linear-gradient(160deg,#0051ed 10%,#164db4 52%,#4976c5 100%)}
#home-page .reference-view{background:transparent}