.reference-hero{position:relative;isolation:isolate;width:calc(100% - 32px);margin:12px auto 24px;border-radius:30px;overflow:hidden;aspect-ratio:2.26;background:#354269 url('/assets/hero-v2/BACKGROUND_MASAUTU.png') center/cover no-repeat;color:#fff;container-type:inline-size}
.reference-new{position:absolute;left:2.5%;top:4%;padding:9px 24px;border-radius:99px;background:#244cff;font-size:clamp(14px,1.6vw,22px)}
.reference-category{position:absolute;right:2.5%;top:4%;font-size:clamp(18px,2vw,30px);line-height:.95;letter-spacing:-.06em;text-align:right}
.reference-title{position:absolute;inset:12% 0 auto;margin:0!important;text-align:center;font-family:Inter,Arial,sans-serif;font-weight:900;font-size:13.5cqw!important;line-height:.85!important;letter-spacing:-.055em!important;color:#f7ea65;white-space:nowrap}
.reference-art{position:absolute;inset:0;pointer-events:none}
.reference-piece{position:absolute;display:block;height:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 5px 5px #0002)}
.reference-other{left:11%;top:41%;width:10%;z-index:1}.reference-folder{left:19.4%;top:54.5%;width:6.5%;z-index:2}.reference-bass{left:27%;top:39.5%;width:11.5%;z-index:2}.reference-mp3{left:23.7%;top:44.5%;width:4.8%;z-index:3}
.reference-piano{left:58%;top:55%;width:10%;z-index:1}.reference-play{left:60.5%;top:45%;width:15.5%;z-index:2}.reference-file{left:65.5%;top:50%;width:10%;z-index:3}.reference-studio{left:72%;top:41%;width:10%;z-index:4}.reference-drums{left:79%;top:47.5%;width:10%;z-index:5}
.reference-pc{left:35%;top:27%;width:36%;z-index:6}.reference-logo{left:32.5%;top:60%;width:7.4%;z-index:7}
.reference-bottom{position:absolute;bottom:4%;left:2.5%;right:2.5%;display:flex;justify-content:space-between;align-items:end;gap:18px}
.reference-bottom p{margin:0;font-size:clamp(14px,1.45vw,22px);line-height:1.15;letter-spacing:-.045em}.reference-bottom strong{display:none}
.reference-actions{display:flex;gap:10px;flex-wrap:nowrap}.reference-hero .button,.reference-home #main .button,.reference-home #main .hotline-trigger{font-size:16px!important;min-height:44px!important;padding:12px 22px!important;border-radius:14px!important;line-height:1.2!important;letter-spacing:-.035em;white-space:nowrap}
.reference-hero .reference-secondary{background:#373737!important;color:white!important}.reference-hero .reference-primary{background:#244cff!important;color:#fff!important}.reference-hero .button:hover{filter:brightness(.9)}
.menu-toggle{color:#555!important;-webkit-text-fill-color:#555}.menu-toggle span,.menu-toggle i{background-color:#555!important}.menu-toggle svg{stroke:#555!important}
@media(max-width:1050px){.reference-hero{aspect-ratio:1.75}.reference-title{top:17%}.reference-pc{top:31%;width:40%;left:33%}.reference-bottom p{font-size:16px}.reference-hero .button{padding:12px 16px!important;font-size:14px!important}.reference-logo{top:60%;width:9%;left:29%}}
@media(max-width:700px){.reference-hero{width:calc(100% - 28px);margin:8px auto 20px;border-radius:24px;aspect-ratio:auto;height:166cqw;min-height:660px;max-height:1120px;background-image:url('/assets/hero-v2/BACKGROUND_MOBIL.png')}.reference-new{left:50%;top:2.8%;transform:translateX(-50%);font-size:14px;padding:7px 17px}.reference-category{display:none}.reference-title{top:13%;font-size:25cqw!important;line-height:.79!important;white-space:normal;letter-spacing:-.055em!important}.reference-title span{display:block}.reference-title span+span{margin-top:.03em}.reference-other,.reference-folder,.reference-mp3,.reference-piano,.reference-file,.reference-studio{display:none}.reference-bass{left:3%;top:34%;width:27%;z-index:1}.reference-play{left:60%;top:39%;width:36%;z-index:2}.reference-drums{left:70%;top:51%;width:26%;z-index:2}.reference-pc{left:13%;top:30%;width:84%;z-index:6}.reference-logo{left:10%;top:54%;width:23%;z-index:7}.reference-bottom{left:4%;right:4%;bottom:5%;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}.reference-bottom p{font-size:clamp(16px,4.1vw,24px);line-height:1.13}.reference-bottom strong{display:block;font-weight:700;margin-bottom:4px}.reference-actions{gap:8px;justify-content:center;width:100%}.reference-hero .button{font-size:14px!important;padding:12px 16px!important;min-height:44px!important}.reference-home #main .hotline-trigger{white-space:normal}}
@media(max-width:360px){.reference-hero .button{padding:12px!important;font-size:13px!important}}
.reference-hero{margin-top:34px}
@media(max-width:700px){.reference-hero{margin-top:30px}.reference-pc{left:13%;width:86%}}
/* Edge-to-edge CSS colour field: no baked-in rounded PNG corners. */
.reference-hero{background:radial-gradient(ellipse 65% 25% at 32% 100%,#e89646 0%,#dea15f99 45%,transparent 100%),linear-gradient(to bottom,#001b43 0%,#0c2253 10%,#2f396c 30%,#4a4d7c 50%,#6e658c 70%,#ab9096 90%,#b8a098 100%)}
.reference-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,#394370 0%,#404676 10%,#605b87 30%,#958297 50%,#d5a47b 70%,#e18b3c 88%,#98493c 100%);mask-image:linear-gradient(to right,#000,transparent);-webkit-mask-image:linear-gradient(to right,#000,transparent);pointer-events:none}
.reference-scene{position:absolute;inset:0;container-type:inline-size}
.reference-title{letter-spacing:-.035em!important;font-size:12.8cqw!important}
.reference-art{perspective:900px}
.reference-pc-link{position:absolute;left:35%;top:27%;width:36%;z-index:6;pointer-events:auto;display:block}
.reference-pc-link .reference-pc{position:static;width:100%;height:auto}
.reference-hero .reference-actions .button{border-radius:14px!important}
.reference-hero .reference-actions .reference-primary:hover,.reference-hero .reference-actions .reference-primary:focus-visible{background:#163fdc!important;color:#fff!important;filter:none!important;transform:none!important}
.buy-page .purchase-visual{background:#f6f6f8!important}
.reference-home #header{height:0}
.reference-home .reference-hero{--shrink:0;width:100%;height:max(100svh,52vw);min-height:650px;max-height:none;aspect-ratio:auto;margin:0 0 24px;border-radius:0;clip-path:inset(0 calc(var(--shrink)*16px) round calc(var(--shrink)*30px))}
.reference-home .reference-scene{inset:88px 0 0;transform:scale(calc(1 - var(--shrink)*.02));transform-origin:center center}
.reference-home:not(.scrolled) #header,.reference-home:not(.scrolled) #header .header-inner{color:white!important;background:transparent!important;box-shadow:none!important}
.reference-home:not(.scrolled) #header .header-inner:before{background:transparent!important;backdrop-filter:none!important}
.reference-home:not(.scrolled) #header .brand-home img{filter:brightness(0) invert(1)}
.reference-home:not(.scrolled) #header .menu-toggle{color:white!important;-webkit-text-fill-color:white}
.reference-home:not(.scrolled) #header .menu-toggle span{background:white!important}
.reference-home:not(.scrolled) #header .language,.reference-home:not(.scrolled) #header .currency-select,.reference-home:not(.scrolled) #header .cart-trigger{color:white!important}
.reference-home:not(.scrolled) #header select option{color:#111;background:#fff}
.reference-home:not(.scrolled) #header .products-dropdown,.reference-home:not(.scrolled) #header .mobile-nav{color:#111!important}
@media(max-width:1050px){.reference-pc-link{left:33%;top:31%;width:40%}.reference-home .reference-hero{height:100svh;min-height:660px}}
/* Keep the Mac tucked under the wordmark and the ORP mark touching its lower-left
   edge on square-ish desktop windows, on both shared hero surfaces. */
@media(min-width:701px) and (max-width:1050px) and (max-aspect-ratio:7/5){
 .reference-home .reference-pc-link,.reference-product .reference-pc{top:26%}
 .reference-home .reference-logo,.reference-product .reference-logo{left:31.5%;top:51%;width:9%}
}
@media(max-width:700px){
 .reference-title{font-size:23cqw!important;line-height:.85!important}
 .reference-title:lang(tr){font-size:21cqw!important}
 .reference-pc-link{left:13%;top:30%;width:86%}
 .reference-home .reference-hero{height:max(100svh,185vw);min-height:740px}
 .reference-home .reference-scene{inset:88px 0 0}
}
@media(prefers-reduced-motion:reduce){.reference-piece{animation:none!important;transition:none!important;transform:none!important;rotate:none!important;translate:none!important}.reference-hero .button{transform:none!important}}
/* Shared immersive hero. The product's black surround stays in normal flow. */
.reference-immersive #header{height:0}
.reference-immersive .reference-hero{--shrink:0;--depth:0;--glass-edge:-20%;width:100%;height:max(100svh,52vw);min-height:650px;max-height:none;aspect-ratio:auto;margin:0 0 24px;border-radius:0;clip-path:inset(0 calc(var(--shrink)*16px) round calc(var(--shrink)*30px));background:radial-gradient(ellipse 48% 22% at 0% 100%,#913d30 0%,transparent 100%),radial-gradient(ellipse 60% 22% at 32% 100%,#ee9743 0%,#dea15f88 48%,transparent 100%),linear-gradient(to bottom,#001332 0%,#0b204e 10%,#2f396c 30%,#4a4d7c 50%,#6e658c 70%,#ab9096 90%,#b8a098 100%)}
.reference-immersive .reference-hero:before{background:linear-gradient(to bottom,#394370 0%,#404676 10%,#605b87 30%,#958297 50%,#d5a47b 70%,#e18b3c 86%,#8a392d 100%)}
.reference-immersive .reference-scene{inset:88px 0 0;transform:scale(calc(1 - var(--shrink)*.02));transform-origin:center}
.reference-immersive:not(.scrolled) #header,.reference-immersive:not(.scrolled) #header .header-inner{color:#fff!important;background:transparent!important;box-shadow:none!important}
.reference-immersive:not(.scrolled) #header .header-inner:before{background:transparent!important;backdrop-filter:none!important}
.reference-immersive:not(.scrolled) #header .brand-home img{filter:brightness(0) invert(1)}
.reference-immersive:not(.scrolled) #header .menu-toggle{color:#fff!important;-webkit-text-fill-color:#fff}
.reference-immersive:not(.scrolled) #header .menu-toggle span{background:#fff!important}
.reference-immersive:not(.scrolled) #header .language,.reference-immersive:not(.scrolled) #header .currency-select,.reference-immersive:not(.scrolled) #header .cart-trigger{color:#fff!important}
.reference-immersive:not(.scrolled) #header select option{color:#111;background:#fff}
.reference-immersive:not(.scrolled) #header .products-dropdown,.reference-immersive:not(.scrolled) #header .mobile-nav{color:#111!important}
.reference-product-surface{display:flow-root;background:#080808}
.reference-product-surface .reference-hero{margin-bottom:0}
.reference-nav-bed{height:150px;background:#080808;margin-bottom:-150px;pointer-events:none}
.reference-product .release-product-nav{box-shadow:none!important;margin:40px auto!important}
.reference-product .release-product-nav:after{display:none!important}
.reference-product .release-product-nav:before{content:'';position:absolute;inset:0;background:#eee;border-radius:inherit;z-index:-1;pointer-events:none}
/* Never leave blur on an image after entry. Each wrapper has its own clock. */
.reference-entry{position:absolute;display:block;height:auto;perspective:900px;filter:none}
.reference-entry>.reference-piece{position:relative;width:100%;height:auto;left:auto;top:auto;filter:drop-shadow(0 5px 5px #0002)}
.reference-animated .reference-idle:not(.reference-static-logo){transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out;animation:reference-idle var(--duration,7s) ease-in-out infinite;will-change:transform,translate}
@keyframes reference-idle{0%,100%{translate:0 0}25%{translate:var(--drift-x) var(--drift-y)}75%{translate:calc(var(--drift-x)*-.8) calc(var(--drift-y)*-.7)}}
.reference-paused .reference-idle{animation-play-state:paused!important}
.reference-title{transform:translateY(calc(var(--depth)*-28px)) scale(calc(1 - var(--depth)*.14));transform-origin:center top;mask-image:linear-gradient(to bottom,transparent calc(var(--glass-edge) - 35%),#000 calc(var(--glass-edge) + 35%));-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--glass-edge) - 35%),#000 calc(var(--glass-edge) + 35%))}
.reference-title-glass{pointer-events:none;filter:blur(calc(var(--depth)*4px));opacity:calc(1 - var(--depth)*.16);mask-image:linear-gradient(to bottom,#000 calc(var(--glass-edge) - 35%),transparent calc(var(--glass-edge) + 35%));-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--glass-edge) - 35%),transparent calc(var(--glass-edge) + 35%))}
body .button:not(.secondary):not(.reference-secondary):hover,body .button:not(.secondary):not(.reference-secondary):focus-visible{background:#0043d6!important;color:#fff!important;filter:none!important;transform:none!important;box-shadow:none!important}
@media(max-width:1050px){.reference-immersive .reference-hero{height:100svh;min-height:660px}}
@media(max-width:700px){.reference-immersive .reference-hero{height:max(100svh,185vw);min-height:740px}.reference-nav-bed{height:142px;margin-bottom:-142px}}
@media(prefers-reduced-motion:reduce){.reference-title{transform:none;mask-image:none;-webkit-mask-image:none}.reference-title-glass{display:none}.reference-entry{filter:none!important;transform:none!important}.reference-idle{will-change:auto!important}}
.cart-handle{display:none}
@media(max-width:700px){
 .reference-entry:is(.reference-other,.reference-folder,.reference-mp3,.reference-piano,.reference-file,.reference-studio){display:none}
 .cart-drawer{inset:auto 0 0!important;width:100%!important;max-width:none!important;height:auto!important;max-height:85dvh!important;margin:0!important;border-radius:26px 26px 0 0!important;padding:48px 24px calc(24px + env(safe-area-inset-bottom))!important;background:#eee!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow-y:auto;overscroll-behavior:contain;transform:translateY(var(--cart-drag,0px));transition:transform .22s ease-out}
 .cart-drawer[open]{animation:none!important}
 .cart-drawer::before{display:none!important}
 .cart-drawer::backdrop{background:#111b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .cart-drawer.cart-dragging{transition:none}
 .cart-handle{display:flex;position:absolute;top:0;left:calc(50% - 60px);width:120px;height:40px;align-items:center;justify-content:center;border:0;background:transparent;touch-action:none;cursor:grab}
 .cart-handle span{width:38px;height:4px;border-radius:9px;background:#999}
 .cart-drawer #cart-content{height:auto!important;min-height:0!important}
 .cart-drawer .cart-bottom{margin-top:24px!important}
 .cart-open:after{content:'';position:fixed;inset:auto 0 -120px;height:calc(120px + env(safe-area-inset-bottom));background:#eee;z-index:9999;pointer-events:none}
}