/* Scroll ile yemeğin oluşması — sticky sahne, transparan malzeme katmanları. */

.assembly-intro{padding-block:clamp(40px,7vw,80px) clamp(26px,4vw,44px)}
.assembly-intro h2{font-size:clamp(34px,4.2vw,58px);letter-spacing:-.3px;margin:15px 0 20px}
.assembly-intro p{max-width:640px;font-size:14px;line-height:1.9;color:#665b50}

.assembly{--header:110px;--bg:var(--paper,#f1ebdf);--ink:#312821;--navy:#0d2440;--sky:#1888c8;--wine:#780e24;background:var(--bg);scroll-margin-top:var(--header)}
.assembly-sulu-yemek{--bg:#f3eee4}
.assembly-pide{--bg:#f1ebdf}
.assembly-lahmacun{--bg:#f4ede3}

/* Dış container: kaydırma mesafesi. İç sahne ekranda sabit kalır. */
.assembly-track{height:300vh}
.assembly-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4vw,70px);align-items:center;width:min(1180px,100% - 40px);margin-inline:auto;padding-top:var(--header);padding-bottom:clamp(20px,4vh,46px);box-sizing:border-box}

.assembly-copy{min-width:0}
.assembly-copy .eyebrow{color:var(--sky);display:inline-flex;align-items:center;gap:12px}
.assembly-copy .eyebrow::before{content:"";width:26px;height:1px;background:var(--sky)}
.assembly-copy h2{font-size:clamp(32px,3.6vw,54px);letter-spacing:-.3px;margin:16px 0 18px;max-width:430px}
.assembly-lead{font-family:var(--serif);font-size:clamp(16px,1.5vw,20px);line-height:1.45;color:#605647;max-width:400px}

.assembly-phases{position:relative;margin:26px 0 22px;min-height:150px}
.assembly-phase{max-width:400px}
.assembly-phase[hidden]{display:none}
.assembly-phase>span{font-size:9px;letter-spacing:2.5px;color:var(--wine)}
.assembly-phase strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,29px);line-height:1.25;margin:7px 0 10px;color:var(--ink)}
.assembly-phase p{font-size:13px;line-height:1.8;color:#665b50;margin:0}
.assembly-hint{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:14px}

.assembly-canvas{position:relative;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center}
/* Sahne sayfanın krem zeminiyle bütündür: kart, gradient, parıltı yok. */
.assembly-scene{position:relative;width:100%;aspect-ratio:1;max-height:100%;margin-inline:auto;perspective:1200px;perspective-origin:50% 42%}
/* Tam kaplayan katmanlar. Tekil malzemeler merkezden konumlandığı için buraya dahil değil. */
.assembly-glow,.assembly-steam,.assembly-items,.assembly-frames{position:absolute;inset:0}

.assembly-items{transform-style:preserve-3d}
.assembly-vessel,.assembly-item,.assembly-final,.assembly-garnish{position:absolute;left:50%;top:50%;width:var(--size);will-change:transform,opacity;transform:translate(-50%,-50%)}
.assembly-media,.assembly-vessel picture,.assembly-item picture,.assembly-final picture,.assembly-garnish picture{display:block;width:100%;height:auto}
/* Yalnızca doğal temas gölgesi; ışık efekti yok. */
.assembly-item{filter:drop-shadow(0 10px 12px rgba(49,40,33,.16))}
.assembly-vessel{filter:drop-shadow(0 22px 26px rgba(49,40,33,.2))}
.assembly-final{opacity:0;filter:drop-shadow(0 26px 32px rgba(49,40,33,.22))}
.assembly-garnish{opacity:0}

/* Yedek mod: mevcut gerçek hazırlık fotoğrafları arasında scroll ile çözülme. */
.assembly-frames{overflow:hidden;border-radius:10px;background:#2f231a}
.assembly-frame{position:absolute;inset:0;opacity:0}
.assembly-frame:first-child{opacity:1}
.assembly-frame .assembly-media,.assembly-frame picture{width:100%;height:100%}
.assembly-frame img{width:100%;height:100%;object-fit:cover}

/* Isı / fırın parıltısı ve buhar. */
.assembly-glow{pointer-events:none;opacity:0;background:radial-gradient(ellipse 55% 40% at 50% 62%,rgba(214,120,52,.28),transparent 70%)}
.assembly-sulu-yemek .assembly-glow{display:none}
.assembly-steam{pointer-events:none;opacity:0}
.assembly-steam i{position:absolute;left:50%;bottom:40%;width:16%;height:34%;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.9),rgba(232,224,212,.35) 45%,transparent 70%);filter:blur(14px);transform:translate(-50%,calc(var(--rise,0) * -1%)) scale(var(--puff,1))}
.assembly-steam i:nth-child(2){left:40%;width:13%;height:28%}
.assembly-steam i:nth-child(3){left:61%;width:12%;height:26%}

.assembly-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.assembly-progress{position:relative;flex:0 0 auto;height:3px;margin-top:20px;background:rgba(13,36,64,.12);border-radius:2px;overflow:hidden}
.assembly-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--wine));transform:scaleX(0);transform-origin:left}

