/* Hero: Brief → Live (ortak dosya). Ayrı dosya, yalnızca ana sayfada. */
.bl { --ui: "Plus Jakarta Sans", system-ui, sans-serif; --label: "Inter", system-ui, sans-serif; --ease: cubic-bezier(.22,1,.36,1); --move: cubic-bezier(.45,0,.2,1);
  --bg: #080808; --fg: #fff; --fg-60: rgba(255,255,255,.6); --fg-40: rgba(255,255,255,.4); --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2);
  --grad-btn-light: linear-gradient(180deg, #ffffff 0%, #787878 140%); --grad-tint: linear-gradient(92deg, #a6afc9 0%, #b9a9d6 55%, #cdb1a6 100%); color: var(--fg); }
.bl-wrap { position: relative; width: 100%; aspect-ratio: 560 / 540; }
.bl-stage { position: absolute; left: 0; top: 0; width: 560px; height: 540px; transform-origin: 0 0; }
#vG { position: absolute; inset: 0; }
/* İmleçler (sitedeki ile aynı dil) */
.bl-cur { position: absolute; left: 0; top: 0; z-index: 20; display: flex; align-items: flex-start; pointer-events: none; will-change: transform; }
.bl-cur > span { display: flex; align-items: flex-start; animation: blBob 3.2s ease-in-out infinite; }
.bl-cur svg { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition: transform .15s ease; }
.bl-cur em { margin: 12px 0 0 -2px; padding: 3px 10px; border-radius: 999px; font: 600 12px/18px var(--ui); font-style: normal; white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.bl-cur--ad svg { fill: var(--ac-lilac); stroke: #1a1424; stroke-width: 1; } .bl-cur--ad em { background: var(--ac-lilac); color: #1a1424; }
.bl-cur--pd svg { fill: var(--ac-blue); stroke: #10162a; stroke-width: 1; } .bl-cur--pd em { background: var(--ac-blue); color: #10162a; }
.bl-cur.press svg { transform: scale(.78) translate(1px,1px); }
.bl-cur.drag em { box-shadow: 0 10px 22px rgba(0,0,0,.55); }
@keyframes blBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.bl-ripple { position: absolute; z-index: 19; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid currentColor; pointer-events: none; animation: blRip .6s var(--ease) forwards; }
@keyframes blRip { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
@keyframes blDash { to { stroke-dashoffset: -18; } }
.mini-tag { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; font: 600 9.5px/1 var(--label); white-space: nowrap; }
.mini-tag.ad { background: var(--ac-lilac); color: #1a1424; } .mini-tag.pd { background: var(--ac-blue); color: #10162a; }
.d-dots { display: flex; gap: 5px; } .d-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2c2c33; }
.d-file b { color: var(--fg); font-weight: 500; }
.d-av { margin-left: auto; display: flex; } .d-av span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--label); margin-left: -5px; box-shadow: 0 0 0 2px #141418; }
.d-av .a { background: var(--ac-lilac); color: #1a1424; } .d-av .b { background: var(--ac-blue); color: #10162a; }
.d-mode { display: flex; padding: 3px; border-radius: 7px; background: #0b0b0e; box-shadow: inset 0 0 0 1px var(--line); }
.d-mode span { padding: 5px 8px; border-radius: 5px; transition: background .3s, color .3s; } .d-mode span.on { background: #24242b; color: var(--fg); }
.d-h { font: 600 9px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-40); margin: 2px 4px 9px; }
.d-ly { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 5px; white-space: nowrap; transition: background .25s, color .25s; }
.d-ly i { width: 9px; height: 9px; border: 1.2px solid currentColor; border-radius: 2px; opacity: .7; flex: none; }
.d-ly.ind { padding-left: 16px; } .d-ly.ad { background: rgba(201,168,255,.16); color: var(--ac-lilac); } .d-ly.pd { background: rgba(142,162,255,.16); color: var(--ac-blue); }
.d-sec { padding: 8px; margin-bottom: 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s, background .3s; }
.d-sec.ad { box-shadow: inset 0 0 0 1px rgba(201,168,255,.5); background: rgba(201,168,255,.05); } .d-sec.pd { box-shadow: inset 0 0 0 1px rgba(142,162,255,.5); background: rgba(142,162,255,.05); }
.d-sec .d-h { margin: 0 0 8px; }
.d-f { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; } .d-f b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.d-sw { width: 14px; height: 14px; border-radius: 4px; background: var(--d-img-a); box-shadow: 0 0 0 1px var(--line-strong); transition: background .8s; }
.d-sl { height: 3px; border-radius: 3px; background: #26262c; margin: 6px 0 2px; position: relative; } .d-sl i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 40%); border-radius: 3px; background: currentColor; transition: width .8s var(--ease); }
.d-canvas { position: absolute; left: 116px; right: 132px; top: 36px; bottom: 0; overflow: hidden; background-color: #17171b; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 14px 14px; transition: left .7s var(--ease), right .7s var(--ease); }
.d-sel { position: absolute; z-index: 5; pointer-events: none; border: 1.5px solid; opacity: 0; transition: opacity .25s, left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.d-sel.on { opacity: 1; } .d-sel.ad { border-color: var(--ac-lilac); } .d-sel.pd { border-color: var(--ac-blue); }
.d-sel b { position: absolute; width: 6px; height: 6px; background: #fff; border: 1.5px solid; border-color: inherit; } .d-sel b:nth-child(1) { left: -4px; top: -4px; } .d-sel b:nth-child(2) { right: -4px; top: -4px; } .d-sel b:nth-child(3) { left: -4px; bottom: -4px; } .d-sel b:nth-child(4) { right: -4px; bottom: -4px; }
.d-sel .mini-tag { left: -1.5px; top: -18px; }
.d-sel.pd.al { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(142,162,255,.08) 6px 12px); }
@keyframes blLive { 70% { box-shadow: 0 0 0 8px rgba(159,217,207,0); } 100% { box-shadow: 0 0 0 0 rgba(159,217,207,0); } }

/* ================= G · Brief → Canlı (birleşik) ================= */


#vG { --p: 0; --ga: #c9a8ff; --gb: #8ea2ff; transition: --ga .9s ease, --gb .9s ease, opacity .6s; }
.g-win { position: absolute; left: 8px; top: 24px; width: 544px; height: 444px; border-radius: 14px; background: #0e0e11;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -40px rgba(0,0,0,.95), 0 0 90px -30px rgba(142,162,255,.22);
  transform-origin: 50% 0; transform: translateY(calc((1 - min(1, var(--p) * 4)) * 22px)) rotateX(calc((1 - min(1, var(--p) * 4)) * 14deg)) scale(calc(.94 + min(1, var(--p) * 4) * .06)); }
#vG { perspective: 1400px; }
.g-top { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #141418; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; font: 500 11px/1 var(--label); color: var(--fg-60); }
.g-file b { color: var(--fg); font-weight: 500; }
.g-phase { padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--fg); font-weight: 500; }
.g-url { display: none; align-items: center; gap: 6px; flex: 1; max-width: 260px; margin: 0 auto; padding: 6px 12px; border-radius: 8px; background: #0b0b0e; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); }
.g-url svg { width: 11px; height: 11px; fill: none; stroke: #9fd9cf; stroke-width: 2; }
#vG.live .g-url { display: flex; } #vG.live .g-file, #vG.live .g-phase, #vG.live .d-mode { display: none; }
.g-share { padding: 6px 10px; border-radius: 6px; background: var(--ac-blue); color: #10162a; font-weight: 600; transition: background .4s, color .4s; }
#vG.live .g-share { background: #0f2a22; color: #9fd9cf; box-shadow: inset 0 0 0 1px rgba(159,217,207,.4); }
.g-layers, .g-insp { position: absolute; top: 36px; bottom: 0; background: #121216; transition: transform .7s var(--ease), opacity .5s; font: 500 10.5px/1 var(--label); color: var(--fg-60); }
.g-layers { left: 0; width: 112px; border-right: 1px solid var(--line); padding: 10px 6px; border-bottom-left-radius: 14px; }
.g-insp { right: 0; width: 128px; border-left: 1px solid var(--line); padding: 10px; border-bottom-right-radius: 14px; }
#vG.live .g-layers { transform: translateX(-30px); opacity: 0; pointer-events: none; } #vG.live .g-insp { transform: translateX(30px); opacity: 0; pointer-events: none; }
.g-ly { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s, max-height .5s var(--ease); }
.g-ly.in { opacity: 1; max-height: 30px; }
.g-sec { display: none; } .g-sec.on { display: block; animation: blGIn .5s var(--ease); }
@keyframes blGIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.g-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .g-pills i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.g-canvas { position: absolute; left: 112px; right: 128px; top: 36px; bottom: 0; overflow: hidden; background-color: #17171b; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 14px 14px; transition: left .7s var(--ease), right .7s var(--ease), background-color .6s; }
#vG.live .g-canvas { left: 0; right: 0; border-radius: 0 0 14px 14px; background-image: none; background-color: #0b0b0e; }
.g-ab { position: absolute; left: 50%; top: 30px; width: 264px; height: 340px; margin-left: -132px; background: #0b0b0e; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -20px rgba(0,0,0,.8);
  transform-origin: 50% 0; transition: transform .8s var(--ease), box-shadow .5s; }
#vG.ge4:not(.live) .g-ab { transform: translateX(-52px) scale(.86); }
#vG.live .g-ab { transform: translateY(-14px) scale(1.18); box-shadow: none; }
.g-abl { position: absolute; left: 0; top: -16px; font: 500 9.5px/1 var(--label); color: var(--fg-40); white-space: nowrap; transition: opacity .3s; } #vG.live .g-abl { opacity: 0; }

/* Brief kartı */
.g-brief { position: absolute; z-index: 4; left: 50%; top: 40px; width: 230px; margin-left: -115px; padding: 16px; border-radius: 12px; background: #141419; box-shadow: 0 0 0 1px var(--line-strong), 0 24px 50px -16px rgba(0,0,0,.9);
  font: 400 10.5px/1.7 var(--label); color: var(--fg-60); transition: transform .8s var(--ease), opacity .5s, width .8s var(--ease); transform-origin: 0 0; }
.g-brief h6 { font: 600 12px/1.2 var(--ui); color: var(--fg); margin-bottom: 6px; display: flex; justify-content: space-between; }
.g-brief h6 small { font: 500 9px/1 var(--label); color: var(--fg-40); letter-spacing: .12em; }
.g-brief .ln { display: block; overflow: hidden; white-space: nowrap; max-width: 0; transition: max-width .9s var(--ease); }
.g-brief .ln.in { max-width: 240px; }
.g-brief mark { background: none; color: inherit; background-image: linear-gradient(rgba(201,168,255,.4), rgba(201,168,255,.4)); background-size: 0 100%; background-repeat: no-repeat; transition: background-size .8s var(--ease), color .3s; }
.g-brief mark.in { background-size: 100% 100%; color: #fff; }
#vG.ge1 .g-brief { transform: translate(-150px, -36px) scale(.42); opacity: .9; }
#vG.ge2 .g-brief { opacity: 0; transform: translate(-150px, -60px) scale(.3); }
.g-sticky { position: absolute; z-index: 5; left: 50%; top: 168px; margin-left: 10px; width: 116px; padding: 9px 10px; border-radius: 4px; background: #f3d9a4; color: #2a2210; font: 600 9.5px/1.35 var(--ui);
  box-shadow: 0 14px 26px -8px rgba(0,0,0,.7); transform: rotate(4deg) scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
.g-sticky small { display: block; font: 500 8px/1 var(--label); opacity: .65; margin-bottom: 4px; }
.g-sticky.in { opacity: 1; transform: rotate(4deg); }
#vG.ge1 .g-sticky { opacity: 0; transform: rotate(4deg) scale(.5) translateY(-40px); }

/* Konsept: moodboard + tip + palet */
.g-mood { position: absolute; z-index: 3; inset: 14px 14px auto 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; transition: opacity .5s, transform .7s var(--ease); }
.g-mood i { height: 70px; border-radius: 9px; opacity: 0; transform: scale(.85) translateY(8px); transition: opacity .45s, transform .6s var(--ease), box-shadow .3s; }
.g-mood i.in { opacity: 1; transform: none; } .g-mood i.pick { box-shadow: 0 0 0 2px var(--ac-lilac), 0 0 24px rgba(201,168,255,.45); }
.g-spec { position: absolute; z-index: 3; left: 14px; right: 14px; top: 176px; display: flex; gap: 10px; align-items: flex-end; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); }
.g-spec.in { opacity: 1; transform: none; }
.g-spec .aa { font: 800 46px/0.9 "Monument Extended", var(--ui); background: var(--grad-tint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-spec .meta { font: 500 9px/1.5 var(--label); color: var(--fg-40); } .g-spec .meta b { display: block; color: var(--fg); font: 600 10px/1.3 var(--ui); }
.g-pal { position: absolute; z-index: 3; left: 14px; right: 14px; top: 248px; display: flex; gap: 6px; opacity: 0; transition: opacity .5s; }
.g-pal.in { opacity: 1; } .g-pal i { flex: 1; height: 28px; border-radius: 7px; transition: box-shadow .3s, transform .3s; }
.g-pal i.pick { box-shadow: 0 0 0 2px var(--ac-blue); transform: translateY(-3px); }
.g-flow { position: absolute; z-index: 3; left: 14px; right: 14px; top: 290px; display: flex; align-items: center; gap: 6px; font: 500 9px/1 var(--label); color: var(--fg-40); opacity: 0; transition: opacity .5s; }
.g-flow.in { opacity: 1; } .g-flow span { padding: 5px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; } .g-flow b { color: var(--ac-blue); font-weight: 500; }
#vG.ge2 .g-mood, #vG.ge2 .g-spec, #vG.ge2 .g-pal, #vG.ge2 .g-flow { opacity: 0 !important; transform: translateY(-10px); pointer-events: none; }

/* Wireframe → UI: ortak öğeler */
.g-el { position: absolute; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .6s var(--ease); }
.g-el.in { opacity: 1; transform: none; }
.g-grid12 { position: absolute; inset: 0 16px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; opacity: 0; transition: opacity .5s; pointer-events: none; z-index: 2; }
.g-grid12 i { background: rgba(240,110,170,.07); box-shadow: inset 1px 0 0 rgba(240,110,170,.18), inset -1px 0 0 rgba(240,110,170,.18); }
.g-grid12.in { opacity: 1; }
.g-nav { left: 16px; right: 16px; top: 14px; height: 16px; display: flex; align-items: center; gap: 8px; }
.g-nav .lg { width: 16px; height: 16px; border-radius: 5px; background: #24242b; transition: background .8s; }
.g-nav i { height: 4px; width: 22px; border-radius: 3px; background: #2a2a31; } .g-nav i:first-of-type { margin-left: auto; }
.g-hd { left: 16px; top: 50px; width: 232px; height: 48px; }
.g-hd .wf { position: absolute; left: 0; top: 0; display: grid; gap: 8px; transition: opacity .4s; } .g-hd .wf i { display: block; height: 14px; border-radius: 4px; background: #26262d; } .g-hd .wf i:first-child { width: 196px; } .g-hd .wf i:last-child { width: 150px; }
.g-hd .tx { position: absolute; left: 0; top: 0; font: 800 calc(var(--fs, 18) * 1px)/1.12 "Monument Extended", var(--ui); letter-spacing: calc(var(--tr, 0) * 1em); white-space: nowrap; opacity: 0; transition: opacity .5s, font-size .8s var(--ease), letter-spacing .8s var(--ease); }
.g-hd .tx span { color: #e9e6dd; transition: color .8s; }
.g-hd.col .tx span { background: linear-gradient(92deg, var(--ga), var(--gb)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-hd.ui .wf { opacity: 0; } .g-hd.ui .tx { opacity: 1; }
.g-sub { left: 16px; top: 112px; width: 170px; } .g-sub i { display: block; height: 4px; border-radius: 3px; background: #2a2a31; margin-bottom: 6px; } .g-sub i:last-child { width: 70%; }
.g-btns { left: 16px; top: 138px; display: flex; gap: calc(var(--gap, 6) * 1px); transition: opacity .45s, transform .6s var(--ease), gap .8s var(--ease); }
.g-bt { padding: 9px 13px; border-radius: 999px; font: 600 9.5px/1 var(--ui); white-space: nowrap; color: transparent; box-shadow: inset 0 0 0 1.2px #34343c; transition: background .6s, color .5s, box-shadow .5s; }
.g-btns.ui .g-bt.p { background: var(--grad-btn-light); color: #0b0b0b; box-shadow: none; }
.g-bt.s { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden; transition: max-width .7s var(--ease), padding .7s var(--ease), opacity .4s, color .5s; }
.g-btns.two .g-bt.s { max-width: 90px; padding-left: 13px; padding-right: 13px; opacity: 1; } .g-btns.ui .g-bt.s { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.g-img { left: 16px; right: 16px; top: 186px; height: 136px; border-radius: 12px; overflow: hidden; background: #1a1a20; box-shadow: inset 0 0 0 1px #2a2a31; }
.g-img .x { position: absolute; inset: 0; transition: opacity .5s; } .g-img .x::before, .g-img .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 1px; background: #2a2a31; transform-origin: 50% 50%; margin-left: -130px; }
.g-img .x::before { transform: rotate(28deg); } .g-img .x::after { transform: rotate(-28deg); }
.g-img .art { position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, var(--ga), var(--gb)); transition: opacity .7s; }
.g-img .art::before { content: ""; position: absolute; right: 22px; top: 16px; width: 62px; height: 130px; border-radius: 14px; background: #0b0b0e; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.g-img .art::after { content: ""; position: absolute; left: -30px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.18); }
.g-img.ui .x { opacity: 0; } .g-img.ui .art { opacity: 1; }
.g-nav.ui .lg { background: linear-gradient(135deg, var(--ga), var(--gb)); }
.g-marq { position: absolute; z-index: 6; border: 1px solid var(--ac-blue); background: rgba(142,162,255,.1); opacity: 0; pointer-events: none; transition: opacity .2s; }
.g-marq.on { opacity: 1; }
/* Seçim kutuları (artboard içinde, her karede yeniden konumlanır) */
#vG .d-sel { transition: opacity .25s; }
/* Prototip */
.g-noodle { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 7; }
.g-noodle path { fill: none; stroke: var(--ac-blue); stroke-width: 1.6; }
.g-noodle circle { fill: var(--ac-blue); }
.g-next { position: absolute; right: 14px; top: 150px; width: 72px; height: 124px; border-radius: 10px; background: #0b0b0e; box-shadow: 0 0 0 1px rgba(142,162,255,.55); padding: 10px 8px; opacity: 0; transform: translateX(12px); transition: opacity .5s, transform .6s var(--ease); }
.g-next i { display: block; height: 4px; border-radius: 3px; background: #2a2a31; margin-bottom: 6px; } .g-next i:first-child { height: 30px; border-radius: 6px; background: linear-gradient(135deg, var(--ga), var(--gb)); margin-bottom: 10px; }
.g-next span { position: absolute; left: 0; top: -14px; font: 500 9px/1 var(--label); color: var(--fg-40); white-space: nowrap; }
#vG.ge4:not(.live) .g-next { opacity: 1; transform: none; }
.g-play { position: absolute; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--ac-blue); color: #10162a; font: 600 10px/1 var(--ui); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.g-play::before { content: ""; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.g-play.in { opacity: 1; transform: none; } #vG.live .g-play { opacity: 0; }
/* Canlı */
.g-live { position: absolute; left: 14px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #0f2a22; color: #9fd9cf; font: 600 10px/1 var(--label); box-shadow: inset 0 0 0 1px rgba(159,217,207,.35); opacity: 0; transition: opacity .4s; z-index: 8; }
.g-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9fd9cf; animation: blLive 1.6s infinite; }
.g-live.in { opacity: 1; }
.g-toast { position: absolute; right: 14px; bottom: 14px; z-index: 8; padding: 9px 12px; border-radius: 10px; background: #1b1b21; box-shadow: 0 0 0 1px var(--line-strong), 0 14px 30px rgba(0,0,0,.6); font: 500 10px/1.4 var(--label); color: var(--fg-60); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.g-toast b { display: block; color: var(--fg); font-weight: 600; } .g-toast.in { opacity: 1; transform: none; }
/* ---- Dar ekran (telefon) düzeni: sahne 380×600 ---- */
.bl-stage.tall #vG .g-win { left: 4px; top: 6px; width: 372px; height: 512px; }
.bl-stage.tall #vG .g-layers { display: none; }
.bl-stage.tall #vG .g-canvas { left: 0; right: 0; border-radius: 0 0 14px 14px; }
.bl-stage.tall #vG .g-ab { top: 30px; transform: scale(1.22); }
.bl-stage.tall #vG.ge4:not(.live) .g-ab { transform: scale(1.06) translateX(-30px); }
.bl-stage.tall #vG.live .g-ab { transform: translateY(-14px) scale(1.33); }
.bl-stage.tall #vG .g-insp { left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(20,20,24,.92); box-shadow: 0 0 0 1px var(--line-strong), 0 14px 30px rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9; }
.bl-stage.tall #vG .g-insp > .d-h { display: none; }
.bl-stage.tall #vG .g-sec.on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bl-stage.tall #vG .g-sec .d-h { width: 100%; margin: 0 0 2px; }
.bl-stage.tall #vG .g-sec .d-f { gap: 6px; padding: 2px 0; } .bl-stage.tall #vG .g-sec .d-sl { display: none; }
.bl-stage.tall #vG.live .g-insp { opacity: 0; transform: translateY(20px); }
.bl-stage.tall #vG .g-file { display: none; }
.bl-stage.tall #vG .g-next { right: 8px; top: 96px; width: 60px; height: 104px; }
.bl-stage.tall #vG .g-play { bottom: 84px; right: auto; left: 18px; }
.bl-stage.tall #vG .g-toast { bottom: 14px; }

/* ===== You (ziyaretçi) imleci ===== */
.bl-cur--you svg { fill: #9fd9cf; stroke: #0e1d1a; stroke-width: 1; } .bl-cur--you em { background: #9fd9cf; color: #0e1d1a; }
.bl-cur--you { transition: transform .14s linear; z-index: 22; }
.bl-cur--you > span { animation: none; }
.d-av .y { background: #9fd9cf; color: #0e1d1a; opacity: 0; width: 0 !important; margin-left: 0 !important; transition: opacity .4s, width .4s, margin .4s; overflow: hidden; }
#vG.started .d-av .y { opacity: 1; width: 22px !important; margin-left: -5px !important; }
.g-marqY { position: absolute; z-index: 6; border: 1px dashed #9fd9cf; background: rgba(159,217,207,.08); pointer-events: none; opacity: 0; }
.g-marqY.on { opacity: 1; }
.g-marqY::after { content: attr(data-s); position: absolute; right: 0; bottom: -16px; padding: 2px 4px; border-radius: 3px; background: #9fd9cf; color: #0e1d1a; font: 600 8.5px/1 var(--label); white-space: nowrap; }
.g-brief .ln { transition: none; }
.g-caret { display: inline-block; width: 1px; height: 11px; margin-left: 1px; background: #9fd9cf; vertical-align: -1px; animation: blCaret 1s steps(1) infinite; }
@keyframes blCaret { 50% { opacity: 0; } }
.g-start { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 11px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-40); transition: opacity .5s; pointer-events: none; }
.g-start i { width: 18px; height: 28px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); position: relative; }
.g-start i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: #9fd9cf; animation: blWheel 1.6s ease-in-out infinite; }
@keyframes blWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }
#vG.started .g-start { opacity: 0; }
.g-pub { position: relative; overflow: hidden; }
.g-pub.press { transform: scale(.94); }

/* ===== Tamamlanma: sakin, olumlu kapanış ===== */
.g-win::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, rgba(201,168,255,.08) 50%, transparent 65%); background-size: 260% 100%; background-position: 120% 0; }
#vG.done .g-win::after { animation: blSheen 1.8s var(--ease) .2s forwards; }
@keyframes blSheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.g-win { transition: box-shadow 1.2s ease; }
#vG.done .g-win { box-shadow: 0 0 0 1px rgba(159,217,207,.28), 0 60px 120px -40px rgba(0,0,0,.95), 0 0 120px -20px rgba(159,217,207,.22); }
.g-fin { position: absolute; z-index: 12; left: 50%; bottom: 22px; transform: translate(-50%, 14px); display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px;
  background: rgba(16,18,20,.88); box-shadow: 0 0 0 1px rgba(159,217,207,.3), 0 24px 60px -16px rgba(0,0,0,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .6s ease .5s, transform .9s var(--ease) .5s; white-space: nowrap; }
#vG.done .g-fin { opacity: 1; transform: translate(-50%, 0); }
.g-fin svg { width: 34px; height: 34px; flex: none; }
.g-fin svg circle { fill: rgba(159,217,207,.12); stroke: rgba(159,217,207,.5); stroke-width: 1.5; }
.g-fin svg path { fill: none; stroke: #9fd9cf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .7s var(--ease) 1s; }
#vG.done .g-fin svg path { stroke-dashoffset: 0; }
.g-fin b { display: block; font: 600 14px/1.25 var(--ui); color: var(--fg); }
.g-fin small { display: block; margin-top: 3px; font: 400 11px/1.3 var(--label); color: var(--fg-60); }
#vG.done .g-toast { opacity: 0; }

/* ===== Aşama çubuğu ===== */
.g-bar { position: absolute; left: 22px; right: 22px; top: 488px; }
.g-bhead { display: none; align-items: baseline; gap: 10px; margin-bottom: 10px; font: 500 11px/1 var(--label); color: var(--fg-40); }
.g-bhead b { font: 600 13px/1 var(--ui); color: var(--fg); } .g-bhead .n { color: #9fd9cf; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.g-bhead .h { margin-left: auto; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; transition: opacity .4s; }
.g-segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.g-seg { position: relative; min-width: 0; }
.g-seg .trk { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; transition: height .3s, background .3s; }
.g-seg .trk b { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--q, 0)); border-radius: 3px; background: linear-gradient(90deg, #a6afc9, #b9a9d6 60%, #cdb1a6); }
.g-seg.now .trk { background: rgba(255,255,255,.14); box-shadow: 0 0 14px rgba(185,169,214,.35); }
.g-seg .lbl { display: flex; align-items: center; gap: 6px; margin-top: 11px; font: 500 11px/1 var(--ui); color: rgba(255,255,255,.34); white-space: nowrap; transition: color .3s; }
.g-seg .lbl em { font: 500 9.5px/1 var(--label); font-style: normal; letter-spacing: .06em; color: rgba(255,255,255,.28); font-variant-numeric: tabular-nums; transition: color .3s; }
.g-seg .lbl i { display: none; width: 12px; height: 12px; border-radius: 50%; background: rgba(159,217,207,.16); position: relative; flex: none; }
.g-seg .lbl i::after { content: ""; position: absolute; left: 4px; top: 2.5px; width: 3px; height: 5px; border: solid #9fd9cf; border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); }
.g-seg.done .lbl { color: rgba(255,255,255,.62); } .g-seg.done .lbl em { display: none; } .g-seg.done .lbl i { display: inline-block; }
.g-seg.now .lbl { color: var(--fg); } .g-seg.now .lbl em { color: #c9a8ff; }
.g-seg.now .lbl::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #c9a8ff; box-shadow: 0 0 0 3px rgba(201,168,255,.18); animation: blBlink 1.6s ease-in-out infinite; }
@keyframes blBlink { 50% { opacity: .35; } }
#vG.done .g-seg .trk { box-shadow: none; }
#vG.done .g-seg .lbl::after { display: none; }
/* Telefon: yalnızca aktif aşama başlıkta, etiketler gizli */
.bl-stage.tall #vG .g-bar { left: 14px; right: 14px; top: 532px; }
.bl-stage.tall #vG .g-bhead { display: flex; }
.bl-stage.tall #vG .g-seg .lbl { display: none; }
.bl-stage.tall #vG .g-segs { gap: 5px; }
.bl-stage.tall #vG .g-fin { bottom: 16px; }
.bl-cur--you { transition: transform .14s linear, opacity .5s ease; }
.bl-stage.tall #vG .d-mode { display: none; }

/* ---- Site yerleşimi ---- */
.bl { position: absolute; right: 0; top: -40px; width: min(620px, calc(100% - 540px)); z-index: 3; }
.bl-scroller { position: relative; }
@media (min-width: 1000px) {
  .bl-scroller { height: 440vh; }
  .bl-scroller > .hero { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: clip; padding-top: 140px; }
  .bl-scroller > .hero .scroll-hint { display: none; }
}
@media (max-width: 999.98px) {
  .hero { overflow: clip; }
  .bl { position: relative; right: auto; top: auto; width: 100%; max-width: 560px; margin: 28px auto 0; }
  .bl-col { height: 300vh; }
  .bl-wrap { position: sticky; top: 76px; }
}
/* Açık temada pencere koyu kalır (tasarım aracı), çevresi temaya uyar */
html[data-theme="light"] .g-win { box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 50px 100px -40px rgba(20,20,40,.45); }
html[data-theme="light"] .g-seg .trk { background: rgba(0,0,0,.08); }
html[data-theme="light"] .g-seg .lbl { color: rgba(10,10,12,.4); } html[data-theme="light"] .g-seg .lbl em { color: rgba(10,10,12,.35); }
html[data-theme="light"] .g-seg.done .lbl { color: rgba(10,10,12,.65); } html[data-theme="light"] .g-seg.now .lbl { color: #0b0b0c; } html[data-theme="light"] .g-seg.now .lbl em { color: #7a58c9; }
html[data-theme="light"] .g-seg .lbl i { background: rgba(40,140,120,.14); } html[data-theme="light"] .g-seg .lbl i::after { border-color: #2a8c78; }
html[data-theme="light"] .g-bhead { color: rgba(10,10,12,.45); } html[data-theme="light"] .g-bhead b { color: #0b0b0c; } html[data-theme="light"] .g-bhead .n { color: #2a8c78; }
/* Masaüstü: metin ve pencere iki kolonda, pencere başlığın/ok butonunun üstüne binmez */
@media (min-width: 1000px) {
  .hero-inner:has(.bl) { max-width: 1360px; }
  .hero-top:has(> .bl) { max-width: 1360px; display: grid; grid-template-columns: minmax(0, max-content) minmax(300px, 1fr); column-gap: clamp(24px, 3vw, 48px); row-gap: 24px; align-items: start; }
  .hero-top:has(> .bl) > :not(.bl) { grid-column: 1; }
  .hero-top > .bl { grid-column: 2; grid-row: 1 / span 3; position: relative; right: auto; top: auto; width: 100%; max-width: 620px; justify-self: end; align-self: center; }
}