/* Separate artwork from the background so the complete product fits the actual free space. */
.showcase .hero-product{position:absolute;z-index:2;left:51%;top:42%;width:15%;height:42%;pointer-events:none}
.showcase .hero-copy h2{width:fit-content;max-width:100%}
@media(min-width:1151px){
 .showcase{--vitrine-space:28px}
 .showcase .hero-copy{translate:calc(-1 * var(--vitrine-space)) 0}
 .showcase .vitrine-sidebar{translate:var(--vitrine-space) 0}
}
@media(min-width:761px) and (max-width:1150px){
 .showcase .hero-copy{width:40%;max-width:320px}
 .showcase .hero-description{max-width:100%}
 .showcase .hero-actions{flex-wrap:wrap;column-gap:16px;row-gap:12px}
}
.showcase .hero-product img,.mobile-storefront .mobile-featured-photo>img{position:absolute;z-index:1;display:block;left:50%;bottom:var(--art-reserve,54px);width:var(--art-width,100%);height:var(--art-height,calc(100% - 54px));max-height:none;padding:0;object-fit:contain;object-position:center bottom;transform:translateX(-50%);filter:saturate(.91) contrast(.96) brightness(1.025) drop-shadow(0 2px 1px #77451d38)}
/* Two soft floor shadows follow the actual artwork, including the raised base of the roll. */
.hero-product,.mobile-featured-photo{--contact-lift:0px;--contact-offset:0px;--contact-width:calc(var(--art-width,220px)*.78);--contact-depth:calc(var(--art-width,220px)*.07)}
.showcase .hero-product::before,.mobile-storefront .mobile-featured-photo::before{content:"";position:absolute;z-index:0;left:calc(50% + var(--contact-offset));bottom:calc(var(--art-reserve,54px) + var(--contact-lift) - var(--contact-depth)*.55);width:var(--contact-width);height:var(--contact-depth);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#6a421e70 0%,#865c3540 38%,#9c71411a 62%,transparent 76%);pointer-events:none}
.showcase .hero-product::after,.mobile-storefront .mobile-featured-photo::after{content:"";position:absolute;z-index:0;left:calc(50% + var(--contact-offset));bottom:calc(var(--art-reserve,54px) + var(--contact-lift) - var(--contact-depth)*1.1);width:calc(var(--contact-width)*1.2);height:calc(var(--contact-depth)*2.4);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#94633335 0%,#a1763b16 42%,transparent 72%);pointer-events:none}
[data-product="levha"] .hero-product{--contact-lift:calc(var(--art-height,260px)*.13);--contact-offset:calc(var(--art-width,280px)*-.025);--contact-width:calc(var(--art-width,280px)*.89);--contact-depth:calc(var(--art-width,280px)*.1)}
[data-product="topraklama"] .hero-product{--contact-offset:calc(var(--art-width,150px)*-.44);--contact-width:28px;--contact-depth:10px}
[data-product="boru"] .hero-product,[data-product="boru"] .mobile-featured-photo{--contact-lift:calc(var(--art-height,320px)*.038);--contact-width:calc(var(--art-width,280px)*.91);--contact-depth:calc(var(--art-width,280px)*.055)}
[data-product="lama"] .hero-product,[data-product="lama"] .mobile-featured-photo{--contact-width:calc(var(--art-width,240px)*.85)}
.showcase .hero-product.hero-depth-ready::before,.showcase .hero-product.hero-depth-ready::after,.mobile-storefront .mobile-featured-photo.hero-depth-ready::before,.mobile-storefront .mobile-featured-photo.hero-depth-ready::after{display:none}
@media(max-width:760px){.showcase .hero-product{display:none}}

/* The existing artwork box and page layout stay unchanged. */
.hero-depth-host{isolation:isolate}
.hero-depth-host>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mobile-featured-photo.hero-depth-host{position:relative}
.mobile-storefront .mobile-featured-photo{min-height:300px;height:clamp(300px,82vw,370px);max-height:none;aspect-ratio:auto;background:#f5dfb6 var(--hero-backdrop) center/cover no-repeat}
.hero-depth-stage{position:absolute;inset:0 0 78px;z-index:2;pointer-events:none}
.hero-depth-stage canvas{display:block;width:100%;height:100%;pointer-events:auto;cursor:grab;border-radius:8px;touch-action:none}
.hero-depth-stage canvas.is-dragging{cursor:grabbing}
.hero-depth-stage canvas:focus-visible{outline:2px solid #754818;outline-offset:-3px}
.hero-depth-active .product-visual{background:var(--hero-backdrop) center/cover no-repeat}
.hero-depth-active .product-visual>img{opacity:0}
.hero-depth-host.hero-depth-ready>img{opacity:0}
.hero-depth-host>img{transition:opacity .18s ease}
/* A copper seal joins a slim label; the open ring responds only to deliberate interaction. */
.hero-depth-controls{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;z-index:3;pointer-events:auto;max-width:100%}
/* Keep the arrow below the photo, with a clear gap beside the button. */
.hero-depth-controls>.hero-depth-connector{position:absolute;bottom:calc(var(--art-reserve,64px) - var(--controls-bottom,0px) - var(--connector-height,48px));left:calc(100% + 12px);width:48px;height:var(--connector-height,48px);fill:none;stroke:#a97532;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hero-product{--connector-height:76px}
[data-product="topraklama"] .hero-depth-controls>.hero-depth-connector{--connector-height:48px;bottom:calc(var(--art-reserve,64px) + 1px);left:calc(50% - var(--art-width,150px)*.12);width:62px;transform:translateX(-50%)}
.hero-depth-ready .hero-depth-connector{display:none}
.hero-depth-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:0;background:none;color:#604024;font:600 11px/1.35 var(--font-body,Manrope,Arial,sans-serif);white-space:nowrap;cursor:pointer;isolation:isolate}
.hero-depth-controls .hero-depth-toggle{min-height:52px;padding:4px;border-radius:28px}
.hero-depth-seal{position:relative;z-index:2;display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #ab7937;border-radius:50%;background:linear-gradient(135deg,#fff2c9,#e8b963 62%,#f7dfa2);box-shadow:inset 0 0 0 3px #fff0bd,0 2px 4px #71471e20;color:#54351d;font-size:14px;line-height:1;font-weight:700;letter-spacing:-.04em;transition:background .2s,color .2s}
.hero-depth-seal::before{content:"";position:absolute;inset:-5px;border:1px solid #ac7d3f;border-right-color:transparent;border-radius:50%;transform:rotate(-35deg);transition:transform .3s ease}
.hero-depth-seal::after{content:"";position:absolute;top:1px;right:-3px;width:4px;height:4px;border:1px solid #fff0cb;border-radius:50%;background:#8e5e2a;transition:background .2s}
.hero-depth-label{display:flex;align-items:center;min-height:32px;margin-left:-9px;padding:0 30px 0 19px;border:1px solid #b78b4c;border-left:0;border-radius:0 18px 18px 0;background:#fff2d7;box-shadow:0 2px 4px #71471e12;letter-spacing:.01em;transition:background .2s,border-color .2s}
.hero-depth-controls button svg{width:17px;height:17px;stroke-width:1.5;flex:none}
.hero-depth-controls .hero-depth-toggle>svg{position:absolute;right:13px;top:50%;width:13px;height:13px;transform:translateY(-50%);transition:translate .2s}
.hero-depth-toggle[aria-pressed="true"] .hero-depth-seal{background:#674426;color:#fff0c9;box-shadow:inset 0 0 0 3px #936735,0 2px 4px #71471e20}
.hero-depth-controls .hero-depth-toggle[aria-pressed="true"]>svg{transform:translateY(-50%) rotate(180deg)}
.hero-depth-controls .hero-depth-turn{width:44px;padding:0;border:1px solid #b78b4c;border-radius:50%;background:#fff2d7;transition:background .2s}
.hero-depth-controls .hero-depth-turn span:empty{display:none}
.hero-depth-controls[hidden],.hero-depth-controls button[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
 .hero-depth-toggle:not(:disabled):hover .hero-depth-seal::before{transform:rotate(30deg)}
 .hero-depth-toggle:not(:disabled):hover .hero-depth-label{background:#f8d88e;border-color:#956528}
 .hero-depth-toggle:not(:disabled):hover>svg{translate:2px -1px}
 .hero-depth-controls .hero-depth-turn:not(:disabled):hover{background:#f8d88e}
}
.hero-depth-toggle:not(:disabled):active .hero-depth-seal{box-shadow:inset 0 0 0 3px #eac785}
.hero-depth-toggle:not(:disabled):active .hero-depth-label{background:#edca85}
.hero-depth-controls button:focus-visible{outline:2px solid #754818;outline-offset:4px}
.hero-depth-controls button:disabled{opacity:.7;cursor:wait}
.hero-depth-caption{position:absolute;left:0;right:0;bottom:59px;margin:0;color:#694d30;font:500 10px/1.5 var(--font-body,Manrope,Arial,sans-serif);text-align:center;pointer-events:none}
.mobile-featured-photo .hero-depth-stage{inset:0 0 88px}
.mobile-featured-photo .hero-depth-controls{--controls-bottom:8px;bottom:var(--controls-bottom)}
.mobile-featured-photo .hero-depth-caption{bottom:67px;left:8px;right:8px;font-size:10px}
.mobile-featured-photo.hero-depth-ready{background:#e8cfa6 var(--hero-backdrop) center/cover no-repeat}
@media(max-width:380px){.mobile-featured-photo .hero-depth-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-depth-host>img,.hero-depth-controls button,.hero-depth-controls button svg,.hero-depth-seal,.hero-depth-seal::before,.hero-depth-seal::after,.hero-depth-label{transition:none}.hero-depth-toggle:not(:disabled):hover .hero-depth-seal::before{transform:rotate(-35deg)}.hero-depth-toggle:not(:disabled):hover>svg{translate:none}}
@media(forced-colors:active){.hero-depth-controls button,.hero-depth-controls .hero-depth-turn,.hero-depth-seal,.hero-depth-toggle[aria-pressed="true"] .hero-depth-seal,.hero-depth-label{background:Canvas;border-color:ButtonText;color:ButtonText;box-shadow:none}.hero-depth-seal::before{border-color:ButtonText;border-right-color:transparent}.hero-depth-seal::after{background:ButtonText;border-color:Canvas}.hero-depth-controls button:focus-visible{outline-color:Highlight}}

/* Per-product artwork is shared by the photo and interactive view. */
.hero-stage [data-product="topraklama"],.mobile-featured-slide[data-product="topraklama"]{--hero-backdrop:url('vitrin-zemin-topraklama-aydinlik.webp')}
.hero-stage [data-product="boru"],.mobile-featured-slide[data-product="boru"]{--hero-backdrop:url('vitrin-zemin-boru-sade.webp')}
.hero-stage [data-product="levha"],.mobile-featured-slide[data-product="levha"]{--hero-backdrop:url('vitrin-zemin-levha-sade.webp')}
.hero-stage [data-product="lama"],.mobile-featured-slide[data-product="lama"]{--hero-backdrop:url('vitrin-zemin-lama-sade.webp')}
.hero-stage [data-product="cubuk"],.mobile-featured-slide[data-product="cubuk"]{--hero-backdrop:url('vitrin-zemin-cubuk-sade.webp')}
.hero-stage [data-product="tel"],.mobile-featured-slide[data-product="tel"]{--hero-backdrop:url('vitrin-zemin-tel-sade.webp')}
.hero-stage [data-product="hediyelik"],.mobile-featured-slide[data-product="hediyelik"]{--hero-backdrop:url('vitrin-zemin-hediyelik-sade.webp')}

/* The selected category remains distinct after hover and keyboard focus leave. */
.showcase .vitrine-category[aria-current="true"],.showcase .vitrine-category[aria-current="true"]:hover{background:#f6d68a;border-color:#986326;box-shadow:0 0 0 2px #b17b30,0 5px 14px #75441d26}
.showcase .vitrine-category[aria-current="true"]::before{background:linear-gradient(90deg,transparent 14%,#f8d98d33 30%,#f8d98ded 53%,#f6d68a 100%)}
.showcase .vitrine-category[aria-current="true"] strong{color:#513217;text-shadow:none}
.showcase .vitrine-category[aria-current="true"] small{color:#694523}
.showcase .vitrine-category[aria-current="true"]>svg{color:#fff1cc;background:#68421e;border-color:#563516;box-shadow:inset 0 1px #b48751}
@media(hover:hover) and (pointer:fine){
 .showcase .vitrine-category:not([aria-current="true"]):hover{background:#704823;border-color:#edc16e;box-shadow:0 0 0 1px #edc16e,0 5px 14px #75441d29}
 .showcase .vitrine-category:not([aria-current="true"]):hover::before{background:linear-gradient(90deg,transparent 14%,#81522c4d 32%,#704823ed 53%,#624020 100%)}
 .showcase .vitrine-category:not([aria-current="true"]):hover strong{color:#ffe6a6}
 .showcase .vitrine-category:not([aria-current="true"]):hover small{color:#ffedcb}
 .showcase .vitrine-category:not([aria-current="true"]):hover>svg{background:#ffe2a0;border-color:#fff0c2;color:#513217;box-shadow:0 0 0 3px #edc16e30;transform:translate(2px,-50%)}
}