/* Ukuran desktop mengikuti proporsi artwork referensi pada lebar 955 px. */
:root{--u:calc(100vw / 955);--orange:#ff6028}
body{background:#fff}
.reference-view{min-height:0;overflow:visible;background:linear-gradient(145deg,#0350df 0%,#0348ce 30%,#062756 72%,#06224d 100%)}
.hero-art{left:58.1%;top:0;width:30%;max-width:none;opacity:1}
.topbar{height:calc(41 * var(--u));padding:0 calc(16 * var(--u));gap:calc(12 * var(--u));font-size:calc(8 * var(--u))}
.brand img{width:calc(60 * var(--u))}
.top-divider{height:calc(8 * var(--u))}
.service-link,.login-link,.order-link{font-size:calc(8 * var(--u))}
.account-links{gap:calc(9 * var(--u))}
.order-link{padding:calc(2 * var(--u)) calc(8 * var(--u))}
.nav-row{position:relative;height:calc(65 * var(--u));padding:calc(22 * var(--u)) calc(28 * var(--u)) 0;gap:calc(30 * var(--u));flex-wrap:nowrap;align-items:center}
.guest{position:absolute;left:calc(18 * var(--u));top:calc(5 * var(--u));width:calc(50 * var(--u));flex:0 0 calc(50 * var(--u));font-size:calc(8 * var(--u));line-height:calc(10 * var(--u));gap:calc(5 * var(--u))}
.guest svg{width:calc(20 * var(--u));height:calc(22 * var(--u))}
.nav-pill{position:absolute;left:33%;right:33%;top:calc(1 * var(--u));order:initial;flex:1;height:calc(25 * var(--u));padding:0 calc(12 * var(--u));gap:calc(8 * var(--u));border-radius:calc(25 * var(--u));margin:0;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.46);box-shadow:0 3px 15px rgba(10,42,100,.06);-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%)}
.nav-item{font-size:clamp(8px,calc(9 * var(--u)),18px);line-height:calc(16 * var(--u));padding:calc(4 * var(--u)) calc(6 * var(--u));gap:calc(5 * var(--u))}
.chevron{width:calc(8 * var(--u));height:calc(8 * var(--u));border-width:0 calc(2 * var(--u)) calc(2 * var(--u)) 0;margin:calc(-4 * var(--u)) calc(2 * var(--u)) 0}
.dropdown-menu{top:calc(30 * 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(20 * var(--u));top:calc(5 * var(--u));width:calc(55 * var(--u));height:calc(40 * var(--u));flex:0 0 calc(55 * var(--u));padding:0 calc(5 * var(--u));margin:0;color:var(--orange)}
.cart-button>svg{width:calc(36 * var(--u));height:calc(36 * var(--u))}
.cart-badge{top:calc(-3 * var(--u));width:calc(27 * var(--u));height:calc(27 * var(--u));font-size:calc(10 * var(--u))}
.hero{height:calc(156 * var(--u))}
.hero-copy{top:calc(23 * var(--u));left:calc(22 * var(--u))}
.trusted{max-width:none;font-size:calc(11 * var(--u));line-height:calc(14 * var(--u));margin:0 0 calc(8 * var(--u))}
.build-button{min-width:calc(194 * var(--u));height:calc(44 * var(--u));padding:calc(3 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u)) calc(20 * var(--u));gap:calc(15 * var(--u));margin-left:calc(-3 * var(--u));font-size:calc(20 * var(--u));border-radius:calc(30 * var(--u));white-space:nowrap}
.build-button>span{width:calc(39 * var(--u));height:calc(39 * var(--u));flex-shrink:0}
.build-button svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.hero .build-button{min-width:calc(141 * var(--u));height:calc(35 * var(--u));font-size:calc(14 * var(--u));padding:calc(2 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(18 * var(--u));gap:calc(11 * var(--u))}
.hero .build-button>span{width:calc(31 * var(--u));height:calc(31 * var(--u))}
.hero .build-button svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.collaboration{font-size:calc(11 * var(--u));line-height:calc(14 * var(--u));margin:calc(10 * var(--u)) 0 0}
.template-strip{height:calc(135 * var(--u))}
.template-scroller{position:absolute;top:calc(-6 * var(--u));left:0;width:100%;height:calc(147 * 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:calc(6 * var(--u)) 0;margin-left:calc(-45 * var(--u));width:max-content}
.template-set{display:flex;flex-shrink:0;gap:calc(18 * var(--u));padding-right:calc(18 * var(--u))}
.template-tile{width:calc(135 * var(--u));height:calc(135 * var(--u));flex:0 0 calc(135 * var(--u));padding:calc(16 * var(--u));border-radius:calc(7 * var(--u));cursor:pointer}
.template-tile>span{font-size:calc(14 * var(--u));bottom:calc(16 * var(--u));left:calc(16 * var(--u))}
.templates-label{top:calc(36 * var(--u));width:calc(244 * var(--u));height:calc(63 * var(--u));font-size:calc(14 * var(--u))}
.about{height:calc(83 * var(--u));min-height:0;padding:calc(22 * var(--u)) calc(20 * var(--u)) calc(15 * var(--u)) calc(22 * var(--u));grid-template-columns:66.9% 1fr;gap:0}
.about h1{font-size:calc(14 * var(--u));margin:calc(10 * var(--u)) 0 0;gap:calc(5 * var(--u))}
.about h1>span{width:calc(7 * var(--u));height:calc(7 * var(--u))}
.about>p{max-width:none;font-size:calc(13 * var(--u));line-height:calc(16 * var(--u))}
.desktop-break{display:initial}
/* Satu tombol di luar semua container scroll/transform agar selalu di bawah. */
.support-fab{position:fixed;inset:auto max(12px,calc(20 * var(--u))) max(12px,calc(12 * var(--u))) auto;z-index:20;width:clamp(44px,calc(48 * var(--u)),68px);height:clamp(44px,calc(48 * var(--u)),68px);margin:0;background:var(--orange);color:#fff}
.support-fab svg{width:57%;height:57%}
.studio-details{display:block;position:relative;background:#fff;color:#000;min-height:calc(470 * var(--u));padding:calc(34 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u));scroll-margin-top:0}
.studio-details>h2{font-size:calc(31 * var(--u));line-height:calc(38 * var(--u));font-weight:700;letter-spacing:0;margin:0 0 calc(13 * var(--u))}
.studio-composition{position:relative;height:calc(312 * var(--u))}
.studio-orange{position:absolute;left:0;top:0;width:34.7%;aspect-ratio:1;background:var(--orange)}
.studio-message{position:absolute;left:37.4%;top:calc(4 * var(--u));width:61%}
.studio-message p{font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));margin:0}
.studio-message p+p{margin-top:calc(10 * var(--u));width:55%}
.studio-message .build-button{margin:calc(25 * var(--u)) 0 0 calc(-8 * var(--u));width:calc(194 * var(--u));min-width:0}
.studio-black{position:absolute;left:69.5%;top:calc(43 * var(--u));width:30.1%;aspect-ratio:1;background:#000}
.studio-experience{position:absolute;left:37.4%;bottom:calc(-11 * var(--u));display:flex;gap:calc(7 * var(--u));align-items:flex-end}
.experience-number{font-size:calc(150 * var(--u));line-height:.8;font-weight:700;letter-spacing:calc(-8 * var(--u));color:var(--blue)}
.experience-label{font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));padding-bottom:calc(1 * var(--u))}
.studio-footer{display:block;background:white;color:#0051ed;margin-top:calc(33 * var(--u));padding:0 calc(4 * var(--u));font-size:calc(14 * var(--u));line-height:calc(20 * var(--u))}
.studio-footer>a{margin:0;font-size:inherit}
.studio-footer>a:hover{text-decoration:underline}
/* Efek hover, sentuhan, dan fokus keyboard pada kontrol utama. */
.nav-pill .nav-item{color:#0050f8;font-weight:700;transition:color .18s ease,transform .2s ease;transform-origin:center}
.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 .18s ease}
.guest:focus-visible,.guest:active,.guest.is-touched{color:var(--orange)}
.build-button>span{transition:transform .23s ease;transform-origin:center}
.build-button:focus-visible>span,.build-button:active>span,.build-button.is-touched>span{transform:scale(1.22)}
.hero .build-button:hover{transform:none}
.cart-button{transition:transform .23s ease;transform-origin:center}
.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)}
 .build-button:hover>span{transform:scale(1.22)}
 .cart-button:hover{transform:scale(1.14)}
}
@media(max-width:599px){
 :root{--u:1px}
 .topbar{height:41px;padding:0 16px;gap:12px}.brand img{width:87px}
 .service-link,.login-link,.order-link{font-size:10px}.top-divider{height:11px}
 .account-links{gap:8px}.order-link{padding:3px 9px}
 .nav-row{height:auto;padding:12px 16px 0;gap:16px;flex-wrap:wrap;align-items:flex-start}
 .guest{position:static;left:auto;top:auto;width:76px;flex-basis:76px;font-size:12px;line-height:15px;gap:8px}.guest svg{width:29px;height:31px}
 .cart-button{position:relative;right:auto;top:auto;margin-left:auto;margin-right:0;width:58px;flex-basis:58px;height:34px;padding:0 5px}.cart-button>svg{width:35px;height:35px}.cart-badge{width:28px;height:28px;font-size:10px;top:-6px}
 .nav-pill{position:relative;left:auto;right:auto;top:auto;order:3;flex-basis:100%;height:39px;padding:0 12px;gap:6px;margin-right:0;border-radius:24px}
 .nav-item{font-size:14px;line-height:24px;padding:6px 2px;gap:3px}.chevron{width:6px;height:6px;border-width:0 1.5px 1.5px 0;margin:-4px 2px 0}
 .dropdown-menu{top:42px;min-width:200px;left:-20px}.nav-dropdown:nth-of-type(2) .dropdown-menu{left:auto;right:-35px}
 .hero{height:237px}.hero-copy{top:48px;left:17px}.hero-art{left:43%;width:57%;top:123px}
 .trusted{max-width:215px;font-size:13px;line-height:18px;margin-bottom:12px}
 .build-button{min-width:170px;height:40px;font-size:17px;gap:15px;padding:3px 5px 3px 17px;margin-left:-3px;border-radius:30px}.build-button>span{width:35px;height:35px}
 .hero .build-button{min-width:170px;height:40px;font-size:17px;gap:15px;padding:3px 5px 3px 17px}.hero .build-button>span{width:35px;height:35px}
 .collaboration{font-size:13px;line-height:17px;margin-top:14px}
 .template-strip{height:145px}.template-scroller{top:-6px;height:157px}.template-track{margin-left:-48px;padding:6px 0;gap:0}.template-set{gap:15px;padding-right:15px}.template-tile{width:145px;height:145px;flex-basis:145px;padding:16px;border-radius:10px}.template-tile>span{font-size:12px;left:16px;bottom:16px}
 .templates-label{width:255px;height:65px;top:40px;font-size:14px}
 .about{height:auto;min-height:145px;grid-template-columns:1fr;gap:18px;padding:25px 17px 28px}.about h1{font-size:17px;margin:0;gap:8px}.about h1>span{width:11px;height:11px}.about>p{font-size:23px;line-height:28px;max-width:420px}.desktop-break{display:none}
 .support-fab{width:48px;height:48px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));left:auto;top:auto}
 .studio-details{padding:32px 20px 35px;min-height:0}.studio-details>h2{font-size:clamp(21px,5.7vw,31px);line-height:1.2;margin:0 0 23px}
 .studio-composition{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
 .studio-orange{position:static;width:100%;grid-column:1;grid-row:1;align-self:start}
 .studio-message{position:static;grid-column:1/-1;grid-row:2;width:auto}
 .studio-message p{font-size:16px;line-height:22px}.studio-message p+p{width:auto;margin-top:18px}.studio-linebreak{display:none}
 .studio-message .build-button{width:180px;margin:20px 0 0;min-width:0}
 .studio-black{position:static;width:85%;grid-column:2;grid-row:1;align-self:end;justify-self:end}
 .studio-experience{position:static;grid-column:1/-1;grid-row:3;gap:12px;justify-content:flex-end;margin-top:9px}
 .experience-number{font-size:110px;letter-spacing:-5px}.experience-label{font-size:18px;line-height:22px;padding-bottom:1px}
 .studio-footer{padding:0;font-size:15px;line-height:22px;margin-top:48px}
}