/* JS yokken: sahne akışı bozulmasın, final görsel görünsün. */
.assembly:not(.is-live) .assembly-track{height:auto}
.assembly:not(.is-live) .assembly-stage{position:static;height:auto;min-height:0;padding-block:clamp(40px,7vh,80px)}
.assembly:not(.is-live) .assembly-scene{max-height:none}
.assembly:not(.is-live) .assembly-final{opacity:1}
.assembly:not(.is-live) .assembly-item,.assembly:not(.is-live) .assembly-vessel{opacity:0}
.assembly:not(.is-live) .assembly-frame:last-child{opacity:1}
.assembly:not(.is-live) .assembly-phase[hidden]{display:block;margin-top:18px}

@media(max-width:1000px){
 .assembly-stage{grid-template-columns:.9fr 1.1fr;gap:26px}
 .assembly-phases{min-height:165px}
}

@media(max-width:760px){
 .assembly{--header:92px}
 .assembly-track{height:280vh}
 .assembly-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:14px;align-content:start;padding-bottom:18px}
 .assembly-copy h2{font-size:clamp(26px,7vw,34px);margin:8px 0 8px;max-width:none}
 .assembly-lead{display:none}
 .assembly-phases{margin:14px 0 10px;min-height:118px}
 .assembly-phase strong{font-size:21px;margin:5px 0 7px}
 .assembly-phase p{font-size:12px;line-height:1.65}
 .assembly-copy>.text-link,.assembly-hint{display:none}
 .assembly-canvas{min-height:0}
 .assembly-scene{aspect-ratio:auto;height:100%;width:100%;perspective:800px;border-radius:20px}
 .assembly-item{filter:none}
 .assembly-steam i{filter:blur(9px)}
 .assembly-progress{margin-top:10px}
}

@media(max-width:760px) and (max-height:700px){
 .assembly-phases{min-height:96px}
 .assembly-phase p{display:none}
}

/* Sade alternatif: hareket yerine yumuşak bir crossfade ve tam metin. */
@media(prefers-reduced-motion:reduce){
 .assembly-track{height:auto!important}
 .assembly-stage{position:static!important;height:auto!important;padding-block:clamp(40px,7vh,80px)}
 .assembly-scene{max-height:none}
 .assembly-items,.assembly-steam,.assembly-glow,.assembly-progress{display:none}
 .assembly-vessel{opacity:0}
 .assembly-final,.assembly-garnish{opacity:1;transform:translate(-50%,-50%)!important;transition:opacity .45s ease}
 .assembly-frame{opacity:0;transition:opacity .45s ease}
 .assembly-frame:last-child{opacity:1}
 .assembly-phases{min-height:0}
 .assembly-phase[hidden]{display:block;margin-top:18px}
}