/* ============================================================
   ERGUVAN — Sinema Konfigüratör AKIŞI (Valf→Kapak→Tasarım→Teklif)
   Koyu-lüks overlay. window.ergFlow ile açılır.
   ============================================================ */
.ef-root{
  position:fixed; inset:0; z-index:300;
  background:
    radial-gradient(120% 90% at 50% -10%, #2a1d33 0%, #160e1d 50%, #0c0810 100%);
  color:#f0e9da; font-family:'Jost',system-ui,sans-serif;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s;
  overflow-y:auto; overflow-x:hidden;
}
body.ef-open{ overflow:hidden; }
body.ef-open .ef-root{ opacity:1; visibility:visible; }

/* ---- üst bar ---- */
.ef-top{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:18px;
  padding:20px 32px; background:linear-gradient(180deg, rgba(12,8,16,.96), rgba(12,8,16,.55) 60%, rgba(12,8,16,0));
}
.ef-exit{
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.08em;
  color:rgba(240,233,218,.7); background:transparent; border:1px solid rgba(240,233,218,.18);
  padding:9px 15px; border-radius:30px; cursor:pointer; transition:.25s; white-space:nowrap;
}
.ef-exit:hover{ color:#fff; border-color:rgba(232,207,148,.5); }
.ef-wm{ font-family:'Cormorant Garamond',serif; font-size:19px; letter-spacing:.28em; color:#e8cf94; }

/* ---- adım göstergesi ---- */
.ef-steps{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; }
.ef-step{ display:flex; align-items:center; gap:8px; opacity:.4; transition:opacity .35s; }
.ef-step i{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(240,233,218,.4); display:inline-flex; flex:none; position:relative; }
.ef-step b{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.ef-step::after{ content:""; width:26px; height:1px; background:rgba(240,233,218,.2); margin-left:8px; }
.ef-step:last-child::after{ display:none; }
.ef-step.on{ opacity:1; }
.ef-step.on i{ border-color:#e8cf94; background:radial-gradient(circle,#e8cf94,#b1893a); box-shadow:0 0 14px rgba(232,207,148,.5); }
.ef-step.done{ opacity:.85; }
.ef-step.done i{ border-color:#c8a868; background:rgba(200,168,104,.18); }
.ef-step.done i::after{ content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='%23e8cf94' stroke-width='2.6'/></svg>") center/13px no-repeat; }
@media (max-width:760px){ .ef-step b{ display:none; } .ef-step::after{ width:14px; } }

/* ---- ekran ---- */
.ef-screens{ max-width:1200px; margin:0 auto; padding:8px 28px 60px; }
.ef-screen{ opacity:0; transform:translateY(16px); transition:opacity .55s cubic-bezier(.22,.61,.27,1), transform .55s cubic-bezier(.22,.61,.27,1); }
.ef-screen.in{ opacity:1; transform:none; }

.ef-head{ text-align:left; margin:14px 0 26px; }
.ef-head.center{ text-align:center; }
.ef-kicker{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#c8a868; margin-bottom:10px; }
.ef-head h2{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(30px,4.4vw,46px); line-height:1; letter-spacing:.4px; }
.ef-head h2 em{ font-style:italic; color:#e8cf94; }
.ef-head p{ color:rgba(240,233,218,.55); font-size:14px; margin-top:10px; }

/* ============================================================
   KALICI KOMPOZİSYON ÖNİZLEMESİ (sol kolon) + canlı seçim listesi
   ============================================================ */
.ef-layout{ display:grid; grid-template-columns:minmax(290px,360px) 1fr; gap:38px; align-items:start; }
@media (max-width:900px){ .ef-layout{ grid-template-columns:1fr; } }

.ef-preview{
  position:sticky; top:88px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(240,233,218,.12); border-radius:20px; padding:18px 18px 16px;
}
@media (max-width:900px){ .ef-preview{ position:static; } }
.ef-preview-cap{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:#c8a868; text-align:center; margin-bottom:4px; }

/* kompozisyon sahnesi: şişe + kapak (üstte) + logo/yazı */
.ef-comp{ position:relative; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.ef-comp.big{ height:400px; }
.ef-comp-glow{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:80%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(232,207,148,.2), transparent 62%); filter:blur(5px); }
/* kapak/valf şişenin TEPESİNE biner (flex-stack + negatif marj ile yapışık) */
.ef-comp-top{ order:-1; position:relative; z-index:2; object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); animation:efCapDrop .5s cubic-bezier(.22,1.15,.4,1); }
.ef-comp-cap{ max-height:21%; max-width:30%; margin-bottom:-5%; }
.ef-comp.big .ef-comp-cap{ max-height:20%; margin-bottom:-4.5%; }
/* valf daha küçük ve boyna daha gömük oturur (kapak yokken görünür) */
.ef-comp-valf{ max-height:17%; max-width:21%; margin-bottom:-8%; }
.ef-comp.big .ef-comp-valf{ max-height:16%; margin-bottom:-7%; }
.ef-comp-bottle{ position:relative; max-height:80%; max-width:66%; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)); }
.ef-comp.big .ef-comp-bottle{ max-height:86%; max-width:72%; }
/* renk tint sarmalayıcı (kompozisyon önizlemesi) */
.ef-comp-bwrap{ position:relative; display:flex; max-height:80%; max-width:66%; }
.ef-comp.big .ef-comp-bwrap{ max-height:86%; max-width:72%; }
.ef-comp-bwrap .ef-comp-bottle{ max-height:100%; max-width:100%; }
.ef-comp-tint{ position:absolute; inset:0; pointer-events:none;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.ef-comp-tint.ef-fin-mat{ opacity:.8; }
.ef-comp-tint.ef-fin-parlak{ opacity:.52; }
@keyframes efCapDrop{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
.ef-comp-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:23%; max-height:12%; object-fit:contain; opacity:.92; z-index:3; mix-blend-mode:multiply; }
.ef-comp-text{ position:absolute; left:50%; bottom:26%; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-size:15px; letter-spacing:.12em; color:#3a2f22; z-index:3; }

/* canlı seçim listesi */
.ef-picks{ margin-top:12px; display:flex; flex-direction:column; gap:5px; }
.ef-pick{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px; border:1px solid transparent; opacity:.55; transition:opacity .3s, background .3s, border-color .3s; }
.ef-pick.on{ opacity:1; background:rgba(255,255,255,.035); }
.ef-pick.now{ opacity:1; border-color:rgba(232,207,148,.4); background:rgba(232,207,148,.07); }
.ef-pick-th{ width:34px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; }
.ef-pick-th img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.ef-pick-dot{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.35); }
.ef-pick-meta{ flex:1; min-width:0; }
.ef-pick-meta span{ display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,233,218,.5); }
.ef-pick-meta b{ font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:500; color:#f0e9da; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ef-pick:not(.on) .ef-pick-meta b{ font-family:'Jost',sans-serif; font-size:11.5px; color:rgba(240,233,218,.38); }
.ef-pick-ck{ width:18px; height:18px; flex:none; border-radius:50%; background:radial-gradient(circle,#e8cf94,#b1893a); position:relative; }
.ef-pick-ck::after{ content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='%23140e1d' stroke-width='3'/></svg>") center/10px no-repeat; }

.ef-content .ef-head{ margin-top:2px; }

/* tıkla-git navigasyonu (üst sekmeler + seçim listesi) */
.ef-step{ cursor:pointer; }
.ef-step:hover b{ color:#fff; }
.ef-pick-nav{ cursor:pointer; }
.ef-pick-nav:hover{ background:rgba(232,207,148,.07); border-color:rgba(232,207,148,.32); opacity:1; }
.ef-pick-nav:focus-visible{ outline:1px solid var(--gold-soft,#c8a868); outline-offset:2px; }
.ef-pick-go{ width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center;
  color:rgba(240,233,218,.32); font-size:18px; line-height:1; transition:transform .2s ease, color .2s ease; }
.ef-pick-nav:hover .ef-pick-go{ color:#c8a868; transform:translateX(3px); }

/* kategori filtre çubuğu (kapak) */
.ef-catbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ef-catchip{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.04em; color:rgba(240,233,218,.7);
  background:rgba(255,255,255,.04); border:1px solid rgba(240,233,218,.14); border-radius:30px; padding:8px 15px; cursor:pointer; transition:.2s; }
.ef-catchip:hover{ border-color:rgba(232,207,148,.5); color:#fff; }
.ef-catchip.on{ background:linear-gradient(180deg,#c8a868,#b1893a); border-color:transparent; color:#1c1410; }
.ef-catchip i{ font-style:normal; font-size:10.5px; opacity:.65; margin-left:3px; }
.ef-catchip.on i{ opacity:.8; }
/* uzun kapak ızgarası kaydırılabilir, panel sticky kalır */
.ef-grid-kapak{ max-height:min(58vh,560px); overflow-y:auto; padding-right:6px; }
.ef-grid-kapak::-webkit-scrollbar{ width:7px; }
.ef-grid-kapak::-webkit-scrollbar-thumb{ background:rgba(232,207,148,.25); border-radius:7px; }
.ef-grid-kapak::-webkit-scrollbar-track{ background:transparent; }

/* ---- ızgara + kartlar ---- */
.ef-grid{ display:grid; gap:14px; }
.ef-grid-valf{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
.ef-grid-kapak{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); }
.ef-card{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(240,233,218,.12); border-radius:14px; padding:14px 12px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s;
}
.ef-card:hover{ transform:translateY(-4px); border-color:rgba(232,207,148,.5); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.ef-card.sel{ border-color:#e8cf94; box-shadow:0 0 0 1px #e8cf94, 0 14px 30px -16px rgba(232,207,148,.5); background:rgba(232,207,148,.06); }
.ef-card.sel::after{ content:""; position:absolute; top:9px; right:9px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle,#e8cf94,#b1893a) center/cover;
  box-shadow:0 0 0 2px rgba(12,8,16,.6); }
.ef-card.sel::before{ content:""; position:absolute; top:14px; right:13px; width:10px; height:10px; z-index:2;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='%23140e1d' stroke-width='3'/></svg>") center/9px no-repeat; }
.ef-shot{ height:96px; display:flex; align-items:flex-end; justify-content:center; }
.ef-shot img{ max-height:96px; max-width:80%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.ef-meta{ text-align:center; }
.ef-meta b{ font-family:'Jost',sans-serif; font-weight:500; font-size:12.5px; display:block; color:#f0e9da; }
.ef-meta span{ font-size:10.5px; letter-spacing:.06em; color:rgba(240,233,218,.5); }
.ef-dot{ position:absolute; top:11px; left:11px; width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.4); }

/* ---- tasarım ekranı ---- */
.ef-design{ display:grid; grid-template-columns:1.3fr .9fr; gap:24px; align-items:start; }
@media (max-width:780px){ .ef-design{ grid-template-columns:1fr; } }
.ef-tech-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .ef-tech-wrap{ grid-template-columns:1fr; } }
.ef-tech{ text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(240,233,218,.12); border-radius:13px; padding:15px 16px; cursor:pointer; transition:.25s; }
.ef-tech:hover{ border-color:rgba(232,207,148,.5); background:rgba(255,255,255,.06); }
.ef-tech.sel{ border-color:#e8cf94; box-shadow:0 0 0 1px #e8cf94; background:rgba(232,207,148,.07); }
.ef-tech b{ font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:500; display:block; color:#f0e9da; }
.ef-tech span{ font-size:11.5px; color:rgba(240,233,218,.5); }
/* ---- renk paleti (kaplama rengi) ---- */
.ef-color-wrap{ margin-top:18px; }
.ef-color-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.ef-color-head b{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,233,218,.78); font-weight:600; }
.ef-finis{ display:flex; gap:3px; background:rgba(255,255,255,.05); border:1px solid rgba(240,233,218,.12); border-radius:30px; padding:3px; }
.ef-fbtn{ font-family:'Jost',sans-serif; font-size:11px; color:rgba(240,233,218,.6); background:transparent; border:none; border-radius:30px; padding:5px 15px; cursor:pointer; transition:.2s; }
.ef-fbtn:hover{ color:#f0e9da; }
.ef-fbtn.on{ background:#c8a868; color:#1a140a; }
.ef-swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px 10px; }
@media (max-width:520px){ .ef-swatches{ grid-template-columns:repeat(4,1fr); } }
.ef-sw{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0; }
.ef-sw>span,.ef-sw .ef-sw-cspan{ width:100%; aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.16); box-shadow:0 4px 12px -5px rgba(0,0,0,.6); transition:transform .2s, border-color .2s, box-shadow .2s; display:block; }
.ef-sw i{ font-family:'Jost',sans-serif; font-size:9.5px; font-style:normal; color:rgba(240,233,218,.5); white-space:nowrap; }
.ef-sw:hover>span,.ef-sw:hover .ef-sw-cspan{ transform:scale(1.07); }
.ef-sw.on>span,.ef-sw.on .ef-sw-cspan{ border-color:#c8a868; box-shadow:0 0 0 2px rgba(200,168,104,.35), 0 4px 12px -5px rgba(0,0,0,.6); }
.ef-sw.on i{ color:#c8a868; }
.ef-sw-none>span{ background:repeating-linear-gradient(45deg, rgba(240,233,218,.10) 0 5px, transparent 5px 10px), #1a1620; }
.ef-sw-custom{ position:relative; }
.ef-sw-cspan{ position:relative; overflow:hidden; background:conic-gradient(from 0deg,#e5564e,#e7c24a,#5bd06a,#4ccfe0,#5a78e6,#c45ae6,#e5564e); }
.ef-sw-cspan input[type=color]{ position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); opacity:0; cursor:pointer; border:none; padding:0; background:none; }
.ef-upload{ display:flex; flex-direction:column; gap:12px; }
.ef-upbox{ border:1.5px dashed rgba(240,233,218,.25); border-radius:14px; padding:26px 18px; text-align:center; cursor:pointer; transition:.25s; }
.ef-upbox:hover{ border-color:#c8a868; background:rgba(232,207,148,.04); }
.ef-upbox svg{ width:26px; height:26px; stroke:#c8a868; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ef-upbox b{ display:block; font-size:13px; margin-top:8px; color:#f0e9da; }
.ef-upbox span{ font-size:11px; color:rgba(240,233,218,.45); }
.ef-logo-prev{ max-height:60px; max-width:120px; object-fit:contain; }
.ef-input{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(240,233,218,.16); border-radius:30px; padding:13px 18px;
  color:#f0e9da; font-family:'Jost',sans-serif; font-size:13px; }
.ef-input:focus{ outline:none; border-color:#e8cf94; }
.ef-input::placeholder{ color:rgba(240,233,218,.4); }
/* teklif iletişim formu (özet kartı) */
.ef-teklif-form{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.ef-teklif-form .ef-input{ margin:0; }
.ef-teklif-msg{ font-family:'Jost',sans-serif; font-size:12px; line-height:1.4; color:rgba(240,233,218,.55); }
.ef-teklif-msg.err{ color:#e6a4a4; }

/* ---- özet ---- */
.ef-summary{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
@media (max-width:780px){ .ef-summary{ grid-template-columns:1fr; } }
.ef-stage{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; }
.ef-stage-glow{ position:absolute; width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle,rgba(232,207,148,.22),transparent 65%); filter:blur(6px); }
.ef-stage-bottle{ position:relative; max-height:400px; max-width:78%; object-fit:contain; filter:drop-shadow(0 30px 36px rgba(0,0,0,.6)); }
.ef-stage-logo{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); max-width:84px; max-height:64px; object-fit:contain; opacity:.92; }
.ef-stage-text{ position:absolute; bottom:30%; left:50%; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-size:18px; letter-spacing:.1em; color:#1c1622; background:rgba(255,255,255,.0); }
.ef-spec{ background:rgba(255,255,255,.04); border:1px solid rgba(240,233,218,.12); border-radius:18px; padding:26px 26px 24px; }
.ef-spec-name{ font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500; margin-bottom:14px; color:#fff; }
.ef-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid rgba(240,233,218,.1); }
.ef-row span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(240,233,218,.5); }
.ef-row b{ font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:500; color:#f0e9da; text-align:right; }
.ef-row b i{ font-style:normal; font-size:12px; color:#c8a868; font-family:'Jost',sans-serif; }
.ef-cta{ width:100%; margin-top:20px; background:linear-gradient(180deg,#c8a868,#b1893a); color:#1c1410; border:none; border-radius:8px;
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding:15px; cursor:pointer; transition:filter .2s, transform .1s; }
.ef-cta:hover{ filter:brightness(1.07); } .ef-cta:active{ transform:scale(.99); }
.ef-spec-foot{ display:flex; gap:10px; margin-top:14px; }

/* ============================================================
   ÖZET — EXPLODED close-up STUDIO sahnesi  ·  MÜZE SPOT (grafted)
   --explode: 0 (birleşik) .. 1 (parçalara ayrılmış)
   Tek tepe spotu · galeri karanlığı · warm/cool grade ·
   additive ışık (screen) · toz parıltısı · sade altın mücevher tipo
   ============================================================ */
.ef-ozet-scroll{ position:relative; }
.ef-ozet-sticky{ position:sticky; top:88px; display:grid; grid-template-columns:1.22fr .78fr; gap:30px; align-items:center; min-height:calc(100vh - 170px); }
@media (max-width:820px){ .ef-ozet-sticky{ grid-template-columns:1fr; gap:14px; } }
.ef-ozet-spacer{ height:135vh; }
@media (max-width:820px){ .ef-ozet-spacer{ height:90vh; } }

/* studio sahne — galeri karanlığı: serin mor-siyah çevre, merkezde sıcak müze spotu çekirdeği + ince üst serin parlaklık (warm/cool grade) */
.ef-x-stage{ --explode:0; position:relative; height:min(72vh,560px); isolation:isolate;
  background:
    radial-gradient(36% 30% at 50% 1%, rgba(255,251,240,.20), rgba(255,247,232,.07) 38%, rgba(255,247,232,0) 64%),
    radial-gradient(120% 70% at 50% -4%, rgba(224,232,244,.085), rgba(214,226,238,0) 50%),
    radial-gradient(70% 56% at 50% 32%, rgba(96,62,104,.46), rgba(40,22,52,.16) 52%, rgba(18,10,24,0) 72%),
    radial-gradient(150% 130% at 50% 122%, rgba(5,3,8,.74), rgba(5,3,8,0) 52%),
    radial-gradient(160% 120% at 0% 50%, rgba(4,2,7,.5), rgba(4,2,7,0) 42%),
    radial-gradient(160% 120% at 100% 50%, rgba(4,2,7,.5), rgba(4,2,7,0) 42%),
    linear-gradient(178deg, #0a0610 0%, #140d1d 44%, #100a18 64%, #070410 100%); }
/* tek dramatik tepe spotu — dar sıcak ışık konisi + içine gömülü çok hafif toz/parıltı motesleri; screen ile additive */
.ef-x-stage::before{ content:""; position:absolute; left:50%; top:-11%; transform:translateX(-50%); z-index:0; pointer-events:none;
  width:52%; height:96%; opacity:.96;
  background:
    radial-gradient(30% 46% at 50% 1%, rgba(255,253,247,.46), rgba(255,250,238,.16) 26%, transparent 56%),
    radial-gradient(46% 72% at 50% -2%, rgba(255,248,230,.22), rgba(236,212,156,.08) 40%, transparent 72%),
    radial-gradient(2px 2px at 38% 22%, rgba(255,250,236,.65), transparent 58%),
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(255,250,236,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 58%, rgba(255,250,236,.42), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 72%, rgba(255,250,236,.3), transparent 62%),
    conic-gradient(from 90deg at 50% -8%, transparent 71deg, rgba(255,251,240,.03) 80deg, rgba(255,251,240,.085) 90deg, rgba(255,251,240,.03) 100deg, transparent 109deg);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, transparent 93%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, transparent 93%);
  filter:blur(7px); }
/* galeri vinyeti — temiz negatif alan, kenarlara doğru derin karanlık */
.ef-x-stage::after{ content:""; position:absolute; inset:-2px; z-index:2; pointer-events:none;
  background:
    radial-gradient(98% 84% at 50% 38%, transparent 38%, rgba(8,5,12,.5) 72%, rgba(4,2,7,.82) 90%, rgba(2,1,4,.94) 100%),
    radial-gradient(150% 62% at 50% 114%, rgba(3,2,6,.66), transparent 44%),
    radial-gradient(150% 58% at 50% -8%, rgba(3,2,6,.4), transparent 40%); }

/* mücevher ışık havuzu — kaide üzerine inen sıcak spot, explode ile hafif açılır; screen ile additive parlama */
.ef-x-glow{ position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:70%; height:78%; border-radius:50%; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,242,214,.18), rgba(255,238,206,.07) 20%, rgba(255,238,206,.02) 34%, transparent 48%),
    radial-gradient(circle at 50% 52%, rgba(236,212,156,.22), rgba(232,207,148,.1) 32%, rgba(180,128,150,.05) 52%, transparent 70%),
    radial-gradient(circle at 50% 54%, rgba(124,70,118,.12), rgba(124,70,118,.03) 46%, transparent 66%);
  filter:blur(9px); }
/* zemin temas parıltısı — statik raster + GPU katmanı (will-change) ile kasmasız taşınır */
.ef-x-floor{ position:absolute; left:50%; bottom:14%; width:42%; height:30px; border-radius:50%; z-index:1; pointer-events:none;
  transform:translate(-50%, calc(var(--explode) * 59px)); will-change:transform;
  background:
    radial-gradient(ellipse 56% 100% at 50% 50%, rgba(255,240,206,.38), rgba(255,236,198,.12) 36%, transparent 64%),
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(236,212,156,.2), rgba(232,207,148,.06) 44%, transparent 76%),
    radial-gradient(ellipse 96% 100% at 50% 50%, rgba(140,86,128,.1), rgba(140,86,128,.02) 50%, transparent 84%); }

/* parçalar — statik gölge (her frame yeniden hesaplanmaz) + will-change ile GPU; transition YOK (scroll'a birebir takip) */
.ef-x-layer{ position:absolute; left:50%; object-fit:contain; z-index:3;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
/* şişe = sarmalayıcı (konum/hareket) + img (gölge) + opsiyonel renk tint (maske) */
.ef-x-bwrap{ position:absolute; left:50%; bottom:16%; height:48%; z-index:3; display:flex;
  transform:translate(-50%, calc(var(--explode) * 59px)); will-change:transform; }
.ef-x-bimg{ display:block; height:100%; width:auto; object-fit:contain;
  filter:
    drop-shadow(0 -1px 0 rgba(255,247,232,.22))
    drop-shadow(0 30px 36px rgba(2,1,5,.66))
    drop-shadow(0 8px 14px rgba(48,24,44,.5)); }
/* renk tint: maske = şişe görseli, normal blend (scroll'da kasmasız), finiş ile opaklık */
.ef-x-btint{ position:absolute; inset:0; pointer-events:none;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.ef-x-btint.ef-fin-mat{ opacity:.78; }
.ef-x-btint.ef-fin-parlak{ opacity:.5; }
/* valf: birleşikte gizli (kapak örter), patlatınca belirip ayrılır */
.ef-x-valf{ bottom:54%; max-height:16%; transform:translate(-50%, calc(var(--explode) * -50px)); z-index:4;
  opacity:calc((var(--explode) - 0.08) * 4.5); will-change:transform, opacity;
  filter:
    drop-shadow(0 -1px 0 rgba(255,248,236,.26))
    drop-shadow(0 15px 22px rgba(2,1,5,.56))
    drop-shadow(0 5px 9px rgba(48,24,44,.44)); }
.ef-x-cap{ bottom:62%; max-height:20%; transform:translate(-50%, calc(var(--explode) * -147px)); z-index:5; will-change:transform;
  filter:
    drop-shadow(0 -1px 0 rgba(255,249,238,.3))
    drop-shadow(0 26px 34px rgba(2,1,5,.62))
    drop-shadow(0 7px 12px rgba(48,24,44,.5)); }
.ef-x-logo{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); max-width:18%; max-height:10%; object-fit:contain; opacity:calc(.9 - var(--explode)); z-index:5; }
/* şişe zemin yansıması — statik raster + GPU katmanı */
.ef-x-reflection{ position:absolute; left:50%; bottom:16%; max-height:48%; object-fit:contain; z-index:2; pointer-events:none; will-change:transform;
  transform:translate(-50%, calc(100% + var(--explode) * 59px)) scaleY(-1);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.30), transparent 38%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.30), transparent 38%);
  opacity:.32; }

/* parça etiketleri — zarif belirme, soldan büyüyen parıltılı tapered altın hat, müze-katalog tipografisi */
.ef-x-label{ position:absolute; left:calc(50% + 104px); display:flex; align-items:center; gap:13px; white-space:nowrap; z-index:6;
  opacity:calc(var(--explode) * 2.1 - .45);
  transform:translateX(calc((1 - var(--explode)) * -16px));
  pointer-events:none; }
.ef-x-label::before{ content:""; width:48px; height:1px; flex:none;
  background:linear-gradient(90deg, transparent, rgba(196,160,96,.98) 20%, rgba(238,214,158,.92) 50%, rgba(232,207,148,.4) 78%, transparent);
  box-shadow:0 0 8px rgba(236,212,156,.32); }
.ef-x-label span{ font-family:'Jost',sans-serif; font-size:9px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:rgba(200,168,104,.7); display:block; margin-bottom:2px; }
.ef-x-label b{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:20px; letter-spacing:.01em; color:#f3ecde; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.ef-x-lcap{ top:5%; } .ef-x-lvalf{ top:30%; } .ef-x-lbottle{ top:69%; }
@media (max-width:560px){ .ef-x-label{ left:calc(50% + 60px); } .ef-x-label b{ font-size:15px; } .ef-x-label::before{ width:30px; } }

.ef-x-hint{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); font-family:'Jost',sans-serif; font-size:11px; z-index:6;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(200,168,104,.6); opacity:calc(1 - var(--explode) * 2.5);
  text-shadow:0 1px 8px rgba(0,0,0,.5); animation:efHintBob 2.4s ease-in-out infinite; }
@keyframes efHintBob{ 0%,100%{ transform:translate(-50%,0); opacity:.6; } 50%{ transform:translate(-50%,5px); opacity:.9; } }

/* ---- teklif tamamlandı ---- */
.ef-done{ text-align:center; padding:14px 6px; }
.ef-done-ck{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle,#e8cf94,#b1893a); display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px rgba(232,207,148,.4); }
.ef-done-ck svg{ width:30px; height:30px; stroke:#1c1410; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ef-done h3{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:28px; color:#fff; }
.ef-done p{ color:rgba(240,233,218,.7); font-size:13px; margin-top:8px; }
.ef-done-note{ color:rgba(240,233,218,.45) !important; font-size:12px !important; margin-top:6px; }
.ef-done .ef-btn{ margin-top:18px; }

/* ---- footer butonları ---- */
.ef-foot{ display:flex; justify-content:space-between; gap:12px; margin-top:30px; }
.ef-btn{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  background:linear-gradient(180deg,#c8a868,#b1893a); color:#1c1410; border:none; border-radius:7px; padding:13px 26px; text-decoration:none; display:inline-flex; align-items:center; transition:filter .2s, transform .1s, border-color .2s, color .2s; }
.ef-btn:hover{ filter:brightness(1.07); }
.ef-btn[disabled]{ opacity:.35; pointer-events:none; }
.ef-btn.ghost{ background:transparent; border:1px solid rgba(240,233,218,.22); color:rgba(240,233,218,.8); }
.ef-btn.ghost:hover{ border-color:rgba(232,207,148,.5); color:#fff; filter:none; }

@media (prefers-reduced-motion:reduce){ .ef-screen, .ef-root, .ef-card{ transition:none !important; } }


/* ===== KAPLAMA RENGİ — premium v2 (gerçekçi materyal + Mat/Parlak sheen) ===== */
.ef-color-wrap{ margin-top:24px; }
.ef-color-head b{ font-size:12px !important; letter-spacing:.22em !important; color:rgba(240,233,218,.92) !important; }
.ef-finis{ background:rgba(255,255,255,.045); border:1px solid rgba(240,233,218,.16); padding:4px; border-radius:40px; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); }
.ef-fbtn{ font-size:11px; letter-spacing:.09em; padding:6px 18px; font-weight:600; transition:.25s; color:rgba(240,233,218,.62); }
.ef-fbtn:hover{ color:#f0e9da; }
.ef-fbtn.on{ background:linear-gradient(180deg,#e8cf94,#c8a868) !important; color:#1a140a !important; box-shadow:0 4px 14px -4px rgba(200,168,104,.55), inset 0 1px 0 rgba(255,255,255,.45); }
.ef-swatches{ gap:22px 16px !important; }
/* küre gövdesi: derinlik (iç ışık üst + iç gölge alt) + yumuşak zemin gölgesi */
.ef-sw>span,.ef-sw .ef-sw-cspan{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.85), inset 0 2px 3px rgba(255,255,255,.20), inset 0 -12px 20px -8px rgba(0,0,0,.55) !important;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .35s !important; }
/* materyal parlaması — VARSAYILAN (cam) */
.ef-sw>span::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; transition:opacity .35s, background .4s;
  background:
    radial-gradient(9% 7% at 33% 13%, rgba(255,255,255,1), transparent 72%),
    radial-gradient(32% 24% at 35% 17%, rgba(255,255,255,.72), rgba(255,255,255,.10) 46%, transparent 66%),
    radial-gradient(78% 36% at 50% 113%, rgba(255,255,255,.13), transparent 52%),
    radial-gradient(60% 30% at 72% 86%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(116% 116% at 50% 46%, transparent 54%, rgba(0,0,0,.34)); }
.ef-sw-none>span::after{ display:none; }
.ef-sw-cspan::after{ background:radial-gradient(23% 17% at 33% 18%, rgba(255,255,255,.9), transparent 60%), radial-gradient(120% 90% at 30% 22%, rgba(255,255,255,.28), transparent 46%); pointer-events:none; }
/* MAT: keskin specular yok — kadifemsi, sönük ışık + derinlik */
.ef-color-wrap:has(.ef-fbtn[data-fin="mat"].on) .ef-sw>span::after{
  background:
    radial-gradient(88% 64% at 34% 27%, rgba(255,255,255,.19), transparent 58%),
    radial-gradient(120% 120% at 50% 134%, rgba(255,255,255,.05), transparent 46%),
    radial-gradient(100% 100% at 50% 46%, transparent 58%, rgba(0,0,0,.36)); }
.ef-color-wrap:has(.ef-fbtn[data-fin="mat"].on) .ef-sw>span{ box-shadow:0 12px 26px -12px rgba(0,0,0,.8), inset 0 1px 2px rgba(255,255,255,.10), inset 0 -14px 22px -8px rgba(0,0,0,.6) !important; }
/* PARLAK: güçlü cam parlaması */
.ef-color-wrap:has(.ef-fbtn[data-fin="parlak"].on) .ef-sw>span{ box-shadow:0 16px 32px -12px rgba(0,0,0,.88), inset 0 2px 4px rgba(255,255,255,.30), inset 0 -12px 20px -8px rgba(0,0,0,.5) !important; }
.ef-sw:hover>span,.ef-sw:hover .ef-sw-cspan{ transform:translateY(-4px) scale(1.06) !important;
  box-shadow:0 24px 42px -16px rgba(0,0,0,.88), inset 0 2px 3px rgba(255,255,255,.26) !important; }
/* seçili — çift altın halka + yumuşak altın parlama + hafif büyüme */
.ef-sw.on>span,.ef-sw.on .ef-sw-cspan{ border-color:transparent !important; transform:scale(1.05);
  box-shadow:0 0 0 2px #0d0b14, 0 0 0 4px #e8cf94, 0 0 22px rgba(232,207,148,.5), 0 14px 28px -10px rgba(0,0,0,.82) !important; }
.ef-sw i{ font-size:10px !important; letter-spacing:.05em; color:rgba(240,233,218,.58) !important; font-weight:500; transition:color .25s; }
.ef-sw.on i{ color:#e8cf94 !important; }